WordPress yazı cədvəlləri cavab vermir? CSS kodu + plagin həlləri

Uyğunlaşmayan birWordPressCədvəllər mobil sıçrayış nisbətlərinin 37% artmasına birbaşa səbəb ola bilər və Google SGE tərəfindən birbaşa aşağı keyfiyyətli məzmun kimi müəyyən ediləcək.

我做WordPress saytıİllər ərzində çoxlu sayda bloqçunun saatlarla incə müqayisə cədvəlləri və parametr cədvəlləri yaratdığını, lakin mobil cihazlarda göründükdə onların tamamilə təhrif olunduğunu görmüşəm.

Ya məzmun bir-birinə sıxışdırılıb və aydın görünmür, ya da cədvəllər səhifənin düzülüşünü pozur və istifadəçilər sadəcə bir neçə dəfə sürüşdürüb səhifəni bağlayırlar.

Daha da vacibi odur ki, Perplexity və Google SGE kimi generativ mühərriklər artıq bütün cihazlarla uyğun olan strukturlaşdırılmış məzmunu taramaya üstünlük verirlər.

Masanız uyğunlaşa bilmir, hətta...AIOnlar hətta istinad və ya tövsiyə üçün də uyğun deyillər.

İndi sizinlə dəfələrlə yoxladığım, sıfır plagin və sıfır performans itkisi olan bütün adaptiv həlləri və ya WordPess plaginlərini paylaşacağam.

Hər addım birbaşa kopyalana bilən kod və dəstəklənən real dünya test məlumatlarını ehtiva edir, ona görə də onu oxuduqdan dərhal sonra tətbiq edə bilərsiniz.

WordPress-in doğma cədvəlləri niyə mobil cihazlar üçün uyğun deyil?

Bir çox insan WordPress ilə gələn cədvəllərin artıq cavabdeh olduğunu düşünür.

Qətiyyən belə deyil.

WordPress Gutenberg-də standart cədvəl avtomatik düzülüş rejimindən istifadə edir.

Məqalə konteynerinin en həddinə riayət etməkdənsə, hüceyrə məzmununun tam olmasını təmin etməyə üstünlük verir.

Bu, kök bir adama dar kostyum geyindirmək kimidir; paltarların partlaması təəccüblü deyil.

2025-ci il üçün rəsmi Google Web Vitals məlumatlarına görə, mobil səhifələrin yüklənməsi və düzülüş sabitliyi Core Web Vitals-ın çəkisinin 45%-ni təşkil edir.

Daşan cədvəl birbaşa düzən ofsetini (CLS) tetikleyecek və bu da səhifə reytinqinizin kəskin şəkildə aşağı düşməsinə səbəb olacaq.

Mən bunu özüm sınaqdan keçirdim. 5 sütunlu məhsul müqayisə cədvəlində, cavabdeh dizayn olmadan, mobil CLS dəyəri 0.35-ə qədər yüksək idi ki, bu da Google-ın 0.1-dən aşağı tələbini xeyli üstələdi.

Adaptiv dizayn tətbiq edildikdən sonra CLS balı 0.03-ə düşdü və səhifə təcrübəsi balı 58-dən 92-yə yüksəldi.

Ən vacib məqam bu deyil.

Generativ mühərriklər (məsələn, Perplexity) məzmunu tarayarkən aydın strukturlu və düzülüş səhvləri olmayan səhifələrin müəyyən edilməsinə üstünlük verir.

Cədvəliniz deformasiyaya uğrayıbsa, süni intellekt məzmunun etibarsız olduğunu müəyyən edəcək və məqalənizi atlayacaq, birbaşa həmin mükəmməl uyğunlaşdırılmış səhifələrə istinad edəcək.

Səylə yazdığınız bütün dəyərli məzmun süni intellekt tərəfindən "görülmək" şansı qazanmaya bilər, bəs trafik və təsir necə gözləyə bilər?

Əsas Həll 1: Saf CSS Qlobal Adaptiv Dizayn, Daimi Effektli Birdəfəlik Parametr (Ən Yaxşı Seçim)

