WordPress, web geliştirme dünyasında tercih edilen ilaçtır. Bu platformla başlayan birçok kişi, başlangıçta basit bir web sitesi oluşturmak için uygun (ve ücretsiz) bir yol aradı. Tüm bunlar, WordPress kodeksinde sağlanan biraz googling ve tavsiye ile yapılabilir. Genel olarak, "Sadece denemek istedim ve her şey dönmeye başladı."

Ancak, birçok kullanıcı basit bir tanıdıkta durmaz. Bunun yerine sistemi aktif olarak kullanmaya başlarlar. Daha fazla fikirle gel. Deney. Yeni eklentiler deneniyor. Firebug'u açın. Her şey. Geri dönüşü olmayan nokta çoktan geçildi. Katılıyorum, senin hikayene benziyor mu? İçin WordPress kullanıcıları sitenizi yönetmenin daha fazla yönünü istemeniz oldukça normaldir. İstemek eşsiz tasarım, doğrulanmış işlevsellik, tüm ayrıntıların özelleştirilmesi.

Neyse ki, WordPress sistemi sadece bunun için tasarlandı. Ona esnek yapı, ve modüler mimari, herkesin kendi sitesinde hemen hemen her şeyi değiştirmesine izin verir.

ilgili en önemli araçlardan tam kontrol site, sayfa şablonlarını işaretleyebilirsiniz. Kullanıcıların sitelerinin tasarımını ve işlevselliğini kökten değiştirmelerine olanak tanır. Ana sayfa için tamamen farklı bir başlık yapmak ister misiniz? Kolayca. Yalnızca blog sayfasında görüntülenecek ek bir kenar çubuğu mu? Sorun yok. benzersiz sayfa 404? Lütfen!

Şablonların nasıl olduğunu bilmek istiyorsanız WordPress sayfaları Bu sorunları çözmenize yardımcı olun, okumaya devam edin. Ancak, önce size WordPress'te sayfa şablonlarının nasıl çalıştığını anlamanız için ihtiyacınız olan bazı temel bilgileri vereceğiz.

WordPress'teki Şablonlar

WordPress bağlamında şablonlar hakkında konuştuğumuzda ne demek istiyoruz? Kısacası şablonlar, WordPress'e nasıl oluşturulacağını söyleyen dosyalardır. farklı şekiller içerik.

Daha detaylı açıklama: Biri sitenizin bir bölümünü görüntülemek için bir istek gönderdiğinde, WordPress platformu kullanıcının hangi içeriği almak istediğini ve sitenizin hangi bölümünün görüntüleneceğini belirler.

Ardından, WordPress sitenin bu bölümü için temanızda bulunan en uygun şablonu kullanmaya çalışacaktır. Hangisi WordPress şablon hiyerarşisine bağlıdır. Bu hiyerarşi nasıl görünüyor, aşağıdaki ekran görüntüsünde görebilirsiniz.

Şablon hiyerarşisi, tanıdık şablonların bir listesidir. WordPress dosyaları hangi dosyanın en yüksek önceliğe sahip olduğunu belirlemek için sıralanan desenler.

Bu hiyerarşiyi bir karar ağacı olarak düşünebilirsiniz. WordPress nasıl görüntüleneceğine karar vermeye çalışırken geçerli sayfa, istenen sayfayla eşleşen ilk şablonu bulana kadar şablon hiyerarşisinde aşağı iner. Örneğin, birisi http://siteniz.com/category/news'e erişmeye çalışırsa, WordPress uygun şablonu şu sırayla arayacaktır:

1. kategori-(slug).php: içinde bu durum kategori-haber.php
2. kategori-(id).php>: kategori kimliği 5 ise, WordPress kategori-5.php adlı bir dosya bulmaya çalışacaktır.
3. kategoriler.php
4. arşiv.php
5. index.php

Hiyerarşinin en altında index.php dosyası bulunur. Özel şablonu olmayan herhangi bir içeriği görüntülemek için kullanılır. Bir şablon hiyerarşide daha üst sıralarda yer alıyorsa, WordPress istenen içeriği görüntülemek için bunu otomatik olarak kullanır.

Sayfa şablonları ve kullanımları

Sayfalar için varsayılan şablon page.php dosyasıdır. Daha iyi bir şablon olmadığı sürece (arşiv sayfaları için arşiv.php gibi), WordPress sitenizdeki tüm sayfaların içeriğini görüntülemek için page.php kullanır.

