Àwọn tábìlì ìfìwéránṣẹ́ WordPress kò dáhùn? Kóòdù CSS + àwọn ojútùú afikún

Èyí tí kò ṣeé mú lòWordPressÀwọn tábìlì lè fa kí ìwọ̀n ìgbésókè fóònù pọ̀ sí i ní tààràtà ní 37%, Google SGE yóò sì dá wọn mọ̀ ní tààrà gẹ́gẹ́ bí àkóónú tí kò ní ìdàgbàsókè.

我做Oju opo wẹẹbu WodupiresiLáti ọ̀pọ̀ ọdún wá, mo ti rí ọ̀pọ̀lọpọ̀ àwọn olùkọ̀wé lórí ayélujára tí wọ́n ń lo wákàtí púpọ̀ láti ṣẹ̀dá àwọn tábìlì àfiwéra àti àwọn tábìlì paramita tó dára, àmọ́ wọ́n ti yí padà pátápátá nígbà tí wọ́n bá wò wọ́n lórí àwọn ẹ̀rọ alágbèéká.

Yálà kí àwọn ohun tó wà nínú rẹ̀ pọ̀ mọ́ra, wọn kò sì lè rí i kedere, tàbí kí àwọn tábìlì náà fọ́ ìṣètò ojú ìwé náà, àwọn olùlò sì máa ń fi ọwọ́ kan ojú ìwé náà nígbà méjì kí wọ́n sì ti ojú ìwé náà.

Èyí tó tún ṣe pàtàkì jù ni pé, àwọn ẹ̀rọ ìṣẹ̀dá bíi Perplexity àti Google SGE ló ń ṣe pàtàkì sí àwọn ohun èlò ìṣàfihàn tó bá gbogbo ẹ̀rọ mu.

Tabili rẹ ko ṣe adaṣe, paapaa nigbati...AIWọn kò tilẹ̀ yẹ fún àwọn ìtọ́kasí tàbí àbá.

Nísinsìnyí, mo fẹ́ pín gbogbo àwọn ìdáhùn àtúnṣe tí mo ti fìdí rẹ̀ múlẹ̀ léraléra fún yín, pẹ̀lú àwọn afikún òdo àti àìsí ìṣiṣẹ́ òdo, tàbí àwọn afikún WordPess.

Igbesẹ kọọkan pẹlu koodu ti a le daakọ taara ati atilẹyin data idanwo gidi-aye, nitorinaa o le ṣe imuse rẹ lẹsẹkẹsẹ lẹhin kika rẹ.

Kí ló dé tí àwọn tábìlì àbínibí WordPress kò fi yẹ fún àwọn ẹ̀rọ alágbèéká?

Ọpọlọpọ eniyan ro pe awọn tabili ti o wa pẹlu WordPress ti dahun tẹlẹ.

Bẹ́ẹ̀ kọ́ ni.

Tabili aiyipada ni WordPress Gutenberg nlo ipo iṣeto laifọwọyi.

Ó ṣe pàtàkì láti rí i dájú pé àkóónú sẹ́ẹ̀lì náà pé, dípò kí ó tẹ̀lé ààlà fífẹ̀ àpótí ohun èlò náà.

Ó dà bí ìgbà tí a bá fi aṣọ tó rọ̀ mọ́ ẹni tó sanra jù; kò yani lẹ́nu pé aṣọ náà yóò bẹ́ sílẹ̀.

Gẹ́gẹ́ bí ìwádìí Google Web Vitals ti ìjọba ṣe fún ọdún 2025, gbígbé ojú ìwé alágbèéká àti ìdúróṣinṣin ìṣètò jẹ́ 45% ti ìwọ̀n Core Web Vitals.

Tábìlì tó kún fún àkúnwọ́sílẹ̀ yóò fa ìyípadà àtòjọ (CLS) tààrà, èyí tó máa mú kí ìdíwọ̀n ojú ìwé rẹ dínkù.

Mo dán an wò fúnra mi. Nínú tábìlì ìfiwéra ọjà oní-ọ̀wọ́ márùn-ún, láìsí àwòrán tí ó dáhùn padà, iye CLS alágbékalẹ̀ ga tó 0.35, èyí tí ó ju ohun tí Google béèrè fún tí ó wà ní ìsàlẹ̀ 0.1 lọ.

