Matebulo a positi a WordPress sakuyankha? Kodi CSS code + ma plugin solutions

WosasinthikaWordPressMatebulo angapangitse kuti kuchuluka kwa ma phone bounce kukwere ndi 37% ndipo Google SGE idzazindikirika kuti ndi zinthu zopanda khalidwe.

我做Webusayiti ya WordPressKwa zaka zambiri, ndawona olemba mabulogu ambiri akuwononga maola ambiri popanga matebulo oyerekeza ndi matebulo owonetsera zinthu, koma amangosokonekera kwambiri akamawonedwa pazida zam'manja.

Kaya zomwe zili mkati mwake zili zodzaza ndipo sizikuwoneka bwino, kapena matebulowo amaswa kapangidwe ka tsamba, ndipo ogwiritsa ntchito amangosefa kangapo ndikutseka tsambalo.

Chofunika kwambiri, injini zopangira zinthu monga Perplexity ndi Google SGE tsopano zikuika patsogolo zinthu zoyenda bwino zomwe zimagwirizana ndi zipangizo zonse.

Tebulo lanu silikusintha, ngakhale pamene...AISali oyenerera ngakhale kulandira mawu kapena malangizo.

Tsopano ndikugawana nanu njira zonse zosinthira zomwe ndatsimikizira mobwerezabwereza, zopanda mapulagini ndi kutayika kwa magwiridwe antchito, kapena mapulagini a WordPess.

Gawo lililonse limaphatikizapo khodi yomwe ingakopedwe mwachindunji komanso yothandizira deta yeniyeni yoyesera, kotero mutha kuyigwiritsa ntchito nthawi yomweyo mutayiwerenga.

Chifukwa chiyani matebulo a WordPress oyambilira sali oyenera mafoni?

Anthu ambiri amaganiza kuti matebulo omwe amabwera ndi WordPress ali kale oyankha.

Sizili choncho konse.

Gome lokhazikika mu WordPress Gutenberg limagwiritsa ntchito mawonekedwe okhazikika.

Imaika patsogolo kuonetsetsa kuti zomwe zili mu selo zili zonse, m'malo motsatira malire a m'lifupi mwa chidebe cha nkhaniyo.

Zili ngati kuvala suti yomukwana munthu wonenepa; sizodabwitsa kuti zovalazo zidzatseguka.

Malinga ndi deta yovomerezeka ya Google Web Vitals ya 2025, kukhazikika kwa kutsitsa ndi kukhazikika kwa tsamba la mafoni kumayimira 45% ya kulemera kwa Core Web Vitals.

Tebulo lodzaza lidzayambitsa mwachindunji kusintha kwa mawonekedwe (CLS), zomwe zimapangitsa kuti chiwerengero chanu cha tsamba chichepe.

Ndinayesa ndekha. Mu tebulo loyerekeza zinthu la magawo 5, lopanda kapangidwe kogwirizana, mtengo wa CLS yam'manja unali wokwera kufika pa 0.35, woposa kwambiri zomwe Google imafuna kuti zikhale pansi pa 0.1.

Pambuyo pokhazikitsa kapangidwe kosinthika, chigoli cha CLS chinatsika kufika pa 0.03, ndipo chigoli cha zomwe zachitika patsamba chinakwera kuchoka pa 58 kufika pa 92.

Si mfundo yofunika kwambiri imeneyo.

Ma injini opanga zinthu (monga Perplexity) amaika patsogolo kuzindikira masamba okhala ndi kapangidwe komveka bwino komanso opanda zolakwika pakusaka zomwe zili mkati.

Ngati tebulo lanu lasokonekera, AI idzazindikira kuti zomwe zili mkati mwake sizodalirika ndipo idzasiya nkhani yanu, ndikuyang'ana mwachindunji masamba omwe asinthidwa bwino.

Zonse zofunika zomwe mumalemba mosamala sizingapeze mwayi woti "muwone" ndi AI, ndiye mungayembekezere bwanji kuchuluka kwa magalimoto ndi kuwonetsedwa?

Yankho Lofunika Kwambiri 1: Kapangidwe Koyenera ka CSS Padziko Lonse, Kukhazikitsa Komwe Kumakhala ndi Mphamvu Yokhazikika (Chosankha Chapamwamba)