Bununla birlikte, çoğu durumda tasarımı değiştirmek gerekli hale gelir, görünüm, sitenin bireysel bölümlerinin işlevselliği. Bu durumda, sayfa şablonları kullanılır. Özelleştirilmiş sayfa şablonları, sitenizin herhangi bir bölümünü geri kalanına dokunmadan özelleştirmenize olanak tanır.

Bunu zaten çalışırken görmüş olabilirsiniz. Örneğin günümüzde pek çok WordPress temaları sayfalarınızı tam ekran görüntüleme, ek bir kenar çubuğu ekleme veya konumunu değiştirme vb. Bütün bunlar genellikle şablonlar aracılığıyla uygulanır. Bunu yapmanın birkaç yolu var ve şimdi onlara bakacağız.

Yine de ilk olarak, bir uyarı: çünkü şablonlarla çalışmak, bilgisayarınızdaki dosyaları düzenlemeyi ve değiştirmeyi içerir. aktif konu, bu ayarlamaları yapmak için bir alt tema kullanmanızı öneririz. Bu durumda, ana tema güncellendiğinde değişikliklerinizin üzerine yazılmaz.

WordPress'te Herhangi Bir Sayfa Nasıl Değiştirilir

WordPress'te özel sayfa şablonlarını kullanmanın üç ana yolu vardır: ekleme koşullu ifadeler mevcut bir şablona; hiyerarşide daha üst sıralarda yer alacak belirli bir sayfa şablonu oluşturmak; şablonların belirli sayfalara doğrudan atanmasının yanı sıra. Bu yöntemlerin her birine sırayla bakacağız.

Standart şablonlarda koşullu etiketleri kullanma

değişiklik yapmanın en kolay yolu ayrı sayfaşablonunda koşullu etiketlerin kullanılmasıdır. Adından da anlaşılacağı gibi, bu etiketler yalnızca bir koşul karşılandığında yürütülen işlevler oluşturmak için kullanılır. Sayfa şablonları bağlamında bu, aşağıdakine benzer: "X eylemini yalnızca Y sayfasında gerçekleştirin."

Tipik olarak, koşullu etiketler temanızın page.php şablonuna eklenir (tabii ki sitenin başka bir bölümünü değiştirmek istemiyorsanız). Yalnızca aşağıdakiler için değişiklik yapmanıza yardımcı olurlar: ana sayfa, ana sayfa, blog sayfası veya sitenizdeki herhangi bir sayfa.

İşte bazı yaygın koşullu etiketler:

1. is_page(). Belirli bir sayfaya işaret eder. Kimlik, başlık ve URL/başlık ile kullanılabilir.
2. is_home(): ana sayfaya uygulanır.
3. is_front_page(): için geçerlidir ana sayfa sitenizin "Ayarlar" - "Okuma" bölümünde ayarlayın.
4. is _category(): kategoriler sayfası için koşullar. Tıpkı is_page() etiketi gibi bir kimlik, başlık, URL/başlık ile kullanılabilir.
5. is_single(): tek gönderiler ve ekler için
6. is_archive(): arşiv sayfaları için koşul
7. is_404(): sadece 404 sayfa için geçerlidir

Örneğin, şablona standart get_header() yerine page.php eklerseniz; aşağıdaki kod, http://siteniz.com/products sayfasını oluştururken header-shop.php adında rastgele bir başlık alacaksınız.

If (is_page("products")) ( get_header("shop"); ) else ( get_header(); )

İyi örnek bunun gibi kod: sitenizde bir mağazanız varsa ve mağaza sayfasında farklı bir başlık resmi veya değiştirilmiş bir menü görüntülemek istiyorsanız. Hepsinin sitenizde görünmesini sağlamak için header-shop.php dosyasında uygun değişiklikleri yapabilirsiniz.

Ancak koşullu etiketler yalnızca bir sayfayla sınırlı değildir. Aynı anda birkaç koşul ayarlayabilirsiniz:

If (is_page("products")) ( get_header("shop"); ) elseif (is_page(42)) ( get_header("about"); ) else ( get_header(); )

Bu örnekte, sitenizdeki farklı sayfaların davranışını değiştirecek iki koşul belirledik. Yukarıda bahsedilen mağaza başlığını yüklemeye ek olarak, 42 ​​numaralı sayfaya header-about.php dosyasını yüklüyoruz. Diğer tüm sayfalar için standart başlık görüntülenecektir.

