„WordPress“ įrašų lentelės nereaguoja? CSS kodas + papildinių sprendimai

NeadaptyvusWordPressLentelės gali tiesiogiai padidinti mobiliųjų įrenginių atmetimo rodiklį 37 % ir „Google SGE“ jas tiesiogiai atpažins kaip žemos kokybės turinį.

我做WordPress svetainėPer daugelį metų mačiau per daug tinklaraštininkų, kurie valandų valandas kūrė išskirtines palyginimo lenteles ir parametrų lenteles, o mobiliuosiuose įrenginiuose jas matė visiškai iškreiptas.

Arba turinys sugrūstas ir jo negalima aiškiai matyti, arba lentelės sutrikdo puslapio išdėstymą, ir vartotojai tiesiog perbraukia kelis kartus ir uždaro puslapį.

Dar svarbiau, kad generatyviniai varikliai, tokie kaip „Perplexity“ ir „Google SGE“, dabar teikia pirmenybę struktūrizuoto turinio, suderinamo su visais įrenginiais, nuskaitymui.

Jūsų stalas nėra prisitaikantis, net kai...AIJie net neatitinka citatų ar rekomendacijų reikalavimų.

Dabar pasidalinsiu su jumis visais adaptyviais sprendimais, kuriuos ne kartą patikrinau, be jokių papildinių ir be našumo nuostolių, arba „WordPess“ papildiniais.

Kiekvienas žingsnis apima tiesiogiai kopijuojamą kodą ir atitinkamus realaus pasaulio testavimo duomenis, todėl galite jį įdiegti iš karto po perskaitymo.

Kodėl „WordPress“ gimtosios lentelės iš esmės netinka mobiliesiems įrenginiams?

Daugelis žmonių mano, kad „WordPress“ lentelės jau yra pritaikytos prie skirtingų svetainių.

Tai visiškai netiesa.

Numatytoji lentelė „WordPress Gutenberg“ naudoja automatinį išdėstymo režimą.

Jis teikia pirmenybę langelio turinio vientisumo užtikrinimui, o ne straipsnio konteinerio pločio apribojimų laikymuisi.

Tai tas pats, kas apvilkti aptemptą kostiumą storam žmogui; nieko keisto, kad drabužiai plyš.

Remiantis oficialiais „Google Web Vitals“ 2025 m. duomenimis, mobiliųjų puslapių įkėlimas ir išdėstymo stabilumas sudaro 45 % „Core Web Vitals“ svorio.

Perpildyta lentelė tiesiogiai suaktyvins maketo poslinkį (CLS), dėl kurio jūsų puslapio įvertinimas smarkiai sumažės.

Pats išbandžiau. 5 stulpelių produktų palyginimo lentelėje be adaptyvaus dizaino mobiliųjų įrenginių CLS vertė siekė net 0.35, gerokai viršydama „Google“ reikalavimą – mažiau nei 0.1.

Įdiegus adaptyvų dizainą, CLS balas sumažėjo iki 0.03, o puslapio patirties balas padidėjo nuo 58 iki 92.

Tai nėra pats svarbiausias punktas.

Generatyviniai varikliai (pvz., „Perplexity“) nuskaitydami turinį teikia pirmenybę aiškios struktūros puslapių identifikavimui be išdėstymo klaidų.

Jei jūsų lentelė deformuota, dirbtinis intelektas nustatys, kad turinys nepatikimas, ir praleis jūsų straipsnį, tiesiogiai nurodydamas tuos puikiai pritaikytus puslapius.

Viso vertingo turinio, kurį kruopščiai rašote, dirbtinis intelektas gali net nepamatyti, tad kaip galite tikėtis srauto ir matomumo?

1 pagrindinis sprendimas: grynas CSS globalus adaptyvus dizainas, vienkartinis nustatymas su nuolatiniu efektu (geriausias pasirinkimas)

