Jedwali za machapisho ya WordPress hazijibu? Msimbo wa CSS + suluhisho za programu-jalizi

HaibadilikiWordPressJedwali zinaweza kusababisha moja kwa moja viwango vya kushuka kwa kasi kwa simu za mkononi kuongezeka kwa 37% na zitatambuliwa moja kwa moja kama maudhui ya ubora wa chini na Google SGE.

我做Jengo la tovuti ya WordPressKwa miaka mingi, nimeona wanablogu wengi sana wakitumia saa nyingi kutengeneza jedwali za kulinganisha na jedwali za vigezo, lakini zikapotoshwa kabisa zinapotazamwa kwenye vifaa vya mkononi.

Ama maudhui yamerundikana pamoja na hayaonekani wazi, au majedwali yanavunja mpangilio wa ukurasa, na watumiaji wanatelezesha kidole mara kadhaa na kufunga ukurasa.

Muhimu zaidi, injini za uzalishaji kama vile Perplexity na Google SGE sasa zinapa kipaumbele maudhui yaliyopangwa ambayo yanaendana na vifaa vyote.

Meza yako haijibu, hata wakati...AIHawastahili hata kupata nukuu au mapendekezo.

Sasa nitashiriki nanyi suluhisho zote zinazoweza kubadilika ambazo nimezithibitisha mara kwa mara, bila programu-jalizi sifuri na upotevu sifuri wa utendaji, au programu-jalizi za WordPess.

Kila hatua inajumuisha msimbo unaoweza kunakiliwa moja kwa moja na data ya majaribio inayounga mkono ulimwengu halisi, ili uweze kuitekeleza mara baada ya kuisoma.

Kwa nini meza asilia za WordPress hazifai kwa vifaa vya mkononi?

Watu wengi hudhani kwamba meza zinazokuja na WordPress tayari zina majibu.

Hiyo sivyo ilivyo hata kidogo.

Jedwali chaguo-msingi katika WordPress Gutenberg hutumia hali ya mpangilio otomatiki.

Inaweka kipaumbele kuhakikisha maudhui ya seli yamekamilika, badala ya kuzingatia kikomo cha upana wa chombo cha makala.

Ni kama kumvisha mtu mnene suti inayombana; haishangazi nguo zitafunguka ghafla.

Kulingana na data rasmi ya Google Web Vitals ya 2025, upakiaji wa ukurasa wa simu na uthabiti wa mpangilio huchangia 45% ya uzito wa Core Web Vitals.

Jedwali linalofurika litasababisha moja kwa moja mpangilio wa mpangilio (CLS), na kusababisha ukadiriaji wako wa ukurasa kushuka.

Niliijaribu mwenyewe. Katika jedwali la kulinganisha bidhaa lenye safu wima 5, bila muundo unaoweza kubadilika, thamani ya CLS ya simu ilikuwa juu kama 0.35, ikizidi sana hitaji la Google la chini ya 0.1.

Baada ya kutekeleza muundo unaobadilika, alama ya CLS ilishuka hadi 0.03, na alama ya uzoefu wa ukurasa iliongezeka kutoka 58 hadi 92.

Hilo sio jambo muhimu zaidi.

Injini za kuzalisha (kama vile Perplexity) huweka kipaumbele kurasa za utambuzi zenye muundo ulio wazi na zisizo na makosa ya mpangilio wakati wa kutambaa kwenye maudhui.

Ikiwa jedwali lako limeharibika, AI itaamua kwamba maudhui hayategemewi na kuruka makala yako, ikirejelea moja kwa moja kurasa hizo zilizobadilishwa kikamilifu.

Maudhui yote muhimu unayoandika kwa bidii huenda hata yasipate nafasi ya "kuonekana" na AI, kwa hivyo unawezaje kutarajia trafiki na kufichuliwa?

Suluhisho Kuu la 1: Ubunifu Safi wa CSS Unaoweza Kubadilika Ulimwenguni, Mpangilio wa Mara Moja Wenye Athari ya Kudumu (Chaguo Bora)

