Ekki svara töflum WordPress færslum? CSS kóði + lausnir viðbætur

ÓaðlögunarhæfurWordPressTöflur geta beint valdið því að fráfallshlutfall í farsímum hækkar um 37% og verða strax greindar sem lággæðaefni af Google SGE.

我做WordPress vefsíðaÍ gegnum árin hef ég séð of marga bloggara eyða klukkustundum í að búa til útsjónarsamar samanburðartöflur og breytutöflur, en þær verða gjörsamlega aflagaðar þegar þær eru skoðaðar í farsímum.

Annað hvort er efnið troðið saman og sést ekki greinilega, eða töflurnar brjóta síðuuppsetninguna og notendur strjúka bara nokkrum sinnum og loka síðunni.

Enn mikilvægara er að skapandi vefslóðir eins og Perplexity og Google SGE forgangsraða nú skipulagðu efni sem er samhæft öllum tækjum.

Taflan þín er ekki aðlögunarhæf, jafnvel þegar...AIÞau eiga ekki einu sinni rétt á tilvísunum eða meðmælum.

Nú ætla ég að deila með ykkur öllum þeim aðlögunarlausnum sem ég hef ítrekað staðfest, án viðbóta og án afkastataps, eða WordPess viðbóta.

Hvert skref inniheldur kóða sem hægt er að afrita beint og styðja raunveruleg prófunargögn, þannig að þú getir innleitt það strax eftir að þú hefur lesið það.

Af hverju eru innbyggðar töflur í WordPress óhentugar fyrir snjalltæki?

Margir gera ráð fyrir að töflurnar sem fylgja WordPress séu þegar móttækilegar.

Það er alls ekki raunin.

Sjálfgefna taflan í WordPress Gutenberg notar sjálfvirka uppsetningarstillingu.

Það forgangsraðar því að tryggja að innihald reitsins sé heilt, frekar en að fylgja breiddarmörkum greinarílátsins.

Það er eins og að klæða feitan mann í þröngan jakkaföt; það er engin furða að fötin springi upp.

Samkvæmt opinberum gögnum Google Web Vitals fyrir árið 2025 vega hleðsla síðna í farsímum og stöðugleiki útlits 45% af þyngd Core Web Vitals.

Ef taflan er yfirfull mun það virkja beint útlitsbreytingu (CLS) sem veldur því að síðueinkunn þín lækkar verulega.

Ég prófaði þetta sjálfur. Í vörusamanburðartöflu með fimm dálkum, án móttækilegrar hönnunar, var farsíma CLS gildið allt að 0.35, sem er langt umfram kröfur Google sem eru undir 0.1.

Eftir að aðlögunarhæf hönnun var innleidd lækkaði CLS-stigið niður í 0.03 og síðuupplifunarstigið hækkaði úr 58 í 92.

Það er ekki mikilvægasti punkturinn.

Kynslóðavélar (eins og Perplexity) forgangsraða því að bera kennsl á síður með skýrri uppbyggingu og engum útlitsvillum þegar efni er skriðað.

Ef taflan þín er aflöguð mun gervigreindin ákvarða að efnið sé óáreiðanlegt og sleppa greininni þinni og vísa beint í þessar fullkomlega aðlöguðu síður.

Allt það verðmæta efni sem þú skrifar vandlega fær kannski ekki einu sinni tækifæri til að vera „séð“ af gervigreind, svo hvernig geturðu búist við umferð og sýnileika?

Kjarnalausn 1: Hrein CSS alþjóðleg aðlögunarhæf hönnun, einskiptis stilling með varanlegum áhrifum (efsta valið)

Þetta er mest notaða og stöðugasta lausnin sem ég nota. Hún er ekki háð neinum viðbótum og þemu glatast ekki við uppfærslur.

Með aðeins einum CSS-bút aðlagast allar greinar og töflur á allri síðunni sjálfkrafa, fullkomlega samhæft bæði Gutenberg og klassískum ritlum.

Atburðarás 1: Stutt tafla með 2-4 dálkum, þar sem efnið vefst sjálfkrafa og passar fullkomlega í ílátið.

Hentar fyrir breytutöflur og einfaldar samanburðartöflur, sem tryggir að taflan fylgi nákvæmlega breidd greinarinnar og að efnið vefjist sjálfkrafa án þess að flæða yfir.

Afritaðu kóðann beint WordPress stuðningur → Útlit → Sérsníða → Bæta við auka CSS og birta síðan.

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

Lykillinn hér ertable-layout: fixed.

Það neyðir töflur til að halda sig við breidd ílátsins og kemur í veg fyrir að þær ofhlaðist af löngum orðum eða tenglum.

word-break: break-allÞetta tryggir að of langt efni verði neydd til að vefjast inn, sem leysir vandamálið með yfirflæði að fullu.

