Gizlilik Politikam Güncellendi. Bkz:Gizlilik Politikası




15 May 2018

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.


Bu Yazımı Beğendiysen Sosyal Medya Hesaplarında Paylaşarak Bana Destek Olabilirsin!
 Google Plusda Paylaş


 Yazar: Hüseyin Körbalta Hakkında

Blog yazarı, Arayüz geliştiricisi ve Arkaplan geliştiricisi olmak için çalışmalar yapıyor.

 Websitesi
Takip Et:


2
 Kimler Neler Demiş?

avatar
1 Yazıdaki Yorumlar
1 Yorumlar
0 Takipçi
 
En çok tepki verilen yorum.
En iyi yorum
  Abone Ol  
Bildir
Yusuf Yalçın
Ziyaretçi
Yusuf Yalçın

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


istanbul escortescort istanbulistanbul escort

Bu eser Creative Commons Atıf-GayriTicari-Türetilemez 4.0 Uluslararası Lisansı ile lisanslanmıştır.
Bu lisansın kapsamı dışındaki izinler Kullanım Koşulları adresinde mevcut olabilir.

 Sponsor Bağlantılar:Arıcılık Malzemeleri