Manuel Olarak WordPress Özel Şablonları Nasıl Oluşturulur – Bir Kılavuz

Web sitenizin tasarımından memnun değilseniz ve seçtiğiniz tema, gerekli özelleştirme seçenekleri düzeyini sunmuyorsa, kendi özel şablonunuzu oluşturmayı düşünmenin zamanı gelmiş olabilir! İhtiyaçlarınıza bağlı olarak, bu WordPress şablonu özel bir gönderi şablonu veya sayfa şablonu veya kategori görünümü olabilir.

WordPress ile ilgili heyecan verici şeylerden biri, WordPress web siteniz nasıl oluşturulmuş olursa olsun, düzeni veya tasarımı istediğiniz zaman değiştirmekte her zaman özgürsünüz. Bu, önceden hazırlanmış bir şablonu geçersiz kılarak veya kendinizinkini oluşturarak yapılabilir. WordPress büyük miktarda esneklik sunar ve size her şey için kendi şablonunuzu oluşturma yeteneği verir.

Kendi şablonunuzu oluşturmanın zengin tasarım olanakları sunmasına rağmen, çoğu WordPress kullanıcısı, kendi WordPress Özel Şablonunuzu oluşturmanın çok karmaşık olduğundan endişe ettikleri için muhtemelen bu zorluktan kaçınacaktır. Bu iki yazı dizisinde, size açık olan her iki seçeneğe de bakacağız. İlk olarak bu makalede, özel bir WordPress şablonunu manuel olarak nasıl kodlayabileceğinize bakacağız (ki bu da en üst düzeyde esneklik sunar) ve ardından, ihtiyaç duyulan ağır yüklerin bir kısmını omuzlamak için popüler sayfa oluşturucuları nasıl kullanabileceğinizi inceleyeceğiz. bir WordPress özel şablonu oluştururken.

Bu makalede sayfalar, gönderiler ve hatta gönderi kategorileri için özel şablonlar oluşturmanın yollarını inceleyeceğiz. Önce neden özel bir şablon isteyebileceğinize bakarak başlayalım.

Not: Bu makale, çalışan bir HTML, CSS ve PHP bilgisi olduğunu varsayar.

Özel Bir WordPress Şablonuna Ne Zaman İhtiyaç Duyarsınız?

Belki de neden bir WordPress özel şablonu kullanmanız gerektiğinden henüz emin değilsiniz. Bunu açıklamanın en kolay yolu bir örnekle.

İşletmeniz için bir web siteniz olduğunu düşünelim. 'Yirmi Yirmi' teması etkinleştirildi ve gerekli tüm sayfalar ve gönderiler zaten oluşturuldu ve içerik (metin ve resimler), bir alıntı ve öne çıkan bir resim ile dolduruldu.

Genel ayarlar da yapılandırılır ve Özelleştirici aracılığıyla bir dizi değişiklik yaptınız (bağlantı renkleri, kapak şablonu kaplama rengi vb.)

Ayrıca 5 maddelik bir menü oluşturulmuştur: Ana Sayfa – Şirket Profili – Hizmetler – Hakkımızda – Bize Ulaşın

Hizmetler bölümünde bir alt menü vardır: Hizmet 1 – Hizmet 2 – Hizmet 3.

Yani, bir WordPress geliştiricisinin bakış açısına göre, esasen sahip olduğunuz:

• Dört standart sayfa ( Ana Sayfa – Şirket Profili – Hakkımızda – Bize Ulaşın )
• Bir arşiv sayfası ( Hizmetler )
• Üç gönderi sayfası ( Hizmet 1 – Hizmet 2 – Hizmet 3)

Varsayılan olarak Hizmet Gönderi sayfalarının 3'ü de aynı düzene sahip olacaktır. Şu anda, Gönderi Nitelikleri ayarı aracılığıyla sağlanan üç şablondan birini seçerek bu gönderilerin bireysel düzenlerini farklılaştırmanız gereken tek seçenek.

Farklı şablonların her birini seçersek, şöyle göründüklerini görürüz:

Varsayılan şablon

Tam Genişlik Şablonu

Kapak Şablonu

Şanslıysanız, bu stillerden biri işinize yarayacaktır ve bunları web siteniz için kullanmayı seçebilirsiniz. Ancak değilse ve bazı öğelerin 'tam istediğiniz gibi' görünmediği için kendinizi hüsrana uğrattıysanız endişelenmeyin… İşte burada kendi özel WordPress Şablonunuzu manuel olarak oluşturmak devreye giriyor.

Gelin, özel bir şablonla neler yapılabileceğini görelim.

