WordPress gönderi tabloları duyarlı değil mi? CSS kodu + eklenti çözümleri

uyum sağlayamayan birWordPressTablolar, mobil cihazlarda hemen çıkma oranlarının %37 oranında artmasına doğrudan neden olabilir ve Google SGE tarafından doğrudan düşük kaliteli içerik olarak tanımlanacaktır.

我做WordPress web sitesiYıllar içinde, birçok blog yazarının saatlerce emek harcayarak mükemmel karşılaştırma tabloları ve parametre tabloları oluşturduğunu, ancak bunların mobil cihazlarda görüntülendiğinde tamamen bozulduğunu gördüm.

Ya içerik çok sıkışık ve net bir şekilde görülemiyor, ya da tablolar sayfa düzenini bozuyor ve kullanıcılar birkaç kez kaydırıp sayfayı kapatıyor.

Daha da önemlisi, Perplexity ve Google SGE gibi üretken arama motorları artık tüm cihazlarla uyumlu yapılandırılmış içeriği taramaya öncelik veriyor.

Tablonuz, şu durumlarda bile uyarlanabilir değil...AIOnlar ne övgüye ne de tavsiyeye layık görülüyorlar.

Şimdi sizlerle, hiçbir eklenti veya performans kaybı olmadan, hatta WordPress eklentileri kullanmadan defalarca doğruladığım uyarlanabilir çözümleri paylaşacağım.

Her adım, doğrudan kopyalanabilir kod ve destekleyici gerçek dünya test verileri içerir, böylece okuduktan hemen sonra uygulayabilirsiniz.

WordPress'in yerleşik tabloları neden mobil cihazlar için doğal olarak uygun değildir?

Birçok kişi WordPress ile birlikte gelen tabloların zaten duyarlı (responsive) olduğunu varsayıyor.

Durum hiç de öyle değil.

WordPress Gutenberg'deki varsayılan tablo, otomatik düzen modunu kullanır.

Makale kapsayıcısının genişlik sınırına uymaktan ziyade, hücre içeriğinin eksiksiz olmasını sağlamaya öncelik verir.

Bu, şişman birine dar bir takım elbise giydirmeye benziyor; kıyafetlerin patlaması hiç de şaşırtıcı değil.

Google'ın 2025 yılına ait resmi Web Vitals verilerine göre, mobil sayfa yükleme hızı ve düzen istikrarı, Temel Web Vitals'ın ağırlığının %45'ini oluşturuyor.

Tablonun taşması doğrudan bir düzen kaymasına (CLS) neden olur ve bu da sayfa puanınızın düşmesine yol açar.

Kendim test ettim. Duyarlı tasarım olmadan, 5 sütunlu bir ürün karşılaştırma tablosunda, mobil CLS değeri 0.35 gibi yüksek bir değere ulaştı; bu da Google'ın 0.1'in altında olması gereken şartını çok aşıyor.

Uyarlanabilir tasarımın uygulanmasının ardından CLS puanı 0.03'e düştü ve sayfa deneyimi puanı 58'den 92'ye yükseldi.

En önemli nokta bu değil.

Üretken arama motorları (Perplexity gibi), içerik tararken net yapıya sahip ve düzen hatası içermeyen sayfaları belirlemeye öncelik verir.

Tablonuz bozuksa, yapay zeka içeriğin güvenilmez olduğunu belirleyecek ve makalenizi atlayarak doğrudan mükemmel şekilde uyarlanmış sayfalara yönlendirme yapacaktır.

Özenle yazdığınız tüm değerli içerikler yapay zeka tarafından "görülme" şansı bile bulamayabilir, bu durumda nasıl trafik ve görünürlük bekleyebilirsiniz?

Temel Çözüm 1: Saf CSS ile Küresel Uyarlanabilir Tasarım, Kalıcı Etkili Tek Seferlik Ayar (En İyi Seçenek)

