WordPress бичлэгийн хүснэгтүүд хариу өгөхгүй байна уу? CSS код + залгаас шийдлүүд

Дасан зохицох чадваргүй нэгэнWordPressХүснэгтүүд нь гар утасны буцалтын түвшинг 37%-иар өсгөхөд шууд нөлөөлж болох бөгөөд Google SGE нь чанар муутай контент гэж шууд тодорхойлох болно.

我做WordPress вэбсайтОлон жилийн турш би хэтэрхий олон блог хөтлөгчид гайхалтай харьцуулах хүснэгт болон параметрийн хүснэгтүүдийг бүтээхэд олон цаг зарцуулж байгааг харсан бөгөөд гар утасны төхөөрөмж дээр харахад тэдгээрийг бүрэн гажуудуулж байгааг харсан.

Агуулга нь хоорондоо чихэлдэж, тодорхой харагдахгүй байх, эсвэл хүснэгтүүд хуудасны зохион байгуулалтыг эвдэж, хэрэглэгчид хэдхэн удаа шударч хуудсыг хаадаг.

Бүр илүү чухал зүйл бол Perplexity болон Google SGE зэрэг үүсгэгч хөдөлгүүрүүд одоо бүх төхөөрөмжтэй нийцтэй бүтэцлэгдсэн контентыг мөлхөхийг эрэмбэлж байна.

Таны ширээ дасан зохицох чадваргүй, тэр ч байтугай ... үед ч гэсэнAIТэд ишлэл эсвэл зөвлөмж авах эрхгүй.

Одоо би та бүхэнтэй дахин дахин баталгаажуулсан бүх дасан зохицох шийдлүүд, тэг залгаас, тэг гүйцэтгэлийн алдагдалтай, эсвэл WordPess залгаасуудтайгаа хуваалцах гэж байна.

Алхам бүр нь шууд хуулбарлах боломжтой код болон бодит ертөнцийн туршилтын өгөгдлийг агуулдаг тул та үүнийг уншсаны дараа шууд хэрэгжүүлж болно.

WordPress-ийн уугуул хүснэгтүүд яагаад гар утасны төхөөрөмжүүдэд тохиромжгүй байдаг вэ?

Олон хүмүүс WordPress-тэй хамт ирдэг хүснэгтүүд аль хэдийн хариу үйлдэл үзүүлдэг гэж үздэг.

Энэ огт тийм биш.

WordPress Gutenberg дахь анхдагч хүснэгт нь автомат зохион байгуулалтын горимыг ашигладаг.

Энэ нь нийтлэлийн савны өргөний хязгаарыг дагаж мөрдөхийн оронд эсийн агуулгыг бүрэн дүүрэн байлгахыг нэн тэргүүнд тавьдаг.

Энэ нь тарган хүнд бариу костюм өмсүүлэхтэй адил юм; хувцас нь хагарч нээгдэх нь гайхах зүйл биш юм.

2025 оны албан ёсны Google Web Vitals-ийн мэдээллээр гар утасны хуудасны ачаалал болон байршлын тогтвортой байдал нь Core Web Vitals-ийн жингийн 45%-ийг эзэлж байна.

Хүснэгт хэт дүүрсэн тохиолдолд байршлын офсет (CLS) шууд үүсч, хуудасны үнэлгээ огцом буурна.

Би үүнийг өөрөө туршиж үзсэн. 5 баганатай бүтээгдэхүүний харьцуулалтын хүснэгтэд хариу үйлдэл үзүүлдэг дизайнгүйгээр гар утасны CLS утга 0.35 хүртэл өндөр байсан нь Google-ийн 0.1-ээс доош шаардлагаас хамаагүй давсан байв.

Дасан зохицох дизайныг хэрэгжүүлсний дараа CLS оноо 0.03 болж буурч, хуудасны туршлагын оноо 58-аас 92 болж өссөн.