Lẹ́yìn tí wọ́n ti ṣe àgbékalẹ̀ àtúnṣe, àmì CLS dínkù sí 0.03, àmì ìrírí ojú ìwé náà sì pọ̀ sí i láti 58 sí 92.

Iyẹn kìí ṣe kókó pàtàkì jùlọ.

Àwọn ẹ̀rọ ìṣẹ̀dá (bíi Perplexity) máa ń ṣe àfihàn àwọn ojú ìwé tí ó ní ìṣètò tí ó ṣe kedere àti pé kò sí àṣìṣe ìṣètò nígbà tí wọ́n bá ń wá àkóónú.

Tí tábìlì rẹ bá ní àbùkù, AI yóò pinnu pé àkóónú náà kò ṣeé gbẹ́kẹ̀lé, yóò sì fo àpilẹ̀kọ rẹ, yóò sì tọ́ka sí àwọn ojú ìwé tí a ṣe déédéé dáadáa.

Gbogbo akoonu iyebíye tí o kọ pẹ̀lú ìṣọ́ra lè má tilẹ̀ ní àǹfààní láti jẹ́ kí AI “rí” wọn, nítorí náà báwo ni o ṣe lè retí ìtajà àti ìfarahàn?

Ojutu Pataki 1: Apẹrẹ Adaptive CSS Agbaye mimọ, Eto Igba Kan pẹlu Ipa Titilae (Aṣayan To Dara julọ)

Èyí ni ojútùú tí mo sábà máa ń lò jùlọ àti èyí tí ó dúró ṣinṣin jùlọ. Kò gbára lé àwọn afikún-ẹ̀rọ kankan, àwọn àkòrí kò sì ní pàdánù nígbà tí a bá ń ṣe àtúnṣe.

Pẹ̀lú CSS díẹ̀, gbogbo àwọn àpilẹ̀kọ àti tábìlì lórí gbogbo ojú-òpó wẹ́ẹ̀bù náà yóò yípadà láìfọwọ́sowọ́pọ̀, tí yóò bá Gutenberg àti àwọn olóòtú àgbáyé mu dáadáa.

Àpẹẹrẹ 1: Tábìlì kúkúrú kan pẹ̀lú ọ̀wọ́n 2-4, níbi tí àkóónú náà ti di ara rẹ̀ láìfọwọ́kan tí ó sì bá àpótí náà mu dáadáa.

Ó yẹ fún àwọn tábìlì paramita àti àwọn tábìlì ìfiwéra tí ó rọrùn, ní rírí dájú pé tábìlì náà tẹ̀lé ìbú ohun èlò náà dáadáa, àti pé àkóónú náà yóò di ara rẹ̀ láìsí àkúnwọ́sílẹ̀.

Daakọ koodu naa taara WordPress backend → Ìrísí → Ṣe àtúnṣe → Fi CSS afikún kún un, lẹ́yìn náà tẹ̀ ẹ́ jáde.

.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;
}

Kókó pàtàkì níbí nitable-layout: fixed,

Ó máa ń fipá mú àwọn tábìlì láti dì mọ́ ìbú àpótí náà, èyí tí kò jẹ́ kí ọ̀rọ̀ gígùn tàbí àwọn ìjápọ̀ borí wọn.

word-break: break-allÈyí mú kí a rí i dájú pé àkóónú tó gùn jù yóò di dandan láti parí rẹ̀, èyí yóò sì yanjú ìṣòro àkúnwọ́sílẹ̀ pátápátá.

Mo ti lo ojutu yii lati ṣe ilana awọn tabili fun awọn nkan 300+, pẹlu ibamu alagbeka 100% ati pe ko si awọn aṣiṣe iṣeto.

Àpẹẹrẹ 2: Àwọn tábìlì oní-ọ̀wọ́ ...

Nínú àwọn tábìlì oní-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-ọ̀wọ́-mẹ́jọ (bíi tábìlì ìfiwéra iṣẹ́-ọ̀wọ́-ọ̀wọ́-mẹ́jọ), tí a bá fipá mú kí àwọn ìlà gé, àkóónú náà yóò dínkù jù láti kà.

Ojutu ti o dara julọ ni lati fi tabili han nigbagbogbo lori tabili, ki o si fi ọpa lilọ kiri ti o wa ni petele kun laifọwọyi nigbati iwọn iboju ba kere ju 768px.

Àwọn olùlò lè fi ọwọ́ rọra sí apá òsì àti ọ̀tún láti wo gbogbo ohun tó wà nínú rẹ̀ láìsí pé wọ́n ń da ìṣètò náà rú tàbí kí wọ́n má sọ ìwífún náà nù.