Iyi ndi njira yanga yokhazikika komanso yogwiritsidwa ntchito kwambiri. Siidalira mapulagini aliwonse, ndipo mitu sidzatayika panthawi yosintha.

Ndi chidutswa cha CSS chokha, nkhani zonse ndi matebulo patsamba lonselo zidzasinthidwa zokha, zogwirizana bwino ndi Gutenberg ndi akonzi akale.

Chitsanzo 1: Tebulo lalifupi lokhala ndi mizati 2-4, pomwe zomwe zili mkati mwake zimangozungulira ndikulowa bwino mu chidebecho.

Yoyenera matebulo a parameter ndi matebulo osavuta oyerekeza, kuonetsetsa kuti tebulo likutsatira m'lifupi mwa nkhaniyo, komanso kuti zomwe zili mkati mwake zimangodzipinda zokha popanda kudzaza.

Koperani khodi mwachindunji WordPress backend → Mawonekedwe → Sinthani → Onjezani CSS yowonjezera, kenako falitsani.

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

Chinsinsi apa nditable-layout: fixed.

Zimakakamiza matebulo kuti azitsatira m'lifupi mwa chidebecho, zomwe zimawaletsa kuti asakhumudwe ndi mawu aatali kapena maulalo.

word-break: break-allIzi zikutsimikizira kuti zinthu zazitali kwambiri zidzakakamizika kukulunga, zomwe zidzathetsa vuto lonse la kuchuluka kwa zinthu.

Ndagwiritsa ntchito njira iyi pokonza matebulo a nkhani zoposa 300, ndikugwirizana kwathunthu ndi mafoni ndipo palibe zolakwika pa kapangidwe kake.

Chitsanzo chachiwiri: Matebulo okhala ndi mizere yambiri okhala ndi mizere 5 kapena kuposerapo, kusuntha mopingasa pazida zam'manja, ndi kuwonetsedwa kwathunthu pa desktop.

Mu matebulo okhala ndi mizati yambiri (monga tebulo loyerekeza ntchito la mizati 8), ngati kusweka kwa mizere kukakamizika, zomwe zili mkati mwake zidzakhala zochepa kwambiri kuti ziwerengedwe.

Yankho labwino kwambiri ndikuwonetsa tebulo nthawi zonse pa desktop, ndikuwonjezera scrollbar yopingasa yokha pamene kukula kwa sikirini kuli kochepera 768px.

Ogwiritsa ntchito amatha kusuntha kumanzere ndi kumanja kuti awone zonse zomwe zili mkati popanda kusokoneza kapangidwe kake kapena kutaya zambiri.

Komanso onjezani ku CSS yowonjezera:

@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: 700pxMukhoza kusintha chiwerengero cha mizati kuti muwonetsetse kuti tebulo lili ndi m'lifupi wokwanira kuti liwonetse zomwe zili mkati.

-webkit-overflow-scrolling: touchIzi ndi cholinga chopangitsa kuti scrolling ikhale yosavuta pa iOS ndikuwonjezera zomwe ogwiritsa ntchito akukumana nazo.

Deta yeniyeni yoyesera: Pambuyo pogwiritsa ntchito njira iyi, nthawi yokhala pafoni ya mapangidwe a matebulo ambiri idakwera ndi 28%, ndipo chiwopsezo chobwerera chidatsika ndi 22%.

Yankho Lalikulu 2: Kulemba nkhani imodzi yokha mosinthasintha, ngakhale oyamba kumene amatha kulemba popanda code.

Ngati simukufuna kusintha CSS yapadziko lonse lapansi ndipo mukufuna kungopanga matebulo omwe ali munkhani inayake kuti agwirizane ndi zomwe mukufuna, njira iyi ndi yoyenera kwa inu.

Njira yonseyi imawonetsedwa m'maganizo, osafunikira chidziwitso cha ma code.

1. Sinthani nkhaniyo, ikani bokosi la "tebulo", ndipo lembani zomwe zili mkati.
2. Sankhani tebulo lonse, dinani "Gulu" mu toolbar, ndikukulunga tebulo mu chidebe cha gulu.
3. Sankhani gulu ili, kenako mu zoikamo za block yakumanja → Zapamwamba → Ambatanitsani Makalasi a CSS, lowetsani:responsive-table-single.
4. Bwererani ku Maonekedwe → Sinthani → CSS Yowonjezera, ndikuyika khodi yocheperako iyi:

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