Энэ бол хамгийн чухал цэг биш.

Бүтээлч хөдөлгүүрүүд (Perplexity гэх мэт) нь контентыг мөлхөхдөө тодорхой бүтэцтэй, байршлын алдаагүй хуудсуудыг тодорхойлоход тэргүүлэх ач холбогдол өгдөг.

Хэрэв таны хүснэгт гажигтай бол хиймэл оюун ухаан нь контент найдваргүй гэж тодорхойлж, таны нийтлэлийг алгасаж, төгс тохируулсан хуудсуудыг шууд лавлана.

Таны хичээнгүйлэн бичсэн бүх үнэ цэнэтэй контент хиймэл оюун ухаанаар "харагдах" боломжгүй байж магадгүй тул та хэрхэн хандалт болон сурталчилгааг хүлээж чадах вэ?

Гол шийдэл 1: Цэвэр CSS дэлхийн дасан зохицох дизайн, байнгын эффекттэй нэг удаагийн тохиргоо (Шилдэг сонголт)

Энэ бол миний хамгийн их ашигладаг бөгөөд хамгийн тогтвортой шийдэл юм. Энэ нь ямар ч нэмэлт өргөтгөлөөс хамаардаггүй бөгөөд шинэчлэлтийн явцад загварууд алдагдахгүй.

CSS-ийн багахан хэсэгтэй бол сайтын бүх нийтлэл болон хүснэгтүүд автоматаар дасан зохицож, Гутенберг болон сонгодог редакторуудтай төгс нийцэх болно.

Хувилбар 1: Агуулга нь автоматаар ороож, саванд төгс тохирох 2-4 баганатай богино хүснэгт.

Параметрийн хүснэгт болон энгийн харьцуулалтын хүснэгтүүдэд тохиромжтой бөгөөд хүснэгт нь өгүүллийн өргөнийг чанд дагаж мөрдөж, контент нь халихгүйгээр автоматаар ороогдож байгааг баталгаажуулдаг.

Кодыг шууд хуулж ав WordPress backend → Гадаад төрх → Тохируулах → Нэмэлт CSS нэмээд нийтлэх.

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

Энд гол ньtable-layout: fixed.

Энэ нь хүснэгтүүдийг савны өргөнтэй нийцүүлэн барихыг шаарддаг бөгөөд ингэснээр хүснэгтүүд урт үг эсвэл холбоосоор дарагдахаас сэргийлдэг.

word-break: break-allЭнэ нь хэт урт контентыг шахаж ороох боломжийг олгож, халих асуудлыг бүрэн шийднэ.

Би энэ шийдлийг 300+ нийтлэлийн хүснэгтүүдийг боловсруулахад ашигласан бөгөөд 100% гар утасны нийцтэй байдалтай, зохион байгуулалтын алдаагүй.

Хувилбар 2: 5 ба түүнээс дээш баганатай олон баганатай хүснэгтүүд, гар утасны төхөөрөмж дээр хэвтээ гүйлгэх, ширээний компьютер дээр бүрэн дэлгэцтэй байх.

Олон баганатай хүснэгтүүдэд (жишээлбэл, 8 баганатай функцийн харьцуулалтын хүснэгт) мөр таслахыг албадвал контент нь уншихад хэтэрхий давчуу болно.

Хамгийн сайн шийдэл бол хүснэгтийг десктоп дээр хэвийн харуулах бөгөөд дэлгэцийн хэмжээ 768 пикселээс бага үед хэвтээ гүйлгэх мөрийг автоматаар нэмэх явдал юм.

Хэрэглэгчид бүтцийг нь алдагдуулахгүйгээр эсвэл мэдээллээ алдахгүйгээр бүрэн контентыг үзэхийн тулд зүүн, баруун тийш шударч болно.

Мөн үүнийг нэмэлт 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Хүснэгтэд агуулгыг харуулахад хангалттай өргөн байгаа эсэхийг шалгахын тулд баганын тоог тохируулж болно.

