Özel WordPress Sayfa Şablonları Nasıl Oluşturulur

Yayınlanan: 2022-05-30

WordPress temalarındaki sayfa şablonları, bir web sitesindeki sayfaların düzenini belirlemeye yardımcı olur. Bununla birlikte, bu şablonları değiştirmek, özellikle yeni başlayanlar için bazen korkutucu olabilir. Neyse ki WordPress, temanızda özel sayfa şablonları oluşturmanıza izin vererek sayfa şablonları söz konusu olduğunda oldukça esneklik sunar.

Siteniz için özel sayfa şablonları oluşturmak, sitenizin düzenlerini ve tasarımlarını tercihinize göre kolayca değiştirmenizi sağlar. Ayrıca, farklı sayfalar için farklı başlıklar kullanmak gibi özel gereksinimler eklemenize de olanak tanır. Bu değişiklikler aslında farklı sayfalara veya tek bir sayfaya uygulanabilir.

Bu makalede, özel WordPress sayfa şablonlarının ne olduğuna, varsayılan sayfa şablonu hiyerarşisine ve temanızda özel WordPress sayfa şablonlarının nasıl oluşturulacağına bakacağız.

İçindekiler

Özel WordPress Sayfa Şablonu Nedir?

WordPress Sayfa Şablonu Hiyerarşisi

Özel Sayfa Şablonu Oluşturma

  • Global özel şablon nasıl oluşturulur?
  • Tek bir Sayfa şablonu oluşturma

Çözüm

Özel WordPress Sayfa Şablonu Nedir?

Özel bir WordPress sayfa şablonu, web sitenizin ayrı bir tasarımına ve izlenimine sahip olmanızı sağlayan bir şablon dosyasıdır.

Örnek olarak, sitenizde bir blog teması varsa, siteniz için kenar çubuğu veya yorum oluşturmayan özel bir şablon oluşturabilirsiniz. Ayrıca, içeriği kutulu bir düzende ve diğerini tam genişlikte bir düzende oluşturan bir şablonunuzun olduğu sayfalar için bir şablon oluşturabilirsiniz. Oluşturabileceğiniz sayfa şablonlarının sayısında herhangi bir sınırlama yoktur.

Sayfaların oluşturulması, WordPress'teki page.php dosyası tarafından kontrol edilir. Bu dosya, sayfa içeriğinizi oluşturmak için varsayılan bir temel oluşturur ve aşağıda gösterildiği gibi tema dosyalarınızın kökünde bulunur.

Yerinde daha spesifik sayfa şablonları varsa, Şablon hiyerarşisi devreye girer.

WordPress Sayfa Şablonu Hiyerarşisi

Sayfa şablonu hiyerarşisi, yapılan isteğin niteliğine ve tema içindeki varlığına bağlı olarak, bir sayfayı görüntülerken WordPress'in hangi şablon dosyasını seçeceğini belirler.

Varsayılan WordPress şablon hiyerarşisi aşağıdaki gibidir:

Sayfa Şablonu : WordPress, sayfaya atanmış bir şablonu kontrol eder ve bu şablonu sayfa içinde kullanır.

page-{slug}.php : Sayfaya herhangi bir şablon atanmamışsa, WordPress daha sonra sayfaya bilgi içeren bir şablon kontrol eder ve bulunursa uygular.

Bilgi, alan adından sonra sayfa URL'sinde bulunan bir bölümdür ve düzenlenebilir. Aşağıda bununla ilgili örnek bir çizim bulunmaktadır.

page-{id}.php : WordPress, daha sonra, sümüklü böcek içeren bir şablon bulunamazsa, oluşturulan sayfanın sayfa kimliğine sahip bir sayfa şablonunun varlığını kontrol eder.

page.php : Sayfa kimliğine sahip bir şablon bulunamazsa, WordPress sayfayı oluşturmak için standart page.php şablonunu kullanır.

singular.php : page.php dosyasının bulunmadığı bir durumda, WordPress, gönderi türünden bağımsız olarak singular.php dosyasını kullanır.

index.php : Yukarıdaki şablonlardan hiçbiri mevcut değilse, WordPress varsayılan olarak sayfaları index.php dosyasını kullanarak oluşturmaya başlar.