WordPress Şablon Hiyerarşisinde Sayfa Şablonları Oluşturma

Koşullu etiketler, sayfa şablonlarınızda küçük değişiklikler yapmanın harika bir yoludur. Elbette, birkaç koşullu ifadeye dayalı olarak daha büyük değişiklikler de oluşturabilirsiniz. Bu çözümü çok hantal ve uygunsuz buluyorum ve bunun yerine özel şablonlar oluşturmayı tercih ederim.

Bunu yapmanın bir yolu, WordPress şablon hiyerarşisinden yararlanmaktır. Gördüğümüz gibi, WordPress olası tüm şablonların listesini gözden geçirecek ve istenen sayfayla eşleşen ilk şablonu seçecektir. Sayfalar için hiyerarşi şöyle görünür:

• Özel sayfa şablonları
• sayfa-(slug).php
• sayfa-(id).php
• sayfa.php
• index.php

İlk olarak, doğrudan bu sayfaya atanmış rastgele sayfa şablonları vardır. Böyle en az bir şablon varsa, WordPress diğer şablonların varlığından bağımsız olarak bunu kullanır. Özel sayfa şablonları hakkında daha sonra konuşacağız.

WordPress daha sonra söz konusu sayfanın bilgisini içeren bir sayfa şablonu arayacaktır. Örneğin, page-about.php dosyasını tema dosyalarınıza eklerseniz, WordPress bu dosyayı Hakkında sayfanızı veya http://www.yoursite.com/about adresinde bulunan herhangi bir sayfayı görüntülemek için kullanır.

Aynı şeyi sayfa kimliğinizi belirterek de başarabilirsiniz. Örneğin, aynı sayfanın kimliği 5 ise, WordPress varsa sayfa-5.php şablonunu kullanır; Bu, yalnızca hiyerarşide daha yüksek önceliğe sahip sayfa şablonları yoksa gerçekleşir.

Herhangi bir sayfanın kimliğini, WordPress arka ucunun Tüm Sayfalar bölümünde başlığının üzerine getirerek öğrenebilirsiniz. Kimlik, tarayıcınız tarafından oluşturulan bağlantıda olacaktır.

Özel sayfa şablonlarını bağlama

WordPress'in otomatik olarak kullanabileceği şablonların yanı sıra, her zaman özel şablonları çeşitli sayfalar. Şablon hiyerarşisinden de görebileceğiniz gibi, özel şablonlar en yüksek önceliğe sahiptir.

Şablonları belirli sayfalara bağlamada olduğu gibi, bir şablon oluşturmanız ve onu kullanmayı amaçladığınız sayfaya bağlamanız gerekir. İkincisi, zaten aşina olabileceğiniz iki şekilde yapılabilir. Her ihtimale karşı, size nasıl yapılacağını göstereceğiz.

WordPress düzenleyicisi aracılığıyla özel bir sayfa şablonu bağlama

İÇİNDE WordPress editörü Sayfa Nitelikleri adlı bir alan bulabilirsiniz. Bir Şablon listesi içerir.

Bu listeden mevcut olan herhangi birini seçebilirsiniz. WordPress şablonları. Uygun şablonu seçin, ardından sayfanızı kaydedin veya güncelleyin.

Hızlı düzenleme yoluyla isteğe bağlı bir şablon ayarlama

Aynısı WordPress editörüne gitmeden de yapılabilir. Tüm Sayfalar bölümüne gidin ve fareyle listedeki herhangi bir öğenin üzerine gelin. Ekranda Hızlı Düzenleme öğesini içeren bir menü belirecektir.

Sayfa parametrelerini doğrudan listeden düzenlemek için bu öğeye tıklıyoruz. Bir sayfa şablonu seçmenize izin veren aynı açılır menüyü göreceksiniz. Bir şablon seçin, sayfayı yenileyin. Hazır.

O kadar zor değil, değil mi? Ancak, henüz özel bir sayfa şablonunuz yoksa? Nasıl oluşturulur? Endişelenme, bunu bir sonraki bölümde tartışacağız.

Özel sayfa şablonları oluşturmaya yönelik adım adım kılavuz