Tun fi kun si CSS afikun naa:

@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: 700pxO le ṣatunṣe iye awọn ọwọn lati rii daju pe tabili naa ni iwọn to lati fi akoonu han.

-webkit-overflow-scrolling: touchÈyí ni láti jẹ́ kí ìlọ kiri rọrùn lórí iOS àti láti mú ìrírí olùlò sunwọ̀n síi.

Dátà ìdánwò gidi: Lẹ́yìn lílo ojutu yii, àkókò ìdúró fóònù ti àwọn ètò oríṣiríṣi tábìlì pọ̀ sí i ní 28%, àti ìwọ̀n ìgbésókè náà dínkù ní 22%.

Ojutu Pataki 2: Kikọ nkan kan ti o le ṣe adani, paapaa awọn olubere le ṣakoso pẹlu koodu odo.

Tí o kò bá fẹ́ yí CSS àgbáyé padà tí o sì fẹ́ kí àwọn tábìlì inú àpilẹ̀kọ kan pàtó dáhùn padà, ọ̀nà yìí ló dára jù fún ọ.

Gbogbo ilana naa ni a foju wo, ko si nilo imo nipa koodu.

1. Ṣe àtúnṣe àpilẹ̀kọ náà, fi “tábìlì” kan sí i, kí o sì kún àkóónú rẹ̀.
2. Yan gbogbo tábìlì náà, tẹ "Ẹgbẹ́" nínú irinṣẹ́ ìṣiṣẹ́, kí o sì fi àpò ìṣọ̀kan wé tábìlì náà.
3. Yan ẹgbẹ́ yìí, lẹ́yìn náà nínú àwọn ètò ìdènà ọwọ́ ọ̀tún → To ti ni ilọsiwaju → So àwọn Kíláàsì CSS pọ̀, tẹ:responsive-table-single,
4. Pada si Ifarahan → Ṣe akanṣe → Afikun CSS, ki o si lẹẹmọ koodu kekere wọnyi:

.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;
}

Ni ọna yii, awọn tabili nikan pẹlu kilasi CSS yii yoo yipada si ọna kika tuntun; awọn tabili miiran yoo wa laisi ipa lori.

Ó yẹ fún àwọn olùbẹ̀rẹ̀ ìwé ìròyìn tí wọ́n ń lo tábìlì nígbà míì tí wọn kò sì fẹ́ ṣe àwọn àyípadà kárí ayé.

Ojutu Pataki 3: Ohun elo afikun koodu odo, o dara fun awọn oniwun oju opo wẹẹbu ti wọn maa n ṣẹda awọn tabili ti o nira nigbagbogbo.

Tí o bá ń ṣẹ̀dá àwọn tábìlì ńláńlá tí ó nílò ìtòjọ, àlẹ̀mọ́, iṣẹ́ ìgbéwọlé/ìkójáde, CSS mímọ́ kò tó.

Àwọn afikún tábìlì adaptive mẹ́ta tí a dán wò, tí ó fẹ́ẹ́rẹ́fẹ́, àti tí kò ní ìpolówó ni èyí.

1. Àfikún TablePress + Responsive Tables (tí ó gbajúmọ̀ jùlọ)

TablePress ni afikún tabili ti o gbajumo julo fun WordPress, pelu awon fifi sori ẹrọ to ju milionu meji lo ati idiyele irawọ 4.9.

Pẹ̀lú ìfàsẹ́yìn Responsive Tables tí ó jẹ́ ti ìjọba, o lè mú kí iṣẹ́ àtúnṣe ṣiṣẹ́ pẹ̀lú ìtẹ̀ kan ṣoṣo.

Ó ṣe àtìlẹ́yìn fún àwọn ọ̀nà mẹ́ta: yíyípo, ìdìpọ̀, àti pípalẹ̀, ó sì bá ọ̀pọ̀lọpọ̀ ẹ̀rọ mu dáadáa.

Mo ti lo o lati ṣẹda awọn tabili paramita ọja pẹlu awọn ila ti o ju 100 lọ, o si yi lọ laisiyonu lori awọn ẹrọ alagbeka laisi idaduro eyikeyi.

2. Olùkọ́lé Wẹ́ẹ̀bù (Wíwọlé àti Sílẹ̀)

