Ҷадвалҳои паёмҳои WordPress ҷавобгӯ нестанд? Рамзи CSS + ҳалли плагинҳо

Як мутобиқнашавандаWordPressҶадвалҳо метавонанд мустақиман боиси афзоиши сатҳи бозгашти мобилӣ то 37% шаванд ва аз ҷониби Google SGE мустақиман ҳамчун мундариҷаи пастсифат муайян карда мешаванд.

我做Вебсайти WordPressДар тӯли солҳо, ман дидам, ки бисёре аз блогерҳо соатҳои зиёдеро барои эҷоди ҷадвалҳои муқоисавӣ ва ҷадвалҳои параметрҳои аҷиб сарф мекунанд, аммо ҳангоми дидан дар дастгоҳҳои мобилӣ онҳо комилан таҳриф карда мешаванд.

Ё мундариҷа дар як ҷо ҷамъ шудааст ва онро ба таври возеҳ дидан мумкин нест, ё ҷадвалҳо тарҳбандии саҳифаро вайрон мекунанд ва корбарон танҳо якчанд маротиба лағжонида, саҳифаро мепӯшанд.

Ҳатто муҳимтар аз ҳама, муҳаррикҳои тавлидкунанда ба монанди Perplexity ва Google SGE ҳоло ба мундариҷаи сохтории хазандагон, ки бо ҳама дастгоҳҳо мувофиқ аст, афзалият медиҳанд.

Мизи шумо мутобиқшаванда нест, ҳатто вақте ки...AIОнҳо ҳатто барои гирифтани иқтибосҳо ё тавсияҳо ҳуқуқ надоранд.

Акнун ман бо шумо ҳамаи роҳҳои ҳалли мутобиқшавандаро, ки борҳо санҷидаам, бо сифр плагинҳо ва сифр талафоти кор, ё плагинҳои WordPess, мубодила мекунам.

Ҳар як қадам рамзи нусхабардории мустақим ва маълумоти санҷишии ҷаҳони воқеиро дар бар мегирад, аз ин рӯ шумо метавонед онро фавран пас аз хондани он амалӣ кунед.

Чаро ҷадвалҳои аслии WordPress барои дастгоҳҳои мобилӣ мувофиқ нестанд?

Бисёриҳо фикр мекунанд, ки ҷадвалҳое, ки бо WordPress меоянд, аллакай мутобиқшавандаанд.

Умуман чунин нест.

Ҷадвали пешфарз дар WordPress Gutenberg аз ҳолати худкори тарҳбандӣ истифода мебарад.

Он таъмини якпорчагии мундариҷаи ҳуҷайраро нисбат ба риояи маҳдудиятҳои паҳнои контейнери маҳсулот авлавият медиҳад.

Ин мисли пӯшидани костюми танг ба шахси фарбеҳ аст; тааҷҷубовар нест, ки либосҳо кафида мешаванд.

Тибқи маълумоти расмии Google Web Vitals барои соли 2025, боркунии саҳифаҳои мобилӣ ва устувории тарҳбандӣ 45% вазни Core Web Vitals-ро ташкил медиҳад.

Ҷадвали аз ҳад зиёд пуршуда мустақиман офсетсияи тарҳбандӣ (CLS)-ро ба вуҷуд меорад, ки боиси коҳиши рейтинги саҳифаи шумо мегардад.

Ман онро худам санҷидам. Дар ҷадвали муқоисаи маҳсулот аз 5 сутун, бе тарҳи мутобиқшаванда, арзиши CLS-и мобилӣ то 0.35 буд, ки аз талаботи Google дар зери 0.1 хеле зиёдтар буд.

Пас аз татбиқи тарҳи мутобиқшавӣ, холҳои CLS то 0.03 коҳиш ёфтанд ва холҳои таҷрибаи саҳифа аз 58 то 92 афзоиш ёфтанд.

Ин нуқтаи муҳимтарин нест.