Sayfalar için özel şablonlar oluşturmak zor bir süreç değil ancak dikkate alınması gereken bazı detaylar var. Bu süreci adım adım inceleyelim.

1. Standart bir şablon arıyoruz.

Özel bir sayfa şablonu oluşturmaya başlamanın iyi bir yolu, bir şablonu kopyalamaktır. şu an temanızdaki gerekli sayfa için zaten kullanılmış. değiştirmek daha kolay mevcut kod bütün bir sayfayı sıfırdan yazmaktansa. Çoğu durumda, bu page.php dosyası olacaktır.

Belirli bir sayfa için hangi şablonun kullanıldığını belirleyemiyorsanız What The File eklentisini kullanabilirsiniz.

Örnek olarak Twenty Twelve temasını kullanacağım. Standart sayfa şablonunun içinde nasıl göründüğü aşağıda açıklanmıştır:

Gördüğünüz gibi, ilginç bir şey yok: olağan üstbilgi ve altbilgi çağrılarının yanı sıra ortada bir döngü. Sayfa şöyle görünecek:

1. Şablonu kopyalayın ve yeniden adlandırın

tanımladıktan sonra standart model kopyalamamız gerekiyor. Sayfamızda gerekli değişiklikleri yapmak için kopyayı kullanacağız. Ayrıca yeniden adlandırmamız gerekecek.

Dosyayı istediğiniz gibi adlandırabilirsiniz. Ana şey, ayrılmış tema dosya adlarıyla başlamamasıdır. Dosyaya page-something.php veya benzeri bir ad vermemelisiniz çünkü WordPress bunun özel bir şablon olduğunu düşünecektir.

Dosyayı, şablonun özünü yansıtacak şekilde adlandırmak en iyisidir. Örneğin, benim-özel-şablonum.php. Bizim durumumuzda, onu custom-full-width.php olarak adlandıracağız.

1. Şablonun başlığını değiştirin

Şimdi WordPress'e şunu söylemeliyiz ki yeni dosya keyfi bir sayfa şablonudur. Bunu yapmak için dosyanın başlığını ayarlamamız yeterlidir:

Şablon Adı'ndaki başlık, WordPress düzenleyici sayfasının Sayfa Nitelikleri bölümünde görüntülenecektir. Kendiniz için değiştirdiğinizden emin olun.

1. Kodu ayarlama.

Şimdi şablon koduyla çalışma zamanı. Örneğimizde, kenar çubuğunu demo sayfasından kaldıracağız.

Bunu yapmak nispeten kolaydır - sadece get_sidebar(); öğesini kaldırın. sayfa şablonundan. Bu, şablonumun şöyle görünmesine neden oldu:

1. Sayfa şablonunun yüklenmesi

Değiştirilen dosyayı kaydettikten sonra siteye yüklememiz gerekiyor. Keyfi sayfa şablonları farklı yerlerde saklanabilir:

• Aktif (alt) temanızın bulunduğu klasör
• Ana ana temanızın bulunduğu klasör
• Herhangi bir tema klasöründeki bir alt klasör (hem ana hem de alt klasör)

Bir alt temada page_templates klasörü oluşturmayı ve tüm özel şablonlarımı oraya koymayı tercih ederim. Bu, değiştirilen dosyalara erişmemin en kolay yolu.

1. Şablonu etkinleştir

Son adım: Sayfa şablonunu etkinleştirmemiz gerekiyor. Daha önce belirtildiği gibi, bu, WordPress düzenleyicideki Sayfa Nitelikleri → Şablonlar bölümünde yapılır. Kaydediyoruz, sayfayı görüntülüyoruz - ve yeni şablon iş başında (zaten kenar çubuğu olmadan):

O kadar zor değil, değil mi? Endişelenmeyin, kalıp yapma becerilerinizi hızla geliştirebilirsiniz. Bu tür şablonları tam olarak nasıl kullanabileceğinizi anlamanıza yardımcı olmak için size bazı ilginç kullanım örnekleri göstereceğim.

Sayfa Şablonlarını Kullanmanın Beş Farklı Yolu

Daha önce de belirtildiği gibi, sayfa şablonları çeşitli amaçlar için kullanılabilir. Herhangi bir sayfadaki hemen hemen tüm alanları özelleştirebilirsiniz. Bu yolda tek engel hayal gücünüz (ve kodlama becerileriniz) olacaktır.