Bu, mənim ən çox istifadə etdiyim və ən sabit həll yolumdur. Heç bir plagindən asılı deyil və yeniləmələr zamanı mövzular itirilməyəcək.

CSS-dən bir parça ilə bütün saytdakı bütün məqalələr və cədvəllər avtomatik olaraq uyğunlaşacaq və həm Gutenberg, həm də klassik redaktorlarla mükəmməl uyğunlaşacaq.

Ssenari 1: Məzmunun avtomatik olaraq qablaşdırıldığı və konteynerə mükəmməl uyğunlaşdığı 2-4 sütunlu qısa bir cədvəl.

Parametr cədvəlləri və sadə müqayisə cədvəlləri üçün uyğundur, cədvəlin məqalənin eninə ciddi şəkildə əməl etməsini və məzmunun daşmadan avtomatik olaraq bükülməsini təmin edir.

Kodu birbaşa kopyalayın WordPress backend → Görünüş → Fərdiləşdir → Əlavə CSS əlavə edin, sonra dərc edin.

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

Burada əsas məsələ budurtable-layout: fixed.

Bu, cədvəlləri konteyner eninə uyğunlaşdırmağa məcbur edir və uzun sözlər və ya keçidlər tərəfindən yüklənməsinin qarşısını alır.

word-break: break-allBu, həddindən artıq uzun məzmunun məcburi şəkildə yığılmasını təmin edir və bununla da daşma problemini tamamilə həll edir.

Mən bu həll yolundan 300-dən çox məqalə üçün cədvəlləri 100% mobil uyğunluqla və heç bir düzülüş xətası olmadan emal etmək üçün istifadə etmişəm.

Ssenari 2: 5 və ya daha çox sütunlu çoxsütunlu cədvəllər, mobil cihazlarda üfüqi sürüşdürmə və masaüstündə tam ekran.

Çoxsütunlu cədvəllərdə (məsələn, 8 sütunlu funksiya müqayisə cədvəli) sətir fasilələri məcburi olarsa, məzmun oxunmaq üçün çox daralacaq.

Ən yaxşı həll yolu cədvəli masaüstündə normal şəkildə göstərmək və ekran ölçüsü 768 pikseldən az olduqda avtomatik olaraq üfüqi sürüşdürmə zolağı əlavə etməkdir.

İstifadəçilər düzeni pozmadan və ya məlumat itirmədən tam məzmunu görmək üçün sola və sağa sürüşdürə bilərlər.

Əlavə CSS-ə də əlavə edin:

@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: 700pxCədvəlin məzmunu göstərmək üçün kifayət qədər genişliyə malik olduğundan əmin olmaq üçün sütunların sayını tənzimləyə bilərsiniz.

-webkit-overflow-scrolling: touchBu, iOS-da sürüşdürməni daha rahat etmək və istifadəçi təcrübəsini yaxşılaşdırmaq üçündür.

Faktiki test məlumatları: Bu həlldən istifadə etdikdən sonra çoxmasalı düzülüşlərin mobil qalma müddəti 28% artdı və sıçrama nisbəti 22% azaldı.

Əsas Həll 2: Adaptiv tək məqaləli yazı, hətta yeni başlayanlar belə sıfır kodla idarə edə bilərlər.

Qlobal CSS-i dəyişdirmək istəmirsinizsə və yalnız müəyyən bir məqalədəki cədvəlləri cavablandırıcı etmək istəyirsinizsə, bu metod sizin üçün ən uyğundur.

Bütün proses vizual olaraq göstərilir, kodlaşdırma biliyi tələb olunmur.

1. Məqaləni redaktə edin, "cədvəl" bloku əlavə edin və məzmunu doldurun.
2. Bütün cədvəli seçin, alətlər panelindəki "Qrup" düyməsini basın və cədvəli qrup konteynerinə sarın.
3. Bu qrupu seçin, sonra sağdakı blok parametrlərində → Qabaqcıl → CSS Dərslərini Əlavə Edin, daxil edin:responsive-table-single.
4. Görünüş → Fərdiləşdirmə → Əlavə CSS bölməsinə qayıdın və aşağıdakı minimal kodu yapışdırın:

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

