WordPress'te Türkçe karakter problemi ve çözümü

Bu sıralar Türkçe ile devletin bile arası açık ama teknoloji evvelden beridir dilimizle pek anlaşamıyor. Hatırlayın daha birkaç sene önceye kadar Türkçe karakterleri kullanarak sms atamıyor, atsak da fahiş sms ücretleri ödüyorduk. Durumu düzeltmek ancak yasal bir yönetmelik ile mümkün olmuştu. Aslında WordPress için de bir tane çıkarılsaydı fena olmayacaktı çünkü orada da sıkıntı var. Bilenler Kabilesi, bundan muzdarip sitelerden biri.

Sitenin ilk gününden beri Stork temasını kullanıyorum. Malesef “ü, ç, ş, ı, ö, ğ” gibi Türkçe karakterlerle sorun yaşıyorum. Uzun süre gözardı ettim, düzeltmeye üşendim. Ama benzer bir problemi sitenin ikinci versiyonu için seçtiğim temada da yaşayınca işten daha fazla kaçamadım. Fırsattan istifade bu esnada yeni bir yazı da hazırladım ve Türkçe karakter sorunu başta olmak üzere diğer font problemlerinin nasıl çözüleceğini anlattım. Başınızda böyle bir dert varsa, şifa gibi geleceğine eminim.

WordPress’te Türkçe karakter problemi nasıl çözülür?

WordPress temalarını hazır olarak satın alıp kullanan biriyseniz, temanızın font seçimini tema geliştiricisine bırakmışsınız demektir. Tema geliştiricisi ise font seçiminde dizayn ve görünüme dikkat etmiştir, çünkü parayı vermenizin sebebi odur. Nihayetinde güzel göründüğü için Türkçe karakterlerin olmadığı bir font seti kullanılmış olabilir. Malesef bu durumu süslü demo sayfalarında önceden göremezsiniz, çünkü genellikle İngilizce’dir.

Bazen de kullanılan font aslında Türkçe karakterleri destekler ama geliştiricisi, Türkçe karakterleri içeren karakter setini eklemeyi unutur. Her iki durumda da sonuç bozuk Türkçe karakterler olur. Eğer başınızda karakter problemi varsa sebep %99.99 budur.

Sorunun çözümü basit ama, değişik temalarda değişik şekilde uygulanması gerekiyor. Mesela bazı temalarda gelişmiş font ayarları sekmesi var. Karakter seti seçeneklerden hemen eklenebiliyor. Bazısında ise fontları değiştirmek için basit bir ayar bile bulunmuyor.

Bu yüzden tüm olasılıkları kapsamak adına Bilenler Kabilesi’ni özel olarak seçtiğim 3 ayrı temaya yükledim ve 3 farklı özellik gösteren tema’da konunun farklı detaylarını anlattım. Herbiri birbirini tamamladığından 3 örneğe de bakmanızı öneririm. İşte farklı temalarda yaşanan Türkçe karakter problemi ve çözümleri;

000088-02-01

Fotoğrafta Schema teması üzerinde Bilenler Kabilesi görünüyor. Başlıktan hemen farketmişsinizdir, Türkçe karakter problemi var. “ş,ğ,İ” kullanılan font ile gösterilememiş, yerine başka bir font kullanılarak temsil edilmiş. Sıkça rastlanan bir durum. Yazı metninde de aynı sorun var ama daha az belirgin.

000088-02-02-mythemeshop-theme-typography

Böyle bir problem yaşadığımızda öncelikle temanın ayarlar paneline bakıyoruz. Schema nispeten yeni bir tema olduğundan her türlü font ayarını yapabileceğimiz “Theme Typography” bölümü var. Eğer yeni bir tema kullanıyorsanız sizde de benzer bir bölüm olacaktır.

000088-02-03

Bu ayarlardan en önemlisi “Character sets”. Alfabemize özgü karakterler “Latin Extented (latin-ext)” gurubunda yer alıyor. Şu anda karakter seti kapalı. O yüzden yazı tipi desteklese dahi ziyaretçilerimiz Türkçe karakterleri sorunlu görüyor.

000088-02-04-wordpress-temasina-turkce-karakter-destegi-ekleme

Biz seçeneği açıp ayarları kaydediyoruz.

000088-02-05

Sayfamızı yeniden yüklüyoruz. Başlık kısmı hemen düzeliyor. Fakat içerik kısmındaki ş,ğ gibi karakterler halen bozuk. Demekki içerik için kullanılan yazı tipinin Türk alfabesindeki özel karakterlere desteği bulunmuyor. Bu durumda yapabileceğimiz iki şey var.

000088-02-06