Tai mano dažniausiai naudojamas ir stabiliausias sprendimas. Jis nepriklauso nuo jokių papildinių, o temos nebus prarastos atnaujinimų metu.

Vos su CSS kodu, visi straipsniai ir lentelės visoje svetainėje automatiškai prisitaikys ir bus puikiai suderinami tiek su „Gutenberg“, tiek su klasikiniais redaktoriais.

1 scenarijus: trumpa lentelė su 2–4 stulpeliais, kurioje turinys automatiškai apsivynioja ir idealiai telpa konteineryje.

Tinka parametrų lentelėms ir paprastoms palyginimo lentelėms, užtikrinant, kad lentelė griežtai atitiktų straipsnio plotį ir kad turinys automatiškai apsivyniotų neperpildydamas.

Nukopijuokite kodą tiesiogiai WordPress backend → Išvaizda → Tinkinti → Pridėti papildomą CSS, tada publikuoti.

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

Svarbiausia čia yratable-layout: fixed.

Tai priverčia lenteles laikytis konteinerio pločio, neleidžiant jų perpildyti ilgais žodžiais ar nuorodomis.

word-break: break-allTai užtikrina, kad pernelyg ilgas turinys bus priverstas apvynioti, visiškai išsprendžiant perpildymo problemą.

Šį sprendimą naudojau daugiau nei 300 straipsnių lentelėms apdoroti, jis 100 % suderinamas su mobiliaisiais įrenginiais ir be jokių išdėstymo klaidų.

2 scenarijus: Daugiasluoksnės lentelės su 5 ar daugiau stulpelių, horizontalus slinkimas mobiliuosiuose įrenginiuose ir visas ekranas darbalaukyje.

Daugiaskiltėse lentelėse (pvz., 8 stulpelių funkcijų palyginimo lentelėje), jei eilučių lūžiai bus priverstiniai, turinys taps per ankštas, kad būtų sunku jį perskaityti.

Geriausias sprendimas – staliniame kompiuteryje lentelę rodyti įprastai ir automatiškai pridėti horizontalią slinkties juostą, kai ekrano dydis yra mažesnis nei 768 pikseliai.

Vartotojai gali braukti pirštu į kairę arba į dešinę, kad peržiūrėtų visą turinį netrukdydami išdėstymui ir neprarasdami informacijos.

Taip pat pridėkite jį prie papildomo 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: 700pxGalite reguliuoti stulpelių skaičių, kad lentelė būtų pakankamai plati turiniui rodyti.

-webkit-overflow-scrolling: touchTai skirta sklandesniam slinkimui „iOS“ sistemoje ir geresnei naudotojo patirčiai.

Faktiniai bandymų duomenys: panaudojus šį sprendimą, kelių stalų išdėstymų mobiliojo ryšio veikimo laikas padidėjo 28 %, o atmetimo rodiklis sumažėjo 22 %.

2 pagrindinis sprendimas: adaptyvus vieno straipsnio rašymas, net pradedantieji gali susitvarkyti be jokio kodo.

Jei nenorite keisti pasaulinio CSS ir norite, kad tik konkretaus straipsnio lentelės būtų pritaikytos prie aplinkos, šis metodas jums geriausiai tinka.

Visas procesas yra vizualizuotas, nereikalauja jokių programavimo žinių.

1. Redaguokite straipsnį, įterpkite „lentelės“ bloką ir užpildykite turinį.
2. Pasirinkite visą lentelę, įrankių juostoje spustelėkite „Grupuoti“ ir apvyniokite lentelę grupės konteineryje.
3. Pasirinkite šią grupę, tada dešiniojo bloko nustatymuose → Išplėstiniai → Pridėti CSS klases įveskite:responsive-table-single.
4. Grįžkite į Išvaizda → Tinkinti → Papildomas CSS ir įklijuokite šį minimalų kodą:

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

Tokiu būdu tik lentelės su šia CSS klase prisitaikys prie naujo formato; kitos lentelės liks nepakitusios.