-webkit-overflow-scrolling: touchЭнэ нь iOS дээр гүйлгэхийг илүү жигд болгож, хэрэглэгчийн туршлагыг сайжруулах зорилготой юм.

Бодит туршилтын өгөгдөл: Энэ шийдлийг ашигласны дараа олон хүснэгтийн зохион байгуулалтын гар утасны оршин тогтнох хугацаа 28%-иар нэмэгдэж, буцах хурд 22%-иар буурсан.

Гол шийдэл 2: Дасан зохицох чадвартай ганц өгүүлэл бичих, тэр ч байтугай анхан шатны хүмүүс ч тэг код ашиглан зохицуулж чадна.

Хэрэв та дэлхийн CSS-г өөрчлөхийг хүсэхгүй байгаа бөгөөд зөвхөн тодорхой нийтлэл дэх хүснэгтүүдийг хариу үйлдэл үзүүлэх чадвартай болгохыг хүсвэл энэ арга танд хамгийн тохиромжтой.

Бүх үйл явцыг нүдээр харуулсан тул код бичих мэдлэг шаарддаггүй.

1. Өгүүллийг засварлаж, "хүснэгт" блок оруулж, агуулгыг нь бөглөнө үү.
2. Хүснэгтийг бүхэлд нь сонгоод, хэрэгслийн самбар дээрх "Бүлэглэх" дээр дарж, хүснэгтийг бүлгийн саванд орооно уу.
3. Энэ бүлгийг сонгоод, дараа нь баруун талын блокийн тохиргоо → Дэвшилтэт → CSS ангиудыг хавсаргах хэсэгт дараахыг оруулна уу:responsive-table-single.
4. Гадаад төрх → Тохируулах → Нэмэлт CSS руу буцаж очоод дараах хамгийн бага кодыг хуулж оруулна уу:

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

Ингэснээр зөвхөн энэ CSS класстай хүснэгтүүд л шинэ форматад дасан зохицох бөгөөд бусад хүснэгтүүд өөрчлөгдөхгүй хэвээр байх болно.

Энэ нь ялангуяа хааяа хүснэгт ашигладаг, дэлхийн өөрчлөлт хийхийг хүсдэггүй шинэхэн блог хөтлөгчдөд тохиромжтой.

Гол шийдэл 3: Тэг кодын залгаас, нарийн төвөгтэй хүснэгтүүдийг байнга үүсгэдэг вэбсайт эзэмшигчдэд тохиромжтой.

Хэрэв та эрэмбэлэх, шүүх, импортлох/экспортлох функц шаарддаг том хүснэгтүүдийг байнга үүсгэдэг бол цэвэр CSS хангалтгүй.

Энд 3 туршигдсан, хөнгөн жинтэй, зар сурталчилгаагүй дасан зохицох хүснэгтийн нэмэлтүүд байна.

1. TablePress + Responsive Tables өргөтгөл (хамгийн алдартай)

TablePress бол WordPress-д зориулсан хамгийн алдартай хүснэгтийн залгаас бөгөөд 200 сая гаруй суулгалттай бөгөөд 4.9 одтой үнэлгээтэй.

Албан ёсны Responsive Tables өргөтгөлийн тусламжтайгаар та ганц товшилтоор дасан зохицох функцийг идэвхжүүлж болно.

Энэ нь гүйлгэх, давхарлах, хумих гэсэн гурван горимыг дэмждэг бөгөөд олон төхөөрөмжид төгс зохицсон.

Би үүнийг 100 гаруй мөр бүхий бүтээгдэхүүний параметрийн хүснэгт үүсгэхэд ашигласан бөгөөд энэ нь гар утасны төхөөрөмж дээр ямар ч сааталгүйгээр жигд гүйлгэдэг.

2. WP Хүснэгт Бүтээгч (Чирч буулгах дүрслэл)