Birincisi, eğer tema opsiyonları izin veriyorsa yedek fontu seçmek. Scheme temasında bu özellik “Backup font” adıyla bulunuyor.

Siz yedek font seçtiğinizde, tarayıcı eğer ana fontta uygun karakteri bulamazsa, yedek fontu kullanıyor. Eğer birincil fonta yakın bir fontu ikincil font olarak belirlerseniz az sayıdaki ş,ğ,ç,ü,ö,ı gibi karakterlerin farklı fontta olması, yazı içinde pek de göze batmıyor.

Mesela “Verdana,Geneva, sans-serif” grubunu seçip kaydedelim ve blog sayfasını açalım.

000088-02-07

Artık yazının içindeki ş,i,ğ gibi karakterler tarayıcının belirlediği herhangi bir fontta değil, bizim seçtiğimiz ikincil fontta yani verdana olarak gösteriliyor. Dikkat ederseniz durum eskisinden çok daha iyi ve kullanılabilir durumda. Fakat halen kusursuz değil.

000088-02-08-wordpress-font-degistirme

Eğer kusursuz bir görünüm istiyorsanız, yapmanız gereken sorun çıkaran fontu Türkçe destekli font ile değiştirmek. Çoğu tema Google Fonts ‘u destekler ve 600’den fazla font arasından seçim yapabilmenize izin verir. Kolayca alternatif bulmak pek de zor değildir.

000088-02-09

Mesela ben “Open Sans” seçip ilerliyorum.

000088-02-10

Yazı tamamen kusursuz bir şekilde temsil edilmeye başlanıyor. Problem ortadan kalkıyor.

Tabi ben burada sadece içerikte kullanılan yazı tipini değiştirdim. Siz diğer tüm yazı tiplerini kontrol edip Türkçe problem yaşadığınız tüm fontları değiştirmelisiniz. Genelde her blogda 3-5 font kullanıldığından çok uzun sürmeyecektir.

000088-03-01

Sensational teması ilk örnekte kullandığımız Schema’dan daha eski bir tema. Aynı sorun burada da var. Başlıktaki ş,Ğ,İ karakterleri farklı fontla gösteriliyor. Yazı metninde de sorun var ama daha az dikkat çekiyor.

000088-03-02-mythemeshop-google-typography

Bu tür sorunun iki sebebi olabilir. Birincisi font’un Türkçe desteği yoktur, ikincisi destek vardır ama Türkçe karakter seti eklenmemiştir. İlkinde fontu değiştirmek, ikincisinde karakter desteğini eklemek gerekir.

Gözümüz önce karakter setinde olmalı. Çünkü temanın tasarlanmış havasını değiştirmeden en güzel sonuca bu şekilde ulaşıyoruz. Bu nedenle karakter desteği eklemek ümidiyle tema ayarlarına giriyoruz. “Google Typography” adında font ayarlarını yapabileceğimiz bir bölüm buluyoruz. Anlıyoruz ki tema Google Fonts servisini kullanıyor. Fakat font ayarlarına Örnek 1’de olduğu kadar yüksek kapasiteli bir müdahale şansı vermiyor. Sadece fontu değiştirebiliyoruz ama fonta karakter seti ekleyemiyoruz.

Biz yine de hemen fontu değiştirmek yerine öncelikle buradan kullanılan font isimlerini öğrenelim; “Bree Serif” ve “Open Sans”

000088-03-03-google-fonts-turkce-yazi-tipi-kontrolu

Sonra da Google Fonts sayfasına girerek ve fontların Türkçe desteğini test edelim.

Her iki fontun da Türkçe karakterleri Google Fonts üzerinde güzelce gösterdiğini görüyoruz. Demek ki fontun Türkçe desteği var. Fontu değiştirmeye gerek yok. Eksik olan temamıza karakter setini eklemeliyiz.

000088-03-04

Bunun için blog sayfamızı açalım. (admin panelini değil, ziyaretçi bölümünü) Klavyemizden Ctrl ve U tuşlarına eşzamanlı olarak basalım.

Sayfanın kaynağı, yani sayfayı oluşturan kodlar görüntülenecektir. Burada Ctrl+F ile “fonts.googleapis.com” metnini aratalım. Bulduğumuz satırları komple kopyalayalım.

000088-03-05

Admin paneline geçelim ve Görünüm->Düzenleyici menüsünü takip edelim.

000088-03-06

Sağ kısımdaki Şablonlar bölümünden, “Üst Kısım: header.php” linkine tıklayalım. Açılan sayfadaki head tagının hemen önüne kopyaladığımız satırı yapıştıralım.

000088-03-07