Муҳаррикҳои тавлидкунанда (масалан, Perplexity) ҳангоми кран кардани мундариҷа ба муайян кардани саҳифаҳо бо сохтори равшан ва бе хатогиҳои тарҳбандӣ афзалият медиҳанд.

Агар ҷадвали шумо деформатсия шуда бошад, зеҳни сунъӣ муайян мекунад, ки мундариҷа ноустувор аст ва мақолаи шуморо гузарад ва мустақиман ба он саҳифаҳои комилан мутобиқшуда истинод кунад.

Ҳама мундариҷаи арзишманде, ки шумо бо заҳмат менависед, шояд ҳатто имкони "дидан"-и зеҳни сунъӣ надошта бошад, пас чӣ гуна шумо метавонед трафик ва таъсирро интизор шавед?

Ҳалли асосии 1: Тарроҳии мутобиқшавандаи глобалии CSS-и холис, танзимоти якдафъаина бо таъсири доимӣ (Интихоби беҳтарин)

Ин роҳи ҳалли зуд-зуд истифодашаванда ва устувортарини ман аст. Он ба ягон плагин такя намекунад ва мавзӯъҳо ҳангоми навсозӣ гум намешаванд.

Бо истифода аз як пораи CSS, ҳамаи мақолаҳо ва ҷадвалҳо дар тамоми сайт ба таври худкор мутобиқ мешаванд ва ҳам бо Гутенберг ва ҳам бо муҳаррирони классикӣ комилан мувофиқанд.

Сенарияи 1: Ҷадвали кӯтоҳе бо 2-4 сутун, ки дар он мундариҷа ба таври худкор печонида мешавад ва ба контейнер комилан мувофиқат мекунад.

Барои ҷадвалҳои параметрҳо ва ҷадвалҳои муқоисавии оддӣ мувофиқ аст, кафолат медиҳад, ки ҷадвал ба таври қатъӣ паҳнои мақоларо риоя мекунад ва мундариҷа ба таври худкор бе пуршавӣ печонида мешавад.

Кодро мустақиман нусхабардорӣ кунед пуштибонии WordPress → Намуди зоҳирӣ → Танзимкунӣ → CSS-и иловагӣ илова кунед ва сипас нашр кунед.

.entry-content .wp-block-table,
.post-content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-all;
    margin: 20px 0;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.post-content table th,
.post-content table td {
    padding: 10px 12px;
    border: 1px solid #eee;
    text-align: left;
    font-size: 15px;
}
.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

Калиди ин ҷо ин астtable-layout: fixed.

Он ҷадвалҳоро маҷбур мекунад, ки ба паҳнои контейнер часпанд ва аз он ки онҳо аз калимаҳои дароз ё истинодҳо пур шаванд, пешгирӣ мекунад.

word-break: break-allИн кафолат медиҳад, ки мундариҷаи аз ҳад зиёд дароз маҷбуран печонида мешавад ва масъалаи аз ҳад зиёд пур шуданро пурра ҳал мекунад.

Ман ин роҳи ҳалро барои коркарди ҷадвалҳо барои зиёда аз 300 мақола бо мутобиқати 100% бо мобилӣ ва бе хатогиҳои тарҳбандӣ истифода кардам.

Сенарияи 2: Ҷадвалҳои бисёрсутунӣ бо 5 ё зиёда сутунҳо, ҳаракати уфуқӣ дар дастгоҳҳои мобилӣ ва намоиши пурра дар мизи корӣ.

Дар ҷадвалҳои бисёрсутунӣ (масалан, ҷадвали муқоисаи функсияҳои 8-сутунӣ), агар кандашавии сатрҳо маҷбурӣ бошад, мундариҷа барои хондан хеле танг мешавад.

Беҳтарин роҳи ҳал ин намоиши ҷадвал ба таври муқаррарӣ дар мизи корӣ ва илова кардани автоматии скроллинги уфуқӣ ҳангоми хурдтар аз 768 пиксел мебошад.

Истифодабарандагон метавонанд барои дидани мундариҷаи пурра, бе халалдор кардани тарҳбандӣ ё гум кардани маълумот, ба чап ва рост лағжанд.

