Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
Yeni Tasarım, Yeni Tecrübeler

Yeni Tasarım, Yeni Tecrübeler

Yaklaşık 2 aydır kişisel blog sayfam için bir tasarım yapıyorum. Daha önce birkaç defa yaptım ancak WordPress yapısına uyarlama konusunda hep erteledim. En son kullandığım wordpress teması olan First (İlk) temasında oluşan güvenlik açıklarından ötürü sürekli hacklink saldırısına maruz kalmamdan ötürü, dedim artık kendime ait, kendimin kodladığı bir temaya sahip olmalıyım.

First (İlk) temasının yapımcısına birkaç defa mail ile bildirim yaptım, tema da güvenlik zaafiyeti mevcut diye ancak bir kere güncelledikten sonra daha da güncelleme yapmadı temaya haliyle güvenlik açığı devam ediyordu. Açığın temanın functions.php dosyasında bir fonksiyon kodundan meydana geliyor fakat bu fonksiyon kodu temanın ana işlev fonksiyonu yani değişiklik yaptığınız da tema arap saçığına dönüyor.

Uzun lafın kısası ben azim ettim kendime bir tema kodlayacağım dedim ve şuan kişisel blog sayfamda aktif olarak kullandığım Nocturnal isimli WordPress temasını yaptım.

Yeni Tasarım, Yeni Tecrübeler

CSS ve HTML5 tasarımı yapmak benim için çok zor olmadı. Google tarafından geliştirilmekte olan Materialize adlı CSS framework kullanarak temanın temel iskelet yapısını oluşturdum. Daha sonra kendi zevkime, yapmak istediğim tema yapısına uygun CSS kodlamaları yaparak temayı ilk önce HTML yapısında tamamladım.

Bu aşama da çok şey öğrendim örneğin artık pixel (px) değerlerinin kullanılmadığını gördüm. Yani, örneğin CSS’de yazı boyutunu ayarlamak için biz genelikle 12px, 13px gibi pixel cinsinden değerler veriyorduk ancak Materialize CSS framework yapısında REM yapısı kullanılıyor. 1rem,2rem gibi değerler kullanılıyordu.

Yine px değeri işe yarıyor ancak rem kullanmak benim için yeni bir deneyim,tecrübe oldu. Rem kullandığım boyutlandırma yaptığım yerlerde css’in daha hızlı işlediğini fark ettim. Biraz daha araştırıp, REM hakkında daha fazla bilgi sahibi olacağım o zaman onun içinde bir yazı yazarım.

Öğrendiğim bir diğer şey ise artık inline css ve inline javascript yazımlarının tarayıcılar tarafından zaman zaman algılanmadığını gördüm. Opera, Firefox gibi tarayıcılar inline css ve inline javascript kodlarını bazen işlemiyor, görmüyor, normal yazı gibi algılıyordu.

Bununla ilgili araştırma yaptığımda ise öğrendiğim kadarıyla artık inline css, javascript kod yazımları desteklenmeyecek gibi duruyor,ama halen geçerliliğini korumakta bu kod yazım şekli.

Tasarımı Yaparken Nelere Dikkat Ettim?

Öncelikle tarayıcı uyumluluğuna dikkat ettim. İnsanların çoğunlukla kullandığı internet tarayıcılarına uygun şekilde kodlamaya özen gösterdim (IE hariç). Hali hazırda kişisel blog sayfamda WordPress‘in AMP eklentisini kullandığım için mobil arayüz için çok fazla önem vermedim diyebilirim, zaten Materialize css framerwork’ü tamemen mobil uyumlu bir css aracı olduğu için ekstra bir css kalıbı yazmama gerek kalmadı her şeyi o halletti beni yerime, ben daha spesifik kısımlarda kendi css kodlarımı yazarak frameworke katkı sundum diyebilirim.

Kişisel bir blog teması olacağı için çok gösterişli, cafcaflı, çok fazla özelliğe sahip bir tema yapmaya gerek duymadım. Olabildiğince sade, basit ve kolay kullanılabilir bir tema yapmayı amaçladım ve kendi zevkime göre tasarladım.Klasik standart bir wordpress tema yapısı; Sidebar, Üst Menü, Alt Menü, Content şeklinde olabildiğince basit ve sade yapıda tasarladım.

Renk seçiminde hiç zorlanmadım diyebilirim çünkü; Siyah ve Mavi ben en sevdiğim renklerdendir. Birbirleriyle her zaman uyumlu olurlar, çok fazla sırıtmazlar, göze hoş gelirler bu yüzden yaptığım birçok tasarımda logo olsun, banner tasarımı olsun hep mavi ve siyah renklere denk gelebilirsiniz. Bu yüzden temanın genel renk paleti siyah ve mavi’den oluştu.

Temayı WordPress’e Aktarırken Zorlandım mı?

Daha önce WordPress tema yapısını az çok gördüm, bir takım uygulamalar yaptım ancak sıfırdan bir tema yapmaya hiç kalkmamıştım. İlk temel düzeyde ki yapıyı çok kolay geçirdim diyebilirim.

Temayı parçalara ayırma kısmı oldukça basitti, html yapısında kodlama yaparken açıklama satırları koyarak bunu en başta yapmıştım sadece WordPress’in tema yapısına göre parçalamam gerekti, işin en kolay tarafı buydu.