Bu satır, Google fontunu sitenize eklemeye yarayan koddu. Zaten temanız eklemişti. Bizim amacımız kodu biraz değiştirerek latin-ext desteğini de dahil etmek. Bunun için URL adresinin sonuna “&subset=latin-ext” metnini ekleyelim. Sonra “Değişiklikleri Kaydet” butonuna tıklayarak sayfayı kapatalım.

000088-03-08

Blogu açıp kontrol ettiğimizde sonuç olumlu olacaktır.

000088-04-01-wordpress-stork-temasi-turkce-karakter-problemi

Sırada en basit temamız Stork var. Problemler sayfa içinde de rahatsız edici boyutta göze çarpıyor.

000088-04-02

Acaba bu durumu düzeltmek için font ayarları gibi bir bölüm varmı diye tema ayarlarına bakıyoruz. Malesef yok. Ücretsiz temada bu kadar kusur olacak diyelim ve fontu kendimiz düzeltelim.

000088-04-03

Ücretsiz de olsa temalarda kullanılan font genellikle Google Fonts tarafından sağlanır. Çünkü Google Fonts ücretsiz ve kaliteli bir servis. Neredeyse tema geliştiricileri için bir standarttır. Önce bakalım Stork bu şekilde mi çalışıyor.

Bunun için blog sayfamızı açıyoruz. (admin panelini değil, ziyaretçi bölümünü) Klavyemizden Ctrl ve U tuşlarına eşzamanlı olarak basıyoruz. Sayfanın kaynağı, yani sayfayı oluşturan kodlar karşımıza geliyor.

Burada Ctrl+F ile “fonts.googleapis.com” metnini aratıyoruz. Eğer sonuç çıkarsa, tema Google Fonts kullanıyor demektir. Çıkan satırı komple seçip kopyalıyoruz.

000088-04-04

Kodları aynen örnek 2’deki gibi manipüle edip header.php sayfasına ekliyoruz.

000088-04-05

Ardından blogu açıp kontrol ediyoruz. Sonuç olumlu. Türkçe karakterler düzeliyor. Aslında burada şanslıyız. Çünkü görünen o ki Stork temasının kullandığı fontlar Türkçe karakter desteği veriyor. Eğer vermeseydi, bahsettiğimiz değişikliği yapsaydık ta halen görünüm bozuk olacaktı. Bu durumda Stork teması fontu değiştirmek için bir panel de sunmadığından minik bir kriz oluşacaktı.

000088-04-06-wordpress-easy-google-fonts-eklentisi

Eğer başınızda böyle bir dert varsa, yapmanız gereken “Easy Google Fonts” gibi bir eklenti kullanmak. Bu şekilde tema tarafından sunulmayan font değiştirme, ayarlama özelliklerine kavuşabilirsiniz. Eklentinin anlatımını yazının devamında bulabilirsiniz.

Soru: Bu anlatım sadece Google Fonts için mi geçerli? 000088-05-01

(Easy Google Fonts kurulumu normal bir eklenti kurulumundan farklı değil. Yine de eklenti kurmayı bilmeyen kişilere yardımcı olması amacıyla anlatacağım. Eğer bu konuda bilgi sahibiyseniz, ilginç birşey yok, konuyu atlayabilirsiniz.)

Eklentiyi yüklemek için, yönetici paneline girip Eklentiler->Yeni Ekle menüsünü takip ediyoruz.

000088-05-02

Açılan sayfadaki arama kutusuna “Easy Google Fonts” yazıp Enter tuşuna basıyoruz.

000088-05-03

Çıkan arama sonuçlarından “Easy Google Fonts” öğesine ait alandaki “Şimdi Kur” butonuna tıklıyoruz.

000088-05-04

Emin olduğumuzu onayladığımızda…

000088-05-05

… eklenti indirilip kuruluyor. “Eklentiyi Etkinleştir” linkine tıklıyoruz.

000088-05-06

Böylece işlem tamamlanıyor, eklenti kurulmuş ve çalıştırılabilir hale geliyor.

Bonus: Easy Google Fonts eklentisi nasıl kullanılır? 000088-07-01-mozilla-firefox-ogeyi-incele

Yazı tipini beğendiğimiz siteyi Firefox’da açıyoruz. Beğendiğimiz yazıyı seçip üzerinde sağ tıklıyoruz. “Öğeyi incele” menüsünü seçiyoruz.

000088-07-02-wordpress-yazi-tipi-ogrenme

Firefox sol bölümde HTML kodlarını, sağ bölümde ise yazı fontunu gösteriyor. Sol bölümden öğenin başlık olduğunu sağdan da yazı tipinin “Source Sans Pro” olduğunu öğreniyoruz. İki küçük ipucu;

