WordPress Alt Temalarının Geliştirilmesine Yönelik Bir Kılavuz

WordPress geliştiricilerinin alt temaları kullanmaya başlamasının birkaç nedeni vardır. Size mevcut başka bir temanın üzerine benzersiz bir düzen uyarlama fırsatı sunarlar. Bu, kendi temalarını oluşturarak oynamak isteyen yeni başlayanlar için mükemmel.

Ek olarak, birçok premium tasarım zaman içinde yeni güncellemeler yayınlayacak. Çekirdek tema dosyalarında değişiklik yapıyorsanız, bir güncelleme yaparken bunların üzerine yazılır, ancak alt temalar ayrı tutulur ve düzgünce saklanır. Bu, mevcut premium temaları oluşturabileceğiniz ve süreçte zaman kazanabileceğiniz anlamına gelir.

Bu rehberde, bir WordPress alt teması oluşturmanın temel kavramlarını ve bunun neden bu kadar iyi bir fikir olduğunu tanıtmak istiyorum..

Başlamak

Çocuk temaları göründüğü kadar zor değil. Bir ana temada çalışmanın faydaları, tüm HTML / CSS'yi sıfırdan yazmanıza gerek olmadığı anlamına gelir. Bir alt tema, eklediğiniz şablon dosyaları otomatik olarak kullanır. sidebar.php veya footer.php. Fakat eğer eksiklerse, çocuk temanız aynı dosyaları üst öğesinden çekecektir..

Bu işlev, zaten var olan şablonları özelleştirmek için muazzam miktarda özgürlük sunar. Noel veya Yeni Yıl için tasarım desenleri eklemek gibi özel etkinlikler için web sitenizdeki alanlara dokunmak için de harikadır.

Gerekli Dosyalarınız

WordPress'te alt tema oluşturmak için yalnızca tek bir .css stil sayfasına ihtiyacınız var. Ayrıca cihazda yeni bir dizin oluşturmanız gerekir. / Wp-content / themes Çocuk temanıza ev sahipliği yapacak klasör. Sana dikkat et değil bu klasörü ana temanın içinde oluştururken, aynı temalar dizininde.

Geliştiriciler genellikle yeni CSS dosyanızla aynı klasöre bir function.php ve screenshot.png içerecektir. Ekran görüntüsü WordPress yönetici panelinizde görüntülenir ve işlev teması dosyası tonlarca arka uç değişikliği için kullanılabilir..

Fakat şimdilik ana stil sayfasına odaklanmalıyız. Bu genellikle adlandırılır style.css ve anahtar meta bilgisine sahip bir yorum başlığı içerir. Bu önemlidir, çünkü temanız yalnızca ebeveynin dizin adını eklerseniz çocuk olarak görüntülenir. Aşağıda örnek başlık yorumu bulunmaktadır:

 / * Tema Adı: Yirmi Onbir Çocuk Teması URI: http: //example.com/ Açıklama: Yirmi Onbir tasarım için alt tema Yazar: Jake Rocheleau Yazar URI: http: //www.hongkiat.com/blog/ Şablon: twentyeleven Sürüm: 0.1 * /

Değeri şablon eşlik eden ana temanın dizin adı olmalıdır. Bunun dışında diğer tüm etiketlerin standart WordPress temalarına aşina olması gerekir.

Tüm üst PHP şablonları kullanılsa da, asıl ebeveynin style.css'si kullanılacaktır. değil otomatik olarak alın. Orijinal stilleri denemek istiyorsanız, çocuğunuzun style.css belgesinin en üstüne eklemeniz gerekir. WP Twenty Eleven temasını içeren bir örnek aşağıda.

 @ ithalat URL'si ("… /twentyeleven/style.css");

Yeni Stiller Ayarlama

CSS kurallarını temanıza uygulamak, orijinali düzenlemek kadar kolaydır. Hangi öğeleri hedeflemeniz gerektiğini biliyorsanız, o zaman kendi seçicinizdeki aynı seçicileri kullanın.