Bu şəkildə, yalnız bu CSS sinfinə malik cədvəllər yeni formata uyğunlaşacaq; digər cədvəllər təsirlənməyəcək.

Xüsusilə bəzən cədvəllərdən istifadə edən və qlobal dəyişikliklər etmək istəməyən təcrübəsiz bloqçular üçün uyğundur.

Əsas Həll 3: Sıfır kodlu plagin, tez-tez mürəkkəb cədvəllər yaradan veb sayt sahibləri üçün uyğundur.

Əgər tez-tez çeşidləmə, filtrləmə, idxal/ixrac funksiyaları tələb edən böyük cədvəllər yaradırsınızsa, təmiz CSS kifayət deyil.

Budur 3 sınaqdan keçirilmiş, yüngül və reklamsız adaptiv masa plagini.

1. TablePress + Responsive Tables genişləndirməsi (ən populyar)

TablePress, 200 milyondan çox quraşdırma və 4.9 ulduz reytinqi ilə WordPress üçün ən populyar masa plaginidir.

Rəsmi Responsive Tables uzantısı ilə bir kliklə adaptiv funksionallığı aktivləşdirə bilərsiniz.

Üç rejimi dəstəkləyir: sürüşdürmə, yığma və yığma və birdən çox cihaz üçün mükəmməl uyğunlaşdırılmışdır.

Mən bundan 100-dən çox sətirdən ibarət məhsul parametr cədvəlləri yaratmaq üçün istifadə etmişəm və mobil cihazlarda heç bir gecikmə olmadan rahat şəkildə sürüşdürür.

2. WP Cədvəl Qurucusu (Sürüklə və Burax Vizuallaşdırması)

Kodlaşdırma tələb etməyən sürüklə və burax redaktoru.

Mobil telefonlar, planşetlər və masaüstü kompüterlər üçün sütunların görünürlüyünü və enini fərdi olaraq tənzimləməyə imkan verən daxili cavabdeh bir açara malikdir.

Yüksək dərəcədə özelleştirilebilir üslublara ehtiyacı olan və kodlaşdırma ilə məşğul olmaq istəməyən bloggerlər üçün uyğundur.

3. Avtomatik Cavablandırıcı Cədvəl (Tam Avtomatik)

Quraşdırma və aktivləşdirmədən sonra heç bir parametr tələb olunmur.

Bütün saytdakı bütün cədvəlləri avtomatik olaraq uyğun dizayna çevirir, yapışqan başlıqları və çeşidləmə funksiyasını dəstəkləyir.

Tamamilə yeni başlayanlar üçün sıfır əməliyyat xərcləri ilə bir üstünlük.

Adaptiv masalar haqqında insanların 90%-nin gözardı etdiyi üç əsas detal.

Adaptiv dizayna nail olmaq, kod parçası əlavə etmək qədər asan deyil.

Bu 3 detal birbaşa forma təcrübənizi müəyyən edir vəSEOeffekt.

1. Cədvəldəki şəkillər cavabdeh olmalıdır.

Bir çox insan masanın enini yalnız yerli şəraitə uyğunlaşdırır, lakin masanın içindəki təsvirləri unudur.

800 piksel enində bir şəkil cədvələ yerləşdirildikdə də düzeni pozacaq.

CSS-ə aşağıdakıları əlavə etməlisiniz:

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

Şəkillərin hüceyrə eni ilə miqyaslandırılmasını məcbur edin və bu, şəkil daşmasının tamamilə qarşısını alır.

2. Gutenberg masaları üçün "Sabit Eni" düyməsini söndürün.

Cədvəli daxil etdikdən sonra, sağdakı blok parametrlərində "Sabit enli cədvəl"i tapın və onu söndürdüyünüzdən əmin olun.

Bu açar aktiv olduqda, masanın sabit bir genişliyi saxlamasına məcbur edəcək və birbaşa cavabdeh CSS-inizi ləğv edəcək.

Düzgün kodu əlavə edən çoxlu bloqçu görmüşəm, amma cədvəlləri hələ də təhrif olunmuşdu, çünki bu açarı söndürmədilər.