Инчунин онро ба CSS-и иловагӣ илова кунед:

@media screen and (max-width: 768px) {
    .entry-content .wp-block-table,
    .post-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .entry-content .wp-block-table table,
    .post-content table {
        min-width: 700px;
        width: 100%;
    }
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td {
        white-space: nowrap;
        padding: 8px 10px;
    }
}

min-width: 700pxШумо метавонед шумораи сутунҳоро танзим кунед, то боварӣ ҳосил кунед, ки ҷадвал барои намоиши мундариҷа паҳнои кофӣ дорад.

-webkit-overflow-scrolling: touchИн барои осонтар кардани ҳаракат дар iOS ва беҳтар кардани таҷрибаи корбар аст.

Маълумоти воқеии санҷиш: Пас аз истифодаи ин ҳалли масъала, вақти истодани мобилии тарҳбандии бисёрҷадвалӣ 28% афзоиш ёфт ва сатҳи бозгашт 22% коҳиш ёфт.

Ҳалли асосии 2: Навиштани мутобиқшавандаи як мақола, ҳатто шурӯъкунандагон метавонанд бо рамзи сифр кор кунанд.

Агар шумо намехоҳед CSS-и ҷаҳониро тағир диҳед ва танҳо мехоҳед ҷадвалҳоро дар як мақолаи мушаххас мутобиқ созед, ин усул барои шумо беҳтарин аст.

Тамоми раванд ба таври визуалӣ нишон дода шудааст ва ба дониши барномасозӣ ниёз надорад.

1. Мақоларо таҳрир кунед, блоки "ҷадвал"-ро ​​ворид кунед ва мундариҷаро пур кунед.
2. Тамоми ҷадвалро интихоб кунед, дар панели асбобҳо "Гурӯҳбандӣ" -ро клик кунед ва ҷадвалро дар контейнери гурӯҳ печонед.
3. Ин гурӯҳро интихоб кунед, сипас дар танзимоти блоки тарафи рост → Advanced → Attach Classes CSS, ворид кунед:responsive-table-single.
4. Ба Намуди зоҳирӣ → Танзимкунӣ → CSS-и иловагӣ баргардед ва рамзи ҳадди ақали зеринро часбонед:

.responsive-table-single {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}
.responsive-table-single table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

Бо ин роҳ, танҳо ҷадвалҳое, ки ин синфи CSS доранд, ба формати нав мутобиқ мешаванд; дигар ҷадвалҳо бетағйир мемонанд.

Он махсусан барои блогерҳои навкор, ки гоҳ-гоҳ аз ҷадвалҳо истифода мебаранд ва намехоҳанд тағйироти ҷаҳонӣ ворид кунанд, мувофиқ аст.

Ҳалли аслӣ 3: Плагини бе рамзи сифр, барои соҳибони вебсайтҳое, ки зуд-зуд ҷадвалҳои мураккаб эҷод мекунанд, мувофиқ аст.

Агар шумо зуд-зуд ҷадвалҳои калон эҷод кунед, ки ба функсияҳои ҷудокунӣ, филтркунӣ, воридот/содирот ниёз доранд, CSS-и холис нокифоя аст.

Инҳоянд 3 плагини мизи мутобиқшавандаи санҷидашуда, сабук ва бидуни таблиғ.

1. Васеъкунии TablePress + Responsive Tables (маъмултарин)

TablePress маъмултарин плагини ҷадвалӣ барои WordPress аст, ки зиёда аз 200 миллион насб ва рейтинги 4.9 ситора дорад.

Бо васеъкунии расмии Responsive Tables, шумо метавонед функсияҳои мутобиқшавандаро бо як клик фаъол созед.

Он се режимро дастгирӣ мекунад: ҳаракат, ҳамҷоякунӣ ва ҷамъкунӣ ва ба таври комил барои дастгоҳҳои гуногун мутобиқ карда шудааст.