Bu, en sık kullandığım ve en istikrarlı çözümüm. Herhangi bir eklentiye bağlı değil ve güncellemeler sırasında temalar kaybolmuyor.

Tek bir CSS koduyla, sitenin tamamındaki tüm makaleler ve tablolar otomatik olarak uyarlanacak ve hem Gutenberg hem de klasik editörlerle mükemmel bir uyum sağlayacaktır.

Senaryo 1: İçeriğin otomatik olarak satır sonuna geldiği ve konteynere mükemmel şekilde sığdığı, 2-4 sütunlu kısa bir tablo.

Parametre tabloları ve basit karşılaştırma tabloları için uygundur; tablonun makalenin genişliğine tam olarak uymasını ve içeriğin taşma olmadan otomatik olarak satır sonuna geçmesini sağlar.

Kodu doğrudan kopyalayın WordPress arka ucu → Görünüm → Özelleştir → Ek CSS ekleyin ve yayınlayın.

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

Buradaki kilit nokta şudur:table-layout: fixed.

Bu özellik, tabloların kapsayıcı genişliğine uymasını sağlayarak, uzun kelimeler veya bağlantılar nedeniyle aşırı kalabalıklaşmasını önler.

word-break: break-allBu sayede aşırı uzun içeriklerin satır sonuna kadar sarılması sağlanarak taşma sorunu tamamen çözülmüş olur.

Bu çözümü kullanarak 300'den fazla makale için tabloları işledim ve %100 mobil uyumluluk ve hiçbir düzen hatası elde etmedim.

Senaryo 2: 5 veya daha fazla sütunlu çok sütunlu tablolar, mobil cihazlarda yatay kaydırma ve masaüstünde tam ekran görüntüleme.

Çok sütunlu tablolarda (örneğin 8 sütunlu bir fonksiyon karşılaştırma tablosunda), satır sonları zorunlu hale getirilirse, içerik okunamayacak kadar sıkışık hale gelir.

En iyi çözüm, tabloyu masaüstünde normal şekilde görüntülemek ve ekran boyutu 768 pikselden küçük olduğunda otomatik olarak yatay kaydırma çubuğu eklemektir.

Kullanıcılar, düzeni bozmadan veya bilgi kaybetmeden içeriğin tamamını görüntülemek için sola ve sağa kaydırabilirler.

Ayrıca bunu ek CSS'ye de ekleyin:

@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: 700pxTablonun içeriği görüntülemek için yeterli genişliğe sahip olmasını sağlamak amacıyla sütun sayısını ayarlayabilirsiniz.

-webkit-overflow-scrolling: touchBu, iOS'ta kaydırma işlemini daha akıcı hale getirmek ve kullanıcı deneyimini iyileştirmek içindir.

Gerçek test verileri: Bu çözümün kullanılmasının ardından, çoklu tablo düzenlerinin mobil cihazlarda kalma süresi %28 arttı ve hemen çıkma oranı %22 azaldı.

Temel Çözüm 2: Uyarlanabilir tek makale yazımı, yeni başlayanlar bile sıfır kodla yönetebilir.

Eğer genel CSS'i değiştirmek istemiyor ve sadece belirli bir makaledeki tabloları duyarlı hale getirmek istiyorsanız, bu yöntem sizin için en uygunudur.

Tüm süreç görselleştirilmiştir ve kodlama bilgisi gerektirmez.

1. Makaleyi düzenleyin, bir "tablo" bloğu ekleyin ve içeriğini doldurun.
2. Tablonun tamamını seçin, araç çubuğundaki "Gruplandır" seçeneğine tıklayın ve tabloyu bir grup kapsayıcısı içine yerleştirin.
3. Bu grubu seçin, ardından sağ taraftaki blok ayarları → Gelişmiş → CSS Sınıfları Ekle bölümüne şunu girin:responsive-table-single.
4. Görünüm → Özelleştir → Ek CSS bölümüne geri dönün ve aşağıdaki minimal kodu yapıştı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 sayede, yalnızca bu CSS sınıfına sahip tablolar yeni biçime uyum sağlayacak; diğer tablolar etkilenmeden kalacaktır.