Hii ndiyo suluhisho langu linalotumika mara nyingi na thabiti zaidi. Haitegemei programu-jalizi zozote, na mandhari hayatapotea wakati wa masasisho.

Kwa kipande cha CSS pekee, makala na majedwali yote kwenye tovuti nzima yatabadilika kiotomatiki, yakiendana kikamilifu na Gutenberg na wahariri wa kawaida.

Hali ya 1: Jedwali fupi lenye safu wima 2-4, ambapo maudhui hujifunga kiotomatiki na kutoshea vizuri kwenye chombo.

Inafaa kwa majedwali ya vigezo na majedwali rahisi ya kulinganisha, kuhakikisha kwamba jedwali linafuata kwa ukamilifu upana wa makala, na kwamba maudhui hujifunga kiotomatiki bila kufurika.

Nakili msimbo moja kwa moja WordPress backend → Mwonekano → Badilisha → Ongeza CSS ya ziada, kisha uchapishe.

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

Jambo muhimu hapa nitable-layout: fixed.

Inalazimisha meza kushikamana na upana wa kontena, na kuzizuia kuzidiwa na maneno marefu au viungo.

word-break: break-allHii inahakikisha kwamba maudhui marefu kupita kiasi yatalazimika kufungwa, na kutatua kabisa tatizo la kufurika.

Nimetumia suluhisho hili kuchakata majedwali ya makala zaidi ya 300, yenye utangamano wa 100% wa simu na hakuna makosa ya mpangilio.

Hali ya 2: Jedwali zenye safu wima nyingi zenye safu wima 5 au zaidi, kusogeza kwa mlalo kwenye vifaa vya mkononi, na onyesho kamili kwenye kompyuta ya mezani.

Katika majedwali yenye safu wima nyingi (kama vile jedwali la kulinganisha vitendakazi la safu wima 8), ikiwa mgawanyiko wa mistari utalazimika, maudhui yatakuwa madogo sana kusomwa.

Suluhisho bora ni kuonyesha jedwali kawaida kwenye eneo-kazi, na kuongeza kiotomatiki upau wa kusogeza mlalo wakati ukubwa wa skrini ni chini ya pikseli 768.

Watumiaji wanaweza kutelezesha kidole kushoto na kulia ili kuona maudhui kamili bila kuvuruga mpangilio au kupoteza taarifa.

Pia iongeze kwenye CSS ya ziada:

@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: 700pxUnaweza kurekebisha idadi ya safu wima ili kuhakikisha jedwali lina upana wa kutosha kuonyesha maudhui.

-webkit-overflow-scrolling: touchHii ni ili kurahisisha utelezi kwenye iOS na kuboresha matumizi ya mtumiaji.

Data halisi ya majaribio: Baada ya kutumia suluhisho hili, muda wa kukaa kwenye simu wa mipangilio ya meza nyingi uliongezeka kwa 28%, na kiwango cha kuruka kilipungua kwa 22%.

Suluhisho Kuu la 2: Uandishi wa makala moja unaoweza kubadilika, hata wanaoanza wanaweza kuutumia bila msimbo sifuri.

Kama hutaki kubadilisha CSS ya kimataifa na unataka tu kufanya majedwali katika makala maalum yawe yanayoweza kuitikia, njia hii inafaa zaidi kwako.

Mchakato mzima unaonekana, bila kuhitaji ujuzi wowote wa kuandika msimbo.

1. Hariri makala, ingiza kizuizi cha "meza", na ujaze maudhui.
2. Chagua jedwali lote, bofya "Panga" kwenye upau wa vidhibiti, na ufunge jedwali kwenye chombo cha kikundi.
3. Chagua kikundi hiki, kisha katika mipangilio ya sehemu ya kulia → Advanced → Ambatisha Madarasa ya CSS, ingiza:responsive-table-single.
4. Rudi kwenye Appearance → Customize → Additional CSS, na ubandike msimbo mdogo ufuatao:

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