Ман онро барои сохтани ҷадвалҳои параметрҳои маҳсулот бо зиёда аз 100 сатр истифода кардам ва он дар дастгоҳҳои мобилӣ бе ягон таъхир ҳамвор ҳаракат мекунад.

2. WP Table Builder (Намуди визуализатсияро кашола карда партофтан)

Муҳаррири кашолакунӣ ва партофтан, ки ба рамзгузорӣ ниёз надорад.

Он дорои гузариши дарунсохти мутобиқшаванда мебошад, ки ба шумо имкон медиҳад намоёнӣ ва паҳнои сутунҳоро барои телефонҳои мобилӣ, планшетҳо ва компютерҳои мизи корӣ ба таври инфиродӣ танзим кунед.

Барои блогерҳое, ки ба услубҳои хеле танзимшаванда ниёз доранд ва намехоҳанд бо рамзгузорӣ халал расонанд, мувофиқ аст.

3. Ҷадвали автоматии посухдиҳанда (пурра автоматӣ)

Пас аз насб ва фаъолсозӣ ягон танзимот лозим нест.

Ба таври худкор ҳамаи ҷадвалҳоро дар тамоми сайт ба тарҳи мутобиқшаванда табдил медиҳад, сарлавҳаҳои часпанда ва функсияҳои ҷобаҷокуниро дастгирӣ мекунад.

Як бартарии комил барои шурӯъкунандагон, бо хароҷоти сифрии амалиётӣ.

Се тафсилоти калидӣ дар бораи мизҳои мутобиқшаванда, ки 90% одамон онҳоро нодида мегиранд.

Ноил шудан ба тарҳи мутобиқшаванда ба мисли илова кардани як пораи код осон нест.

Ин 3 тафсилот мустақиман таҷрибаи шуморо дар шакли шумо муайян мекунанд ваSEOтаъсир.

1. Тасвирҳо дар дохили ҷадвал бояд мутобиқшаванда бошанд.

Бисёри одамон танҳо паҳнои мизро ба шароити маҳаллӣ мутобиқ мекунанд, аммо тасвирҳои дохили мизро фаромӯш мекунанд.

Тасвире, ки паҳнои он 800 пиксел аст, ҳангоми ҷойгиркунӣ дар ҷадвал тарҳбандиро вайрон мекунад.

Шумо бояд инҳоро ба CSS-и худ илова кунед:

.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

Барои пешгирӣ аз пур шудани тасвир, тасвирҳоро маҷбуран мувофиқи паҳнои ҳуҷайраҳо миқёс кунед.

2. Тугмаи "Width Fixed"-ро барои мизҳои Гутенберг хомӯш кунед.

Пас аз ворид кардани ҷадвал, дар танзимоти блок дар тарафи рост, "Ҷадвали паҳнои собит"-ро ёбед ва боварӣ ҳосил кунед, ки онро хомӯш кунед.

Вақте ки ин гузариш фаъол аст, он ҷадвалро маҷбур мекунад, ки паҳнои собитро нигоҳ дорад ва CSS-и посухдиҳандаи шуморо мустақиман аз нав муайян мекунад.

Ман блогнависони зиёдеро дидаам, ки рамзи дурустро илова карданд, аммо ҷадвалҳои онҳо то ҳол таҳриф шуда буданд, зеро онҳо ин тугмаро хомӯш накарданд.

3. Семантикаи ҷадвалро барои беҳтар кардани эҳтимолияти сайругашти зеҳни сунъӣ оптимизатсия кунед.

Муҳаррикҳои тавлидкунанда (Perplexity, Google SGE) ба сохтори семантикии мундариҷа диққати зиёд медиҳанд.

Ҳангоми тартиб додани ҷадвал, шумо бояд истифода баред<thead>Сарлавҳаи ҷадвалро эҷод кунед.<tbody>Эҷоди мундариҷа.<th>Сарлавҳаҳои сутунро эҷод кунед.

Танҳо истифода набаред<tr>和<td>Барои ҷамъ кардан.