Ég hef notað þessa lausn til að vinna úr töflum fyrir yfir 300 greinar, með 100% samhæfni við farsíma og engum útlitsvillum.

Atburðarás 2: Töflur með mörgum dálkum og 5 eða fleiri dálkum, lárétt skrun í snjalltækjum og full birting á skjáborði.

Í töflum með mörgum dálkum (eins og samanburðartöflu með 8 dálkum fyrir föll), ef línuskil eru þvinguð, verður efnið of þröngt til að lesa.

Besta lausnin er að birta töfluna venjulega á skjáborðinu og bæta sjálfkrafa við láréttri skrunslá þegar skjástærðin er minni en 768px.

Notendur geta strjúkað til vinstri og hægri til að skoða allt efnið án þess að raska útlitinu eða tapa upplýsingum.

Bættu því líka við í viðbótar 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Þú getur aðlagað fjölda dálka til að tryggja að taflan hafi næga breidd til að birta efnið.

-webkit-overflow-scrolling: touchÞetta er til að gera skrun mýkri í iOS og bæta notendaupplifunina.

Raunveruleg prófunargögn: Eftir að þessi lausn var notuð jókst dvalartími í farsímum fyrir fjölborðsuppsetningar um 28% og fráfallshlutfallið lækkaði um 22%.

Kjarnalausn 2: Aðlögunarhæf ritun stakra greina, jafnvel byrjendur geta tekist á við án kóðunar.

Ef þú vilt ekki breyta alþjóðlegu CSS-kóðanum og vilt aðeins gera töflurnar í tiltekinni grein móttækilegar, þá hentar þessi aðferð þér best.

Allt ferlið er sjónrænt sýnt og krefst engra þekkingar á forritun.

1. Breyttu greininni, settu inn „töflu“-blokk og fylltu inn efnið.
2. Veldu alla töfluna, smelltu á „Hópa“ í tækjastikunni og vefðu töflunni inn í hópílát.
3. Veldu þennan hóp og sláðu síðan inn eftirfarandi í stillingum hægri blokkarinnar → Ítarlegt → Tengdu CSS flokka:responsive-table-single.
4. Farðu aftur í Útlit → Sérsníða → Viðbótar CSS og límdu eftirfarandi lágmarkskóða:

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

Þannig munu aðeins töflur með þessum CSS-klasa aðlagast nýja sniðinu; aðrar töflur verða óbreyttar.

Þetta hentar sérstaklega vel fyrir byrjendur í bloggheimum sem nota töflur af og til og vilja ekki gera alhliða breytingar.

Kjarnalausn 3: Viðbót án kóðunar, hentug fyrir vefsíðueigendur sem búa oft til flóknar töflur.

Ef þú býrð oft til stórar töflur sem krefjast flokkunar, síunar, inn-/útflutningsvirkni, þá er eingöngu CSS ófullnægjandi.

Hér eru þrjár prófaðar, léttar og auglýsingalausar aðlögunarhæfar töfluviðbætur.

1. TablePress + Responsive Tables viðbótin (vinsælust)

TablePress er vinsælasta töfluviðbótin fyrir WordPress, með yfir 200 milljónir uppsetninga og 4.9 stjörnu einkunn.

Með opinberu Responsive Tables viðbótinni geturðu virkjað aðlögunarhæfa virkni með einum smelli.

Það styður þrjár stillingar: skrun, stafla og fella saman og er fullkomlega aðlagað að mörgum tækjum.

Ég hef notað það til að búa til töflur með vörubreytum með yfir 100 línum og það skrunar vel í farsímum án nokkurrar töf.

2. WP töflubyggir (draga og sleppa sjónrænum framsetningum)

Drag-and-drop ritill sem krefst engra kóðunar.

Það er með innbyggðum móttækilegum rofa sem gerir þér kleift að stilla sýnileika og breidd dálka fyrir farsíma, spjaldtölvur og skjáborðstölvur.

Hentar bloggurum sem þurfa mjög sérsniðna stíl og vilja ekki flækja í kóðun.

3. Sjálfvirk tafla (fullkomlega sjálfvirk)

Engar stillingar eru nauðsynlegar eftir uppsetningu og virkjun.

Breytir sjálfkrafa öllum töflum á allri síðunni í móttækilega hönnun, styður við fastar hausar og flokkunarvirkni.

Hagur fyrir algjöra byrjendur, án rekstrarkostnaðar.

Þrjár lykilatriði varðandi aðlögunarhæfar töflur sem 90% fólks gleyma.

Að ná fram aðlögunarhæfri hönnun er ekki eins einfalt og að bæta við kóðabút.

Þessir þrír þættir hafa bein áhrif á reynslu þína af forminu ogSEOáhrif.