Özellikle ara sıra tablo kullanan ve genel değişiklikler yapmak istemeyen acemi blog yazarları için uygundur.

Temel Çözüm 3: Sık sık karmaşık tablolar oluşturan web sitesi sahipleri için uygun, sıfır kodlu eklenti.

Sık sık sıralama, filtreleme, içe/dışa aktarma işlevleri gerektiren büyük tablolar oluşturuyorsanız, saf CSS yetersiz kalır.

İşte test edilmiş, hafif ve reklamsız 3 adet uyarlanabilir tablo eklentisi.

1. TablePress + Duyarlı Tablolar eklentisi (en popüler)

TablePress, 200 milyondan fazla kurulumu ve 4.9 yıldızlık derecelendirmesiyle WordPress için en popüler tablo eklentisidir.

Resmi Responsive Tables eklentisi ile tek bir tıklamayla uyarlanabilir işlevselliği etkinleştirebilirsiniz.

Kaydırma, üst üste bindirme ve daraltma olmak üzere üç modu destekler ve birçok cihaza mükemmel şekilde uyarlanmıştır.

Bu aracı kullanarak 100'den fazla satırdan oluşan ürün parametre tabloları oluşturdum ve mobil cihazlarda herhangi bir gecikme olmadan sorunsuz bir şekilde kaydırılıyor.

2. WP Table Builder (Sürükle ve Bırak Görselleştirme)

Kodlama gerektirmeyen, sürükle ve bırak özellikli bir editör.

Dahili duyarlı bir anahtara sahiptir; bu sayede cep telefonları, tabletler ve masaüstü bilgisayarlar için sütunların görünürlüğünü ve genişliğini ayrı ayrı ayarlayabilirsiniz.

Yüksek düzeyde özelleştirilebilir stillere ihtiyaç duyan ve kodlamayla uğraşmak istemeyen blog yazarları için uygundur.

3. Otomatik Yanıt Veren Tablo (Tam Otomatik)

Kurulum ve aktivasyon sonrasında herhangi bir ayar yapılması gerekmez.

Sitenin tamamındaki tüm tabloları otomatik olarak duyarlı tasarıma dönüştürür; sabit başlıklar ve sıralama işlevini destekler.

Sıfır işletme maliyetiyle, tamamen yeni başlayanlar için büyük bir avantaj.

Uyarlanabilir masalarla ilgili insanların %90'ının gözden kaçırdığı üç önemli ayrıntı.

Uyarlanabilir tasarım elde etmek, sadece bir kod parçası eklemek kadar basit değildir.

Bu 3 ayrıntı, form deneyiminizi doğrudan belirler veSEOetki.

1. Tablodaki görseller duyarlı (responsive) olmalıdır.

Birçok kişi tablo genişliğini yalnızca yerel koşullara göre ayarlar, ancak tablonun içindeki görselleri göz ardı eder.

800 piksel genişliğindeki bir resim, tabloya yerleştirildiğinde yine de düzeni bozacaktır.

Aşağıdakileri CSS dosyanıza eklemeniz gerekiyor:

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

Görüntülerin hücre genişliğiyle orantılı olarak ölçeklenmesini sağlayarak, görüntü taşmasını tamamen önleyin.

2. Gutenberg tabloları için "Sabit Genişlik" anahtarını kapatın.

Tabloyu ekledikten sonra, sağdaki blok ayarlarında "Sabit genişlikli tablo" seçeneğini bulun ve mutlaka kapatın.

Bu anahtar açıldığında, tablonun sabit bir genişlikte kalmasını sağlayacak ve duyarlı CSS kodunuzu doğrudan geçersiz kılacaktır.

Doğru kodu ekleyen ancak bu ayarı kapatmadıkları için tabloları hala bozuk olan çok sayıda blog yazarı gördüm.

