Bazı durumlarda, site üzerinde çalışırken müşteri orijinal temada değişiklik yapmamasını ister. Bu, gelecekte güncelleme yapmayı planlıyorsanız gereklidir ve dosyalarda yapılan değişiklikler kaybolacaktır.
Bu gibi durumlarda, WordPress bir alt tema (alt tema) oluşturmak için bir mekanizma sağlar. Böyle bir tema temel olarak ana şablonu kullanır ve buna kendi dosyalarınızı ve işlevlerinizi ekleyebilirsiniz.
Alt temalarla çalışma mekanizması oldukça basittir. Öncelikle wp-content/themes klasöründe bunun için yeni bir klasör oluşturmanız gerekiyor. Ana şablona sahip klasörün ebeveyn olarak adlandırıldığını varsayacağız ve alt olarak adlandıracağımız yeni bir tane oluşturacağız.
Alt klasöre en az bir style.css dosyası yerleştirin. Aşağıdaki talimatları içermelidir:
/* Tema Adı: Alt Şablon: ebeveyn */
Tema Adı: Çocuk şablon: ebeveyn |
İlk ifade (Tema Adı: Alt) yalnızca alt temanın adıdır, aslında isteğe bağlıdır, ancak ikinci ifade (Şablon: ebeveyn) gereklidir ve bu şablonun ebeveynin çocuğu olduğunu belirtir.
Bir alt tema klasörüne bir dosya yerleştirirseniz, ana şablondan aynı dosyanın yerini alacaktır. Bu kural, function.php dışındaki tüm dosyalar için geçerlidir.
@import url("../parent/style.css");
@import url("../parent/style.css" ) ; |
@import yönergesinin düzgün çalışabilmesi için öncesinde herhangi bir CSS kuralına sahip olmaması gerekir.
Ek ayar yapılmasına gerek yoktur. Bazen bir alt klasörden css stillerinin otomatik olarak eklenmesi çalışmayabilir. Şablon geliştirici aşağıdaki işlevleri kullanmalıdır:
- get_stylesheet_uri() - stil sayfasının adresi;
- get_stylesheet_directory_uri() - stil sayfası klasörünün adresi,
ancak stil.css'yi başka bir şekilde içerebilir, bu da sorunlara yol açar. Bu durumda, büyük olasılıkla, koda bakmak ve sorunu bulmak zor olmayacaktır.
Ayrıntılar için function.php dosyasına bakın. Alt temada böyle bir dosya varsa, motor önce onu, ardından bu ada sahip dosyayı üst klasörden yükler. Böylece şablonun işlevselliğini özgürce genişletebilirsiniz.
Alt klasördeki diğer tüm dosyalar, daha önce de belirtildiği gibi, ana temadaki karşılıklarını değiştirir. Yani orijinal single.php dosyasını alıp üzerinde değişiklikler yapabilir ve onu bir alt klasöre yerleştirebilirsiniz. WordPress motoru çalışırken kullanılacaktır.
Bir alt tema kullanmanın faydaları açıktır: Orijinal temayı olduğu gibi tutarsınız ve onu özgürce güncelleyebilirsiniz. Geliştirici orijinal şablonda kullanımı zorlaştıran hatalar yapmadığı sürece özel bir dezavantajı yoktur.
Alt klasörlerdeki dosyaları değiştiriyorsanız, alt temadaki klasör yapısı ana temayla eşleşmelidir.
Dışarıda bazı harika WordPress temaları var, ancak hepimizin değiştirmek istediği pek çok küçük şey var. Renk, yazı tipi boyutu ve belki düğme metni?
Sorun şu ki, küçük bir tema değişikliği bile gelecekte daha sonraki bir sürüme güncellemeyi imkansız hale getirebilir, çünkü bunu yapmaya çalışırsanız tüm değişiklikleri kaybedebilirsiniz.
Ancak, WordPress deposundan veya Themeforest'tan satın aldığınız bir temayla çalışmak zorunda kalırsanız, bu da işi kolaylaştırmaz. Alt temalar bu sorunu çözerek, seçilen temanın tüm işlevlerini kullanmanıza ve değişikliklerinizi kaybetme korkusu olmadan güncellemenize olanak tanır.
Bugün makalemde neden çocuk temalarına ihtiyacınız olduğunu ve onlarla nasıl çalışacağınızı açıklayacağım.
Not: Bu gönderiyi okuduktan sonra hala bir çocuk teması kurmakta sorun yaşıyorsanız, yorumlarda bana bildirin, size yardımcı olmaya çalışacağım!
Alt temalar nasıl çalışır ve bunları neden kullanmalısınız?
Çocuk temaları işlevlerinin çoğunu ana (orijinal) temadan alan bağımsız temalardır. Bir alt tema kullanıyorsanız, WordPress önce temada belirli bir işlevin olup olmadığını kontrol edecektir.
Eksikse, ana temayı kullanır. Bu harika, çünkü bu durumda sadece ihtiyacınız olanı değiştirebilirsiniz.
Temanızda yalnızca bir karakteri değiştirmeyi planlıyor olsanız bile her zaman alt temaları kullanmalısınız. Bunun iki nedeni var: güncellemeler ve yapı.
güncellemeler
Bir temayı alt tema kullanmadan değiştirirseniz, iki seçeneğiniz vardır: ya gelecekte güncellememeye karar verirsiniz ya da tüm değişiklikleri yapar ve kaybedersiniz.
Teknik olarak, ikinci seçenek işe yarar, ancak önerilmez. Değişikliklerinizi kopyalamak çok kolay olsa bile, her güncelleme yaptığınızda muhtemelen hatalara neden olacak eylemler için neden birkaç dakika harcayasınız?
Güncellemeleri reddetmek söz konusu değil. Web sitelerinin saldırıya uğramasının nedenlerinin hemen hemen her listesi, güncel olmayan yazılımların güvenlik sorunlarının önemli bir nedeni olduğunu söylüyor. Bu nedenle, WordPress, temalarınız ve eklentileriniz ile her zaman güncel kalmanız gerekir.
Yapı
Mevcut bir temaya kod eklediğinizde, binlerce satır uzunluğunda olabilen kod tabanını değiştirirsiniz. Sitenizle çalışacak geliştiriciler ve koddaki tüm değişiklikleri izlemek için kendiniz çok çalışmak zorunda kalacaksınız. Bunun bariz sonucu, çalışmaları için ödenecek büyük bir fatura olabilir.
Çünkü alt temalar ana temalara bağlıdır, tabii ki özel ayarları olmadıkça, alt temanız orijinal temanın değişim temeli olacaktır. Bu, alt temanızda yalnızca birkaç dosya ve 100 satır kod olsa bile önemli değişiklikler yapmanıza yardımcı olacaktır.
Bir alt tema oluşturun
Bir çocuk teması oluşturmak çok kolaydır. O kadar basit ki, aşağıdaki örneğimi kopyalayıp yapıştırabilirsiniz.
Bir alt tema oluşturmak için şu adımları izleyin:
- Tema dizini oluştur
- Alt temanız hakkında bilgi içeren bir stil sayfası oluşturun
- Ana Tema Stillerini Bağlayın
Tüm bu adımlardan sonra alt temanızı aktif hale getirebileceksiniz ve siteniz tamamen eskisi gibi görünecek ancak yine de kullanmaya devam edecek.
Öyleyse, her adıma daha yakından bakalım. Bu örnek için, orijinal Yirmi On Dört teması için bir alt tema oluşturacağım.
1. İlk önce tema dizininde yeni temanız için bir klasör oluşturun. Onun için bir isim seçebilirsiniz. Anlaşılır olması adına, ona yirmi on dört yaşındaki çocuğu diyeceğim.
2. Bu adımda, stil sayfaları içeren bir dosya oluşturun. Adı style.css olmalıdır. Bu kodu kopyalayıp az önce oluşturduğunuz dosyaya yapıştırın.
/* Tema Adı: Yirmi On Dört Çocuk Tema URI'si: http://yourwebsite..0.0 Etiketler: siyah, yeşil, beyaz, açık, koyu, iki sütunlu, üç sütunlu, sol kenar çubuğu, sağ kenar çubuğu, sabit düzen , duyarlı düzen, özel arka plan, özel başlık, özel menü, editör stili, öne çıkan resimler, esnek başlık, tam genişlikte şablon, mikro biçimler, yazı biçimleri, rtl dil desteği, yapışkan yazı , tema seçenekleri, çeviriye hazır, erişilebilirliğe hazır, duyarlı düzen, sonsuz kaydırma, kaydırma çubuğu, tasarım, yemek, dergi, dergi, haber, fotoğrafçılık, portföy, temiz, çağdaş, karanlık, zarif, modern, profesyonel , sofistike Metin Alanı: yirmi on dört çocuk */
Tema Adı: Yirmi On Dört Çocuk Tema URI'si: http://yourwebsite.com/twentyfourteen-child/ Açıklama: Yirmi On Dört'e dayanan ilk çocuk temam Yazar URI'si: http://web sitesi Şablon: yirmi on dört Sürüm: 1.0.0 Etiketler: siyah, yeşil, beyaz, açık, koyu, iki sütunlu, üç sütunlu, sol kenar çubuğu, sağ kenar çubuğu, sabit düzen, duyarlı düzen, özel arka plan, özel başlık, özel menü, editör- stil, öne çıkan görseller, esnek başlık, tam genişlikte şablon, mikro biçimler, son biçimler, rtl-dil desteği, yapışkan gönderi, tema seçenekleri, çeviriye hazır, erişilebilirliğe hazır, duyarlı düzen, sonsuz- kaydırma, kaydırma çubuğu, tasarım, yemek, dergi, dergi, haber, fotoğrafçılık, portföy, temiz, çağdaş, karanlık, zarif, modern, profesyonel, sofistike Metin Alanı: yirmi on dört çocuk |
Yukarıdaki kodda "Tema Adı" ve "Şablon" ile başlayan iki önemli satır vardır. "Tema adı", WordPress'e temanızın adını söyler ve bu ad tema seçicide görüntülenir. "Şablon", WordPress'e hangi temanın varsayılan tema olarak kabul edileceğini söyler.
Geri kalanların çoğu, metin alanı ve etiketler dışında sezgiseldir. Metin alanı, dizeleri çevirmek için kullanılır. Temanıza özel olmalı ve çeviri özelliklerini her kullandığınızda kullanılmalıdır. Daha fazla bilgi için WordPress Geliştiricileri için I18n'ye bakın. Etiketler bölümü, WordPress Tema Deposu için kullanılan etiketlerin bir listesidir. Örneğin, etiketleri orijinal temanın style.css dosyasından kopyaladım.
3. Artık alt temanız sorunsuz çalışıyor. Etkinleştirir ve sayfayı yüklerseniz, tüm içerik orada olur, ancak hiçbir stil bilgisi orada olmaz. Daha önce de söylediğim gibi, WordPress önce alt temanın işlevselliğini arar ve eksikse ana temaya geri döner.
WordPress'in orijinal tema dosyalarını yüklememesi için bir stil sayfası dosyamız var. Orijinal temanın stil sayfalarını yüklediğimizden emin olmak için, bunları sıraya alma sistemini kullanarak ekleyelim. Bu, temanın function.php dosyasında yapılabilir, bu yüzden şimdi basitçe aşağıdaki kodu kopyalayarak oluşturalım:
add_action("wp_enqueue_scripts", "enqueue_parent_styles"); function enqueue_parent_styles() ( wp_enqueue_style("ebeveyn stili", get_template_directory_uri()."/style.css"); )
add_action("wp_enqueue_scripts", "enqueue_parent_styles" ) ; function enqueue_parent_styles() ( wp_enqueue_style ("ebeveyn stili" , get_template_directory_uri () . "/style.css" ) ; |
Çocuk temaları nasıl çalışır?
Peki çocuk temaları gerçekte nasıl çalışır? Alt temalar dosya düzeyinde çalışır. Tema yükleme işleminde bir dosya kullanıldığında, dosyanın alt temada olup olmadığını kontrol eder. Eğer öyleyse, o dosyanın içeriğinin içeriği kullanılacaktır. Değilse, ana temadaki aynı dosya kullanılacaktır.
Ancak, bu kuralın bir istisnası vardır - tema işlevlerine sahip bir dosya. Hem ana hem de alt temalardan function.php dosyası arkadaş olacaktır. Alt temadaki işlevler üst öğelerin yerini alırsa, ya çok işlevli bir site alırsınız ya da dosyanın tüm içeriğini ana temanın işlevleriyle alt temaya kopyalamanız gerekir - sonuçta ne olabilir? bir tema uzantısı için yaparsınız.
İşlevselliği değiştirme süreci aşağıdaki gibidir. Başlığı değiştirmeniz gerekiyorsa, header.php dosyasını ana temadan alt temaya kopyalayın. Dosyayı değiştirin, kaydedin ve çalışmanızın sonuçlarının tadını çıkarın.
Tema geliştiricileri için küçük notlar
Tema oluşturuyorsanız, süreci kolaylaştırmak için izleyebileceğiniz birkaç öğretici var. En önemli ikisi, get_stylesheet_directory() ve get_template_directory() ve oluşturma süreci arasındaki farkı tanımlar. takılabilir işlevler.
Doğru dizin
Bu işlevleri kullanarak varlıklara erişirken, get_template_ türü işlevlerin ana tema dizinini, get_stylesheet_ türü işlevlerin alt tema dizinini göstereceğini her zaman hatırlamalısınız.
/images/twitter.png" alt="(!LANG:Twitter Logosu">Follow Me!} /images/github.png" alt="(!LANG:Github Logosu">On Github!}
< a href = "http://twitter.com/danielpataki"> < img src = "/images/twitter.png" alt = "(!LANG:Twitter Logosu" > Follow Me !}< / a > < a href = "http://github.com/danielpataki"> < img src = "/images/github.png" alt = "(!LANG:Github Logosu" > On Github !}< / a > |
get_stylesheet_directory_uri() kullanmanın faydalarından biri, alt tema geliştiricilerinin kendi görüntülerini doğru yere yerleştirerek kullanabilmeleridir. Öte yandan, alt temada resim yoksa, o zaman hiç görüntülenmez.
Bunun nedeni, alt tema etkinse, get_stylesheet_directory_uri() işlevinin hangi dosyayı yüklediğinizi kontrol etmemesi (bilmemesi), bu nedenle varlığını kontrol etmemesi ve her zaman alt tema için URI'yi döndürmesidir.
Değiştirilebilir Fonksiyonlar
Kullanılması gereken başka bir yöntem daha var - takılabilir WordPress işlevleri. Alt tema yazarlarının ana temada tanımlanan işlevleri geçersiz kılmasına olanak tanır. Bu, function_exists() işlevindeki işlevleri kaydırma anlamına gelir.
my_meta() adlı özel yazı metasını görüntülemek için bir işlev oluşturduğunuzu varsayalım. Bir alt temanın bu özelliği değiştirmesinin bir yolu yoktur. iki kez tanımlanamaz. Bu sorunun çözümü sadece tanımlı olmayan bir fonksiyon yaratmak olabilir (önce alt temanın fonksiyonlar dosyasının yüklendiğini unutmayın).
WordPress platformu, meseleleri kendi ellerine almak isteyenler, web sitelerinin tüm kontrolünü ele geçirmek ve bunları yönetmede bağımsız olmak isteyenler için bir mıknatıstır. WordPress bunu gerçekten kolaylaştırır ve web sitenizi tamamen özelleştirebilir. Biraz HTML, CSS ve/veya PHP bilginiz varsa, o zaman değiştiremeyeceğin hiçbir şey yok.
Demek istediğim, sadece varsayılan temaları karşılaştırın, Yirmi Onbeş ve Yirmi Ondört . Aynı platformda çalıştıklarına inanmak zor, değil mi? Bu nedenle, sitenizin görünümünü ve verdiği hissi tercihlerinize göre uyarlamak istemeniz gayet doğaldır. Bunu her zaman düşünmeyen WordPress kullanıcıları olduğundan şüpheliyim. Ancak bir sorun ortaya çıkıyor.
WordPress Kurulumu: Yanlış Yapıyor Olabilir
Bir web sitesinde değişiklik yapmaya çalışırken, çok sayıda insan temayı doğrudan düzenlemeyi tercih ediyor. Bu, mevcut dosyalarına dosya ekledikleri veya değiştirdikleri anlamına gelir. Bu bir takım problemler yaratır.
En büyük dezavantajı o temada bu şekilde yapılan herhangi bir değişiklik kaybolacak tema geliştirici tarafından güncellenir güncellenmez. Sonuç olarak, kullanıcılar ya temalarını güncel tutamayacaklar (ki bu güvenlik açısından kötüdür) ya da yaptıkları tüm özelleştirmeleri kaybedeceklerdir.
Her durumda, durum ideal olmaktan uzak.
kullanmak çok daha iyi bir fikirdir. Bu, orijinal tema dosyalarına dokunmadan web sitesinde istediğiniz sayıda değişiklik yapmanızı sağlar.
Kulağa hoş geliyor? Harika, çünkü bu makalede ne olduğuna daha yakından bakacağız. wordpress çocuk temaları bunları nasıl oluşturacağınızı ve nasıl kullanacağınızı, web sitenizi nasıl düzgün bir şekilde kuracağınızı.
Çocuk temaları nelerdir ve nasıl kullanılır?
Çocuk temalarından bahsederken öncelikle şunu konuşmamız gerekiyor. ana konular. Bir tema, yalnızca biri onun için bir alt tema oluşturduğunda ana tema olur. O zamana kadar bu sadece WordPress dizininde bulacağınız bir tema. Her tema, ana tema için gereken tüm dosyaları içerir.
Ancak böyle bir konu belki bir temanın ebeveyni olarak, bazıları bu amaç için diğerlerinden daha uygundur. Örneğin, bir alt temayı özelleştirmek için özel olarak yapılmış çerçeveler vardır.
Çocuk teması nedir? WordPress arka ucunda, bir alt tema normal bir tema gibi davranır. Diğer temalar gibi Görünüm → Temalar altında bulabilir ve etkinleştirebilirsiniz.
Büyük fark şu ki çocuk teması, çalışması tamamen ebeveynine bağlıdır. Bir ana tema olmadan, bir alt tema hiçbir şey yapmaz ve hatta etkinleştirilemez.
Bunun nedeni, bir alt temanın kendi başına bir tema olmaması, bunun yerine mevcut bir temanın dosyalarını değiştirmesi veya bunlara ekleme yapmasıdır. Ana temadaki her şeyi kullanır ve yalnızca değiştirmek istediğiniz kısımları değiştirir.
Stilleri, işlevleri, düzeni, şablonları ve daha fazlasını değiştirmenize olanak tanır. Aslında, ana temayı tanınmayacak şekilde özelleştirebilirsiniz. Ancak, onun varlığı olmadan hiçbiri işe yaramazdı.
Alt temaların faydaları
Bir çocuk temasının sayısız faydası vardır:
- Bunun yerine, yapabilirsiniz mevcut üzerine inşa etmek, böylece geliştirme süresini hızlandırır.
- Tasarımı ihtiyaçlarınıza göre özelleştirirken, karmaşık yapıların ve ana temaların işlevselliğinden yararlanabilirsiniz.
- Özel ayarları kaybetmeden ana temayı güncelleyebilirsiniz.
- Ayarlarınızdan memnun değilseniz, alt temayı kapatmanız yeterlidir; her şey eskisi gibi olacaktır.
- Bu, temaların nasıl çalıştığını öğrenmeye başlamanın harika bir yoludur.
Bir alt tema, görüntü klasörleri, şablon dosyaları ve daha fazlasını içerebilir. İstediğiniz kadar ayarı etkinleştirebilirsiniz.
Aslında, bir alt temanın yalnızca üç şeye ihtiyacı vardır: klasörler, stil sayfası dosyaları ve . Bu kadar. Ve sonra, bu iki dosya oldukça boş bile olabilir.
Alt Tema Ne Zaman Kullanılır?
Peki, bir WordPress web sitesinde herhangi bir değişiklik yapmak istediğinizde bir alt tema oluşturmak her zaman gerekli midir? Numara.
Sadece yapmayı planlıyorsan küçük değişiklikler renk değişiklikleri veya farklı bir yazı tipi gibi, özel bir CSS eklentisi yüklemek en iyisidir. . Birçok tema artık yerel olarak özel kod ekleme olanağı da sunuyor.
Ancak, girmeyi planlıyorsanız Büyük değişiklikler Bir tasarım revizyonu, birkaç şablon değişikliği veya bu büyüklükteki herhangi bir şey yapmak gibi, o zaman bir çocuk teması kesinlikle çözümdür.
Temel alt tema kurulumu
Pekala, artık bir çocuk temasının ne olduğunu ve bizim için neler yapabileceğini bildiğimize göre, adım adım nasıl oluşturulacağına bir göz atalım. Örneğimiz için, WordPress için en son varsayılan tema olan Yirmi Onbeş'i kullanacağız. Endişelenme, çok kolay ve hemen elde edeceksin.
Not:
Aşağıdaki eylemler kullanılarak doğrudan sunucu üzerinde gerçekleştirilebilir. Ancak, önce her şeyi yerel olarak ayarlamanızı, ardından alt tema klasörünü sıkıştırmanızı ve bunu Tema menüsü aracılığıyla normal bir tema olarak yüklemenizi öneririm. Bu, her şeyi çok daha kolay hale getirecek.
wp-content/themes içinde klasör oluşturun
Belirtildiği gibi, bir alt temanın üç şeye ihtiyacı vardır: kendi klasörü, stil sayfaları ve bir function.php dosyası. Bir klasörle başlayacağız.
Herhangi bir tema gibi, alt temalar da WordPress kurulumunuzun wp-content/themes klasöründe bulunur. Öyleyse oraya gidelim ve alt temanız için yeni bir klasör oluşturalım.
En iyi uygulama, tema klasörünüze aynı ana tema adını vermek ve -child eklemektir. Yirmi onbeş temasını kullandığımız için klasörümüzü yirmi onbeş-çocuk olarak adlandıracağız.
İstediğiniz ismi kullanabilirsiniz; sadece boşluk içermediğinden emin olun, çünkü bu hatalara yol açabilir.
Stil sayfaları oluşturma
Artık klasörümüze sahip olduğumuza göre, bir stil sayfasına ihtiyacımız olacak. Bilmiyorsanız, stil sayfası sitenin tasarımını tanımlayan kodu içerir. Temaların birden fazla stil sayfası olabilir, ancak şimdilik bir tanesiyle yetineceğiz.
Stil sayfası oluşturmak kolaydır: Sadece yeni bir metin dosyası oluşturun ve ona style.css adını verin. Hazır! Ancak, çalışması için dosyanın en başına "stil sayfası başlığı" olarak adlandırılan aşağıdaki kodu eklememiz gerekecek (kod WordPress Codex'in izniyle):
/* Tema Adı: Yirmi On Beş Alt Tema URI'sı: http://example.com/twenty-fifteen-child/ Açıklama: Yirmi Onbeş Çocuk Tema Yazarı: John Doe Yazar URI'si: http://example.com Şablon: yirmi beş Versiyon: 1.0.0 Lisans: GNU Genel Kamu Lisansı v2 veya üzeri Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html Etiketler: açık, koyu, iki sütunlu, sağ kenar çubuğu, duyarlı düzen, erişilebilirliğe hazır Metin Alanı: yirmi on beş çocuk */
İşte her satırın anlamı:
- Tema adı
Bu, WordPress arka ucunda temanız için görüntülenecek addır. - Tema URI'si
Bağlantı, temanın web sitesine veya demo sayfasına işaret eder. Bu genellikle temanın WordPress dizinine kabul edilebilmesi için bulunması gereken yazar bağlantısıdır. - Açıklama
Temanızın bu açıklaması, “Tema Ayrıntıları” düğmesine tıkladığınızda tema menüsünde görüntülenecektir. - Yazar
Bu durumda bu yazarın adı sizsiniz. - Yazar URI'si
Dilerseniz site adresinizi buraya yazabilirsiniz. - Şablon
Bu kısım kritik. Klasör adı anlamına gelen ana temanın adı geliyor. Büyük/küçük harf duyarlı olduğunu ve doğru bilgileri girmezseniz bir hata alacağınızı unutmayın, bu yüzden iki kez kontrol edin! - versiyon
Alt temanızın sürümünü görüntüler. Genel olarak, herkes 1.0'da başlar. - Lisans
Bu, çocuk temanızın lisansıdır. WordPress dizinindeki temalar genellikle GPL lisansı altında yayınlanır; ana temanızla aynı lisansa bağlı kalmalısınız. - Lisans URI'si
Bu, tema lisansınızın bağlantısının belirtildiği adrestir. Yine, konu ebeveyninizin söylediklerine bağlı kalın. - Etiketler
Etiketler, başkalarının temanızı WordPress dizininde bulmasına yardımcı olur. Bu nedenle, bazılarını eklerseniz, güncel olduklarından emin olun. - metin alanı
Bu bölüm, uluslararasılaştırma ve konuları çevrilebilir hale getirmek için kullanılır. Bu, temanızın “sümüklü böcek”iyle eşleşmelidir.
Kendinizi biraz bunalmış hissediyorsanız (zaten?), tüm bilgilerin aslında gerekli olmadığını bilmek sizi mutlu edebilir. Aslında, gerçekten ihtiyacınız olan tek şey bir tema adı ve bir şablon.
Gerisi yalnızca temanızı yayınlamayı planlıyorsanız önemlidir. Bu nedenle alt temamın başlığı aşağıdaki gibi görünüyor. Kopyalamaktan ve kendi değişikliklerinizi yapmaktan çekinmeyin.
/* Tema Adı: Twenty Fifteen Child Theme Açıklama: Twenty Fifteen varsayılan WordPress temasının bir alt teması Yazar: AndreyEx Şablon: yirmi onbeş Sürüm: 1.0.0 */
Bir alt temayı etkinleştirme
Klasörü ve stil sayfalarını oluşturduktan sonra Görünüm → Temalar'a gidin ve orada alt temayı bulun. “Tema Ayrıntıları” düğmesine tıkladığınızda, stil sayfası başlığının içeriğini göreceksiniz. Tüm bilgi bu.
Tamam, şimdi "Etkinleştir" etiketli düğmeye tıklayın. Aferin! Temanız etkinleştirildi. Ancak, web sitenize bakarsanız, şöyle görünecektir:
Endişelenme, her şey yolunda. Sen batırmadın. Yüzünü kese kağıdından çıkar. Sitenizin boş olmasının nedeni henüz bir stili olmamasıdır.
Teorik olarak, bir alt tema oluşturmak için bir stil sayfası ve bir klasöre sahip olmanın yeterli olduğunu size göstermek istedik. Ve senin için işe yaradıysa, zaten yaptın! Ancak, iyileştirmeye devam edelim.
function.php dosyası oluşturma
Functions.php dosyası, bir WordPress web sitesini değiştirmenize ve işlevsellik ve özellikler eklemenize olanak tanır. Hem PHP hem de yerleşik WordPress işlevlerini içerebilir. Ayrıca kendi fonksiyonlarınızı da oluşturabilirsiniz.
Kısacası, function.php şu kodu içerir: temelden değişir web sitesinin görünümü ve hissi.
Bir dosya oluşturmak, daha kolay değilse de bir stil sayfası oluşturmak kadar kolaydır. Tek ihtiyacınız olan function.php adlı bir metin dosyası ve ardından aşağıdaki kodu yapıştırın:
Cidden, hepsi bu. Sadece açık php etiketinden sonra ekleyin. Tabii ki, başlığa bazı bilgiler yazabilirsiniz (WordPress'in yerine getirmeye çalışmaması için yorum yapmayı unutmayın). Tema klasörünüze ekleyin.
Şimdi, daha fazlasını söylememe izin verin: gerekli işlevler.php Temanızı değiştirmek için PHP kullanmayı düşünmüyorsanız, onsuz yapabilirsiniz. Stil sayfası ve diğer dosyalar sizin için yeterli olabilir.
Ancak öncelikle bu önemli dosya hakkında ne bileceksiniz, ikinci olarak da bir sonraki adımdan dolayı bu kısmı eklemek istedim.
Üst Stil Kalıtımı
Yani muhtemelen web sitenizin hala gövde metninde olduğunu biliyorsunuzdur. Bu durumu değiştirmenin zamanı geldi. Nasıl? Sana göstereceğim.
Bir ana tema kullandığınız için muhtemelen sitenizin gelecekteki yapısı hakkında iyi bir fikriniz vardır. Örneğimiz Yirmi Onbeş için bu noktaya gelmek istiyoruz:
Buraya ulaşmak için, ana temanızın stil sayfasındaki bilgileri devralmanız gerekir. Bunu yapmanın iki yolu vardır.
Bunlardan biri CSS ve @import kuralı kullanıyor. Aşağıdaki kodu style.css dosyanıza kopyalayarak, alt temanıza içeriğinizi görüntülerken ana temanızın stil sayfasında bulunan bilgileri kullanmasını söylüyorsunuz.
@import url("../yirmi onbeş/style.css");
Ancak unutmayın ki bu eski yol ebeveyn stili devralma ve artık önerilmez. Bunun nedeni performanstır.
Birden çok stil sayfasını içe aktarmanız gerekiyorsa (ki bu akıllıca bir yol değildir), @import kullanmak onları yüklenmeye zorlar. art arda. Bu, sayfa yükleme süresini birkaç saniye yavaşlatabilir, bu iyi bir şey değildir.
İkincisi, ebeveynin stil sayfasını yüklemenin önerilen yolu - ve daha önce function.php'yi oluşturmamızın nedeni - wp_enqueue_style() kullanmaktır. Bu WordPress özelliği, stil sayfası dosyalarını bir WordPress temasına güvenle ekler.
Bizim durumumuzda, karşılık gelen kod biraz şuna benziyor:
Add_action("wp_enqueue_scripts", "enqueue_parent_styles"); function enqueue_parent_styles() ( wp_enqueue_style("ebeveyn stili", get_template_directory_uri()."/style.css"); )
Bu kodu function.php dosyanızın başına yapıştırdığınızdan ve kaydettiğinizden emin olun (dosyayı yüklemeyi unutmayın, kullanın). Şimdi dosyanızı kontrol edin; şöyle görünmelidir:
Memnun, değil mi? Tebrikler, başardınız! WordPress'te ilk alt temanızı oluşturdunuz.
Ancak, haklı olarak, tam olarak ana temaya benzediğini iddia edebilirsiniz. Öyleyse çocuk temasının anlamı nedir?
Ekstra Puanlar: Tema Resmi Ekleme
Her şeyi elde etmek istiyorsanız, bir tema resmi ekleyebilirsiniz. Bu resim, WordPress'teki tema menüsünde görüntülenecektir.
Tek yapmanız gereken ekran görüntüsü.png adında bir PNG dosyası oluşturmak ve onu tema klasörünüze (bizim durumumuzda yirmi on beş çocuk) yerleştirmek. Bunu, resimler gibi bir alt dizine değil, en üst düzey dizine yerleştirdiğinizden emin olun.
JPEG ve GIF gibi diğer görüntü biçimleri de çalışır, ancak PNG önerilir. Görüntü genellikle tema tasarımının bir ekran görüntüsü olduğundan, şimdi yapabilir veya temayı özelleştirmeyi bitirene kadar bekleyebilirsiniz.
WordPress'te Bir Çocuk Temasını Özelleştirme
Her şeyi doğru yaptıysanız, alt temanız şimdi etkinleştirilmeli ve tam olarak ebeveynine benzemelidir. İşlerin ilginçleştiği yer burasıdır.
Artık temamızı özelleştirmeye başlayabilir ve istediğimiz sonucu elde etmek için her şeyi yeniden konumlandırabiliriz. Uyarlamalar farklı şekillerde yapılabilir.
Özel Stilleri Uygulama
Temanızda değişiklik yapmanın en kolay yollarından biri CSS'dir. Renkleri, boyutları, yazı tiplerini ve diğer temel tasarım öğelerini özelleştirmenize olanak tanır.
CSS konusunda deneyimliyseniz, sitenizin tüm düzenini gerçekten değiştirebilirsiniz. Bununla birlikte, bu tür köklü değişikliklerin getirilmesi genellikle farklı şekillerde yapılır. Buna geri döneceğiz.
Şimdilik, bilmeniz gereken tek şey style.css'nin yerinde olduğu, alt temanın stil sayfası kodunu ekleyerek ana temadaki tüm stilleri geçersiz kılabilirsiniz.
Önemli: style.css dosyanızda ana temanın stilini belirlediyseniz, herhangi bir özel stil eklemeyi unutmayın. altında@import ifadesinde, aşağıdaki kod parçacığında olduğu gibi. (function.php kullanmanız gerektiğini biliyor olsanız da, değil mi?)
/* Tema Adı: Twenty Fifteen Child Theme Açıklama: Twenty Fifteen varsayılan WordPress temasının bir alt teması Yazar: AndreyEx Şablon: yirmi onbeş Sürüm: 1.0.0 */ // Özel stiller buraya gelir
Yirmi Onbeş güzel tasarlanmış bir temadır. İçeriğin nefes almasına izin veren ve göze yatıştırıcı olan cömert beyaz alanı gerçekten seviyorum.
Ancak, diyelim ki hayran değilsiniz ve temayı düzeltmek istiyorsunuz. Bunda bir zarar yoktur. Bu durumda, stillerin nasıl değiştirilmesi gerektiğini anlamak için Firebug gibi bir araç kullanacaksınız. Şöyle bir şey yaptık:
Giriş başlığı ( dolgu: 0 %10; ) .entry-title, .widecolumn h2 ( font-size: 3.8rem; line-height: 1.2208; margin-bottom: 1.2208em; ) .giriş-içerik, .giriş-özeti ( dolgu: 0 %11 %11; )
Birkaç ayar yapmak, istediğimizi elde etmek ve bunları alt temamızın style.css dosyasına kopyalamak istiyoruz.
Giriş başlığı ( dolgu: 0 7%; ) .entry-title, .widecolumn h2 ( margin-bottom: 0.7em; ) .giriş içeriği, .giriş-özet ( dolgu: 0 7% 10%; )
Bir alt temaya özel stiller eklemek, ana temadaki stilleri geçersiz kılar.
Üst Tema Dosyalarını Geçersiz Kılma
Bir stil sayfasıyla yalnızca bireysel stil bildirimlerini özelleştirmekle kalmaz, aynı zamanda tüm ana tema bileşenlerini geçersiz kılabilirsiniz.
Üst dizinde bulunan her tema dosyası için WordPress, ilgili dosyanın alt temada olup olmadığını kontrol eder ve varsa onu kullanır. Bu, ana temadaki header.php dosyasının ana tema eşdeğerini geçersiz kılacağı anlamına gelir.
Bu nedenle, sayfa düzeninde beğenmediğiniz bir şey varsa, uygun dosyayı kopyalayın, değişiklik yapın ve onu alt tema klasörünüze yükleyin. Değişiklikler alt temada görünecek, orijinal dosyaya dokunulmayacak.
Örneğin, Twenty Fifteen theme klasöründen content.php dosyasını alıp bir editör ile açarsak, diğer şeylerin yanı sıra aşağıdaki kodu bulacağız:
Bakalım kod sırasını değiştirdiğimizde ne olacak:
", esc_url(get_permalink())), "
"); endif; ?>
Gördüğünüz gibi, dosyayı alt tema klasörüne kaydedip yükledikten sonra, her blog gönderisinin resmi artık gönderi başlığının altında görünecektir.
Tabii ki biraz stil kullanabilir, ama siz anladınız. Sitenizde tüm değişiklikleri yapmak için bu yöntemi kullanabilirsiniz. Sadece alt temaya ebeveyn ile aynı ağaç klasör yapısını vermeyi unutmayın. Örneğin, değiştirmek istediğiniz dosya ana temanızda page-templates adlı bir klasördeyse, alt temanızın dizininde aynı ada sahip bir klasör oluşturabilir ve dosyayı oraya yerleştirebilirsiniz.
Şablon dosyalarıyla çalışma
Alt tema klasörüne bir kopya yerleştirip ayarlayarak ana temadaki herhangi bir dosyanın üzerine yazabileceğimizi öğrendik. Ancak, şu dosyaları kullanın: sadece çocuk temasında var bu da mümkün. Şablon dosyaları buna iyi bir örnektir.
Alt temamız için tam sayfa genişliğinde bir şablon oluşturmak istediğimizi varsayalım. Yirmi onbeş temasının tam ekran sunuma uygun olmadığını ilk kabul eden ben olacağım, ama yine de tanıtım amacıyla yapalım.
Tam genişlikte yirmi beş sayfa oluşturmak için dört şey yapmamız gerekiyor: kendi sayfa şablonumuzu, özel bir üstbilgi ve altbilgi dosyamızı oluşturun ve ardından bazı özel CSS ekleyin. Sayfa şablonuyla başlayalım.
Özel sayfa şablonumuz için, ana temadan page.php dosyasını kopyalayacağız, onu custom-full-width.php olarak yeniden adlandıracağız ve onu alt temamızda page-templates adlı bir klasöre yerleştireceğiz.
Şimdi, kodda birkaç değişiklik yapalım, böylece şöyle görünecek:
Burada yaptığımız tek şey, WordPress'e bunun bir sayfa şablonu olduğunu söyleyen bir başlık girmek, burada get_header ve get_footer'ı header-custom.php ve footer-custom.php adlı iki dosya içerecek şekilde değiştirdik.
Tam genişlikte görmek istediğimiz sayfaya dönelim ve yeni oluşturduğumuz şablonumuzda sayfa şablonunu değiştirelim.
Şimdi tema dosyasında özel üst bilgi ve alt bilgimizi oluşturma zamanı. İlk olarak, ana temanıza gidin ve header.php ve footer.php dosyasını alt tema klasörünüze kopyalayın ve bunları sırasıyla header-custom.php ve footer-custom.php olarak yeniden adlandırın.
Şimdiye kadar, sayfamız öncekiyle aynı görünüyordu. Özelleştirme zamanı. Özel başlığımızla başlayalım.
class="no-js">
"> "> >"rel="ana sayfa">
"rel="ana sayfa">
Burada birkaç şey yaptık. bir eleman verdik
full-width-body adlı özel bir sınıf. Ayrıca onlara özel CSS atayabilmemiz için site-header , site-branding ve site-content öğelerine tam genişlikte bir sınıf ekledik.Son bir adım olarak, sayfamızda tam genişlikte göstermelerini istemediğimiz için tüm kenar çubuğu öğelerinden (kenar çubuğu ve get_sidebar çağrısı gibi) kurtulduk.
footer-custom.php dosyasında yaptığımız tek değişiklik, tam genişlikli sınıfı altbilgi öğesine eklemek oldu, şöyle:
Geriye kalan tek şey stil sayfamıza bir kod girmek:
Full-width-body::before ( display: yok; ) .site-content.full-width ( kayan nokta: yok; kenar boşluğu: 0 otomatik; ) .site-header.full-width ( arka plan rengi: #fff; kutu -gölge: 0 1px 0 rgba(0, 0, 0, 0.15); kenar boşluğu: 0; dolgu: %2 0; ) .site-branding.tam genişlik ( kenar boşluğu: 0 otomatik; genişlik: %58.8235; ) .site -footer.full-width ( kayan nokta: yok; kenar boşluğu: 0 otomatik; )
TA-dah! Ve işte tam genişlikteki sayfamız:
Biraz cila kullanabilir ama şimdilik bununla yetinelim.
function.php'yi kullanma
Functions.php dosyasına dokunduk. Bu dosya, temanızda PHP ve yerleşik WordPress işlevlerini etkinleştirmek için kullanılabilir. Bu size birçok özelleştirme seçeneği sunacaktır.
Not:
Alt temadaki functions.php dosyası, ana temadaki aynı adlı dosyaya ek olarak yüklenir. Aslında, orijinal dosyanın yerini alan style.css'den farklı olarak, ana temadan hemen önce yürütülür. Bu nedenle, ana temanızın functions.php dosyasının tüm içeriğini alt temanızdaki bir dosyaya kopyalamayın. Büyük olasılıkla, ana temadaki işlevi değiştirmek için ikincisini kullanın.
Çocuk temamızı oluşturmaya geri dönelim. Bu örnekte, sitenin alt bilgisinde bir alan olan bir pencere öğesi eklemek istiyorum. Bunu yapmak için önce widget'ı function.php dosyamıza kaydetmemiz gerekiyor.
"Altbilgi Widget'ı", "id" => "altbilgi widget'ı", "before_widget" => "
"));Not:
Etiket
Bu, yeni oluşturulan alan pencere öğesinin alt bilgimizde görünmesini sağlayacaktır. Ancak bir web sitesinde kullanılabilir olması için aşağıdaki kodu footer.php'ye eklememiz gerekiyor:
Bir kez daha, ana temanın yirmi onbeş temasından footer.php dosyasını kopyalayacağız ve alt temamıza yapıştıracağız. Ancak bu sefer adını olduğu gibi bırakacağız.
Bundan sonra, yeni üstbilgi ve altbilgi widget'ımıza bir çağrı eklememiz gerekiyor, bu yüzden şöyle görünüyor:
style.css dosyasında gereken minimum değişiklikler:
altbilgi-widget ( kenar boşluğu: %2 0; )
Şimdi yeni widget alanımıza arama widget'ını eklediğimizde ilk sayfa şöyle görünecek:
O kadar da zor değil, değil mi?
Temada Kancaları Kullanma
Bir alt temayı function.php ile değiştirmenin en iyi yolu . Tema kancalarını daha önce hiç duymadıysanız, bunları, temel dosyaları düzenlemek zorunda kalmadan içerik, özellik ve başka şeyler eklemenize olanak tanıyan tema dosyalarındaki küçük çapalar olarak düşünün.
İki tür kanca vardır: eylem kancalar ve filtre kancalar. Kanca eylemleri, mevcut işlevlere özel işlevler eklemenize olanak tanır. Kanca konumunda bulunan özellikleri değiştirmenin bir yolu olarak kanca filtresi.
Nasıl daha net hale getirileceğine dair bir örneğe bakalım. Bir eylem kancası kullanacağız. Temamızın altbilgisine bir widget eklediğimiz son örneğimize geri dönelim. Alt temamızdaki footer.php dosyasını değiştirmek yerine, aynısını bir eylem kancası ile başarabiliriz.
Küçük bir fonksiyon yazalım:
işlev custom_footer_widget() ( if (is_active_sidebar("footer-widget")) : dynamic_sidebar("footer-widget"); endif; )
Bunun, daha önce footer.php'ye yapıştırdığımız kodla aynı olduğunu fark edeceksiniz, sadece bu sefer bir fonksiyona sarılmış (ve onu function.php dosyasına dahil ettiğimiz için etrafındaki php açma ve kapama etiketleri olmadan) .
Bunun yararı, artık tüm işlevi, dosyanın kendisini düzenlemek zorunda kalmadan ana temamızın ana dosyalarındaki kancaya ekleyebilmemizdir. Bu durumda, ana tema dosyasında yirmi onbeş_kredi hedefliyoruz. Yirmi onbeşinci konudaki alt bilgiden ("AndreyEx Web Siteleri Oluşturma") sorumludur ve footer.php'de şu şekilde görünür:
Do_action("yirmi onbeş_kredi");
Bu kancaya yeni widget alanı işlevimizi eklemek için tek gereken, alt temamızın functions.php'sindeki bir satır daha:
Add_action("yirmi onbeş_kredi", "custom_footer_widget");
Artık widget alanı, temanın altbilgi dosyasına kod kopyalamak veya eklemek zorunda kalmadan daha önce sahip olduğumuz yerde görünecek.
Not:
Functions.php yolunu izliyor ve gidiyorsanız, değiştirilmiş footer.php dosyasını alt temanızdan kaldırmayı unutmayın; Aksi takdirde, widget alanı iki kez görüntülenecektir.
Bir çocuk temasında kancalarla çok daha fazlası yapılabilir. Bazı çerçeveler, herhangi bir şeyi doğrudan .
Ancak bu konu bu makalenin kapsamı dışındadır. Daha fazlasını öğrenmekle ilgileniyorsanız, çevrimiçi olarak bulabileceğiniz bazı mükemmel kaynaklar var.
Toplam
Şimdiye kadar umduğunuz gibi, WordPress'te bir alt tema oluşturmak çok zor değil. Bütün bunlar bir klasör artı iki dosya alır.
Ancak, sadeliğine rağmen, bir çocuk teması oldukça güçlü bir araçtır. Bu izin verir tam ve güvenli bir web sitesi kurmak herhangi bir çekirdek dosyasını düzenlemeden.
Bunun faydaları sayısızdır: Sıfırdan bir tema yazmak zorunda kalmadan mevcut bir temanın veya çerçevenin üzerine inşa edebilirsiniz; değişiklikleriniz tema güncellemelerinden korunur; ve işler ters giderse, her zaman geri dönmek için çalışan bir temanız olacak.
Ayrıca, birinci sınıf bir eğitim alırsınız. O kadar da kötü değil, değil mi?
Bu nedenle, ana temaları öğrenmek, herhangi bir WordPress tasarımcısı veya geliştiricisinin kariyerinde ve . Umarım bu makale başlamanıza yardımcı olur.
WordPress için alt temalar oluşturma deneyiminiz nedir? Ekleyeceğiniz bir şey var mı? Farklı yapabileceğin bir şey var mı? Lütfen yorumlarda paylaşın.
Alt tema, "ana" tema olarak adlandırılan başka bir temanın işlevselliğini ve tasarımını devralan bir temadır. Alt tema, WP geliştiricileri tarafından mevcut bir temayı kendileri için değiştirmeleri için önerilen bir yoldur.
Neden bir çocuk teması kullanıyorsunuz?
Bir alt tema kullanmak istemenizin birkaç nedeni vardır:
- Temayı doğrudan değiştirirseniz ve güncellenirse, değişiklikleriniz kaybolur. Bir alt tema kullanarak, değişikliklerinizin kaydedileceğinden emin olacaksınız.
- Bir çocuk teması kullanmak, geliştirme süresini hızlandırabilir.
- Bir alt tema kullanmak, WordPress tema geliştirme sürecini öğrenmenin iyi bir yoludur.
WordPress alt teması nasıl yapılır
Bir alt tema, oluşturmanız gereken en az bir klasör (alt tema dizini) ve iki dosyadan (style.css ve functions.php) oluşur. Yani, ihtiyacınız olacak:
- Alt tema dizini
- stil.css
- işlevler.php
İlk adım, alt tema için wp-content/themes klasörüne yerleştirilecek bir dizin oluşturmaktır. Alt tema dizininin adının “ -child ” son ekiyle bitmesi önerilir (gerekli olmasa da, özellikle genel kullanım için bir tema oluşturuyorsanız).
Ayrıca alt tema dizini adında boşluk olmadığından emin olmanız gerekir, aksi takdirde hata verir. Yukarıdaki ekran görüntüsünde alt temamızın adı “yirmi onbeş-çocuk”, yani ana temanın adıdır. yirmi onbeş.
Sonraki adım, alt tema (style.css) için bir stil sayfası oluşturmaktır. Stil dosyası aşağıdaki meta bilgilerle başlamalıdır:
/* Tema Adı: Yirmi On Beş Alt Tema URI'sı: http://example.com/twenty-fifteen-child/ Açıklama: Yirmi Onbeş Çocuk Tema Yazarı: John Doe Yazar URI'si: http://example.com Şablon: yirmi beş Versiyon: 1.0.0 Lisans: GNU Genel Kamu Lisansı v2 veya üzeri Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html Etiketler: açık, koyu, iki sütunlu, sağ kenar çubuğu, duyarlı düzen, erişilebilirliğe hazır Metin Alanı: yirmi on beş çocuk */
Tema Adı: Yirmi On Beş Çocuk Tema URI'si: http://example.com/twenty-fifteen-child/ Açıklama: Yirmi Onbeş Çocuk Teması Yazar URI'si: http://example.com Şablon: yirmi elli Sürüm: 1.0.0 Lisans: GNU Genel Kamu Lisansı v2 veya üstü Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html Etiketler: açık, koyu, iki sütun, sağ kenar çubuğu, duyarlı düzen, erişilebilirliğe hazır Metin Alanı: yirmi on beş çocuk |
Dikkat etmeniz gereken önemli bilgiler:
- Bu örneğin metnini durumunuza göre değiştirmeniz gerekecektir.
- " Şablon " dizesi, ana tema dizininin adına karşılık gelir. Örneğimizde, ana tema Yirmi Onbeş'tir, bu nedenle " Şablon " dizesi " yirmi on beş " içerir. Sizin durumunuzda farklı bir konu olabilir, buna göre ayarlayın.
- Prensip olarak, stil dosyası (style.css) bir alt tema oluşturmak için zaten yeterlidir. Ancak, stilleri yüklemek üzere doğru bir şekilde sıraya koymak için bir function.php dosyasına ihtiyacınız olacak (aşağıya bakın).
Üçüncü ve son adım, üst ve alt stil dosyalarını sıraya koymaktır.
Önceki yöntemin, @import yönergesini kullanarak üst stilleri içe aktarmayı içerdiğini unutmayın. Bu artık modası geçmiş bir uygulamadır.
Stiller nasıl doğru ve doğru bir şekilde yüklenir
Ana stil sayfasını kuyruğa almanın doğru yöntemi, kanca(veya, İngilizce olarak, eylem) bir wp_enqueue_scripts işlevi olarak.
Bu yöntem ayrıca alt işlevler.php dosyasında wp_enqueue_style() işlevinin kullanılmasını içerir. Bu nedenle, bu dosyayı alt tema dizininizde oluşturmanız gerekir.
Alt işlevler.php dosyasının ilk satırı, açılış PHP etiketiyle başlar (
Aşağıdaki işlev örneği, ana temanın tüm CSS kurallarını içeren yalnızca bir ana style.css dosyasına sahip olması durumunda çalışacaktır. Temanızın birden fazla .css dosyası varsa (yani.css , style.css , main.css ) o zaman ana temanın tüm gerekli bağımlılıklarını karşılamanız gerekir.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); )
Tipik olarak, bir alt temanın stil sayfası otomatik olarak yüklenir. Değilse, onu da kuyruğa almanız gerekir. Ebeveyn stilini bir bağımlılık olarak ayarlayarak, alt temanın stillerinin ondan sonra yüklendiğinden emin olun.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); wp_enqueue_style("child-style", get_stylesheet_directory_uri() . "/style.css", array("parent-style) ")); )
add_action("wp_enqueue_scripts", "theme_enqueue_styles" ) ; function theme_enqueue_styles()( wp_enqueue_style ("ebeveyn stili" , get_template_directory_uri () . "/style.css" ) ; wp_enqueue_style("alt stil", get_stylesheet_directory_uri(). "/style.css" , dizi ("ebeveyn stili") |
Alt temanız artık etkinleştirilmeye hazır. Yönetici paneline giriş yapın, ardından sayfaya gidin Görünüm > Temalar. Alt temanızı tema listesinde ve etkinleştirilmeye hazır olarak görmelisiniz. (Mevcut kurulumunuzda çoklu site etkinse temayı etkinleştirmek için uygun panele geçmeniz gerekir. Bundan sonra geri dönün ve temayı etkinleştirin).
Önemli: Aktivasyondan sonra menünüzü yeniden kaydetmeniz gerekecek ( Görünüm > Menü veya Görünüm > akort> Menü) ve ana tema tarafından sağlanmışsa, bir arka plan resminin yanı sıra bir başlık resmi de dahil olmak üzere tema seçenekleri.
Şablon dosyaları
Stillerden daha fazlasını değiştirmek istiyorsanız, herhangi bir ana tema dosyasını geçersiz kılmanın bir yolu vardır. Bunu yapmak için, alt tema klasörünüze aynı ada sahip bir dosya eklemeniz yeterlidir. Bu nedenle, site yüklendiğinde ana tema dizinindeki ilgili dosyayı "geçersiz kılar".
Örneğin, PHP kodunun başlığını değiştirmek istiyorsanız, alt tema dizininize bir header.php dosyası ekleyebilirsiniz ve bu dosya, ana temanın header.php dosyası yerine kullanılacaktır.
Orijinal olarak ana temada olmayan dosyaları bir alt temaya da dahil edebilirsiniz. Örneğin, belirli bir sayfa veya kategori için üst şablondan daha işlevsel bir şablon oluşturabilirsiniz.
function.php'yi kullanma
style.css'den farklı olarak, bir alt temanın functions.php dosyası, ebeveynin kopyasını geçersiz kılmaz. Aksine, deyim yerindeyse ona bir ektir (daha doğrusu, yüklüdür). ön ebeveyn kopyası).
Böylece, bir alt temanın function.php'si, ana temanın işlevselliğini değiştirmek için akıllı ve sorunsuz bir yol sağlar. Diyelim ki temanıza bir PHP işlevi eklemek istiyorsunuz. En hızlı yol, temanın function.php dosyasını açmak ve işlevi oraya koymaktır. Ancak bu pek akıllıca değil: temanın bir sonraki güncellenmesinde işleviniz ortadan kalkacaktır.
Daha makul olan alternatif bir yol var: Bir alt tema oluşturabilir, buna bir function.php dosyası ekleyebilir ve işlevinizi yeni oluşturulan dosyaya koyabilirsiniz. İşlev, aynı işi oradan da yapacak ve ana temanın gelecekteki güncellemelerinden zarar görmemesi avantajıyla. Bu nedenle önemli bir not: üst işlevler.php dosyasının tüm içeriğini aynı alt dosyaya kopyalamayın.
Functions.php'nin yapısı basittir: başında açılış PHP etiketi ve altına PHP kodunuzu yerleştirirsiniz. Bu dosyaya istediğiniz kadar kod yerleştirebilirsiniz. Aşağıdaki örnek, basit bir şey yapan ilkel bir functions.php dosyasını göstermektedir: etikete bir favicon bağlantısı ekleyin
HTML sayfaları." . "\n"; ) add_action("wp_head", "favicon_link");
Tema geliştiricileri için ipucu: Önce bir alt temanın function.php dosyasının yüklenmesi, kullanıcı işlevlerinin geliştirici işlevlerinin yerine geçmesini sağlayabileceğiniz anlamına gelir, yani. kullanıcı sizinkiyle aynı işlevi yarattıysa, ana işlev olacaktır. Sadece bir koşul ekleyin:
if (! function_exists("theme_special_nav")) ( function theme_special_nav() ( // Bir şeyler yapın. ) )
Bu durumda, alt tema, yalnızca önceden bildirerek ebeveynin PHP işlevini değiştirebilir.
Alt temanıza dosyalar dahil etmek
Alt tema yapısının parçası olması gereken bir dosya eklemeniz gerektiğinde, get_stylesheet_directory() işlevini kullanın. Üst stil sayfası dosyası style.css alt stil.css ile değiştirildiğinden ve alt stil.css alt temanın alt dizininin kök klasöründe bulunduğundan, get_stylesheet_directory() ana temayı değil alt tema dizinini gösterir. dizin.
Aşağıda, bir alt tema yapısında saklanan bir dosyaya başvurmanız gerektiğinde get_stylesheet_directory'i nasıl kullanabileceğinizi gösteren require_once yapısının kullanımına bir örnek verilmiştir.
require_once(get_stylesheet_directory() . "/my_included_file.php");
require_once (get_stylesheet_directory(). "/my_included_file.php"); |
Ek faydalı bilgiler
Gönderi biçimlerini kullanma
Bir alt tema, ana temada tanımlanan gönderi biçimlerini devralır. Bir alt tema oluştururken, add_theme_support("post-formats") kullanmanın, ana temada tanımlanan biçimleri geçersiz kılacağını, bunlara ekleme yapacağını unutmayın.
RTL desteği (sağdan sola yazma)
RTL dillerini desteklemek için rtl.css dosyasını alt temanıza ekleyin. Bu içerir:
/* Tema Adı: Yirmi On Dört Çocuk Şablonu: yirmi on dört */
Bir WordPress alt teması oluşturmak ister misiniz? WordPress'in temellerini öğrendikten sonra, sitenin şablon tasarımını zevkinize ve ihtiyaçlarınıza göre değiştirmek için oldukça makul ve anlaşılır bir istek var. Bir alt tema oluşturmak, web siteleri oluşturmaya başladığınız yerdir. Bu yazıda size WordPress'te nasıl alt tema oluşturulacağını göstereceğim.
Neden bir çocuk teması oluşturmalısınız?
Bir alt tema oluşturmak, seçtiğiniz WordPress temasını kişiselleştirmenin en iyi yoludur. Bir alt tema, bir ana temanın tüm özelliklerine ve görünümüne ve hissine sahiptir. Gerekli tüm ayarları yapabilirsiniz ve yine de ana şablonu hiçbir şekilde etkilemezsiniz. Ayrıca ana temayı, ayarları kaybetme endişesi duymadan kolayca güncelleyebilirsiniz.
Gereksinimler
Şablonda herhangi bir değişiklik yapmak için temel CSS/HTML bilgisine ihtiyacınız var, PHP'yi bilmek de güzel olurdu. Diğer kaynaklardan kod parçalarını kopyalayıp yapıştırma becerilerine gerçekten ihtiyacınız olacak.
Başlangıç olarak, localhost üzerinde pratik yapmanızı tavsiye ederim. Ayrıca canlı siteyi yerel bir sunucuya taşıyabilir ve üzerinde pratik yapabilir veya sahte içerik kullanabilirsiniz.
işin başlangıcı
Herhangi bir iyi WordPress teması, bir ana tema olabilir. Bununla birlikte, çok çeşitli temalar var ve bazıları çocuk temaları oluşturmadaki ilk deneyler için oldukça karmaşık, bu yüzden standart temayı örnek olarak almaya karar verdim. Yirmi on üç, WordPress'teki varsayılan temalardan biridir.
İlk çocuk temanızı oluşturun
Başlamak için kurulum klasöründe /wp-içerik/temalar/ ve alt tema için yeni bir klasör oluşturun. Ona ne istersen isim ver. Örneğin, ben buna wpbdemo diyeceğim.
Not Defteri gibi bir metin belgesi açın ve şu kodu oraya yapıştırın:
/* Tema Adı: WPB Alt Tema Tema URI'si: http://www.wpbeginner.com/ Yazar: WPBeginner Şablonu: yirmi üç Sürüm: 1.0.0 */ @import url("../twentythirteen/style.css");
Tema Adı: WPB Çocuk Teması Tema URI'si: http://www.wpbeginner.com/ Açıklama: Yirmi On Üç çocuk teması Yazar URI'si: http://www.wpbeginner.com Şablon: yirmi on üç Sürüm: 1.0.0 |
Bu belgeyi yeni oluşturulan alt tema klasörüne kaydedin ve onu style.css olarak adlandırın.
Buradaki kod satırları olduğu gibi kabul edilir. Gerçekten dikkat etmeniz gereken şey çizgi Şablon: yirmi on üç.
WordPress'e temamızın bir alt tema olduğunu ve ana tema klasörünün yirmi on üç olarak adlandırıldığını söyler. Lütfen üst klasörün adının büyük/küçük harf duyarlı olduğunu unutmayın, yani. "Şablon: TwentyThirteen" girerseniz hiçbir şey çalışmaz.
Son kod satırı, ana temanın stil sayfasını alt temaya aktarır.
Bunlar, bir alt tema oluşturmak için minimum gereksinimlerdir. Artık menüye gidebilirsiniz Görünüm » Temalar, burada WPB'yi bir alt tema olarak göreceksiniz. Sitenizde kullanmaya başlamak için Etkinleştir düğmesini tıklayın.
Alt temada henüz hiçbir şeyi değiştirmediğiniz için site, ana temanın tüm işlevlerini ve görünümünü kullanacaktır.
Bir alt temayı özelleştirme
Her temanın dizini, stilleri olan bir dosya içerir - style.css. çoğu zaman CSS'nin olduğu ana stil dosyasıdır. Ancak, bazı temalar için bu dosya yalnızca tema hakkında bilgi içerir. Bu durumda, kural olarak, CSS dosyaları ayrı bir dizinde bulunur.
Burada çalışmak için bazı bilgi ve becerilere ihtiyacınız olacak.
Google Chrome ve Firefox, bir web sayfasının birçok öğesini incelemenize ve CSS'ye eklemenize olanak tanıyan yerleşik bir inceleme aracıyla birlikte gelir.
Gezinme menüsünün CSS'sini görmek istiyorsanız, farenizi menünün üzerine getirin, sağ tıklayın ve Kodu Görüntüle'yi seçin.
Bunu yaptığınızda, tarayıcı penceresi ikiye bölünecektir. Ekranın altında, sayfanın HTML ve CSS'sini göreceksiniz.
Farenizi farklı HTML satırlarının üzerine getirdiğinizde, ekranın üst kısmındaki inceleme aracı ilgili öğeyi vurgulayacaktır. Ekran görüntüsünden de görebileceğiniz gibi, navigasyon menüsünü seçtim.
Krom aracı ayrıca seçilen öğeyle ilgili CSS kurallarını sağ tarafta görüntüler.
İşlerin bir bakışta nasıl görüneceğini görmek için CSS'yi burada düzenlemeyi deneyebilirsiniz. Arka plan rengini değiştirelim . gezinme çubuğuüzerinde #e8e5ce .
Gezinme çubuğunun arka plan rengi değişti. Beğendiyseniz, bu CSS kuralını kopyalayabilir ve style.css alt tema dosyasını yapıştırabilirsiniz.
Gezinme çubuğu ( arka plan rengi: #e8e5ce; )
gezinme çubuğu ( |
Değişiklikleri style.css dosyasına kaydedin ve siteyi önizleyin.
Temanın stil sayfasında değiştirmek istediğiniz herhangi bir şey için işlemi tekrarlayın.
Alt tema için oluşturduğum stillerin tam listesi burada. Denemekten korkmayın - beğeninize göre değiştirin.
/* Tema Adı: WPB Alt Tema Tema URI'si: http://www.wpbeginner.com Açıklama: Yirmi On Üç çocuk teması Yazar: WPBeginner Yazar URI'si: http://www.wpbeginner.com Şablon: yirmi onüç Sürüm: 1.0.0 */ @import url("../twentythirteen/style.css"); .site-title ( padding: 30px 0 30px; ) .site-header .home-link ( min-height: 0px; ) .navbar ( background-color: #e8e5ce; ) .widget ( background-color: #e8e5ce; ) .site-footer ( background-color: #d8cdc1; ) .site-footer .sidebar-container ( background-color:#533F2A )
Tema Adı: WPB Çocuk Teması Tema URI'si: http://www.wpbeginner.com Açıklama: Yirmi On Üç çocuk teması Yazar URI'si: http://www.wpbeginner.com Şablon: yirmi on üç Sürüm: 1.0.0 @import url("../twentythirteen/style.css" ) ; Site Başlığı ( dolgu : 30px 0 30px ; Site başlığı. ana sayfa bağlantısı( min - yükseklik : 0 piksel ; gezinme çubuğu ( arka plan rengi : #e8e5ce; Araç( arka plan rengi : #e8e5ce; Site altbilgisi ( arka plan rengi : #d8cdc1; Site altbilgisi. kenar çubuğu kabı ( arka plan rengi : #533F2A |
Her WordPress temasının kendi düzeni vardır. Yirmi On Üç temasının yapısına bir göz atalım. Şunlar vardır: üstbilgi, gezinme menüsü, içerik bölümü, alt pencere öğesi alanı, ikinci (yan) pencere öğesi alanı, altbilgi.
Bu bölümlerin her biri yirmi üç klasördeki farklı dosyalar tarafından işlenir. Bu dosyalara şablon denir.
Kural olarak, bu dosyalar ait oldukları bölümün adını taşır. Örneğin, altbilgiye altbilgi.php dosyası, üstbilgi ve gezinme menüsüne üstbilgi.php dosyası tarafından hizmet verilir. İçerik alanı gibi bazı bölümler birkaç dosya tarafından sunulur - "içerik şablonları".
Bu nedenle, değiştirmek istediğiniz tema dosyasını seçerek başlamanız gerekir; bir alt temaya kopyalayın.
Örneğin, alt bilgi alanından "powered by WordPress" etiketini kaldırmak ve buraya telif hakkı bilgilerini eklemek istiyorsunuz. Bunu yapmak için: footer.php dosyasını alt temanıza kopyalayın, Not Defteri gibi basit bir metin düzenleyicide açın. Kaldırmak istediğiniz satırı bulun ve istediğiniz şeyle değiştirin. Şöyle görünebilir:
Net çerçeve 3.5'ten düşük değil. Yükleme veya güncelleme, hataları düzeltme. Windows Update aracılığıyla yükleme
Windows Phone için hangi antivirüs seçilmeli?
Android'i geri alma: bellenimin eski sürümü nasıl iade edilir?
Güncelleştirmeler yüklendikten sonra Windows açılmıyor
Güncelleştirmeler yüklendikten sonra Windows açılmıyor