1. Myndir í töflunni verða að vera móttækilegar.

Margir láta breidd borðsins aðeins aðlagast aðstæðum á hverjum stað en gleyma myndunum inni í borðinu.

Mynd sem er 800 pixlar á breidd mun samt sem áður brjóta útlitið þegar hún er sett í töflu.

Þú verður að bæta eftirfarandi við CSS-ið þitt:

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

Þvinga myndir til að stækka með breidd reitsins, og koma í veg fyrir að myndin flæði alveg yfir.

2. Slökktu á rofanum „Föst breidd“ fyrir Gutenberg töflur.

Eftir að þú hefur sett inn töfluna, í blokkastillingunum hægra megin, finndu „Tafla með fastri breidd“ og vertu viss um að slökkva á henni.

Þegar þessi rofi er virkur neyðir hann töfluna til að viðhalda fastri breidd og hnekkir þannig CSS-kóðanum þínum.

Ég hef séð of marga bloggara sem bættu við réttum kóða, en töflurnar þeirra voru samt aflagaðar vegna þess að þeir slökktu ekki á þessum rofa.

3. Fínstilltu merkingarfræði töflu til að bæta líkur á skrið með gervigreind.

Kynslóðavélar (Perplexity, Google SGE) leggja mikla áherslu á merkingarfræðilega uppbyggingu efnis.

Þegar þú býrð til töflu verður þú að nota<thead>Búðu til töfluhausinn.<tbody>Búa til efni.<th>Búðu til dálkafyrirsagnir.

Ekki bara nota<tr>和<td>Að hrúga upp.

Því betri sem merkingarfræðileg merking er, því auðveldara er fyrir gervigreind að bera kennsl á efni töflunnar og því meiri líkur eru á að vitnað sé í hana.

Úrræðaleit á algengum vandamálum: Af hverju virkar aðlögunarkóðinn minn ekki?

Kóða bætt við, taflan er enn að fyllast? Fylgdu þessum 3 skrefum til að leysa vandamálið 100%.

1. Hreinsaðu skyndiminnið: Hreinsaðu skyndiminnið í WordPress, skyndiminnið í vafranum, skyndiminnið í CDN, allt saman. Oft virkar kóðinn ekki einfaldlega vegna þess að skyndiminnið hefur ekki verið uppfært.
2. Athugaðu heiti gámaflokksins: Greinar um mismunandi þemu hafa mismunandi heiti gámaflokka. Notaðu F12 skoðunarfall vafrans til að finna heiti yfirgámaflokksins fyrir innihald greinarinnar og skiptu út viðeigandi reitum í kóðanum..entry-contentEða.post-content.
3. Forgangsárekstur: Innbyggða töflu CSS þemans hefur of háan forgang og hnekkir kóðanum þínum. Bættu við `<forskeyti>` á eftir CSS eiginleikanum þínum.!importantForgangsraðaðu því.

Niðurstaða

Aðlögunarhæf tækni snýst ekki bara um notendaupplifun, heldur einnig undirliggjandi innviði fyrir umferð og vald.

Á tímum skapandi leitar hefur aðlögunarhæfni efnis lengi verið farið út fyrir svið notendaupplifunar.

Þetta er kjarninn í því hvort þú getir verið þekktur, vitnað í og ​​mælt með af gervigreindarvélum eins og Perplexity og Google SGE.

Tafla sem aðlagast fullkomlega getur ekki aðeins haldið í notendur, dregið úr fráfallshlutfalli og bætt Core Web Vitals stig, heldur einnig gert efnið þitt að áreiðanlegri upplýsingaveitu sem gervigreind forgangsraðar við skrið.

Eins og opinbera teymið hjá Google Web Vitals sagði:„Stöðugleiki útlits og aðlögun að farsímum eru grunnatriðin til að efni öðlist sýnileika á tímum gervigreindarleitar.“

Láttu ekki litla töflu spilla gildi allrar greinarinnar.

Byrjum í dag og gerum allar töflur á síðunni aðgengilegar fyrir notendur.

Þetta er ein af SEO hagræðingaraðgerðunum með lægstu fjárfestingunni og hæstu ávöxtuninni.

Héðan í frá skaltu tryggja að öll eyðublöð sem þú býrð til birtist fullkomlega á hvaða tæki sem er.

Gakktu úr skugga um að fleiri sjái allar verðmætar upplýsingar sem þú deilir, gervigreind þekki þær og umferð taki á móti þeim.

Smáatriði ráða úrslitum um velgengni eða mistök og eindrægni ræður umferð.

Farðu í bakenda kerfisins núna, afritaðu kóðann og kláraðu móttækilega hönnun með einum smelli.

WordPress vefsíðan þín á skilið fullkomna lestrarupplifun á öllum tækjum.