WordPress-eko argitalpen-taulak ez dira erantzuten? CSS kodea + plugin irtenbideak

Egokitzerik gabeko bat.WordPressTaulek zuzenean % 37ko igoera eragin dezakete mugikorreko errebote-tasetan, eta Google SGEk zuzenean identifikatuko ditu kalitate baxuko eduki gisa.

我做WordPress webguneaUrteetan zehar, blogari gehiegi ikusi ditut orduak ematen konparazio-taula eta parametro-taula bikainak sortzen, eta gero gailu mugikorretan ikusten direnean guztiz desitxuratuta daude.

Edo edukia pilatuta dago eta ez da argi ikusten, edo taulek orriaren diseinua hausten dute, eta erabiltzaileek hatza pare bat aldiz irristatu eta orria ixten dute.

Are kritikoagoa dena, Perplexity eta Google SGE bezalako motor sortzaileek lehentasuna ematen diote orain gailu guztiekin bateragarria den egituratutako edukia arakatzeari.

Zure taula ez da moldagarria, nahiz eta...AIEz dute aipamen edo gomendioetarako ere balio.

Orain, behin eta berriz egiaztatu ditudan moldaketa-irtenbide guztiak partekatuko ditut zuekin, pluginik eta errendimendu-galerarik gabekoak, edo WordPess pluginak.

Urrats bakoitzak zuzenean kopiatu daitekeen kodea eta benetako munduko proba-datuak ditu, beraz, irakurri ondoren berehala inplementatu ahal izango duzu.

Zergatik dira WordPress-eko taula natiboak berez desegokiak gailu mugikorretarako?

Jende askok uste du WordPress-ekin datozen taulak dagoeneko erantzunkorrak direla.

Ez da batere horrela.

WordPress Gutenberg-eko taula lehenetsiak diseinu automatikoaren modua erabiltzen du.

Artikulu-edukiontziaren zabalera-mugari eustea baino, gelaxkaren edukia osoa dela ziurtatzea lehenesten du.

Pertsona lodi bati traje estu bat janztea bezala da; ez da harritzekoa arropak lehertzea.

Google Web Vitals-en 2025eko datu ofizialen arabera, mugikorreko orrialdeen kargatzeak eta diseinuaren egonkortasunak Core Web Vitals-en pisuaren % 45 hartzen dute.

Taula gainezka batek zuzenean diseinu-desplazamendu bat (CLS) eragingo du, eta horrek zure orrialdearen balorazioa amildegituko du.

Neuk probatu nuen. 5 zutabeko produktuen konparazio taula batean, diseinu erantzunkorrik gabe, mugikorreko CLS balioa 0.35ekoa izan zen, Google-ren 0.1etik beherako eskakizuna gaindituz.

Diseinu moldagarria ezarri ondoren, CLS puntuazioa 0.03ra jaitsi zen, eta orrialdearen esperientziaren puntuazioa 58tik 92ra igo zen.

Ez da hori punturik erabakigarriena.

Motor generatiboek (Perplexity bezalakoek) lehentasuna ematen diote egitura argia duten eta diseinu-akatsik gabeko orrialdeak identifikatzeari edukia arakatzean.

Zure taula deformatuta badago, IA-k edukia fidagarria ez dela zehaztuko du eta zure artikulua saltatuko du, zuzenean egokitutako orrialde horiei erreferentzia eginez.

Neketsuki idazten duzun eduki baliotsu guztia agian ez du IA-k "ikusteko" aukerarik izango, beraz, nola espero dezakezu trafikoa eta ikusgarritasuna?

1. oinarrizko irtenbidea: CSS diseinu global moldagarri hutsa, behin bakarrik erabiltzeko modukoa eta eragin iraunkorra duena (aukera nagusia)

Hau da gehien erabiltzen dudan eta egonkorrena den irtenbidea. Ez du pluginik behar, eta gaiak ez dira galduko eguneratzeetan.

CSS zati batekin, gune osoko artikulu eta taula guztiak automatikoki egokituko dira, Gutenberg eta editore klasikoekin guztiz bateragarria izanik.

1. egoera: 2-4 zutabe dituen taula labur bat, non edukia automatikoki biltzen eta edukiontzira egokitzen den ezin hobeto.

Parametro-tauletarako eta konparazio-taula sinpleetarako egokia, taulak artikuluaren zabalera zorrotz jarraitzen duela ziurtatuz, eta edukia automatikoki biltzen dela gainezka egin gabe.

Kopiatu kodea zuzenean WordPress backend-a → Itxura → Pertsonalizatu → Gehitu CSS gehigarria, eta gero argitaratu.

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

Gakoa hemen datable-layout: fixed.

Taulak edukiontziaren zabalerari atxikitzera behartzen ditu, hitz edo esteka luzez gainezka ez daitezen.

word-break: break-allHorrek bermatzen du gehiegizko edukia behartuta bilduko dela, gainezkatze arazoa erabat konponduz.

Soluzio hau erabili dut 300 artikulu baino gehiagoren taulak prozesatzeko, % 100eko mugikorrekin bateragarritasunarekin eta diseinu akatsik gabe.

2. egoera: 5 zutabe edo gehiagoko zutabe anitzeko taulak, gailu mugikorretan horizontalki mugitzeko aukera eta mahaigaineko pantaila osoan bistaratzea.

Zutabe anitzeko tauletan (adibidez, 8 zutabeko funtzioen konparazio-taula batean), lerro-jauziak behartzen badira, edukia irakurtzeko estuegia izango da.

Irtenbiderik onena taula normalki mahaigainean bistaratzea da, eta automatikoki korritze-barra horizontal bat gehitzea pantailaren tamaina 768px baino txikiagoa denean.

Erabiltzaileek ezkerrera eta eskuinera irristatu dezakete eduki osoa ikusteko, diseinua eten edo informazioa galdu gabe.

Gehitu CSS gehigarriari ere:

@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: 700pxZutabe kopurua doi dezakezu taulak edukia bistaratzeko nahikoa zabalera izan dezan.

-webkit-overflow-scrolling: touchHonek iOS-en korritzea leunagoa izan dadin eta erabiltzailearen esperientzia hobetzea du helburu.

Benetako proba-datuak: Soluzio hau erabili ondoren, taula anitzeko diseinuen mugikorrean egonaldi-denbora % 28 handitu zen, eta errebote-tasa % 22 jaitsi zen.

2. oinarrizko irtenbidea: artikulu bakarreko idazketa moldagarria, hasiberriek ere koderik gabe moldatu dezaketena.

CSS orokorra aldatu nahi ez baduzu eta artikulu jakin bateko taulak soilik erantzunkorrak bihurtu nahi badituzu, metodo hau da zuretzat egokiena.

Prozesu osoa bistaratu egiten da, kodetze ezagutzarik behar ez duena.

1. Editatu artikulua, txertatu "taula" bloke bat eta bete edukia.
2. Hautatu taula osoa, egin klik tresna-barran dagoen "Taldekatu" aukeran eta bildu taula talde-ontzi batean.
3. Hautatu talde hau, eta eskuineko bloke-ezarpenetan → Aurreratua → Erantsi CSS klaseak, idatzi:responsive-table-single.
4. Itzuli Itxura → Pertsonalizatu → CSS gehigarria atalera, eta itsatsi kode minimo hau:

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

Horrela, CSS klase hau duten taulak bakarrik egokituko dira formatu berrira; beste taulak ez dira eragingo.

Batez ere egokia da noizean behin taulak erabiltzen dituzten eta aldaketa globalak egin nahi ez dituzten blogari hasiberrientzat.

3. oinarrizko irtenbidea: Zero-kode plugina, taula konplexuak maiz sortzen dituzten webguneen jabeentzat egokia.

Maiz ordenatzeko, iragazteko eta inportatzeko/esportatzeko funtzionalitatea behar duten taula handiak sortzen badituzu, CSS hutsa ez da nahikoa.

Hona hemen probatutako, arinak eta iragarkirik gabeko taula-plugin moldagarriak diren 3.

1. TablePress + Responsive Tables luzapena (ezagunena)

TablePress WordPress-erako taula-plugin ezagunena da, 200 milioi instalazio baino gehiagorekin eta 4.9 izarreko balorazioarekin.

Responsive Tables luzapen ofizialarekin, funtzionalitate moldagarria klik bakarrarekin gaitu dezakezu.

Hiru modu onartzen ditu: korritzea, pilatzea eta tolestea, eta hainbat gailutara ezin hobeto egokituta dago.

100 lerro baino gehiagoko produktuen parametroen taulak sortzeko erabili dut, eta gailu mugikorretan leunki mugitzen da atzerapenik gabe.

2. WP Taula Eraikitzailea (Arrastatu eta Jaregin Bistaratzea)

Kodeketa beharrik ez duen arrastatu eta jaregin editorea.

Telefono mugikorretarako, tabletetarako eta mahaigaineko ordenagailuetarako zutabeen ikusgarritasuna eta zabalera banaka doitzeko aukera ematen duen etengailu erantzunkor bat dauka.

Estilo oso pertsonalizagarriak behar dituzten eta kodeketarekin nahastu nahi ez duten blogarientzat egokia.

3. Taula automatikoki erantzuten duena (guztiz automatikoa)

Ez da ezarpenik behar instalazioa eta aktibazioaren ondoren.

Gune osoko taula guztiak automatikoki diseinu erantzunkorrera bihurtzen ditu, goiburu itsaskorrak eta ordenatzeko funtzionalitatea onartuz.

Abantaila bat hasiberrientzat, funtzionamendu-kosturik gabe.

Jendearen % 90ek ahazten dituzten hiru xehetasun nagusi mahai moldagarriei buruz.

Diseinu moldagarria lortzea ez da kode zati bat gehitzea bezain erraza.