Kwa njia hii, ni majedwali yenye darasa hili la CSS pekee yatakayobadilika kulingana na umbizo jipya; majedwali mengine hayataathiriwa.

Inafaa hasa kwa wanablogu wapya ambao mara kwa mara hutumia meza na hawataki kufanya mabadiliko ya kimataifa.

Suluhisho Kuu la 3: Programu-jalizi ya msimbo sifuri, inayofaa kwa wamiliki wa tovuti ambao mara nyingi huunda majedwali tata.

Ukitengeneza majedwali makubwa mara kwa mara ambayo yanahitaji utendakazi wa kupanga, kuchuja, kuingiza/kuhamisha, CSS safi haitoshi.

Hapa kuna programu-jalizi tatu za meza zinazoweza kubadilika kulingana na mahitaji zilizojaribiwa, nyepesi, na zisizo na matangazo.

1. TablePress + Kiendelezi cha Tables Responsive (maarufu zaidi)

TablePress ni programu-jalizi maarufu zaidi ya meza kwa WordPress, ikiwa na zaidi ya usakinishaji milioni 200 na ukadiriaji wa nyota 4.9.

Kwa kiendelezi rasmi cha Majedwali Yanayoitikia, unaweza kuwezesha utendaji unaoweza kubadilika kwa mbofyo mmoja.

Inasaidia aina tatu: kusogeza, kupanga, na kuanguka, na imebadilishwa kikamilifu kwa vifaa vingi.

Nimeitumia kuunda majedwali ya vigezo vya bidhaa yenye mistari zaidi ya 100, na inasogea vizuri kwenye vifaa vya mkononi bila kuchelewa.

2. Kijenzi cha Meza ya WP (Buruta na Uangushe Taswira)

Kihariri cha kuburuta na kudondosha ambacho hakihitaji msimbo.

Ina swichi inayoweza kuitikia iliyojengewa ndani ambayo hukuruhusu kurekebisha mwonekano na upana wa safu wima za simu za mkononi, kompyuta kibao, na kompyuta za mezani kibinafsi.

Inafaa kwa wanablogu wanaohitaji mitindo inayoweza kubadilishwa kwa urahisi na hawataki kuchezea uandishi wa msimbo.

3. Jedwali la Msikivu Kiotomatiki (Kiotomatiki Kikamilifu)

Hakuna mipangilio inayohitajika baada ya usakinishaji na uanzishaji.

Hubadilisha kiotomatiki majedwali yote kwenye tovuti nzima kuwa muundo unaoitikia, unaounga mkono vichwa vya habari vinavyonata na utendaji wa kupanga.

Faida kwa wanaoanza kikamilifu, bila gharama zozote za uendeshaji.

Maelezo matatu muhimu kuhusu jedwali zinazoweza kubadilika ambazo 90% ya watu hupuuza.

Kufikia muundo unaoweza kubadilika si rahisi kama kuongeza msimbo.

Maelezo haya matatu huamua moja kwa moja uzoefu wako wa fomu naSEOathari.

1. Picha ndani ya jedwali lazima ziwe na majibu.

Watu wengi hufanya upana wa meza uendane na hali za ndani tu, lakini husahau kuhusu picha zilizo ndani ya meza.

Picha yenye upana wa pikseli 800 bado itavunja mpangilio ikiwekwa kwenye jedwali.

Hakikisha unaongeza yafuatayo kwenye CSS yako:

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

Lazimisha picha zipanuke kulingana na upana wa seli, na kuzuia kabisa kufurika kwa picha.

2. Zima swichi ya "Upana Usiobadilika" kwa meza za Gutenberg.

Baada ya kuingiza meza, katika mipangilio ya block upande wa kulia, pata "Jedwali la upana usiobadilika" na uhakikishe kuizima.

Wakati swichi hii imewashwa, italazimisha jedwali kudumisha upana usiobadilika, ikizidi moja kwa moja CSS yako inayoweza kuitikia.

Nimeona wanablogu wengi sana walioongeza msimbo sahihi, lakini jedwali zao bado zilikuwa zimepotoshwa kwa sababu hazikuzimisha swichi hii.