Ҳар қадар аломатгузории семантикӣ беҳтар бошад, ҳамон қадар барои зеҳни сунъӣ шинохтани мундариҷаи ҷадвали шумо осонтар мешавад ва эҳтимолияти иқтибос шудани он баландтар аст.

Ҳалли мушкилоти маъмулӣ: Чаро рамзи мутобиқшавандаи ман кор намекунад?

Код илова карда шуд, ҷадвал ҳоло ҳам пур аст? Барои ҳалли мушкилот ва 100% ҳалли мушкилот, ин 3 қадамро иҷро кунед.

1. Тоза кардани кэш: Тоза кардани кэши WordPress, кэши браузер, кэши CDN ва ғайра. Аксар вақт, код танҳо аз сабаби навсозӣ нашудани кэш кор намекунад.
2. Номи синфи контейнерро санҷед: Мақолаҳо дар мавзӯъҳои гуногун номҳои гуногуни синфи контейнер доранд. Барои ёфтани номи синфи контейнери волидайни мундариҷаи мақола, аз функсияи F12 inspect-и браузер истифода баред ва майдонҳои дахлдорро дар код иваз кунед..entry-content或.post-content.
3. Низоъи афзалият: CSS-и ҷадвали дарунсохти мавзӯъ афзалияти хеле баланд дорад, ки рамзи шуморо аз нав муайян мекунад. Пас аз хусусияти CSS-и худ `<prefix>` илова кунед.!importantОнро авлавият диҳед.

Хулоса

Технологияи мутобиқшаванда на танҳо ба таҷрибаи корбар, балки ба инфрасохтори аслӣ барои трафик ва салоҳият низ дахл дорад.

Дар давраи ҷустуҷӯи тавлидӣ, мутобиқшавии мундариҷа муддати тӯлонӣ аз доираи таҷрибаи оддии корбар фаротар рафтааст.

Ин меъёри асосии он аст, ки оё шумо метавонед аз ҷониби муҳаррикҳои зеҳни сунъӣ ба монанди Perplexity ва Google SGE шинохта, иқтибос ва тавсия дода шавед.

Ҷадвали комилан мутобиқшаванда на танҳо метавонад корбаронро нигоҳ дорад, сатҳи бозгаштро коҳиш диҳад ва холҳои Core Web Vitals-ро беҳтар созад, балки мундариҷаи шуморо ба манбаи боэътимоди иттилооте табдил диҳад, ки зеҳни сунъӣ барои ҷустуҷӯ афзалият медиҳад.

Тавре ки аз ҷониби дастаи расмии Google Web Vitals гуфта шудааст:"Устувории тарҳбандӣ ва мутобиқсозии мобилӣ чиптаҳои асосӣ барои ба даст овардани намоёнии мундариҷа дар давраи ҷустуҷӯи зеҳни сунъӣ мебошанд."

Нагузоред, ки як мизи хурд арзиши тамоми мақолаи шуморо вайрон кунад.

Биёед имрӯз оғоз кунем ва ҳамаи ҷадвалҳои сайтро мутобиқ созем.

Ин яке аз амалҳои беҳсозии SEO бо камтарин сармоягузорӣ ва баландтарин фоида мебошад.

Аз ин ба баъд, боварӣ ҳосил кунед, ки ҳар як шакле, ки шумо эҷод мекунед, дар ҳама гуна дастгоҳ комилан намоиш дода мешавад.

Боварӣ ҳосил кунед, ки ҳар як маълумоти арзишмандеро, ки шумо мубодила мекунед, одамони бештар мебинанд, аз ҷониби зеҳни сунъӣ шинохта мешаванд ва аз ҷониби трафик қабул карда мешаванд.

Тафсилот муваффақият ё нокомиро муайян мекунанд ва мутобиқат трафикро муайян мекунад.

Ҳоло ба backend равед, рамзро нусхабардорӣ кунед ва бо як клик тарҳрезии мутобиқшавандаро ба даст оред.

Вебсайти WordPress-и шумо сазовори таҷрибаи комили хониш дар ҳама дастгоҳҳост.