3. Süni intellektlə işləmə ehtimalını artırmaq üçün cədvəl semantikasını optimallaşdırın.

Generativ mühərriklər (Perplexity, Google SGE) məzmunun semantik quruluşuna böyük diqqət yetirir.

Cədvəl yaratarkən istifadə etməlisiniz<thead>Cədvəl başlığını yaradın.<tbody>Məzmun yaradın.<th>Sütun başlıqları yaradın.

Sadəcə istifadə etməyin<tr>和<td>Yığın yığmaq.

Semantik işarələmə nə qədər yaxşı olarsa, süni intellekt üçün cədvəl məzmununuzu tanımaq bir o qədər asan olar və onun istinad edilmə ehtimalı bir o qədər yüksək olar.

Ümumi problemlərin həlli: Niyə adaptiv kodum işləmir?

Kod əlavə edildi, cədvəl hələ də dolub? Problemi aradan qaldırmaq və 100% həll etmək üçün bu 3 addımı izləyin.

1. Keşi təmizləyin: WordPress keşini, brauzer keşini, CDN keşini və hamısını təmizləyin. Çox vaxt kod sadəcə keş yenilənmədiyi üçün işləmir.
2. Konteyner sinfinin adını yoxlayın: Müxtəlif mövzulardakı məqalələrin fərqli konteyner sinfi adları var. Məqalə məzmununun ana konteyner sinfinin adını tapmaq üçün brauzerin F12 yoxlama funksiyasından istifadə edin və koddakı müvafiq sahələri dəyişdirin..entry-contentVə ya.post-content.
3. Prioritet münaqişəsi: Mövzunun daxili cədvəl CSS-i çox yüksək prioritetə ​​malikdir və bu da kodunuzun üstündən xətt çəkir. CSS xüsusiyyətinizdən sonra `<prefix>` əlavə edin.!importantPrioritetləşdirin.

Nəticə

Adaptiv texnologiya yalnız istifadəçi təcrübəsi ilə deyil, həm də trafik və səlahiyyət üçün əsas infrastrukturla bağlıdır.

Generativ axtarış dövründə məzmuna uyğunlaşma çoxdan sadəcə istifadəçi təcrübəsi çərçivəsindən kənara çıxıb.

Bu, Perplexity və Google SGE kimi süni intellekt mühərrikləri tərəfindən tanınıb-tanınmayacağınız, istinad ediləcəyiniz və tövsiyə oluna biləcəyiniz üçün əsas meyardır.

Mükəmməl uyğunlaşan cədvəl yalnız istifadəçiləri saxlaya, sıçrayış nisbətini azalda və Core Web Vitals ballarını yaxşılaşdıra bilməz, həm də məzmununuzu süni intellekt tərəfindən tarama üçün prioritetləşdirilən etibarlı məlumat mənbəyinə çevirə bilər.

Rəsmi Google Web Vitals komandasının bildirdiyi kimi:"Süni intellekt axtarış dövründə məzmunun görünürlük qazanması üçün əsas şərtlər plan sabitliyi və mobil uyğunlaşmadır."

Kiçik bir masanın bütün məqalənizin dəyərini pozmasına imkan verməyin.

Gəlin bu gün başlayaq və saytdakı bütün cədvəlləri responsiv edək.

Bu, ən aşağı investisiya və ən yüksək gəlir gətirən SEO optimallaşdırma hərəkətlərindən biridir.

Bundan sonra yaratdığınız hər formanın istənilən cihazda mükəmməl şəkildə göstərildiyinə əmin olun.

Paylaşdığınız hər bir dəyərli məlumatın daha çox insan tərəfindən görüldüyünə, süni intellekt tərəfindən tanındığına və trafik tərəfindən mənimsənildiyinə əmin olun.

Təfərrüatlar uğuru və ya uğursuzluğu, uyğunluq isə trafiki müəyyən edir.

İndi arxa plana keçin, kodu kopyalayın və bir kliklə cavabdeh dizayn hazırlayın.

WordPress veb saytınız bütün cihazlarda mükəmməl oxu təcrübəsinə layiqdir.