Manuel Olarak Özel Bir WordPress Gönderi Şablonu Nasıl Oluşturulur

Aşağıdaki öğreticide yapacağımız şey, tamamen kişiselleştirilmiş ve kendi PHP dosyasında belirtilecek olan tek bir gönderi görünümü oluşturmaktır. Ayrıca, gönderi özniteliklerindeki açılır şablonlar menüsüne, özel gönderi düzenine karşılık gelecek ve benzersiz yapımızı sunacak 'Özel Gönderi Şablonum' adlı bir seçenek ekleyeceğiz.

Birinci Adım: Şablonumuzu WordPress'e Tanıtmak

Başlamak için WordPress tema kök klasörünüzde “my-custom-post.php” gibi bir PHP dosyası oluşturmamız gerekiyor (örneğimizde bu, /themes/twentytwenty/ dizinindedir).

Dosyayı favori metin düzenleyicinizle (Sublime gibi) açın ve aşağıdaki içeriği ekleyin:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Bu satır * Template Name: My custom post template , şablon açılır menüsünde görüntülenecek adı tanımlar. Aşağıdaki ekran görüntüsüne bir göz atın ve bunun nasıl görüneceğini göreceksiniz.

* Template Post Type: post isteğe bağlıdır ve şablonun bir seçenek olarak görüneceği gönderi türünü tanımlar. Bunu 'gönder' olarak tanımladığımız için, aşağıdaki örnekte görüldüğü gibi bu şablon bir sayfanın şablon seçenekleri menüsünde görünmeyecektir.

Son satır: get_header(); ?> get_header(); ?> başlık içeriğini alır.

Bu noktada diyelim ki 'Hizmet 1' yazımız için aktif şablon olarak “Özel yazı şablonum”u seçerseniz çıktı boş olacaktır. Bu, sayfaya henüz herhangi bir yapı eklemediğimiz için beklediğimiz gibi. Bunun gibi bir şey görürdünüz:

WordPress Özel Şablonumuza yapı ekleme

Sayfamızın yapısını tamamen sıfırdan oluşturmak tamamen mümkün olsa da, bazen tema şablonumuzda kullanılan mevcut gönderi yapısını almak ve ardından bunu değiştirmek daha kolay olabilir.

WordPress şablon hiyerarşisine bakarsak, temaya bağlı olarak, tekli gönderi şablonunun tema klasörünün içinde bulunan singular.php veya single.php dosyasından geldiğini görebiliriz.

Daha fazla açıklığa kavuşturmak için – gönderiler ve sayfalar aynı yapıyı kullandığında, singular.php dosyası kullanılır, aksi takdirde (örneğin popüler Astra temasında olduğu gibi) tek bir.php, page.php, arşiv.php dosyaları görürsünüz. sırasıyla gönderiler, sayfalar ve blog düzenleri için farklı yapılar sağlamak üzere kodlanmıştır.

Bu örnekte, Twenty Twenty temasını kullanarak, singular.php dosyasının, şablon-parçalar klasöründen istenen düzeni almak için get_template_part işlevini kullandığını görebiliriz.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Yukarıdaki kodun akıllıca yaptığı şey, gönderide içerik olup olmadığını kontrol etmektir ve eğer öyleyse, seçilen şablon tarafından belirtilen yapıyı kullanarak içeriği yazdırır. Bu, bir gönderi, sayfa veya arşivin kullanılmasından bağımsız olarak her durumda geçerlidir.

Artık temamızın mevcut şablonlardan düzen verilerini nasıl çektiğini görebiliyoruz, artık kendi şablonumuzu oluşturmaya başlamaya hazırız. Şablonumuzun nasıl göründüğünü tanımlamak için önce onu gerçekten tasarlamamız gerekir. Gönderi sayfanızın aşağıdaki biçimde düzenlenmesini isteyebilirsiniz:

Bir yerleşim tasarımına karar verdikten sonra bunu HTML, CSS ve PHP kullanarak kodlamanız gerekecek. Bu makale, bu diller hakkında bilgi sahibi olduğunuzu ve gerekli düzeni oluşturabileceğinizi varsaymaktadır. Yukarıdaki tasarımı alarak, my-custom-post.php dosyanıza aşağıdaki gibi görünen bir başlangıç ​​kodu yazacağız:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Twenty Twenty temamızın post meta ve yayınlamak isteyebileceğimiz diğer veriler için sağladığı kısayol işlevleri vardır. Bunları kullanmak yerine, şablonunuzun herhangi bir tema üzerinde çalışması için varsayılan WordPress işlevlerini kullanacağız. Çalışacağımız bir tanesi aşağıdaki gibidir:

• the_title() – yazı başlığını tekrarlar
• the_excerpt() – gönderi alıntısını tekrarlar
• the_post_thumbnail() – varsayılan küçük resim boyutunun çıktısını verir. Belirli bir özellikli görüntü boyutunun çıktısını almak için the_post_thumbnail() seçeneklerini kullanabilirsiniz.
• the_content() – Gönderi içeriğini çıkarır

Güncellemelerimizi kaydedersek ve şimdi 'Hizmet 1' gönderisine bir göz atarsak, uygulanan özel şablon düzenini göreceğiz.

WordPress Özel Gönderi Kategorisi Şablonu Nasıl Oluşturulur

Şimdi, kendi Kategori Görünüm düzenimizi oluşturmak için benzer ilkeleri uygulayabileceğimiz kendi gönderi şablonu düzenimizi oluşturmanın ne kadar kolay olduğunu gördük.

Bunu yapmanın kolay bir yolu, index.php dosyasını ( /themes/twentytwenty/ kök klasörümüzde bulunur) doğrudan düzenlemektir. Bu dosyayı doğrudan düzenlemek, eğitim amaçlı olarak iyi olsa da, web sitesi yayındaysa, temanızı bir sonraki güncellemenizde herhangi bir güncellemenin üzerine yazılmamasını sağlamak için bir alt tema kullanmak isteyebilirsiniz.

index.php koduna bakarsak, içeriğin türüne bağlı olarak mevcut çıktıları belirleyen PHP “if” koşullarıyla dolu olduğunu fark edeceğiz. Örneğin aşağıdaki kod, içeriğin gönderi içerip içermediğini (bir gönderi, sayfa veya arşiv mi) yoksa bir arama sonuçları sayfası mı olduğunu kontrol eder ve buna göre doğru içeriği görüntüler.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Twenty Twenty temasını kullanarak bu öğreticiyi izliyorsanız, index.php dosyanızda aşağıdaki kodu bulun:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

template-parts/content.php dosyasında içeriğin 'get_template_part' işlevi kullanılarak alındığını görebiliriz.

Kategori sonrası sayfamızın düzenini belirlemek için bu temaya özel işlevleri kullanmak yerine, her öğe için varsayılan WordPress işlevlerini kullanacağız. Bu, yukarıdaki kodu aşağıdaki şekilde değiştireceğimiz anlamına gelir:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Kartal gözlüyseniz, şimdi oluşturmamız ve temamızın klasörüne eklememiz gereken my-custom-category-view.php adlı bir dosyaya atıfta bulunduğumuzu göreceksiniz (bu bilgiyi doğrudan eklemek için alternatif bir yaklaşım olabilir) index.php dosyamıza kopyalayın, ancak bunun ayrı bir dosya olarak kaydedilmesi çok daha temiz.

Bir my-custom-category-view.php dosyası oluşturun ve aşağıdaki kodu ekleyin:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Gönderi başlığını belirtmek için the_title() işlevinin daha gelişmiş biçimini kullanabileceğimizi göreceksiniz. Tek gönderi sayfasına bağlantı, get_permalink() işlevi kullanılarak oluşturulmuştur.

Bitirmek için şimdi style.css dosyanıza bazı ek stiller eklemeniz gerekecek:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Bakalım şimdiye kadar neler başardık:

Güzel!

Görebildiğiniz gibi, farklı oranlarda oldukları için görüntülerin ayarlanmasıyla ilgili hala bazı sorunlar var. Görüntüleri ortadan kırpmak ve sabit boyutlar vermek için CSS'mize biraz daha satır ekleyerek bunu kolayca düzeltebiliriz:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

Elbette bu şekilde, performans açısından optimal olmayan orijinal görüntüleri kullanmaya devam ediyoruz. Buradaki en iyi uygulama, WordPress resim boyutlarını kullanmaktır. Yeni sayfa düzeninizi duyarlı hale getirmek istiyorsanız, daha fazla bilgi için bu kapsamlı kılavuza da göz atın.

Ve işte bu, aferin! Artık kategori sonrası görünümü için kendi kişiselleştirilmiş düzeninizi ve tasarımınızı başarıyla oluşturmayı başardınız.

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

Şimdiye kadar gönderiler sayfamız için özel bir düzen ve ayrıca kategori sonuçları için özel bir düzen oluşturduk. Sayfalar için özel bir şablon oluştururken kullanılan yöntemleri ve aynı ilkeleri uygulayabileceksiniz.