Mwanjira imeneyi, matebulo okha omwe ali ndi kalasi iyi ya CSS ndi omwe adzasintha kuti agwirizane ndi mawonekedwe atsopano; matebulo ena sadzakhudzidwa.

Ndi yoyenera makamaka kwa olemba mabulogu atsopano omwe nthawi zina amagwiritsa ntchito matebulo ndipo sakufuna kusintha padziko lonse lapansi.

Yankho Lalikulu 3: Pulogalamu yowonjezera ya Zero-code, yoyenera eni mawebusayiti omwe nthawi zambiri amapanga matebulo ovuta.

Ngati nthawi zambiri mumapanga matebulo akuluakulu omwe amafunika kusanja, kusefa, kutumiza/kutumiza zinthu, CSS yeniyeni siyokwanira.

Nazi mapulagini atatu oyeserera, opepuka, komanso osatsatsa malonda.

1. TablePress + Responsive Tables extension (yotchuka kwambiri)

TablePress ndi pulogalamu yowonjezera yodziwika kwambiri ya patebulo ya WordPress, yokhala ndi ma installation opitilira 200 miliyoni komanso nyenyezi 4.9.

Ndi pulogalamu yovomerezeka ya Responsive Tables, mutha kuyatsa magwiridwe antchito osinthika podina kamodzi kokha.

Imathandizira njira zitatu: kusuntha, kuyika zinthu pamodzi, ndi kugwetsa, ndipo imasinthidwa bwino kuti igwirizane ndi zida zingapo.

Ndagwiritsa ntchito popanga matebulo a zinthu okhala ndi mizere yoposa 100, ndipo imayendayenda bwino pazida zam'manja popanda kuchedwa kulikonse.

2. WP Table Builder (Kokani ndi Kugwetsa Kuwonetsera)

Chokokera ndi kusiya chomwe sichifuna kulemba ma code.

Ili ndi switch yolumikizira yomwe imakulolani kusintha mawonekedwe ndi utali wa mizati ya mafoni, mapiritsi, ndi makompyuta.

Yoyenera olemba mabulogu omwe amafunikira masitayelo osinthika kwambiri ndipo sakufuna kusokoneza ndi kulemba ma code.

3. Tebulo Loyankha Magalimoto (Lodzichitira Lokha)

Palibe zofunikira zokonzera mukatha kukhazikitsa ndi kuyambitsa.

Zimasinthira matebulo onse patsamba lonse kukhala mapangidwe osinthika, othandizira mitu yomata komanso magwiridwe antchito okonza.

Phindu kwa oyamba kumene, popanda ndalama zogwirira ntchito.

Zinthu zitatu zofunika kwambiri zokhudza matebulo osinthika omwe anthu 90% amanyalanyaza.

Kukwaniritsa kapangidwe kosinthika sikophweka monga kuwonjezera khodi.

Mfundo zitatu izi zimatsimikizira mwachindunji zomwe mwakumana nazo mu fomu yanu komansoSEOzotsatira.

1. Zithunzi zomwe zili mkati mwa tebulo ziyenera kukhala zoyankha.

Anthu ambiri amangopanga kukula kwa tebulo kuti kugwirizane ndi momwe zinthu zilili m'deralo, koma amaiwala za zithunzi zomwe zili mkati mwa tebulo.

Chithunzi chomwe chili ndi ma pixel 800 m'lifupi chidzasokoneza kapangidwe kake chikayikidwa patebulo.

Muyenera kuwonjezera zotsatirazi ku CSS yanu:

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

Kakamizirani zithunzi kuti zikwere ndi kukula kwa selo, zomwe zimaletsa kuti chithunzi chisefukire.

2. Zimitsani chosinthira cha "Fixed Width" cha matebulo a Gutenberg.

Mukayika tebulo, mu zoikamo za block kumanja, pezani "Table yokhazikika" ndipo onetsetsani kuti mwayimitsa.

Pamene switch iyi yayatsidwa, idzakakamiza tebulo kuti likhale ndi m'lifupi wokhazikika, ndikupitirira mwachindunji CSS yanu yoyankha.

Ndaona olemba mabulogu ambiri omwe adawonjezera khodi yolondola, koma matebulo awo adasokonekerabe chifukwa sanazimitse switch iyi.

3. Konzani bwino tanthauzo la tebulo kuti muwongolere kuthekera kwa kukwawa kwa AI.