Bu nedenle, WordPress ortamınızdaki sayfaların oluşturulması, yukarıdaki sayfa şablonlarından herhangi biri tarafından gerçekleştirilebilir. Bu nedenle, yerinde olmasını istediğiniz öncelik seviyesini belirlemek size kalmıştır.

Özel Sayfa Şablonu Oluşturma

Temanızda özel sayfa şablonları oluşturmak oldukça kolaydır. Ancak sayfa şablonlarının tek bir sayfa için mi yoksa herhangi bir sayfa için mi olacağını belirlemeniz gerekir.

Bu kılavuzda, Stax temasında manuel olarak global bir sayfa şablonunun yanı sıra sayfalarımızdan birinde tek bir sayfa şablonu oluşturmaya nasıl başlayacağınıza bakacağız.

Global özel şablon nasıl oluşturulur?

Bazen web sitenizdeki herhangi bir sayfada küresel olarak kullanılabilecek bir sayfa şablonu oluşturmak istersiniz.

Bunu yapmak için, öncelikle Notepad, Notepad ++, sublime text veya tercih ettiğiniz diğer herhangi bir düzenleyici gibi kullanmak üzere kullanmak üzere bir metin düzenleyici belirlemeniz gerekir.

Bu yapıldıktan sonra, aşağıdakileri gerçekleştirerek şablon dosyanızı oluşturmaya başlayabilirsiniz:

Adım 1: Yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin :

 <?php /* Template Name: PageWithNoFooter */ ?>

Web sitenizde sahip olabileceğiniz diğer sayfa şablonlarında kullanılmayan bir şablon adının yanı sıra kolayca tanımlayabileceğiniz ve site sayfalarınızla ilişkilendirebileceğiniz bir ad kullanmanızı öneririz.

Bu yapıldıktan sonra, yeni sayfa şablonunuzu .php uzantısıyla kaydedin. Bizim durumumuzda, şablon dosyasını pagewithnofooter.php olarak adlandıracağız. Tercih ettiğiniz herhangi bir adı kullanabilirsiniz, ancak şablon adınıza benzer bir ad kullanmanız daha tavsiye edilir.

Adım 2: İstediğiniz kodu dosyaya ekleyin

Bu adımda, ister PHP, ister PHP ve HTML olsun, tercih ettiğiniz kodu dosyaya ekleyebilirsiniz.

Örnekleme amacıyla, buradaki durumumuzda, pagewithnofooter.php dosyasındaki varsayılan sağ kenar çubuğu.php dosyasının içeriğini kullanacağız, ancak bunu özelleştireceğiz ve özel bir HTML karşılama metni oluşturmak ve altbilgiyi devre dışı bırakmak için kodu ekleyeceğiz. Başka bir WordPress teması kullanıyorsanız, aynı zamanda page.php'nin içeriğini temanın veya temanızın yerinde olabileceği herhangi bir tema tanımlı sayfa şablonunun içine kopyalayabilirsiniz.

Kodumuz buna göre aşağıdaki gibi olacaktır:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

3. Adım: Sayfa şablonunu tema dosyalarınıza yükleyin .

Filezilla gibi bir FTP programı yardımıyla veya barındırma paneliniz aracılığıyla özel dosyanızı tema dosyalarınızın kök dizinine yükleyin. Bizim durumumuzda bu, aşağıdaki dizin yollarından birinde olacaktır:

i) wp içeriği > Temalar > Stax

ii) Önerilen: wp-content > Themes > stax-child

Bu, sitenizde bir alt tema kullanırken geçerlidir ve stax-child sizin alt temanızdır.

Tema güncellemeleri sırasında özelleştirmeleri kaybetmemek için temanızdaki sayfa şablonlarını veya diğer dosya özelleştirmelerini özelleştirirken alt temayı kullanmanızı öneririz.

Adım 4: Yeni bir sayfa oluşturun ve ona “PageWithNoFooter” şablonunu atayın

Bunu başarmak için WordPress panonuzdaki Sayfalar > Yeni Ekle bölümüne gidin ve sayfanızı oluşturun.

Sayfayı oluşturduktan sonra, ona “PageWithNoFooter” şablonunu atayın ve değişikliklerinizi kaydedin.

Aşağıda bunun örnek bir gösterimi bulunmaktadır:

Şimdi, sayfa ön uçta önizlendiğinde, sayfamızda sayfanızda hiçbir alt bilgi oluşturulmaz. Ayrıca eklediğimiz özel HTML'ye de sahip olacaksınız.