Bu makaleyi bitirmeden önce, biraz daha karmaşık bir sayfa şablonuna hızlıca göz atalım. Bu örnekte, gönderi sayfalarımızı şablonumuza çekeceğiz, böylece onları bir kategori sayfasında görünecekleri şekilde ancak bir sayfa tarafından sunulan düzenlenebilirliğin ek avantajıyla (bir kategori sayfası yerine) görüntüleyebiliriz. .

Amacımız, üç iş hizmetimizi (bu örnekte Hizmet 1, Hizmet 2 ve Hizmet 3) listeleyen bir genel bakış 'Hizmetler' sayfası oluşturmak olacaktır. Bunları sayfamıza manuel olarak eklemek yerine dinamik olarak sayfaya çekilecektir. Pratikte bununla endişelenmenize gerek olmasa da, kodlama ilkeleri WordPress tarafından sunulan esnekliği anlamak ve daha fazla göstermek için kullanışlıdır.

Başlamak için, temanızın klasöründe yeni bir dosya oluşturun ve buna my-services-template.php gibi bir ad verin. Bunu yaptıktan sonra, daha önce tek gönderi şablonunda yaptığımız gibi bazı gerekli bildirim yorumlarını ekleyeceğiz. Ayrıca get_template_part() işlevini de kullanacağız.

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

get_template_part() işlevi temelde yeniden kullanılabilir kod parçalarını yüklememize izin veren bir mekanizmadır. Bu durumda, template-parts/content-cat_services.php . Bu dosyada, 'Hizmetler' kategorisi gönderilerini çıkaracak bazı kodlar ekleyeceğiz.

Özetle, bu dosyadaki kodun yapacağı şey şudur:

• Kategori sayfasına bir başlık verin.
• Belirtilen kategorinin gönderilerini veritabanından sorgulayın.
• Gönderiler arasında dolaşın ve her biri için bir düzen görüntüleyin.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Sorguları bir sonraki makalede daha ayrıntılı olarak inceleyeceğiz. Bu makalenin amaçları için bilmeniz gereken şey, $args = array( 'cat'=>4, 'orderby' => 'title' ); Kimlik Numarası 4 (ID=4) olan gönderi kategorisini alıyor. 'Hizmetler' kategorimizle ilgili bu kategori numarası.

Peki, her kategori için kimliği nasıl görebilirsiniz? Aslında oldukça basit. Menü Yazıları > Kategoriler'e gidin ve düzenlemek için herhangi bir kategoriyi açın. Kimlik, aşağıda gösterildiği gibi kategori düzenleme sayfasının URL'sindedir:

Yeni şablonumuzu görüntülemek için Sayfalara gitmeli ve yeni bir sayfa oluşturmalıyız. Sayfa düzenleme alanında herhangi bir içerik girmenize gerek yoktur. Bunun yerine, Sayfa Nitelikleri açılır şablon menüsünün altındaki 'Gönderi kategorisi şablonum' seçeneğini belirlemeniz yeterlidir.

Son olarak, mevcut Hizmetler kategorisi öğesinin yerine yeni sayfamız için menüye gidin ve bir “Hizmetler” öğesi ekleyin. Menü şimdi böyle görünmelidir

Bakalım neler yapmışız:

Yukarıdaki yöntem, belirli bir kategoriyi çeken bir WordPress özel sayfa şablonunun nasıl oluşturulacağını gösterir (bu örnekte 'Hizmetler'imiz). Aynı şablonu başka bir kategori sayfası için seçerseniz, kategori kimliğiyle (ID=4) özellikle talep ettiğimiz için Hizmetler kategorisi gönderilerini tekrar göreceksiniz. Bu nedenle, farklı bir kategoriye giren yeni bir sayfa şablonu istiyorsanız, bunu yapmak için ayrı bir şablon dosyası oluşturmanız (ve Kategori Kimliğini buna göre güncellemeniz) gerekir.

Çözüm

WordPress web siteniz için kendi özel şablonunuzu oluşturabilmek, web sitenizin nasıl göründüğü konusunda size en üst düzeyde kontrol sağlar. Gönderi türleriniz için tek veya kategori görünümü için özel şablonlar oluşturmak, çabaya değer. Elbette sadece sitenizin tasarım öğeleri üzerinde tam kontrole izin vermekle kalmaz, aynı zamanda gelecekteki sayfalar için belirli bir düzeni hızlı bir şekilde çoğaltmanıza da olanak tanır.

Ayrıca bakınız

• Sayfa Oluşturucuları Kullanarak WordPress Özel Şablonları Nasıl Oluşturulur - Bir Kılavuz