Daha sonra en zorlandığım aşamaya, yapıyı dinamik hale getirmek. Temelimde php bilgisi olduğu için çoğu kodu çok kolay bir şekilde anlayıp, uygulayabildim ancak sizin temel düzeyde php bilginiz yok ise hiç wordpress tema yapmaya yeltenmeyin. Velhasıl kelam en basit yerleri çok rahat bir şekilde dinamik hale getirdim, sorunsuz bir şekilde çalışıyordu tema.

Ancak gel gör ki birçok yerde tıkandım. İnternette araştırma yaptığım zaman karşıma çıkan birçok anlatım eskiydi yani 2010-2013 yıllarında yazılmış, anlatılmış şeylerdi aradan 7-8 yıl geçmiş haliyle birçok kod artık çalışmaz halde veya çalışsa da stabil değil, düzgün çalışmıyordu.

Haliyle bir çok yapıyı kendim anlamak, çözmek ve hatta yeniden kodlamak zorunda kaldım. Hatta o kadar zorlandım ki wmaraci.com sitesinde konu açıp, yardım dahi istedim. (Bkz: WordPress Tema Sidebar Özelleştirme)

Bütün bu döküman sıkıntısına rağmen, çabaladım, araştırdım, kurcaladım tabirim caizse parmakladım ve kendime ait bir temayı kodlamayı başardım. Benim back-end tarafım çok yoktur, yeni yeni o yöne kendimi kaydırdım o yüzden benim için yaptığım her şey yazdığım her kod tanesi yeni bir bilgi, yeni bir tecrübe idi. Ve kodladığım şeyin işe yarıyor olması, sorunsuz çalışıyor olması da ayrı bir keyif verdi.

Yeni Tasarım, Yeni Tecrübeler

Bu süreçte tasarım konusunda yeni fikirler, bilgiler edindim. İşin sadece ön yüzü değil arkaplanın da nelerin olduğunu öğrenmiş oldum. Çok fazla şey öğrendim bunları zamanım oldukça blog yazısı olarak paylaşacağım. Yeni tasarım ile ilgili görüş ve önerilerinizi bekliyorum.

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Visual Studio Code İçin Kullandığım Eklentiler ve Ayarlar

    Visual Studio Code İçin Kullandığım Eklentiler ve Ayarlar

    İster arayüz geliştiricisi olun ister arkaplan geliştiricisi. Her ne olursanız olun bir kod düzenleme editörüne ihtiyaç duyuyorsunuz. Şuana kadar Notepad++, Sublime Text gibi editörler kullandım ancak yaklaşık 1,5 yıldır Microsoft tarafından geliştirilen ücretsiz kod düzenleme editörü olan Visual Studio Code programını kullanmaktayım. Gerek büyük,karmaşık tüm projeler de oldukça stabil ve…
  • WordPress Eklentisiz Yazı İçi Reklam Alanı Nasıl Oluşturulur?

    WordPress Eklentisiz Yazı İçi Reklam Alanı Nasıl Oluşturulur?

    Wordpress dünyanın en geniş eklenti kütüphanesine sahip yazılımıdır. Hemen hemen her şey için bir eklentisi mevcut, fakat Wordpress her ne kadar eklenti açısından zengin olsa da her şeyi eklentiyle yapmak sitenizin yayın yaptığı hosting ya da sunucuyu bir süre sonra yormaya başlayacaktır. Bende size bu blog yazımda eklenti kullanmadan yazı…
  • Debian 9’a MariaDB Nasıl Kurulur?

    Debian 9’a MariaDB Nasıl Kurulur?

    Bu blog yazımda dünyanın en çok tercih edilen, ücretsiz ve açık kaynak kodlu oldukça stabil, hızlı ve çeşitli modüller ile desteklenebilen veri tabanı sunucusu olan MariaDB'yi Debian 9 işletim sistemine nasıl kuracağınızı göstereceğim. MariaDB, oldukça hızlı, kararlı ve ölçeklenebilir bir MySQL veritabanı sunucusunun geliştirilmiş,eskiye dönük yazılımlarla tam uyumlu çalışabilen, drop-in…
  • WordPress’te Önceki ve Sonraki Yazı Linkleri Nasıl Eklenir?

    WordPress’te Önceki ve Sonraki Yazı Linkleri Nasıl Eklenir?

    Yakın bir zamanda kişisel blog sitem için yeni bir tema tasarlayıp, kodladım. Bir önce ki temamı da kendim tasarlayıp, kodlamıştım ancak Wordpress'in 5.0 sürümü yayınlandıktan sonra yeni görsel editör olan Guttenberg'i kullanmaya başladım. Guttenberg editörüne gelen ara güncellemeler ile eski temam da uyumsuzluklar oluşmaya başladı örneğin yazdığım yazılar sayfa dışına…
Yeni Tasarım, Yeni Tecrübeler için Yorum'da Bulun

Bu yazıya şimdiye kadar 2 Yorum yapılmıştır.

  • Yorum Sahibi
     Yanıtla
    Yusuf Yalçın Ziyaretçi

    sitenin tasarımı mükemmel olmuş, sadece mobil arayüzü biraz bozuk onun dışında gayet güzel tebrik ederim.

    • Yorum Sahibi
       Yanıtla
      Hüseyin Körbalta Yazar 

      Değerli yorumun için teşekkür ederim. Mobil arayüzüne çok fazla uğraşmadım, AMP kullandığım için mobil tarafı önemli değil şuan için, temayı genel olarak masaüstü için tasarladım.

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.