Код бичих шаардлагагүй чирж буулгах засварлагч.

Энэ нь гар утас, таблет болон ширээний компьютерт зориулсан баганын харагдах байдал болон өргөнийг тус тусад нь тохируулах боломжийг олгодог суурилуулсан хариу үйлдэл үзүүлдэг унтраалгатай.

Өндөр түвшинд өөрчлөх боломжтой хэв маяг хэрэгтэй бөгөөд код бичихдээ төвөгшөөхийг хүсдэггүй блог хөтлөгчдөд тохиромжтой.

3. Автомат хариу үйлдэл үзүүлдэг хүснэгт (Бүрэн автомат)

Суулгаж, идэвхжүүлсний дараа ямар ч тохиргоо шаардлагагүй.

Сайтын бүх хүснэгтийг автоматаар хариу үйлдэл үзүүлэх дизайн руу хөрвүүлж, наалдамхай толгой болон эрэмбэлэх функцийг дэмждэг.

Үйл ажиллагааны зардалгүй, бүрэн эхлэгчдэд зориулсан давуу тал.

Дасан зохицох хүснэгтүүдийн талаар хүмүүсийн 90% нь үл тоомсорлодог гурван гол мэдээлэл.

Дасан зохицох дизайн хийх нь кодын хэсэг нэмэхтэй адил энгийн зүйл биш юм.

Эдгээр 3 нарийн ширийн зүйл нь таны маягтын туршлагыг шууд тодорхойлдогSEOнөлөө.

1. Хүснэгт доторх зургууд хариу үйлдэл үзүүлэх чадвартай байх ёстой.

Олон хүмүүс ширээний өргөнийг зөвхөн орон нутгийн нөхцөлд тохируулан хийдэг ч ширээн доторх зургуудыг мартдаг.

800 пикселийн өргөнтэй зургийг хүснэгтэд байрлуулахад байршлыг нь эвдэх болно.

Та CSS дээрээ дараах зүйлсийг нэмэх ёстой:

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

Зургийг нүдний өргөнтэй тохируулан масштаблахыг албадаж, зургийн хэт халихаас бүрэн сэргийлнэ.

2. Гутенбергийн хүснэгтүүдийн "Тогтмол өргөн" унтраалгыг унтраа.

Хүснэгтийг оруулсны дараа баруун талд байгаа блокийн тохиргооноос "Тогтмол өргөнтэй хүснэгт"-ийг олоод унтраахаа мартуузай.

Энэ унтраалга асаалттай үед хүснэгтийг тогтмол өргөнийг хадгалах бөгөөд энэ нь таны хариу үйлдэл үзүүлдэг CSS-ийг шууд дарж өөрчлөх болно.

Зөв код нэмсэн ч хүснэгтүүд нь энэ унтраалгыг унтраагаагүй тул гажуудсан хэвээр байгааг би хэтэрхий олон блог хөтлөгч харсан.

3. Хиймэл оюун ухааны мөлхөх магадлалыг сайжруулахын тулд хүснэгтийн семантикийг оновчтой болгох.

Бүтээлч хөдөлгүүрүүд (Perplexity, Google SGE) нь контентын семантик бүтцэд ихээхэн ач холбогдол өгдөг.

Хүснэгт үүсгэхдээ та ашиглах ёстой<thead>Хүснэгтийн толгой хэсгийг үүсгэнэ үү.<tbody>Контент үүсгэх.<th>Баганын гарчиг үүсгэх.

Зүгээр л бүү хэрэглэ<tr>Тэгээд<td>Овоолж овоолох.

Семантик тэмдэглэгээ сайн байх тусам хиймэл оюун ухаан таны хүснэгтийн агуулгыг танихад хялбар бөгөөд иш татах магадлал өндөр болно.

Нийтлэг асуудлуудыг олж засварлах: Миний дасан зохицох код яагаад ажиллахгүй байна вэ?