3. Boresha semantiki za jedwali ili kuboresha uwezekano wa kutambaa kwa AI.

Injini za kuzalisha (Perplexity, Google SGE) zinatilia mkazo sana muundo wa kisemantiki wa maudhui.

Wakati wa kuunda meza, lazima utumie<thead>Unda kichwa cha jedwali.<tbody>Unda maudhui.<th>Unda vichwa vya safu wima.

Usitumie tu<tr>Na<td>Kurundikana.

Kadiri alama ya kisemantiki inavyokuwa bora, ndivyo inavyokuwa rahisi kwa akili bandia kutambua maudhui ya jedwali lako, na ndivyo uwezekano wa kutajwa ulivyo juu zaidi.

Kutatua matatizo ya kawaida: Kwa nini msimbo wangu unaoweza kurekebishwa haufanyi kazi?

Msimbo ulioongezwa, jedwali bado linajaa? Fuata hatua hizi 3 ili kutatua tatizo na kutatua tatizo kwa 100%.

1. Futa kashe: Futa kashe ya WordPress, kashe ya kivinjari, kashe ya CDN, vyote. Mara nyingi, msimbo haufanyi kazi kwa sababu tu kashe haijasasishwa.
2. Angalia jina la darasa la chombo: Makala kuhusu mada tofauti yana majina tofauti ya darasa la chombo. Tumia kitendakazi cha ukaguzi cha F12 cha kivinjari ili kupata jina la darasa la chombo kikuu cha maudhui ya makala, na ubadilishe sehemu husika katika msimbo..entry-contentAu.post-content.
3. Mgogoro wa kipaumbele: Jedwali lililojengewa ndani la CSS lina kipaumbele cha juu sana, na hivyo kuzidi msimbo wako. Ongeza `<prefix>` baada ya sifa yako ya CSS.!importantIpe kipaumbele.

Hitimisho

Teknolojia inayoweza kubadilika si tu kuhusu uzoefu wa mtumiaji, bali pia miundombinu ya msingi kwa trafiki na mamlaka.

Katika enzi ya utafutaji wa kuzalisha, uwezo wa kubadilika wa maudhui umepita kwa muda mrefu ulimwengu wa uzoefu wa mtumiaji tu.

Ni kizingiti kikuu cha kama unaweza kutambuliwa, kutajwa, na kupendekezwa na injini za AI kama vile Perplexity na Google SGE.

Jedwali linaloweza kubadilika kikamilifu haliwezi tu kuhifadhi watumiaji, kupunguza kiwango cha kuruka, na kuboresha alama za Core Web Vitals, lakini pia kufanya maudhui yako kuwa chanzo cha habari kinachoaminika ambacho AI huipa kipaumbele kwa kutambaa.

Kama ilivyoelezwa na timu rasmi ya Google Web Vitals:"Uthabiti wa mpangilio na marekebisho ya simu ni tikiti za msingi za maudhui ili kupata mwonekano katika enzi ya utafutaji wa AI."

Usiruhusu meza ndogo kuharibu thamani ya makala yako yote.

Tuanze leo na kufanya majedwali yote kwenye tovuti yajibu.

Hii ni mojawapo ya hatua za uboreshaji wa SEO zenye uwekezaji mdogo zaidi na faida kubwa zaidi.

Kuanzia sasa, hakikisha kwamba kila umbo unalounda linaonekana kikamilifu kwenye kifaa chochote.

Hakikisha kwamba kila kipande cha taarifa muhimu unachoshiriki kinaonekana na watu wengi zaidi, kinatambuliwa na AI, na kinakumbatiwa na trafiki.

Maelezo huamua mafanikio au kushindwa, na utangamano huamua trafiki.

Nenda kwenye sehemu ya nyuma sasa, nakili msimbo, na umalize muundo unaojibu kwa mbofyo mmoja.

Tovuti yako ya WordPress inastahili uzoefu mzuri wa kusoma katika vifaa vyote.