Tai ypač tinka pradedantiesiems tinklaraštininkams, kurie retkarčiais naudoja lenteles ir nenori atlikti globalių pakeitimų.

3 pagrindinis sprendimas: nulinio kodo įskiepis, tinkantis svetainių savininkams, kurie dažnai kuria sudėtingas lenteles.

Jei dažnai kuriate dideles lenteles, kurioms reikalingas rūšiavimas, filtravimas, importavimas / eksportavimas, vien CSS nepakanka.

Čia yra 3 išbandyti, lengvi ir be reklamų prisitaikantys lentelių įskiepiai.

1. „TablePress“ + pritaikomų lentelių plėtinys (populiariausias)

„TablePress“ yra populiariausias „WordPress“ lentelių įskiepis, turintis daugiau nei 200 milijonus įdiegimų ir 4.9 žvaigždutės įvertinimą.

Naudodami oficialų „Responsive Tables“ plėtinį, galite įjungti adaptyvų funkcionalumą vienu spustelėjimu.

Jis palaiko tris režimus: slinkimą, sujungimą ir sutraukimą, ir puikiai pritaikytas keliems įrenginiams.

Aš jį naudojau kurdamas produktų parametrų lenteles su daugiau nei 100 eilučių, ir jis sklandžiai slenka mobiliuosiuose įrenginiuose be jokio vėlavimo.

2. WP lentelių kūrimo priemonė (vizualizacija vilkimo ir numetimo principu)

Vilkimo ir numetimo redaktorius, kuriam nereikia programavimo.

Jame yra integruotas reaguojantis jungiklis, leidžiantis individualiai reguliuoti stulpelių matomumą ir plotį mobiliuosiuose telefonuose, planšetiniuose kompiuteriuose ir staliniuose kompiuteriuose.

Tinka tinklaraštininkams, kuriems reikia labai pritaikomų stilių ir kurie nenori žaisti su kodavimu.

3. Automatiškai reaguojantis stalas (visiškai automatinis)

Po įdiegimo ir aktyvinimo nereikia jokių nustatymų.

Automatiškai konvertuoja visas lenteles visoje svetainėje į pritaikomą dizainą, palaikant fiksuotas antraštes ir rūšiavimo funkciją.

Pradedantiesiems skirtas privalumas, be jokių eksploatavimo išlaidų.

Trys pagrindinės adaptyvių lentelių detalės, kurių 90 % žmonių nepastebi.

Adaptyvaus dizaino sukūrimas nėra toks paprastas, kaip kodo fragmento pridėjimas.

Šios 3 detalės tiesiogiai lemia jūsų patirties formą irSEOpoveikis.

1. Lentelėje esantys vaizdai turi būti pritaikomi prie skirtingų ekranų.

Daugelis žmonių stalo plotį pritaiko tik prie vietos sąlygų, bet pamiršta apie paveikslėlius stalo viduje.

800 pikselių pločio paveikslėlis vis tiek sugadins išdėstymą, kai bus patalpintas lentelėje.

Į CSS turite pridėti šiuos dalykus:

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

Priverskite vaizdus keisti mastelį pagal langelio plotį, kad visiškai išvengtumėte vaizdo perpildymo.

2. Išjunkite „Gutenberg“ lentelių jungiklį „Fiksuotas plotis“.

Įterpus lentelę, dešinėje esančiuose bloko nustatymuose raskite „Fiksuoto pločio lentelė“ ir būtinai ją išjunkite.

Kai šis jungiklis įjungtas, lentelė bus priversta išlaikyti fiksuotą plotį, tiesiogiai pakeisdama jūsų reaguojantį CSS.

Mačiau per daug tinklaraštininkų, kurie pridėjo teisingą kodą, bet jų lentelės vis tiek buvo iškraipytos, nes jie neišjungė šio jungiklio.