Sayfaları tam ekran genişliğinde görüntülemek için şablon

Bakacağımız ilk durum, yukarıda oluşturduğumuz demo şablonunun genişletilmiş bir versiyonudur. get_sidebar(); öğesini kaldırarak kenar çubuğunu zaten kaldırdık. koddan. Ancak ekran görüntüsünde de görebileceğiniz gibi, içerik bölümü sola hizalı kaldığı için sayfa tam genişlikte görüntülenemedi.

Bunu düzeltmek için, özellikle bu bölüm olmak üzere CSS ile çalışmamız gerekiyor:

Site içeriği ( kayan nokta: sol; genişlik: %65.1042; )

Genişlik özelliği, içeriğimizin genişliğini %65.1042'ye ayarlar. kullanılabilir alan. Bu değeri artırmak istiyoruz.

Genişlik değerini %100 olarak değiştirirsek, sonunda sitemizin tüm sayfaları tam ekran genişliğinde görüntülenecektir - buna ihtiyacımız yok. İlk adımımız, özel şablonumuzda div'in sınıfını id=primary ile değiştirmek. Bunu class="site-content-fullwidth" olarak değiştirebilirsiniz. Sonuç:

Artık özel sınıfımız için CSS'yi ayarlayabiliriz:

Site içeriği-tam genişlik ( kayan nokta: sol; genişlik: %100; )

Sonuç olarak, içerik tüm ekranı kaplayacaktır:

Widget alanları ile dinamik 404 sayfaları

Bir kullanıcı sitenizde var olmayan bir sayfaya erişmeye çalıştığında bir 404 sayfası görünür. Bu, bir yazım hatası, yanlış bir bağlantı veya sayfanın kalıcı bağlantısının değiştirilmesi nedeniyle olur.

Hiç kimse 404 sayfa almayı sevmese de, oynuyorlar. önemli rol siteniz için. İçerikleri genellikle bir kişinin sitenizi hemen terk edip etmeyeceği veya sitede başka içerik aramaya devam edip etmeyeceği konusunda belirleyici faktördür.

404 sayfa sıfırdan yazmak zor bir iştir, özellikle de çok deneyimli değilseniz. Ekranda görüntülenen içeriği esnek bir şekilde değiştirebilmeniz için şablonunuza widget alanları yerleştirmek en iyisidir.

Bu amaçla Twenty Twelve temasıyla gelen 404.php dosyasını alacağız (şablon hiyerarşisini hatırlıyor musunuz?). Ama içindeki herhangi bir şeyi değiştirmeden önce, hadi oluşturalım yeni widget kodu function.php dosyasına yapıştırarak:

Register_sidebar(array("name" => "404 Sayfa", "id" => "404", "description" => __("İçerik") senin için 404 hata sayfası buraya gelir."), "before_widget" => "

", "after_title" => "

Bu, WordPress arka ucundaki yeni widget'ımızı getirecektir. Sitemizde gerçekten göründüğünden emin olmak için eklememiz gerekiyor Sonraki satır 404 sayfalık dosyanın kodunu uygun konuma getirin:

Benim durumumda, arama formunu get_search_form(); ile değiştirmek istiyorum. şablonda widget alanına. İşte nasıl göründüğü:

Şablonu siteye yükledikten sonra yeni widget alanını doldurabiliriz:

Şimdi 404 sayfasına gidersek, yeni widget'lar göreceğiz:

Özel gönderi türlerini görüntülemek için sayfa şablonu

Özel gönderi türleri, kendi veri kümelerine, tasarımına ve diğer ayarlarına sahip içeriği sunmanın harika bir yoludur. Bu gönderi türleri için popüler bir kullanım örneği inceleme öğeleridir: kitaplar, filmler vb. Bizim durumumuzda, portföy öğelerini gösterecek bir sayfa şablonu oluşturmak istiyoruz.

İlk önce özel yazı tipimizi oluşturmamız gerekiyor. Bunu manuel olarak veya bir eklenti aracılığıyla yapabilirsiniz. Bunun için Types eklentisini önerebilirim. Kolayca özel gönderi türleri ve özel alanlar oluşturmanıza olanak tanır.

Types'ı kurun ve etkinleştirin, özel bir gönderi türü ekleyin, onu bir "portföy" bilgisi yapın, istediğiniz alanları ayarlayın (küçük resim eklemek gibi), diğer seçenekleri ayarlayın ve kaydedin.

Artık portföy gönderi türüne sahip olduğumuza göre, onu sitede görüntülememiz gerekiyor. Yapacağımız ilk şey oluşturmak istenen sayfa. Lütfen, portföyünüz için sümüklü böcek olarak portföyü seçtiyseniz, unutmayın. keyfi tip gönderiler, sayfada aynı sümüklü böcek olmamalıdır. Müşteri portföyüne yerleştim ve fazladan metin ekledim.

Portföy bölümüne birkaç element ekledikten sonra onları ana içerikten hemen sonra sayfada göstermemiz gerekiyor.

Bunu yapmak için bir page.php kopyası kullanıyoruz. Dosyayı kopyalayın, portföy-template.php olarak adlandırın ve başlığını değiştirin:

Ancak bu durumda orijinal şablonda bazı değişiklikler yapmamız gerekecek. page.php koduna bakarsanız, başka bir content-page.php şablonunu çağırdığını görürsünüz (get_template_part('content', 'page');). Bu dosyada aşağıdaki koda ihtiyacımız olacak:

Gördüğünüz gibi sayfa başlığı ve içeriği buraya deniyor. Portföy bölümünde de ihtiyacımız olduğu için bu snippet'leri page.php şablonumuza kopyalayacağız. Sonuç aşağıdaki gibi olacaktır:

get_header(); ?>

Portföy öğelerini sayfamızda görüntülemek için the_content() çağrısından hemen sonra aşağıdaki kodu eklememiz gerekecek:

"portfolio", // özel gönderi türünü girin "orderby" => "date", "order" => "DESC",); $döngü = new WP_Query($args); if($loop->have_posts()): while($loop->have_posts()): $loop->

Sonuç olarak, özel gönderi türü sayfamızda görüntülenecektir:

O kadar güzel görünmüyor, o yüzden buraya biraz stil ekleyelim:

/* Portföy gönderileri */ .portfolio ( -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); kutu gölgesi: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); kenar boşluğu: 0 0 20px; dolgu: 30px; ) .portfolio-image ( ekran: blok; kayan nokta: sol; kenar boşluğu: 0 10px 0 0; max-width: 20%; ) .portfolio-image img ( border-radius: 0; ) .portfolio-work ( display: inline-block; max-width: 80%; ) .portfolio h3( border-bottom : 1 piksel katı #999; yazı tipi boyutu: 1.57143rem; yazı tipi ağırlığı: normal; kenar boşluğu: 0 0 15 piksel; alt dolgu: 15 piksel; )

Şimdi çok daha iyi, değil mi?

İşte portföy sayfası şablon kodunun tamamı:

Avatarları olan üyeler sayfası

Şablonumuzu kullanmanın bir sonraki örneği üyeler sayfasıdır. Sitemizin yazarlarını, resimleri de dahil olmak üzere ve adları altında yayınladıkları gönderilerin sayısını listelemek istiyoruz. Sonuç aşağıdaki gibi olacaktır:

Hepimiz öncekiyle aynı karma dosyayla başlayacağız ve üye listesini görüntülemek için ona kod ekleyeceğiz.

Varsayılan Yirmi Ondört teması, varsayılan üyeler sayfasıyla birlikte gelir. Bu şablonu katkıda bulunanlar.php adlı sayfa şablonları klasöründe bulabilirsiniz.

Ancak, o dosyaya bakarsanız, yalnızca şu çağrıyı bulacaksınız: yirmi dört on dört_list_yazarı();. Bunun, temanın function.php dosyasında bulunan bir işlevden kaynaklandığı açıktır. Aşağıdaki parçayla ilgileniyoruz:

"ID", "orderby" => "post_count", "order" => "DESC", "kim" => "yazarlar",)); foreach ($contributor_id olarak $contributor_ids): $post_count = count_user_posts($contributor_id); // Kullanıcı bir gönderi yayınlamadıysa (henüz) devam edin. if (! $post_count) ( devam et; ) ?>

Bunu the_content() çağrısının hemen altına ekleyeceğiz ve aşağıdaki sonucu alacağız:

Şimdi biraz stil ekleyelim:

/* Katılımcı sayfası */ .contributor ( border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- boyutlandırma: border-box; display: inline-block; padding: 48px 10px; ) .contributor p ( margin-bottom: 1rem; ) .contributor-info ( margin: 0 auto 0 168px; ) .contributor-avatar ( border: 1px katı rgba(0, 0, 0, 0.1); kayan nokta: sol; satır yüksekliği: 0; kenar boşluğu: 0 30px 0 -168px; dolgu: 2px; ) .contributor-avatar img( border-radius: 0; ) .contributor -özet ( kayan nokta: sol; ) .katkıda bulunan-adı( yazı tipi-ağırlığı: normal; kenar boşluğu: 0 !önemli; ) .katkıda bulunan-gönderiler-bağlantısı ( arka plan rengi: #24890d; kenarlık: 0 yok; kenarlık yarıçapı: 0 ; color: #fff; görüntüleme: satır içi blok; yazı tipi boyutu: 12 piksel; yazı tipi ağırlığı: 700; satır yüksekliği: normal; dolgu: 10 piksel 30 piksel 11 piksel; metin dönüştürme: büyük harf; dikey hizalama: alt; ). katkıda bulunan-posts-link:hover ( renk: #000; metin-dekorasyon: yok; )

Hazır. Teşekkürler Yirmi On Dört!

Değişen Arşivler Sayfası

Twenty Twelve, kendi arşiv sayfası şablonuyla birlikte gelir. Örneğin, belirli bir kategoriden geçmiş gönderileri görüntülemeye çalışırsanız kullanılacaktır.

Ancak, Problogger'ınki gibi daha ilginç bir şey yapmak istiyorum: insanların ek içerik almasına olanak tanıyan bir sayfa Farklı yollar. Bu, yine sayfa şablonu kullanılarak yapılır.

Örnek dosyamızda the_content()'in hemen altına aşağıdaki kodu ekleyebiliriz:

Yıllara göre arşivler:

Aylara Göre Arşivler:

Konuya Göre Arşivler:

Arama için bazı stillere de ihtiyacınız olacak:

Arşiv-arama formu (dolgu: 10px 0; metin hizalama: merkez; )

Sonuç aşağıdaki gibi olacaktır:

Neyin ne olduğunu görebilmeniz için tüm dosya burada:

Bu şablonu sayfaya bağlamayı unutmayın!

Çok uzun zaman önce, hakkında bir kılavuz yayınlandı. Bir tanıdık karakterine sahipti İlk aşama, ama aynı zamanda dahil pratik örnekler. Bu yönde devam etmek istiyorum, sadece sayfalara dikkat edin. Bu konudaki materyal çok işlevli, yani çok büyük. Bu nedenle, sayfa şablonunun tüm özelliklerini tek bir makalede açmak zor olacaktır. Ama en azından dolaylı ayrıntılara ve tabii ki ana parametrelere değinmeye çalışacağız.

sayfa hiyerarşisi

Hiyerarşi - bu, en yüksek basamaktan en alta kadar olan dizi anlamına gelir veya bunun tersi de geçerlidir. Bizim durumumuzda, bu, sayfa için şablon dosyalarının yetki sırasıdır. Bir kullanıcı sayfalarınızdan birine geldiğinde, WordPress içeriğini sayfa oluşturma seçeneğine göre görüntüler (daha fazlası aşağıdadır).

Özel Şablon- belirtilen koşullu yorum keyfi bir ada sahip bir dosyanın içinde en üstte.

sayfa-slug.php– sayfanın adını (etiket) içeren bir şablon. Özel bir şablon belirtilmemişse, WordPress şunu kullanır: verilen tip ana olarak.

sayfa kimliği.php – benzersiz tanımlayıcı sayfalar.

sayfa.php – standart dosya, sayfaların içeriğinden sorumludur.

index.php- dizin dosyası. WordPress yukarıdaki şablonlardan herhangi birini bulamazsa, varsayılan olarak sayfalardan sorumlu olacaktır.

Dikkat. WordPress'te paged.php adında bir sayfa şablonu da vardır, ancak tekil gönderi sayfalarını görüntülemek için değil, gönderi arşivlerindeki sayfaların bir listesini görüntülemek için kullanılır.

Toplu kullanım için özel bir şablon oluşturun

Artıları ve eksileri ile bir şablon oluşturmak için neredeyse önemsiz olan birkaç seçenek vardır. Şimdi ele alacağımız bu seçenek en yaygın olanıdır. Her şeyden önce, oluşturmanız gerekir php dosyası veya standart page.php dosyasını çoğaltın. Ardından farklı bir adla kaydedin, örneğin templates_my.php . Ardından dosyanın üstüne bir yorum ekleyin:

Bir sonraki adım, dosyayı temanıza yüklemek, "Sayfalar-Yeni Ekle" sekmesindeki yönetici paneline gidin veya mevcut bir tane açabilirsiniz. Sayfa niteliklerinde, bu sayfada hangi şablonun kullanılacağını seçin.

Birdenbire "Sayfa Nitelikleri" paneline sahip değilseniz, görüntülemek için sağ üst köşedeki ekran ayarlarındaki kutuyu işaretlemeniz yeterlidir.

Toplu kullanım, bu tür şablonun sitenin herhangi bir sayfasına uygulanabileceği anlamına gelir. Belirli bir sayfa kimliği veya etiketiyle oluşturulan özel bir sayfanın aksine.

Tavsiye. Bu şekilde oluşturulan bir şablon, mevcut temanın bir alt klasöründe bulunabilir. Böylece almadan fazladan boşluk ve kompakt bir görünüm yaratmak.

Önemli. Sayfa önekini şablon sayfa adı olarak kullanmayın. Çünkü WordPress, dosyayı yalnızca bir sayfa için benzersiz olarak geçerli olan özel bir dosya olarak yorumlayacaktır.

Özelleştirilmiş Sayfa Şablonları

İkinci yöntem ise belirli sayfalar istisnasız. bir örnek verelim eski şema. Diyelim ki "Portföy" adında bir sayfanız var, etiketi varsayılan olarak İngilizce "portföy" kelimesine çevrilmiştir. Bu, "Sayfalar-Özellikler" ayarlarında görülebilir. Şimdi sadece page.php dosyasını çoğaltın ve onu page-portfolio.php olarak yeniden adlandırın.

Bir tanımlayıcı ile aynı şekilde oluşturulur, etiket için yalnızca sayfa kimliği değiştirilir. O içeride adres çubuğu, "Sayfalar-Düzenle" bölümü post=9 gibi görünür. Aynı şekilde, standart dosya çoğaltılır ve page-9.php olarak yeniden adlandırılır.

Önemli. Yalnızca aşağıdakiler için oluşturulan aynı tür şablon belirli sayfa bir tema alt klasöründe olamaz. Tıpkı çocuk temalarında olduğu gibi.

Sayfa şablonu oluşturmanın pratik örneği

Şimdi, örneğin, ilk seçeneğe dayalı bir şablon oluşturalım ve gönderilerle kategorilerin çıktısını ekleyerek içindeki döngüyü değiştirelim. Herhangi bir düzenleyiciyi açın, aşağıdaki kodu ekleyin, template_my.php olarak kaydedin, sunucuya yükleyin.

Şimdi style.css dosyasına stiller yazmanız gerekiyor.

My_main ( kutu-gölge: 0 1px 2px rgba(0, 0, 0, 0.1); kenar boşluğu: 20px otomatik; dolgu: 15px; arka plan: #fff; genişlik:1000px; ) .page_cat ( kenar boşluğu: 0 9px 20px; dolgu: 15 piksel; dikey hizalama: üst; genişlik: %28; görüntü: satır içi blok; ) .page_cat h2 ( renk: #676767; yazı tipi: kalın 18 piksel arial; kenar boşluğu: 20 piksel; ) .page_cat li a ( metin-dekorasyon : yok; renk: #2879af; görüntü: blok; ) .page_cat li ( kenar boşluğu: 6px; dolgu: 3px 3px 3px 10px; görüntü: blok; ) .page_cat li a:hover ( text-decoration: underline; ) . page_cat li:nth-child(2n) ( arka plan: #f7f7f7; )

Geriye bir şey kalıyor: "Sayfalar-Değiştir" sekmesindeki yönetici panelinde, sayfa özniteliklerinde önceden oluşturulmuş şablonumuzu "örnek şablon" belirtin.

Sonuç.

Koşullu sayfa etiketleri

Son paragrafta birkaç koşullu etiket düşünün. Standart page.php dosyasına yazılırlar.

Öğeleri belirli sayfalarda görüntüle

/images/img.png"/> /images/img.jpg"/> /images/img.jpg"/> /images/img.jpg"/>

bilgi çıkışı