Aşağıda bununla ilgili bir ekran görüntüsü var:

Şablonu, düzeninin uygulanmasını istediğiniz herhangi bir sayfada veya altbilgi olmasını istemediğiniz herhangi bir sayfada kullanabilirsiniz.

Tek bir Sayfa şablonu oluşturma

Tek sayfalara özel sayfa şablonları daha çok sayfaya özeldir. Daha önce belirtildiği gibi, bir sayfaya "sayfa şablonu" atanmamışsa, bu şablonlar seçim için değerlendirilir.

Bu şablonlara gelince, sayfayı bilgi veya sayfa kimliğine göre hedefleyebilirsiniz. Bir sayfa bilgisi veya kimliği kullanıp kullanmamaya karar verirken web sitenizin gelecekteki beklentilerini de dikkate almak önemlidir. Örneğin, sitenizi başka bir etki alanına taşımayı düşünüyorsanız, şablon dosyanızı oluştururken bir sayfa kimliği kullanmanız uygun olmaz. Bunun yerine, sümüklü böcek kullanmak daha iyi bir seçenek olarak kabul edilir. Öte yandan, siteniz birden fazla kişi tarafından yönetiliyorsa ve sayfa bilgilerini değiştirebileceklerini düşünüyorsanız, sayfa şablonu oluştururken bir sayfa kimliği kullanmak çok daha fazla tercih edilir.

Buradaki durumumuzda, iletişim sayfamız için özel bir sayfa şablonu oluşturacağız ve sayfadan altbilgiyi devre dışı bırakacağız. Böyle bir şablon oluşturmak için aşağıdakileri yapmanız gerekecektir:

Adım 1: page.php'nin içeriğini kopyalayın

Bu adımda, öncelikle tema dosyalarınız içinde page.php dosyasını bulmanız gerekecek.

Dosyayı bulduktan sonra, düzenlemeyi seçin ve içeriğini kopyalayın.

2. Adım: Sayfa için yeni bir şablon oluşturun

Tema dosyalarınızın kök dizininde, iletişim sayfasının sayfa şablonunu oluşturun. Ya page-{id}.php ya da page-{slug}.php dosyasını kullanırsınız. Buradaki örneğimizde, slug kullanacağız, bu nedenle şablonumuzu page-contact.php olarak adlandıracağız, çünkü “contact” aşağıda görüldüğü gibi sayfa slug'ımızdır:

Aşağıda ayrıca dosya konumuyla ilgili bir örnek bulunmaktadır:

Adım 3: page.php dosyasının içeriğini yapıştırın

Şimdi yukarıda 1. adımda kopyaladığımız page.php dosyasının içeriğini yeni page-contact.php dosyamıza yapıştırmanız gerekecek. Bunu yaptıktan sonra, istediğiniz kod değişikliklerini dahil etmek için dosyayı özelleştirebilir ve değişikliklerinizi kaydedebilirsiniz. Bizim durumumuzda, iletişim sayfasındaki altbilgiyi devre dışı bırakacağız, böylece son kodumuz şu şekilde okunacaktır:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Şimdi iletişim sayfanızı önizlerken, sayfanın altbilgi içermediğini fark edeceksiniz.

Aşağıda, başlangıçta ve yeni şablon uygulandıktan sonra sayfada bir ekran görüntüsü karşılaştırması bulunmaktadır.

Alt Bilgili İletişim Sayfası

Alt Bilgisiz İletişim Sayfası

Çözüm

Web siteniz için özel sayfa şablonları oluşturmak nispeten kolaydır. Bu kılavuzda, WordPress temanız içinde özel şablonların manuel olarak nasıl oluşturulacağını özellikle inceledik. Burada kullanım örneği olarak ücretsiz Stax Temasını kullandık. Bununla birlikte, aynı tekniği, WordPress kodlama standartlarını izleyen diğer tüm WordPress temalarına uygulayabilirsiniz. Bununla birlikte, Elementor gibi sayfa oluşturucuları kullanmak gibi özel sayfa şablonları oluşturmanın başka yolları da vardır.

Bu makalenin, özel sayfa şablonlarını manuel olarak nasıl oluşturabileceğiniz konusunda gerekli bilgileri sağladığını umuyoruz. Herhangi bir sorunuz veya öneriniz olması durumunda aşağıya yorum yapmaktan çekinmeyin.