3. Optimizuokite lentelių semantiką, kad padidintumėte dirbtinio intelekto nuskaitymo tikimybę.

Generatyviniai varikliai („Perplexity“, „Google SGE“) skiria didelį dėmesį turinio semantinei struktūrai.

Kuriant lentelę, reikia naudoti<thead>Sukurkite lentelės antraštę.<tbody>Kurti turinį.<th>Sukurkite stulpelių antraštes.

Nenaudokite tik<tr>Ir<td>Sukaupti.

Kuo geresnis semantinis žymėjimas, tuo lengviau dirbtiniam intelektui atpažinti jūsų lentelės turinį ir tuo didesnė tikimybė, kad jis bus cituojamas.

Dažniausiai pasitaikančių problemų sprendimas: kodėl neveikia mano adaptyvus kodas?

Pridėtas kodas, bet lentelė vis tiek perpildyta? Atlikite šiuos 3 veiksmus, kad pašalintumėte triktis ir 100 % išspręstumėte problemą.

1. Išvalykite talpyklą: išvalykite „WordPress“, naršyklės, CDN talpyklą – viską. Dažnai kodas neveikia vien dėl to, kad talpykla nebuvo atnaujinta.
2. Patikrinkite konteinerio klasės pavadinimą: skirtingų temų straipsniai turi skirtingus konteinerio klasių pavadinimus. Norėdami rasti straipsnio turinio pirminio konteinerio klasės pavadinimą, naudokite naršyklės F12 funkciją „inspect“ ir pakeiskite atitinkamus kodo laukus..entry-contentArba.post-content.
3. Prioritetų konfliktas: temos integruotos lentelės CSS prioritetas yra per aukštas, todėl jūsų kodas yra viršesnis. Po CSS ypatybės pridėkite `<prefix>`.!importantTeikite pirmenybę.

Išvada

Adaptyvioji technologija yra ne tik susijusi su naudotojo patirtimi, bet ir su pagrindine srauto bei įgaliojimų infrastruktūra.

Generatyviosios paieškos eroje turinio pritaikomumas jau seniai peržengė vien naudotojo patirties ribas.

Tai yra pagrindinė riba, lemianti, ar jus gali atpažinti, cituoti ir rekomenduoti dirbtinio intelekto varikliai, tokie kaip „Perplexity“ ir „Google SGE“.

Puikiai prisitaikanti lentelė gali ne tik išlaikyti vartotojus, sumažinti atmetimo rodiklį ir pagerinti pagrindinius žiniatinklio gyvybingumo rodiklius, bet ir paversti jūsų turinį autoritetingu informacijos šaltiniu, kuriam dirbtinis intelektas teikia pirmenybę nuskaitymui.

Kaip teigė oficiali „Google Web Vitals“ komanda:"Išdėstymo stabilumas ir pritaikymas mobiliesiems įrenginiams yra pagrindiniai veiksniai, lemiantys turinio matomumą dirbtinio intelekto paieškos eroje."

Neleiskite, kad maža lentelė sugadintų viso straipsnio vertę.

Pradėkime šiandien ir padarykime visas svetainės lenteles pritaikomas prie individualių poreikių.

Tai vienas iš SEO optimizavimo veiksmų, reikalaujančių mažiausių investicijų ir didžiausią grąžą.

Nuo šiol užtikrinkite, kad kiekviena jūsų sukurta forma puikiai atrodytų bet kuriame įrenginyje.

Užtikrinkite, kad kiekvieną vertingą informaciją, kuria dalijatės, matytų daugiau žmonių, ją atpažintų dirbtinis intelektas ir priimtų srautas.

Detalės lemia sėkmę arba nesėkmę, o suderinamumas – srautą.

Eikite į vidinę sistemą dabar, nukopijuokite kodą ir vienu spustelėjimu sukurkite reaguojantį dizainą.

Jūsų „WordPress“ svetainė nusipelno puikios skaitymo patirties visuose įrenginiuose.