Makina opanga zinthu (Perplexity, Google SGE) amagogomezera kwambiri kapangidwe ka tanthauzo la zomwe zili mkati.

Mukapanga tebulo, muyenera kugwiritsa ntchito<thead>Pangani mutu wa tebulo.<tbody>Pangani zomwe zili mkati.<th>Pangani mitu ya nkhani.

Musangogwiritsa ntchito<tr>ndipo<td>Kuwunjikana.

Chizindikiro chabwino kwambiri chikagwiritsidwa ntchito, zimakhala zosavuta kuti AI izizindikira zomwe zili patebulo lanu, ndipo mwayi woti zitchulidwe umakhala wokwera.

Kuthetsa mavuto ofala: N’chifukwa chiyani code yanga yosinthira sikugwira ntchito?

Kodi mwawonjezera khodi, tebulo likupitirirabe kudzaza? Tsatirani njira zitatu izi kuti muthetse mavuto ndikuthetsa vutoli 100%.

1. Chotsani cache: Chotsani WordPress cache, browser cache, CDN cache, zonsezo. Nthawi zambiri, code sigwira ntchito chifukwa cache sinasinthidwe.
2. Chongani dzina la kalasi ya chidebe: Nkhani zokhudzana ndi mitu yosiyanasiyana zimakhala ndi mayina osiyanasiyana a kalasi ya chidebe. Gwiritsani ntchito ntchito ya F12 inspect ya msakatuli kuti mupeze dzina la kalasi ya chidebe chachikulu cha zomwe zili munkhaniyo, ndikusintha magawo oyenera mu code..entry-contentKapena.post-content.
3. Kusamvana kwa zofunikira: CSS ya tebulo lomangidwa mkati mwa mutuwu ili ndi zofunika kwambiri, zomwe zimapangitsa kuti code yanu ikhale yofunika kwambiri. Onjezani `<prefix>` pambuyo pa katundu wanu wa CSS.!importantIkani patsogolo.

Pomaliza

Ukadaulo wosinthika sikutanthauza kungodziwa zomwe ogwiritsa ntchito akukumana nazo, komanso maziko ofunikira a magalimoto ndi ulamuliro.

Mu nthawi ya kufufuza kopanga zinthu, kusintha kwa zomwe zili mkati kwakhala kopitilira muyeso wa zomwe ogwiritsa ntchito amangogwiritsa ntchito.

Ndi gawo lofunika kwambiri la ngati mungadziwike, kutchulidwa, ndi kulangizidwa ndi injini za AI monga Perplexity ndi Google SGE.

Tebulo losinthika bwino silingangosunga ogwiritsa ntchito, kuchepetsa kubwerezabwereza, ndikuwonjezera zigoli za Core Web Vitals, komanso limapangitsa zomwe zili mkati mwanu kukhala gwero lodalirika la chidziwitso chomwe AI imaika patsogolo pakukwawa.

Monga momwe gulu lovomerezeka la Google Web Vitals lanenera:"Kukhazikika kwa kapangidwe ndi kusintha kwa mafoni ndi njira zofunika kwambiri zopezera zomwe zili mkati kuti ziwonekere munthawi yosaka ya AI."

Musalole tebulo laling'ono kuwononga mtengo wa nkhani yanu yonse.

Tiyeni tiyambe lero ndi kupanga matebulo onse patsamba lino kukhala ogwirizana.

Ichi ndi chimodzi mwazochita zokonza SEO zomwe zimakhala ndi ndalama zochepa komanso phindu lalikulu.

Kuyambira tsopano, onetsetsani kuti mawonekedwe aliwonse omwe mumapanga akuwoneka bwino pa chipangizo chilichonse.

Onetsetsani kuti chidziwitso chilichonse chamtengo wapatali chomwe mukugawana chikuwonedwa ndi anthu ambiri, chikudziwika ndi AI, komanso chikulandiridwa ndi magalimoto.

Tsatanetsatane umatsimikiza kupambana kapena kulephera, ndipo kuyanjana kumatsimikiza kuchuluka kwa magalimoto.

Pitani ku backend tsopano, koperani khodi, ndipo pangani kapangidwe koyankha ndi kudina kamodzi.

Webusaiti yanu ya WordPress ikuyenera kukhala ndi mwayi wowerenga bwino pazida zonse.