WordPress Yazılara Tablo Ekleme Nasıl Yapılır?

WordPress altyapısını kullanarak oluşturduğunuz sitenize yazı hazırlarken bazı içerikleri tablo halinde göstermeniz gerekebilir. Biraz HTML bilgisi tablo oluşturmak için yeterli olabilir. Yazımda bahsedeceğim eklenti sayesinde buna dahi gerek kalmadan çok daha kolay ve hızlı bir şekilde tablolar oluşturabilirsiniz. MCE Table Buttons isimli eklentiyle wordpress yazı editörü olan TinyMCE araç çubuğuna tablo (table) oluşturmak için gereken butonu kolaylıkla ekleyebilirsiniz.

WordPress Yazısına Tablo (Table) Nasıl Eklenir?

Eklentiyi sitesinden indirerek veya WordPress yönetim panelinden Eklentiler – Yeni Ekle menüsünü izleyip MCE Table Buttons şeklinde aratarak yükleyin. Etkinleştirdikten sonra yazı ekleme bölümünü açın.

Araç çubuğunu göster/gizle butonuna tıkladığınızda açılan araç çubuğuna yeni eklenen Tablo butonunu göreceksiniz.

Tablo butonuna tıklayın Tablo ekle menüsünden istediğiniz satır ve sütunda tablolar oluşturabilirsiniz. Oluşturduğunuz tabloyu kenarından tutup sürükleyerek istediğiniz boyuta getirin.

Başlık Satırı Olan Tablolar Oluşturmak

Her tabloda bir başlık bölümü olması gerekmese de genellikle tabloların ilk satırlarında ait olduğu sütuna göre başlıkların olmasını isteriz. Bunu yapabilmek için

• Öncelikle istediğiniz satır ve sütun sayısında tablonuzu oluşturup boyutunu belirleyin.
• İlk satır seçiliyken Tablo butonuna tıklayın Satır – Tablo satırı özellikleri tıklayın. Satır tipi olarak Başlık seçip Tamam butonuna tıklayın.
• İlk satırdaki ilk hücreyi seçerek  Tablo butonuna tıklayın Hücre – Tablo hücresi özellikleri tıklayın. Hücre tipi’ni Başlık hücresi olarak belirleyin. Bu işlemi ilk satırdaki diğer hücreler için tekrarlayın.
• Aşağıda benim oluşturduğum tabloda göreceğiniz üzere, Başlık satırı ve hücresi olarak belirlenen bölümdeki yazılar diğer satırlardan farklı olarak kalın ve ortalanmış şekilde gösterilir.

Tablo Biçimlendirme İşlemi

Çoğu temanın tablolar için biçimlendirme özelliği bulunur. Kullandığınız temada tablolar için bir biçimlendirme özelliği eklenmemişse veya farklı bir şekilde biçimlendirmek isterseniz, temanızın style.css dosyasında düzenleme yapmanız gerekir. Örnek olması açısından tablo renklerinde ve başlık bölümü özelliklerinde bir kaç ufak değişiklik yapalım.

Farklı renkte satırlar oluşturmak için şu aşağıdaki kodu kullanın. Bu kodda yer alan 2n bölümüyle ikinci satırdan başlayarak arada bir boşluk olmak üzere farklı bir renk belirleyebilirsiniz. Bu şekilde tablonun okunması daha kolay olacaktır.

 tbody tr:nth-of-type(2n) {background-color: #F1F0FF;}

Başlık bölümünde değişiklik yapmak için aşağıdaki gibi bir kod ekleyebilirsiniz.

 th {background-color:#B0AAFF;color:#fff;font-weight:bold;}

İlk satırdaki yazıları bold yapmak için şu kodu kullanın.

tbody tr td:nth-of-type(1) {font-weight: bold;}

Tabloyu Mobil Cihazlar için Biçimlendirin

Tablonuzun mobil için uyumlu olması için aşağıdaki gibi bir kod kullanabilirsiniz.

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #F1F0FF; font-size:1.3em; font-weight:bold;}
tbody td { text-align:center; display: block;}
tbody td:before { 
    content: attr(data-th); 
    text-align:center; 
    display: block;
  }
}