Sol bölümdeki h1, Header 1 yani yazının ana başlığı demektir. h2,h3,h4,h5 sırasıyla daha alt düzey başlıkları sembolize eder. p kodu ise paragrafları işaret eder.

Sağ taraftaki kaynak, fontun indirildiği adresi gösterir. Genellikle Google Fonts kullanılır ve “fonts.gstatic.com” Google’a aittir. Öğrendiğiniz fontu “Örnek 1” başlığında anlattığım şekilde yada “Easy Google Fonts” eklentisiyle hemen kullanmaya başlayabilirsiniz.

WordPress’de veritabanından kaynaklanan Türkçe karakter problemleri ve düzeltme

Yaşanılan font sorunlarının %99.99’u az önce anlattığım şekilde çözülecektir. Çünkü WordPress oluşturduğu tablolarda Türkçe karakterleri destekleyen UTF8 sistemini kullanıyor. O yüzden genellikle veritabanından kaynaklı karakter problemi yaşanmıyor.

Fakat ben sonradan kurduğumuz eklentilerin buna dikkat etmediğine ve sorun yaşatabildiğine şahit oldum. Bunlardan birisi WordPress için Anti-adblock eklentileri başlığında anlattığım Ad Blocking Detector (v2.2.6) eklentisiydi. O yüzden işin bu kısmına da dikkat edin diyerek hem yaşadığım problemi hem de çözümünü paylaşarak konuyu kapatayım;

000088-08-01

Türkçe karakter problemi olmayan bir blogda “Ad Blocking Detector” kullanmaya başladığımda karşılaştığım problemi fotoğrafta görüyorsunuz. ı,ş,ğ,ü gibi karakterler ? ile değiştirilmiş. Yazı okunmuyor.

000088-08-02-wordpress-phpmyadmin-database

Sitede font problemi olmadığından emin olduğumuz için veritabanı bölümüne bakıyoruz. Problem hemen gözümüze çarpıyor. Eklentinin oluşturduğu veritabanı UTF8 formatında yaratılmamış. Bu nedenle, girdiğimiz Türkçe karakterler veritabanına kaydedilmiyor.

000088-08-03-phpmyadmin-tablo-yedekleme

İşleme başlamadan önce, sorunlu tabloyu seçip “Dışa Aktar” komutu veriyoruz. Amacımız müdahale ettikten sonra sorun yaşarsak geri yüklemek üzere bir yedek almak.

000088-08-04

Git butonuna tıklayarak yedeği indiriyoruz.

000088-08-05-phpmyadmin-veritabani-tablosu-utf8-cevrimi

Yedek dosyası indirildikten sonra SQL sekmesine geçip fotoğraftaki komutu çalıştırıyoruz.

Bu komut tabloyu UTF8 biçimine çeviriyor. Tabi siz “wp_abd_shortcodes” yerine sorun yaşadığınız kendi tablonuzun adını girmelisiniz.

000088-08-06

İşlem hemen tamamlanıyor.

000088-08-07

Yapı bölümüne baktığımızda tablonun artık “utf8_general_ci” formatında olduğunu görüyoruz. Bundan sonra tabloya Türkçe karakter kaydedebileceksiniz…

000088-08-08

…ancak daha önce kaydettiğiniz veriler Türkçe’ye çevrilmeyecek. Gördüğünüz gibi halen ? şeklinde duruyor.

000088-08-09

Önceki girdileri, eklentinin arayüzünden düzeltebilirsiniz. Sorunlu karakterleri düzeltip tekrar kaydettiğinizde…

000088-08-10

… sorun ortadan kalkacaktır.

000088-08-11-phpmyadmin-tablo-silme

Peki diyelim ki phpmyadmin ekranında bir terslik oldu ve tablo kullanılmaz hale geldi. Bu durumda önce tabloyu seçip “Kaldır” komutu vererek…

000088-08-12

… ardından da sorguyu onaylayıp çalıştırarak tabloyu kaldırabilirsiniz.

000088-08-13-phpmyadmin-tablo-import-etme

Sonra İçe aktar ekranına girip, Gözat butonundaki yedeğinizi seçerek “Git” butonuna tıklayıp tabloyu yedekten geri yükleyebilirsiniz.

000088-08-14

İşlemin sonucu fotoğraftaki şekilde gösterilecektir.

000088-08-15-wordpress-database

Veritabanı adınıza tıklarsanız tablonun eski haliyle gelmiş olduğunu görebilirsiniz.

Check Also

WordPress Yüklenilmesi Gereken 7 Eklenti

Şu ana kadar Dünyadaki tüm sitelerin %40’ı wordpress ile oluşturulmakta. Durum böyle olunca wordpress gün …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir