pelrêça gotarê
Yekî nelihevhatîWordPressTablo dikarin rasterast bibin sedema zêdebûna rêjeyên bounce-a mobîl bi rêjeya 37% û dê ji hêla Google SGE ve rasterast wekî naveroka bi kalîteya nizm werin nas kirin.
Ez dikimMalpera WordPressBi salan e, min gelek blogger dîtine ku bi saetan tabloyên berawirdkirinê û tabloyên parametreyan çêdikin, lê dema ku li ser cîhazên mobîl têne temaşekirin, ew bi tevahî xirab dibin.
Yan naverok li hev qelibî ye û bi zelalî nayê dîtin, an jî tablo sêwirana rûpelê xera dikin, û bikarhêner tenê çend caran dihejînin û rûpelê digirin.
Ya girîngtir, motorên hilberîner ên mîna Perplexity û Google SGE niha pêşanî didin naveroka strukturkirî ya ku bi hemî cîhazan re hevaheng e.
Tabloya te bersivê nade, tewra dema ku...AIEw tewra ji bo îqtibas an pêşniyaran jî mafdar nînin.
Niha ez ê hemî çareseriyên adapteyî yên ku min bi dubarekirî piştrast kirine, bi pêvekên sifir û windabûna performansê sifir, an jî pêvekên WordPess, bi we re parve bikim.
Her gav koda rasterast kopîkirî û daneyên ceribandina cîhana rastîn ên piştgirî vedihewîne, ji ber vê yekê hûn dikarin wê tavilê piştî xwendina wê bicîh bînin.
Çima tabloyên xwemalî yên WordPress-ê bi xwezayî ji bo cîhazên mobîl ne guncaw in?
Gelek kes difikirin ku tabloyên ku bi WordPress-ê re têne jixwe bersivkar in.
Ew qet ne wisa ye.
Tabloya xwerû di WordPress Gutenberg de moda sêwirana otomatîk bikar tîne.
Ew li şûna pabendbûna bi sînorê firehiya konteynera gotarê, piştrastkirina temambûna naveroka şaneyê dide pêşiyê.
Ew mîna lixwekirina kincên teng li kesekî qelew e; ne ecêb e ku cil û berg biteqin.
Li gorî daneyên fermî yên Google Web Vitals ji bo sala 2025an, barkirina rûpelên mobîl û aramiya sêwiranê ji sedî 45ê giraniya Core Web Vitals pêk tîne.
Tabloyeke tijî dê rasterast CLS (layout offset) çalak bike, û bibe sedema daketina rêjeya rûpela we.
Min bi xwe ceriband. Di tabloyeke berawirdkirina berheman a 5 stûnî de, bêyî sêwirana bersivdayî, nirxa CLS ya mobîl heta 0.35 bû, ku ji hewcedariya Google ya di bin 0.1 de pir zêdetir bû.
Piştî bicîhanîna sêwirana adapteyî, puana CLS daket 0.03, û puana ezmûna rûpelê ji 58 zêde bû 92.
Ew ne xala herî girîng e.
Motorên hilberîner (wek Perplexity) dema ku naverokê dixwînin, pêşî didin destnîşankirina rûpelên bi avahiyek zelal û bê xeletiyên sêwirandinê.
Eger tabloya te deforme be, AI dê diyar bike ku naverok ne pêbawer e û gotara te derbas dike, rasterast behsa wan rûpelên bi awayekî bêkêmasî hatîye kirin.
Dibe ku hemû naveroka hêja ya ku hûn bi baldarî dinivîsin jî şansê "dîtina" wê ji hêla AI ve nebînin, ji ber vê yekê hûn çawa dikarin li bendê bin ku trafîk û teşhîr hebe?
Çareseriya Sereke 1: Sêwirana CSS ya Cîhanî ya Paqij, Mîhenga Yek-Carî bi Bandora Daîmî (Hilbijartina Top)
Ev çareseriya min a herî pir tê bikaranîn û herî stabîl e. Ew bi tu pêvekan ve girêdayî nîne, û di dema nûvekirinan de mijar winda nabin.
Tenê bi perçeyek CSS-ê, hemû gotar û tabloyên li ser tevahiya malperê dê bixweber werin adaptekirin, bi awayekî bêkêmasî hem bi Gutenberg û hem jî bi edîtorên klasîk re lihevhatî bin.
Senaryoya 1: Tabloyek kurt bi 2-4 stûnan, ku naverok bixweber dipêçe û bi tevahî li konteynerê bicîh dibe.
Ji bo tabloyên parametreyan û tabloyên berawirdkirinê yên hêsan guncaw e, piştrast dike ku tablo bi hişkî li gorî firehiya gotarê dimeşe, û naverok bêyî ku zêde tijî bibe bixweber dipêçe.
Kodê rasterast kopî bikin Piştgiriya WordPress → Xuyabûn → Xwerû bike → CSS-ya zêde lê zêde bike, paşê biweşîne.
.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;
}
Kilîda li vir ev etable-layout: fixed.
Ew tabloyan neçar dike ku bi firehiya konteynerê ve girêdayî bimînin, û nahêle ku ew ji hêla peyv an girêdanên dirêj ve werin barkirin.
word-break: break-allEv yek piştrast dike ku naveroka pir dirêj dê neçar bimîne ku were pêçandin, û pirsgirêka zêdebûnê bi tevahî çareser dike.
Min ev çareserî ji bo pêvajoya tabloyan ji bo zêdetirî 300 gotaran bikar aniye, bi lihevhatina mobîl a %100 û bê xeletiyên sêwirandinê.
Senaryoya 2: Tabloyên pir-stûnî bi 5 an bêtir stûnan, gerandina horizontî li ser cîhazên mobîl, û nîşandana tevahî li ser sermaseyê.
Di tabloyên pir-stûnî de (wek tabloya berawirdkirina fonksiyonên 8-stûnî), heke şikandina rêzan bi zorê were kirin, naverok dê pir teng bibe ku neyê xwendin.
Çareseriya herî baş ew e ku tabloyê bi awayekî normal li ser sermaseyê were nîşandan, û dema ku mezinahiya ekranê ji 768px kêmtir be, bixweber barekî gerok ê horizontî lê zêde bike.
Bikarhêner dikarin ber bi çep û rastê ve bizivirin da ku naveroka tevahî bibînin bêyî ku sêwirana wê xera bikin an agahdariyê winda bikin.
Her weha wê li CSS-ya zêde zêde bike:
@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: 700pxHûn dikarin hejmara stûnan eyar bikin da ku pê ewle bibin ku firehiya tabloyê têra xwe heye ku naverokê nîşan bide.
-webkit-overflow-scrolling: touchEv ji bo ku gerandina li ser iOS-ê nermtir bibe û ezmûna bikarhêner baştir bibe ye.
Daneyên ceribandina rastîn: Piştî karanîna vê çareseriyê, dema mayîna mobîl a nexşeyên pir-maseyî %28 zêde bû, û rêjeya bounceê %22 kêm bû.
Çareseriya Sereke 2: Nivîsandina yek-gotarî ya adapteyî, hetta destpêker jî dikarin bi koda sifir birêve bibin.
Eger hûn nexwazin CSS-ya gerdûnî biguherînin û tenê dixwazin tabloyên di gotarek taybetî de bersivkar bikin, ev rêbaz ji bo we çêtirîn e.
Tevahiya pêvajoyê tê xuyang kirin, ne hewce ye ku zanîna kodkirinê hebe.
- Gotarê biguherîne, blokek "tabloyê" lê zêde bike, û naverokê tijî bike.
- Tevahiya tabloyê hilbijêre, li ser amûran li ser "Group" bikirtîne, û tabloyê di konteynirek komê de bipêçe.
- Vê komê hilbijêre, paşê di mîhengên bloka rastê de → Pêşketî → Dersên CSS-ê ve girêbide, binivîse:
responsive-table-single. - Vegere ser Xuyabûn → Kesanekirin → CSS-ya Zêde, û koda herî kêm a jêrîn bicîh bike:
.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;
}
Bi vî rengî, tenê tabloyên bi vê çîna CSS-ê dê bi formata nû re biguncin; tabloyên din dê bêbandor bimînin.
Ew bi taybetî ji bo bloggerên nû yên ku carinan tabloyan bikar tînin û naxwazin guhertinên gerdûnî bikin guncan e.
Çareseriya Sereke 3: Pêveka koda sifir, ji bo xwediyên malperên ku pir caran tabloyên tevlihev diafirînin guncaw e.
Eger hûn pir caran tabloyên mezin çêbikin ku hewceyê rêzkirin, fîlterkirin, û fonksiyona import/exportê ne, CSS-ya saf têrê nake.
Li vir 3 pêvekên tabloya adapteyî yên ceribandî, sivik û bê reklam hene.
1. Dirêjkirina TablePress + Responsive Tables (ya herî populer)
TablePress pêveka tabloyê ya herî populer a ji bo WordPress-ê ye, bi zêdetirî 200 mîlyon sazkirin û nirxandinek 4.9-stêrk.
Bi dirêjkirina fermî ya Responsive Tabloyên, hûn dikarin fonksiyona adapteyî bi yek klîk çalak bikin.
Ew sê modan piştgirî dike: gerandin, stûkirin, û pêçandin, û bi awayekî bêkêmasî ji bo gelek cîhazan hatiye adaptekirin.
Min ew ji bo çêkirina tabloyên parametreyên hilberê bi zêdetirî 100 rêzan bikar aniye, û ew li ser cîhazên mobîl bêyî ku ti dereng bimîne bi rengek xweş digere.
2. Avakerê Tabloya WP (Vîzualîzasyona Kaşkirin û Berdanê)
Edîtorek kaş û berdanê ku kodkirinê hewce nake.
Ew guhêrbarek bersivdayî ya çêkirî vedihewîne ku dihêle hûn xuyang û firehiya stûnên ji bo telefonên desta, tablet û komputerên sermaseyê bi awayekî ferdî rast bikin.
Ji bo bloggerên ku hewceyê şêwazên pir xwerû ne û naxwazin bi kodkirinê re tevlihev bibin guncan e.
3. Tabloya Bersivdayîna Otomatîk (Bi Tevahî Otomatîk)
Piştî sazkirin û çalakkirinê ti mîhengan ne hewce ne.
Hemû tabloyên li ser tevahiya malperê bi otomatîkî vediguherîne sêwirana bersivdayî, sernivîsên zeliqok û fonksiyona rêzkirinê piştgirî dike.
Ji bo destpêkerên bêkêmasî feydeyek e, bêyî lêçûnên xebitandinê.
Sê hûrguliyên sereke derbarê tabloyên adapteyî de ku %90ê mirovan ji bîr dikin.
Bidestxistina sêwirana adapteyî ne ew qas hêsan e ku meriv perçeyek kodê lê zêde bike.
Ev 3 hûrgulî rasterast ezmûna forma we diyar dikin ûSEOTesîr.
1. Wêneyên di nav tabloyê de divê bersivkar bin.
Gelek kes tenê firehiya maseyê li gorî şert û mercên herêmî diguherînin, lê wêneyên di hundirê maseyê de ji bîr dikin.
Wêneyek ku firehiya wê 800 pixel e dema ku di tabloyekê de were danîn, dê sêwirana wê xera bike.
Pêdivî ye ku hûn jêrîn li CSS-ya xwe zêde bikin:
.entry-content table img {
max-width: 100% !important;
height: auto !important;
}
Wêneyan bi firehiya şaneyê re neçar bike ku pîvan bibin, da ku bi tevahî rê li ber zêdebûna wêneyan bigire.
2. Guhêrbarê "Firehiya Sabît" ji bo tabloyên Gutenberg vemirîne.
Piştî danîna tabloyê, di mîhengên blokê yên li rastê de, "Tabloya firehiya sabît" bibînin û pê ewle bin ku hûn wê vemirînin.
Dema ku ev guhêrbar were vekirin, ew ê tabloyê neçar bike ku firehiyek sabît biparêze, rasterast li ser CSS-a we ya bersivdayî derbas dibe.
Min gelek blogger dîtine ku koda rast lê zêde kirine, lê tabloyên wan hîn jî xirab bûne ji ber ku wan ev guhêrbar negirtiye.
3. Ji bo baştirkirina îhtîmala gerandina AI-ê, semantîka tabloyan baştir bikin.
Motorên hilberîner (Perplexity, Google SGE) girîngiyek mezin didin avahiya semantîkî ya naverokê.
Dema çêkirina tabloyekê divê hûn bikar bînin +<thead>Sernivîsa tabloyê biafirîne.<tbody>Naverokê biafirîne.<th>Sernavên stûnan çêbikin.
Tenê bikar neynin<tr>和<td>Kom kirin.
Çiqas nîşankirina semantîk baştir be, ewqas ji bo AI hêsantir e ku naveroka tabloya we nas bike, û îhtîmala ku ew were îqtibaskirin jî ewqas zêdetir dibe.
Çareserkirina pirsgirêkên hevpar: Çima koda min a adapteyî naxebite?
Kod lê zêde bû, tablo hîn jî tijî ye? Ji bo çareserkirina pirsgirêkê û çareserkirina %100 van 3 gavan bişopînin.
- Keşeya paşve paqij bike: Keşeya WordPress, keşeya gerokê, keşeya CDN û hemûyan paqij bike. Pir caran, kod tenê ji ber ku keş nehatiye nûvekirin naxebite.
- Navê çîna konteynerê kontrol bike: Gotarên li ser mijarên cûda navên çînên konteynerê yên cûda hene. Fonksiyona kontrolkirina F12 ya gerokê bikar bîne da ku navê çîna konteynerê ya dêûbav a naveroka gotarê bibînî, û qadên têkildar di kodê de biguhezîne.
.entry-content或.post-content. - Nakokiya pêşîniyê: Tabloya CSS-ê ya çêkirî ya mijarê xwedî pêşîniya pir zêde ye, û koda we derbas dike. Piştî taybetmendiya CSS-a xwe `<pêşgir>` zêde bikin.
!importantPêşîniyê bide wê.
Xelasî
Teknolojiya adapteyî ne tenê li ser ezmûna bikarhêner e, lê di heman demê de binesaziya bingehîn ji bo trafîk û desthilatdariyê jî ye.
Di serdema lêgerîna afirîner de, adaptebûna naverokê ji qada ezmûna bikarhêner a sade derbas bûye.
Ew nirxa bingehîn e ji bo gelo hûn dikarin ji hêla motorên AI-ê yên wekî Perplexity û Google SGE ve werin nas kirin, îqtibas kirin û pêşniyar kirin.
Tabloyek bi awayekî bêkêmasî adapteyî ne tenê dikare bikarhêneran biparêze, rêjeya bounce kêm bike, û puanên Core Web Vitals baştir bike, lê di heman demê de naveroka we jî bike çavkaniyek agahdariyê ya otorîter ku AI ji bo gerandinê pêşanî dide.
Wekî ku ji hêla tîma fermî ya Google Web Vitals ve hatî destnîşan kirin:"Sîqrara sêwiranê û adaptasyona mobîl bilêtên bingehîn in ji bo ku naverok di serdema lêgerîna AI de xuyang bibe."
Bila tabloyeke biçûk nirxa tevahiya gotara te xera neke.
Werin em îro dest pê bikin û hemî tabloyên li ser malperê bikin bersivkar.
Ev yek ji çalakiyên xweşbîniya SEO ye ku bi veberhênana herî kêm û vegera herî zêde ye.
Ji niha û pê ve, piştrast bikin ku her forma ku hûn diafirînin li ser her cîhazê bi rengek bêkêmasî xuya dike.
Piştrast bike ku her perçeyek agahdariya hêja ya ku tu parve dikî ji hêla bêtir kesan ve tê dîtin, ji hêla AI ve tê nas kirin, û ji hêla trafîkê ve tê pejirandin.
Hûrgulî serkeftin an têkçûnê diyar dikin, û lihevhatin trafîkê diyar dike.
Niha biçe ser backendê, kodê kopî bike, û bi yek klîkekê sêwirana bersivdayî biqedîne.
Malpera we ya WordPress heq dike ku ezmûnek xwendinê ya bêkêmasî li ser hemî cîhazan hebe.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ Gotara "Tabloyên Postê yên WordPress-ê Naguherin? Koda CSS + Çareseriya Plugin" a ku li vir hatî parvekirin dibe ku ji we re bibe alîkar.
Bi xêr hatî bo parvekirina girêdana vê gotarê:https://www.chenweiliang.com/cwl-33986.html