Bağlantılarda ve paragraflarda yapılan bazı basit değişikliklerle demo yapabiliriz. Farklı öğeleri hedeflemek için orijinal Twenty Eleven temasının kodunu kullandım. Bazen eski tasarımı geçersiz kılmak için daha spesifik bir seçici kullanmak gerekir..

 gövde dolgu maddesi: 0 1.4em;  #sayfa marj: 1.667 otomatik; maksimum genişlik: 900px;  a renk: # 5281df; metin dekorasyon: yok; font ailesi: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: underline;

Bu değişikliklerde genel vücut boyutunu küçültdüm ve kenarlarından bazı dolguları çıkardım. Bu seçicilerin tümü orijinal .css belgesinde listelenmiştir. Ayrıca farklı bir yazı tipi yığını ve renk seçimi içeren tüm bağlantı linkleri için bazı özellikleri değiştirmem önemli..

Önemli şeyler

CSS, diğer stillerin üzerinde önceliği işaretleyen özel bir bildiriye sahiptir. Sözdizimi olarak görüntülenir. !önemli ünlem işareti ile başlamak ve CSS mülkünüzün sonunda sona ermesi. Bu, kendi özel kurallarınızı geçersiz kılan bir üst temadan gelen basamaklı stilleriniz varsa gereklidir..

 a renk: # 5281df! önemli; metin dekorasyon: yok; font ailesi: Calibri, Tahoma, Arial, sans-serif;