Код нэмсэн ч хүснэгт дүүрэн хэвээрээ байна уу? Асуудлыг олж засварлахын тулд эдгээр 3 алхамыг дагаж, асуудлыг 100% шийдвэрлээрэй.

1. Кэшийг цэвэрлэх: WordPress кэш, хөтчийн кэш, CDN кэш гэх мэт бүгдийг нь цэвэрлэх. Ихэнхдээ кэш шинэчлэгдээгүй учраас код ажиллахгүй байдаг.
2. Контейнерын ангийн нэрийг шалгана уу: Өөр өөр сэдэвтэй нийтлэлүүд өөр өөр контейнерын ангийн нэртэй байдаг. Хөтчийн F12 шалгах функцийг ашиглан нийтлэлийн агуулгын эцэг контейнерын ангийн нэрийг олж, код дахь холбогдох талбаруудыг солино уу..entry-content或.post-content.
3. Нэн тэргүүний зөрчил: Сэдвийн доторх хүснэгтийн CSS нь хэт өндөр давуу эрхтэй тул таны кодыг дарж байна. CSS шинж чанарынхаа дараа `<prefix>` нэмнэ үү.!importantҮүнийг нэн тэргүүнд тавь.

Дүгнэлт

Дасан зохицох технологи нь зөвхөн хэрэглэгчийн туршлага төдийгүй, мөн урсгал болон эрх мэдлийн үндсэн дэд бүтэц юм.

Бүтээлч хайлтын эрин үед контентын дасан зохицох чадвар нь зөвхөн хэрэглэгчийн туршлагын хүрээнээс аль хэдийн давсан.

Энэ нь таныг Perplexity болон Google SGE зэрэг хиймэл оюун ухааны хөдөлгүүрүүд хүлээн зөвшөөрч, иш татаж, санал болгож чадах эсэхийг тодорхойлох гол босго юм.

Төгс дасан зохицох хүснэгт нь хэрэглэгчдийг хадгалах, буцах түвшинг бууруулах, Core Web Vitals оноог сайжруулахаас гадна таны контентыг хиймэл оюун ухаан мөлхөхөд тэргүүлэх ач холбогдолтой мэдээллийн эх сурвалж болгож чадна.

Албан ёсны Google Web Vitals багийн мэдэгдсэнээр:"Хиймэл оюун ухааны хайлтын эрин үед контентыг харагдахуйц болгох үндсэн түлхүүр нь байршлын тогтвортой байдал болон гар утасны дасан зохицол юм."

Жижиг ширээ таны бүхэл бүтэн нийтлэлийн үнэ цэнийг сүйтгэхийг бүү зөвшөөр.

Өнөөдөр эхэлж, сайтын бүх хүснэгтүүдийг хариу үйлдэл үзүүлдэг болгоё.

Энэ бол хамгийн бага хөрөнгө оруулалт, хамгийн өндөр өгөөжтэй SEO оновчлолын үйлдлүүдийн нэг юм.

Одооноос эхлэн таны үүсгэсэн маягт бүр ямар ч төхөөрөмж дээр төгс харагдаж байгаа эсэхийг шалгаарай.

Таны хуваалцаж буй үнэ цэнэтэй мэдээлэл бүрийг илүү олон хүн харж, хиймэл оюун ухаанаар хүлээн зөвшөөрч, траффик хүлээн авч байгаа эсэхийг шалгаарай.

Дэлгэрэнгүй мэдээлэл нь амжилт эсвэл бүтэлгүйтлийг тодорхойлдог бөгөөд нийцтэй байдал нь урсгалыг тодорхойлдог.

Одоо backend руу очоод, кодыг хуулж аваад, нэг товшилтоор хариу үйлдэл үзүүлдэг дизайн хийгээрэй.

Таны WordPress вэбсайт бүх төхөөрөмж дээр төгс унших туршлагыг хүртэх ёстой.