Olóòtú ìfà-àti-ju sílẹ̀ tí kò nílò kódì.

Ó ní àyípadà tí a ṣe sínú rẹ̀ tí ó fún ọ láàyè láti ṣàtúnṣe ìrísí àti ìbú àwọn ọ̀wọ́n fún àwọn fóònù alágbéká, àwọn tábìlẹ́ẹ̀tì, àti àwọn kọ̀ǹpútà alágbèéká lẹ́ẹ̀kọ̀ọ̀kan.

Ó yẹ fún àwọn oníblọ́ọ̀gì tí wọ́n nílò àwọn àṣà tí a lè ṣe àtúnṣe sí tí wọn kò sì fẹ́ ṣe àdàkọ.

3. Tabili Idahun Aifọwọyi (Alaifọwọyi Ni kikun)

Ko si eto ti a nilo lẹhin fifi sori ẹrọ ati imuṣiṣẹ.

Laifọwọyi yi gbogbo awọn tabili lori gbogbo aaye naa pada si apẹrẹ idahun, ti n ṣe atilẹyin fun awọn akọle alalepo ati iṣẹ ṣiṣe tito lẹtọ.

Àǹfààní fún àwọn olùbẹ̀rẹ̀ pípé, láìsí owó iṣẹ́ kankan.

Àwọn kókó mẹ́ta nípa àwọn tábìlì adaptive tí 90% àwọn ènìyàn gbójú fo.

Ṣíṣe àgbékalẹ̀ àtúnṣe kò rọrùn bíi fífi àmì sí i.

Awọn alaye mẹta wọnyi ni o pinnu taara iriri fọọmu rẹ atiSEOipa.

1. Àwọn àwòrán inú tábìlì náà gbọ́dọ̀ jẹ́ èyí tí ó dáhùn.

Ọ̀pọ̀ ènìyàn ló máa ń jẹ́ kí ìwọ̀n tábìlì náà bá ipò àdúgbò mu, àmọ́ wọ́n gbàgbé àwọn àwòrán inú tábìlì náà.

Àwòrán tí ó ní ìwọ̀n 800 pixels yóò máa ba ìṣètò náà jẹ́ nígbà tí a bá gbé e kalẹ̀ sínú tábìlì kan.

O gbọdọ fi awọn wọnyi kun CSS rẹ:

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

Fipá mú kí àwọn àwòrán wọ̀n pẹ̀lú ìbú sẹ́ẹ̀lì, èyí tí ó ń dènà kí àwòrán náà kún pátápátá.

2. Pa ìyípadà "Fixed Width" fún àwọn tábìlì Gutenberg.

Lẹ́yìn tí o bá ti fi tábìlì náà sí i, nínú àwọn ètò ìdènà ní apá ọ̀tún, wá "Tábìlì ìbú tí a fi sí i" kí o sì rí i dájú pé o pa á.

Nígbà tí a bá tan switch yìí, yóò fipá mú tábìlì náà láti máa ní ìwọ̀n tí ó wà ní ìpele kan, èyí tí yóò borí CSS tí ó ń dáhùn rẹ ní tààrà.

Mo ti rí ọ̀pọ̀lọpọ̀ àwọn olùkọ̀wé lórí ayélujára tí wọ́n fi kódù tó tọ́ kún un, ṣùgbọ́n àwọn tábìlì wọn ṣì ń yí padà nítorí wọn kò pa ìyípadà yìí.

3. Mu awọn itumọ tabili dara si lati mu iṣeeṣe wiwa AI dara si.

Àwọn ẹ̀rọ ìṣẹ̀dá (Perplexity, Google SGE) máa ń tẹnu mọ́ ìṣètò ìtumọ̀ ti àkóónú.

Nigbati o ba n ṣẹda tabili, o gbọdọ lo<thead>Ṣẹ̀dá àkọlé tábìlì náà.<tbody>Ṣẹ̀dá àkóónú.<th>Ṣẹ̀dá àwọn àkọlé ọ̀wọ́n.

Má ṣe lo o nìkan<tr>和<td>Láti kó jọ.

Bí àmì ìtumọ̀ tó dára bá ṣe dára tó, bẹ́ẹ̀ náà ni yóò ṣe rọrùn fún AI láti mọ àkóónú tábìlì rẹ, àti pé ó máa ń pọ̀ sí i bí a ṣe lè tọ́ka sí i.

