WordPress henüz yoksa hanehalkı adı haline geliyor. Her yerde, bu iyi huylu güzellik, dünyanın gördüğü en iyi web sitelerini ve web uygulamalarını güçlendiriyor. Sadece inanılmaz derecede çok yönlü değil, aynı zamanda öğrenmesi ve kullanması da inanılmaz derecede kolay olan birinci sınıf bir CMS ve bloglama platformudur. WordPress neden her geçen gün daha popüler hale geliyor??
Ancak WordPress’i kurup başlattığınızda yüzeyde gördüğünüz şey, perde arkasında neler olup bittiğinin sadece küçük bir kısmı. Aslında, hepimizin sevdiği güzel UI, sahne arkasındaki bedlam ile karşılaştırıldığında hiçbir şey değildir. Demek istediğim, WordPress PHP ve MySQL olarak bilinen iki karmaşık web teknolojisinde çalışıyor.
Bir parçayı oynayan diğer teknolojiler arasında JavaScript, yakın kuzeni jQuery, CSS ve HTML var. WordPress temaları (ve hatta eklentileri) çoğunlukla PHP ile yazılır ve çalıştırılacak MySQL veritabanlarına güvenir. Ayrıca yukarıda belirtilen web teknolojilerine de bağlıdırlar. Tüm bu teknolojiler birlikte çalışmalı.
Şimdi bir acemi olarak, WordPress platformunun, temaların ve eklentilerin birlikte çalışması için geliştiricilerin, toplu olarak PHP etiketleri olarak bilinen bir dizi standart kod kullandığını anlamayabilirsiniz. Bugünün gönderisinde özetlediğimiz ve size ne kadar yararlı olduklarını gösteren bu kodlardır. İyi bir ölçü için burada bir yerlerde birkaç örnekte duracağız, bu yüzden tema oluşturma yolculuğunuzda bir patlama yapmaya hazır olun!
Contents
Tema Anatomisi
Bir WordPress teması, birbirine bağlı birkaç PHP dosyasından başka bir şey değildir. Temanızın (ve sitenizin) görünümünden sorumlu bir CSS stil sayfası dosyası ile birlikte gelir. Yine de temellere dönersek, bir WordPress teması sadece birkaç PHP dosyasıdır. Yukarıda büyük bir anlık görüntü tuts + cheatsheet WordPress temasının anatomisi için. Bir WordPress teması oluşturmak için aşağıdaki dosyalara ihtiyacınız vardır:
- header.php– Bu şablon dosyası, içinde görünen başlık bilgilerini içerir. bölümünde ve açılıştan önce etiket. Burada meta veriler, site başlığı ve diğerleri arasında CSS stil sayfanıza bağlantı eklersiniz.
- index.php – Bu, WordPress temanızın (veya sitenizin) ana gövde şablonu. Tek amacı, diğer dosyaları şablon etiketleri kullanarak ekleyerek bir araya getirmektir (bir anda şablon etiketleri hakkında daha fazla bilgi).
- sidebar.php – Bu, kenar çubuğu bölümünüz. Widget’lar, kategoriler, ekstra menüler, arama formu ve hoşunuza giden diğer her şeyi yerleştirebilirsiniz
- footer.php – Bu altbilgi bölümü. Telif hakkı bilgilerinizi, RSS bağlantılarını, widget’ları, bağlantıları, sosyal simgeleri vb. Ekleyin.
- page.php – WordPress tabanlı sitenizde bir sayfa oluşturduğunuzda, bu sorumlu şablondur
- single.php – Bu şablon dosyaları tek bir blog yazısı taşır
- comments.php – Onlardan sorumlu şablon yorumları
- 404.php – Okuyucunuz rezil 404 bulunamadı hatasıyla karşılaştığında gösterilen şablon
- search.php – Okuyucularınıza WordPress sitenizde içerik bulma şansı sunar
- searchform.php – Yukarıda belirtilen işlevselliği sunmak için bir arama formuna ihtiyacınız olacak, şimdi değil?
- archive.php – Çünkü 2008’de yayınladığınız içerikleri bulmak güçlük çekmeyecek
- fonksiyonları.php – Tüm özel işlevleri ve hatta özel eklentileri buraya yerleştirin. Bununla birlikte, temalar arası uyumluluk için, bağımsız eklenti olarak özel kod eklemeniz önerilir. Ek menüler ekleyebilir, widget’ları etkinleştirebilir ve çok daha fazlasını yapabilirsiniz. Bu dosya, WordPress sitenizi / temanızı istediğiniz şekilde çevirmeniz için çok fazla güç sağlar.
- style.css – Bu böyle bir PHP şablon dosyası değil. Ancak estetiği kontrol etmek için CSS stillerinizi eklediğiniz dosyadır. Ayrıca WordPress temanız için bilgi başlığı ile birlikte gelir.
Şüphesiz, daha az şablon içeren bir tema oluşturabilirsiniz, ancak bundan bir alışkanlık yapmanızı önermiyoruz. Sonuçta, standart bir WP teması oluşturmak için yukarıdaki 10 kadar dosyaya ihtiyacınız var. On üç büyük bir rakam değil, şimdi mi? Özetle, index.php dosyanız şuna benzer:
// Ana içeriği buraya ekleyin, döngüyü ekleyin
Devam edelim, şu şık kod pasajı hakkında konuşalım döngü.
Döngü
Popüler WordPress Tutorial: HTML’den bir WordPress Teması Nasıl Oluşturulur gibi önceki yazı serilerimizden bazılarında, geçerken de olsa döngüden bahsettik. Peki, döngüyü popüler snippet yapan nedir? Bu özel kod parçası olmadan, alıntılarla birlikte her bir postayı WordPress temanıza el ile kodlamanız gerekir. Her yeni makale yayınladığınızda bunu yaparsınız.
Harcadığınız çaba ve zaman sizi maviye ve sert hale getirecektir. Geride bırakacağınız karbon iz – özür dilerim öldükten sonra – ozon tabakasında on iki Yankee stadyumunun büyüklüğünde bir delik açacaktı. Aslında, gerçekleri (veya bunların eksikliğini) fazla geriyorum, ancak her bir postayı WordPress sitenize manuel olarak kodlamak isterdiniz.
Döngü bir hayat kurtarıcıdır. Aşağıdaki kod snippet’ini WordPress şablon dosyalarınızın herhangi bir yerine koyun, daha önce oluşturduğunuz tüm yayınları listeler:
Genellikle yazıların bir listesini görüntülemek için index.php içindeki döngüyü kullanırız, ancak denemekten çekinmeyin; yayınlarınızı listelemek istediğiniz yere ekleyin. Ayrıca, yayınlarınızı uygun gördüğünüz şekilde özelleştirmek için döngü içine özel HTML ve PHP etiketleri ekleyin. Etiketlerden bahsetmişken, WordPress’te neler var?
Etiketleri Dahil Et
Şablon ekleme etiketleri, WordPress tema klasörünüzdeki diğer şablon dosyalarını dahil etmek (veya daha çok aramak) için herhangi bir şablon dosyasında kullandığınız PHP kodlarıdır. Bahsettiğimiz şey:
- – header.php dosyasını çağırmak (veya dahil etmek) için index.php dosyasında bunu kullanın. Header.php getirecek ve içeriğini index.php içinde görüntüleyecektir..
- – Sidebar.php içerir
- – Footer.php şablon dosyasını içerir
- – Hızlı Test: Sizce bu içerme etiketi ne yapar?
Şablon Bloginfo Etiketleri
Bloginfo etiketleri olarak adlandıracağımız başka bir şablon etiketi kategorisi var. Bir rol oynarlar, bu da WordPress sitenizle ilgili bilgileri veritabanından almaktır. Bu temel olarak yönetici alanınızdaki WordPress sitenize Kullanıcı profili ve Ayarlar -> Genel. Bilgiler veritabanlarınızdan alındığında, bu etiketler sitenize yerleştirdiğinizde aynı şekilde görüntülenir.
Bloginfo’nun yapısını hafifçe değiştirebilirsiniz, böylece sadece alınan bilgileri görüntülemek yerine, PHP kodunuzda başka bir yerde kullanabilirsiniz (bilgi). Ne kadar uygun? Birazdan bunun hakkında daha fazla bilgi. En yaygın bloginfo etiketleri şunlardır:
- – Bu, WordPress blogunuzun / sitenizin başlığını gösterir
- – Bu şablon etiketi blogunuzun URL’sini görüntüler
- – Bu, blogunuzun açıklamasını veya daha doğrusu sloganını görüntüler.
- – Sitenizi kodlamak için kullanılan karakter kümesini görüntüler. Varsayılan UTF-8’dir
- – Bu, etkin temanızın CSS stil sayfasının URL’sini gösterir
- – Kullandığınız WordPress sürümünü görüntüler
- – WordPress dilini görüntüler
- – RSS 0.92 özet akışının URL’sini görüntüler
- – RSS 2.0 özet akışının URL’sini görüntüler
Birkaç tane daha var bloginfo etiketleri WordPress temanızı geliştirmek için kullanabilirsiniz. Şimdi o küçük bloginfo modifikasyonu hakkında birkaç saniye önce konuştuk. Şimdiye kadar, . Bunu şu şekilde değiştirelim: . Parametreleri parçalamama izin ver:
- $ şov – Bu, veritabanından almak istediğiniz bilgileri adlandırmak için kullandığınız anahtar kelimedir. Örnekler arasında “ad”, “url”, “açıklama”, “admin_email” vb.
- $ filtre – Bu sadece alınan bilgilere filtre uygulamanızı sağlar. Varsayılan olarak, “ham” olarak ayarlanmıştır, bu da yalnızca $ show değerinin olduğu gibi döndürüldüğü anlamına gelir. Bunu “görüntüleme” olarak ayarlamak, önce $ show değerinin wptexturize () işlevinden geçirilmesine neden olur. Şu anda bu konuda terlemeyin.
Aşağıda bir örnek verelim: “En İyi Premium WordPress Temaları” gibi görünen sloganınızı (site açıklaması) almak ve görüntülemek istediğimizi varsayalım, önce bu etiketi kullanarak bu bilgileri alırız…
… Site açıklamasını $ site_description. Sitenizin açıklamasını sitenizde görüntülemek için şunu kullanın:
Bu size şunları sağlar: Kısa açıklama: En İyi Premium WordPress Temaları
Not: Başka birçok türü var şablon etiketleri WordPress sitenizle çok daha fazlasını başarmanızı sağlar. Çeşitli setler halinde sınıflandırılırlar: genel etiketler, yazar etiketleri, küçük resim etiketleri yayınla, kategori etiketleri, ve bağlantı etiketler diğerleri arasında. Onları döngü içinde bile kullanabilirsiniz, bu yüzden evet, eğlenmelisiniz.
Tema Stil Sayfası
Daha önce style.css’den bahsetmiştik. Yine, style.css dosyası neden önemlidir? İlk olarak, temanız hakkında ayrıntılar sağlar. Bu bilgi, yönetici alanında seçim sırasında temanın tanımlanmasına yardımcı olan stil sayfası başlığına gider. Bu nedenle, hiçbir iki stil, stil sayfası başlıklarında aynı ayrıntılara sahip olmamalıdır. Aşağıda bir stil sayfası üstbilgisi örneği verilmiştir:
/ * Tema Adı: Tema Adınız Tema URI'si: https://www.yoursite.com/yourtheme Yazar: Adınız Yazar URI'sı: https://www.yoursite.com/ Açıklama: Bu WordPress teması% 100 duyarlı blah blah... Sürüm: 1.0 Lisans: GNU Genel Kamu Lisansı V2 veya üstü Lisans URI'sı: http://www.gnu.org/licenses/gpl-2.0.html Etiketler: altın, tek sütun, sol kenar çubuğu, duyarlı ızgara vb. Metin Alanı: adınız * /
Bu bilgi, style.css dosyasında önce (veya en üstte) gelir. Bunun dışında şunları yaptığınızdan emin olun:
- Takip et CSS Kodlama Standartları
- Geçerli CSS kullan
- CSS’yi en aza indirin
- Baskıya uygun stiller ekleyin
- Tüm HTML öğelerine stil verin
Son düşünceler
Bu hile sayfası, WordPress tema geliştirmeyi öğrenirken başlamanıza yardımcı olacak hızlı bir kaynaktır. Burada paylaştığımız etiketleri ve snippet’leri kullanarak hızlı bir şekilde standart bir tema geliştirebilir ve terlemeden geliştirebilirsiniz. Tabii ki, WordPress tema gelişimini öğrenmeye devam etmeniz gerekiyor ve bunun için WordPress Kodeksi, tuts+, Üç ev ve ThemeShaper diğer saygın kaynaklar arasında.
Bunun dışında, lütfen aşağıdaki yorumlarda ipuçlarınızı, hilelerinizi, snippet’lerinizi veya aklınızdaki herhangi bir şeyi paylaşın. WordPress hakkında nereden veya nasıl öğrendiğinizi öğrenmek isteriz. Görüşürüz!