Yukarıda orjinal değişikliklerimi kopyaladım ve metin metni rengini önemli bir maddeyle düzenledim. Bu, aynı seçici derinlikteki diğer tüm stillere göre öncelikli olacaktır. Daha tanımlanmış öğeler (örneğin #access li: hover> a) genellikle kendi stillerini tutamazsa renk hala orijinal seçicimizden devralındı. Bu durumda ana temamız bağlantı linklerine font-family özelliği kurmaz, böylece herhangi bir miras sorunuyla karşılaşmazız.

Yaptığınız değişiklikleri yapışmakta sorun yaşıyorsanız, mülk bildiriminizin sonunda bu önemli işaretlerden birini almayı deneyin. Bu her bir miras problemi için mükemmel bir çözüm değil, ancak düşündüğünüzden çok daha kullanışlı oluyor.

Klonlama işlevleri.php

Ana stil sayfasından farklı olarak, alt temanız ebeveynin işlevlerini otomatik olarak içe aktarır. Bu, yeni temanızda hala etkin olması için herhangi bir PHP kodunu kopyalamanıza gerek olmadığı anlamına gelir. Yine de, bazı işlevleri yeniden tanımlamak isterseniz, başka bir fonksiyon oluşturabilirsiniz..

Örnek olarak, şablon başlatıldığında birkaç JavaScript dosyasını ayrıştıran bir işlev oluşturdum. Bu, jQuery ve SWFObject scriptlerinin eski sürümlerini kaldırırken, aynı anda en son sürümleri aynı anda ekler. wp_head alan.

 // load fonksiyonu için kuyruk js dosyaları mytheme_js () if (is_admin ()) return; wp_deregister_script ( 'jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script ( 'swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'swfobject');  add_action ('init', mytheme_js);

Üst fonksiyonlar.php'den kod alıyorsanız, o zaman farklı bir fonksiyon adı kullanmanız gerektiğini belirtmeliyim. Aksi takdirde PHP önemli bir hata verecektir ve hatayı düzeltmek için sunucuya FTP uygulamanız gerekecektir..

Tema Dosyaları ile Çalışma

Temaların en geniş kategorisi özel düzenler ve sayfa türleri oluşturmaktır. Varsayılan olarak alt temanız, ebeveyninin tema dosyalarının tümünü devralır. Ancak yeni alt tema dosyaları oluşturma seçeneğiniz vardır ve WP bunları 'birincil' şablon olarak kaydedecektir..

Örneğin için arşiv ve index.php sırasıyla yazı arşivlerini ve ana sayfa ekranını görüntülemek için kullanılır. HTML’de düzenlemeleri gerektiren değişiklikler yapmak istiyorsanız, üst dosyaları klonlamak ve alt tema dizininde düzenlemek daha güvenli olacaktır..

Özel Sayfa Şablonları

Şablon dosyalarından bahsederken, çoğu kişinin aşina olmadığı bir WordPress işlevselliği de sunmak istiyorum. Yeni içerik oluştururken Yönetici panelinden seçilebilecek sayfa ve gönderim şablonları oluşturabilirsiniz. Ana temanın yeni özel şablon dosyası olmasa bile WordPress, çocuğu yerine page.php veya single.php.

İlk önce page-offer.php adlı yeni bir dosya oluşturun. Bu olacak “özel teklif” diğerlerinden farklı olarak tema alan tanıtım sayfası. Burada orijinal sayfa kodunuzu kopyalayabilir veya temayı tamamen sıfırdan oluşturabilirsiniz. WordPress'e bu yeni şablon hakkında bilgi vermemiz gereken tek kod PHP'deki bir yorum kurulumudur.

Bu yönteme başka bir alternatif, benzersiz kimlik numarasından sonra adlandırılmış özel sayfalar oluşturmaktır. Yani varsayılanı yüklemek yerine için arşiv yazar sayfaları için bir dosya oluşturabilirsiniz. yazar-ID.php Kimlik, kullanıcının benzersiz WordPress Kimlik numarasıdır. Bu sistem, sitenizdeki yazarların her biri için yeni bir şablon dosyası oluşturmanız gerekeceğinden daha fazla vergi almasına rağmen.

Bu iki tekniği diğer şablon dosyalarıyla birleştirebilirseniz daha kullanışlı hale gelir. Özellikle kategoriler ve etiketler kendi tema dosyalarını kullanarak iyi çalışır. Ayrıca, içeriğinizdeki eklerle bağlantı kurarsanız, her mime türü için farklı olası şablon düzenlerini dikkate almak istersiniz. Basit bir JPEG resim eki için aşağıdaki şablon hiyerarşisini ekledim:

image.php
jpeg.php
image_jpeg.php
attachment.php

Faydalı WordPress Araçları

WordPress'in kendisi, çok sayıda özelleştirmeyi yönetebilen çok yönlü bir eklenti sistemine sahiptir. Çocuk temaları çok yeni olduğu için, 3. parti bültenlerinin sayısı henüz yok. Ancak, geliştirme sürenizi biraz kısaltmak için kontrol edebileceğiniz birkaç araç var..

En son WordPress 3.x sürümü için oluşturulmuş ve test edilmiş olan Tek Tıklamalı Çocuk Teması eklentisi açık bir sözdür. Yöneticinize bir menü bağlantısı ekler “Temalar” Etkin temanızı kullanarak otomatik olarak bir çocuk oluşturmak için FTP ile uğraşmak istemiyorsanız ve bazı yeni fikirlerle uğraşmak istiyorsanız bu harika.

Bu dosyaları yönetici panelinde düzenlemeyi planlıyorsanız, daha net sözdizimi vurgulamanın da tadını çıkaracaksınız. Bu, WordPress'te varsayılan olarak sunulmaz, ancak bazı gelişmiş işlevler için Gelişmiş Kod Düzenleyicisi'ni yükleyebilirsiniz. Bu PHP kod blokları ve HTML / CSS ile daha kolay yönetilebilir hale getirir.

Ek kaynaklar

Bu kılavuzdaki tüm ipuçlarının yanı sıra, tema geliştiricileri için bir takım önemli bağlantıları paylaşmak istiyorum. Bu konuda daha ayrıntılı çalışmak için kontrol edebileceğiniz çok sayıda harika makale ve ücretsiz çocuk temaları var. Aşağıda bu kaynaklardan harika bir koleksiyon ekledim:

8 Ücretsiz Yirmi Onbir Çocuk Temaları
WordPress Online Kodeksi »Çocuk Temaları
Hooks ve Filters kullanarak WordPress Alt Teması nasıl oluşturulur?
Çocuk Temalarına İlişkin Birkaç Söz
WordPress'te Alt Tema Oluşturma, Değiştirme ve Kullanma

Sonuç

Umarım bu makaleyi okuduktan sonra WordPress alt temalarını oluşturma süreci sizin için daha açıktır. Alt temaların, bir üst öğeden hem CSS'yi hem de PHP şablonlarını devralmalarını açıklamaya çalıştım. Ek olarak, belirli dosyaları değiştirmek ve kendi benzersiz temalarınızı oluşturmak çok kolaydır.