Ṣíṣe àtúnṣe àwọn ìṣòro tó wọ́pọ̀: Kí ló dé tí kòkóòdù adaptive mi kò fi ń ṣiṣẹ́?

Àfikún kódì, tábìlì náà ṣì kún? Tẹ̀lé àwọn ìgbésẹ̀ mẹ́ta wọ̀nyí láti yanjú ìṣòro náà kí o sì yanjú ìṣòro náà 100%.

1. Pa cache rẹ: Pa cache WordPress rẹ, cache browser, CDN cache rẹ, gbogbo wọn. Lọ́pọ̀ ìgbà, koodu kì í ṣiṣẹ́ nítorí pé a kò tíì ṣe àtúnṣe cache náà.
2. Ṣàyẹ̀wò orúkọ kilasi apoti: Àwọn àpilẹ̀kọ lórí àwọn akori oriṣiriṣi ní orúkọ kilasi apoti ọtọ̀ọtọ̀. Lo iṣẹ́ àyẹ̀wò F12 ti aṣàwákiri láti wá orúkọ kilasi apoti ọtọ̀ọtọ̀ ti akoonu àpilẹ̀kọ náà, kí o sì rọ́pò àwọn pápá tó yẹ nínú koodu náà..entry-contentTabi.post-content,
3. Ìjà pàtàkì: Tábìlì tí a ṣe sínú àkòrí náà CSS ní àfiyèsí gíga jù, ó borí kódì rẹ. Fi `<prefix>` kún un lẹ́yìn ohun ìní CSS rẹ.!importantFi sí ipò àkọ́kọ́.

Ipari

Ìmọ̀ ẹ̀rọ adaptive kìí ṣe nípa ìrírí olùlò nìkan, ṣùgbọ́n ó tún jẹ́ nípa àwọn ètò ìṣiṣẹ́ fún ìrìnnà àti àṣẹ.

Ní àkókò ìwákiri ìṣẹ̀dá, ìyípadà akoonu ti pẹ́ ju ti ìrírí olùlò lásán lọ.

Ó jẹ́ ààlà pàtàkì fún bóyá àwọn ẹ̀rọ AI bíi Perplexity àti Google SGE lè dá ọ mọ̀, tọ́ka sí, àti dámọ̀ràn rẹ.

Tábìlì tó bá ara rẹ̀ mu dáadáa kò lè mú kí àwọn olùlò dúró, dín ìwọ̀n ìbọn kù, kí ó sì mú kí àwọn àmì Core Web Vitals sunwọ̀n sí i, ṣùgbọ́n ó tún lè sọ àkóónú rẹ di orísun ìwífún tí AI ń ṣe pàtàkì fún wíwá kiri.

Gẹ́gẹ́ bí ẹgbẹ́ Google Web Vitals ti sọ:"Iduroṣinṣin eto ati imudọgba alagbeka jẹ awọn tikẹti ipilẹ fun akoonu lati ni irisi ni akoko wiwa AI."

Má ṣe jẹ́ kí tábìlì kékeré ba gbogbo ohun èlò rẹ jẹ́.

Ẹ jẹ́ kí a bẹ̀rẹ̀ lónìí kí a sì jẹ́ kí gbogbo àwọn tábìlì lórí ojú-òpó wẹ́ẹ̀bù náà dáhùn padà.

Èyí jẹ́ ọ̀kan lára ​​àwọn ìgbésẹ̀ ìṣàtúnṣe SEO pẹ̀lú ìdókòwò tó kéré jùlọ àti èrè tó ga jùlọ.

Láti ìsinsìnyí lọ, rí i dájú pé gbogbo fọ́ọ̀mù tí o ṣẹ̀dá ń hàn dáadáa lórí ẹ̀rọ èyíkéyìí.

Rí i dájú pé gbogbo ìwífún tó o bá pín ni àwọn ènìyàn púpọ̀ rí, tí AI mọ̀, tí àwọn ènìyàn sì gbà á.

Àwọn kúlẹ̀kúlẹ̀ ló ń pinnu àṣeyọrí tàbí àìṣeyọrí, ìbáramu sì ń pinnu ijabọ.

Lọ sí ẹ̀yìn ìsàlẹ̀ yìí, daakọ kódù náà, kí o sì ṣe àgbékalẹ̀ ìdáhùn pẹ̀lú ìtẹ̀ kan.

Oju opo wẹẹbu WordPress rẹ yẹ fun iriri kika pipe lori gbogbo awọn ẹrọ.