3. Yapay zekanın tarama olasılığını artırmak için tablo semantiğini optimize edin.

Üretken arama motorları (Perplexity, Google SGE) içeriğin anlamsal yapısına büyük önem verir.

Tablo oluştururken şunları kullanmalısınız:<thead>Tablo başlığını oluşturun.<tbody>İçerik oluşturun.<th>Sütun başlıkları oluşturun.

Sadece kullanmayın<tr>和<td>Birikmek.

Semantik işaretleme ne kadar iyi olursa, yapay zekanın tablo içeriğinizi tanıması o kadar kolay olur ve alıntılanma olasılığı o kadar yüksek olur.

Sık karşılaşılan sorunların giderilmesi: Uyarlanabilir kodum neden çalışmıyor?

Eklenen koda rağmen tablo hala taşma sorunu mu yaşıyor? Sorunu %100 çözmek için şu 3 adımı izleyin.

1. Önbelleği temizleyin: WordPress önbelleğini, tarayıcı önbelleğini, CDN önbelleğini, hepsini temizleyin. Çoğu zaman, kodun çalışmamasının nedeni önbelleğin güncellenmemiş olmasıdır.
2. Kapsayıcı sınıf adını kontrol edin: Farklı temalardaki makalelerin farklı kapsayıcı sınıf adları vardır. Makale içeriğinin üst kapsayıcı sınıf adını bulmak için tarayıcının F12 inceleme işlevini kullanın ve koddaki ilgili alanları değiştirin..entry-content或.post-content.
3. Öncelik çakışması: Temanın yerleşik tablo CSS'si çok yüksek önceliğe sahip ve kodunuzu geçersiz kılıyor. CSS özelliğinizin sonuna `<prefix>` ekleyin.!importantÖncelik verin.

Sonuç

Uyarlanabilir teknoloji sadece kullanıcı deneyimiyle ilgili değil, aynı zamanda trafik ve yetkilendirme için altta yatan altyapıyla da ilgilidir.

Üretken arama çağında, içerik uyarlanabilirliği uzun zamandır salt kullanıcı deneyiminin ötesine geçmiştir.

Bu, Perplexity ve Google SGE gibi yapay zeka motorları tarafından tanınmanız, alıntılanmanız ve önerilmeniz için gereken temel eşiktir.

Mükemmel şekilde uyarlanabilir bir tablo, yalnızca kullanıcıları elde tutmak, hemen çıkma oranını düşürmek ve Temel Web Önemli Performans Puanlarını iyileştirmekle kalmaz, aynı zamanda içeriğinizi yapay zekanın tarama için önceliklendirdiği yetkili bir bilgi kaynağı haline getirir.

Google Web Vitals resmi ekibinin belirttiği gibi:"Yapay zekâ destekli arama çağında içeriğin görünürlük kazanmasının temel şartları, düzen istikrarı ve mobil uyumluluktur."

Küçük bir tablonun tüm makalenizin değerini düşürmesine izin vermeyin.

Bugün başlayalım ve sitedeki tüm tabloları duyarlı (responsive) hale getirelim.

Bu, en düşük yatırım maliyeti ve en yüksek getiri sağlayan SEO optimizasyon işlemlerinden biridir.

Bundan böyle oluşturduğunuz her formun herhangi bir cihazda kusursuz şekilde görüntülendiğinden emin olun.

Paylaştığınız her değerli bilginin daha fazla kişi tarafından görülmesini, yapay zeka tarafından tanınmasını ve trafik tarafından benimsenmesini sağlayın.

Ayrıntılar başarıyı veya başarısızlığı belirler ve uyumluluk trafiği belirler.

Şimdi arka plana gidin, kodu kopyalayın ve tek tıklamayla duyarlı tasarımı tamamlayın.

WordPress web siteniz, tüm cihazlarda kusursuz bir okuma deneyimini hak ediyor.