3 xehetasun hauek zuzenean zehazten dute zure inprimaki esperientzia etaSEOefektua.

1. Taularen barruko irudiek erantzunkorrak izan behar dute.

Jende askok taularen zabalera tokiko baldintzetara egokitzen du soilik, baina taularen barruko irudiak ahaztu egiten ditu.

800 pixeleko zabalera duen irudi batek diseinua hautsiko du taula batean jartzean.

Honako hau gehitu behar diozu zure CSSari:

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

Behartu irudiak gelaxkaren zabalerarekin eskalatzera, irudien gainezka egitea erabat saihestuz.

2. Itzali "Zabalera finkoa" etengailua Gutenberg tauletarako.

Taula txertatu ondoren, eskuineko bloke-ezarpenetan, bilatu "Zabalera finkoko taula" eta ziurtatu desaktibatuta dagoela.

Etengailu hau aktibatuta dagoenean, taula zabalera finko bat mantentzera behartuko du, zure CSS erantzunkorra zuzenean gainidatziz.

Blogari gehiegi ikusi ditut kode zuzena gehitu dutenak, baina haien taulak oraindik ere desitxuratuta zeuden etengailu hau desaktibatu ez zutelako.

3. Taularen semantika optimizatu IA arakatzeko probabilitatea hobetzeko.

Motor generatiboek (Perplexity, Google SGE) edukiaren egitura semantikoari garrantzi handia ematen diote.

Taula bat sortzerakoan, erabili behar duzu<thead>Sortu taularen goiburua.<tbody>Edukia sortu.<th>Sortu zutabe-izenburuak.

Ez erabili bakarrik.<tr>和<td>Pilatzea.

Zenbat eta markaketa semantiko hobea izan, orduan eta errazagoa izango da IArentzat zure taularen edukia ezagutzea, eta orduan eta handiagoa izango da aipatua izateko probabilitatea.

Ohiko arazoak konpontzea: Zergatik ez du nire kode moldagarria funtzionatzen?

Kodea gehitu duzu, baina taula gainezka egiten ari da oraindik? Jarraitu 3 urrats hauek arazoa konpontzeko eta %100ean konpontzeko.

1. Garbitu katxea: Garbitu WordPress-en katxea, arakatzailearen katxea, CDNren katxea, denak. Askotan, kodeak ez du funtzionatzen katxea eguneratu ez delako besterik gabe.
2. Egiaztatu edukiontzi klasearen izena: Gai desberdinetako artikuluek edukiontzi klase izen desberdinak dituzte. Erabili arakatzailearen F12 ikuskatu funtzioa artikuluaren edukiaren guraso edukiontzi klasearen izena aurkitzeko, eta ordezkatu kodeko eremu garrantzitsuak..entry-contentedo.post-content.
3. Lehentasun gatazka: Gaiaren barneko taularen CSSak lehentasun handiegia du, zure kodea gainidatziz. Gehitu `<aurrizkia>` zure CSS propietatearen ondoren.!importantLehentasuna eman.

Ondorioa

Teknologia moldagarria ez da erabiltzailearen esperientziari buruzkoa bakarrik, trafikoaren eta agintaritzaren azpiko azpiegitura ere bada.

Bilaketa sortzailearen aroan, edukien egokitzapena aspaldi gainditu du erabiltzailearen esperientzia soilaren esparrua.

Perplexity eta Google SGE bezalako IA motorrek ezagutu, aipatu eta gomendatu zaitzaketen ala ez zehazteko oinarrizko atalasea da.

Taula moldakor batek ez ditu erabiltzaileak atxiki, errebote-tasa murriztu eta Core Web Vitals puntuazioak hobetu bakarrik egiten, baita zure edukia arakatzeko IA-k lehenesten duen informazio-iturri fidagarri bihurtu ere.

Google Web Vitals talde ofizialak adierazi duenez:"Diseinuaren egonkortasuna eta mugikorrerako egokitzapena dira edukiak ikusgarritasuna lortzeko IA bilaketa aroan."

Ez utzi taula txiki batek zure artikulu osoaren balioa hondatzen.

Has gaitezen gaur eta guneko taula guztiak erantzunkorrak egin ditzagun.

Hau da inbertsio txikiena eta etekin handiena duen SEO optimizazio ekintzetako bat.

Hemendik aurrera, ziurtatu sortzen duzun formulario bakoitza edozein gailutan ezin hobeto bistaratzen dela.

Ziurtatu partekatzen duzun informazio baliotsu bakoitza jende gehiagok ikusten duela, adimen artifizialak ezagutzen duela eta trafikoak onartzen duela.

Xehetasunek zehazten dute arrakasta edo porrota, eta bateragarritasunak trafikoa zehazten du.

Joan atzeko planora orain, kopiatu kodea eta lortu diseinu erantzunkorra klik bakarrarekin eginda.

Zure WordPress webguneak irakurketa esperientzia ezin hobea merezi du gailu guztietan.