Temanızı hızlı bir şekilde değiştirmek veya yeni bir özel tema oluşturmak için bir WordPress tema hile sayfası mı arıyorsunuz? WordPress, bir başlangıç yapmak için kullanabileceğiniz birçok yerleşik şablon etiketi ile birlikte gelir. Bu makalede, yeni başlayanlar için bir WordPress tema hile sayfasını paylaşacağız.
Başlamadan Önce
WordPress, tema geliştiricilerin WordPress destekli web siteleri için güzel tasarımlar oluşturmasına olanak tanıyan güçlü bir şablonlama motoruyla birlikte gelir. Web sitenize yükleyebileceğiniz hem premium hem de ücretsiz WordPress temaları vardır.
Her WordPress teması bir dizi özelleştirme seçeneğiyle birlikte gelir. Bu seçenekler renkleri değiştirmenize, başlık resimleri eklemenize, gezinme menüleri ayarlamanıza ve daha fazlasına olanak tanır.
Ancak yine de temanızın desteklediği özelliklerle sınırlı kalırsınız. Bazen WordPress temanızda biraz kodlama gerektiren küçük değişiklikler yapmak isteyebilirsiniz. Bunu yapmak için bazı temel PHP, HTML ve CSS bilmeniz gerekecektir.
Yapmak isteyeceğiniz ilk şey, WordPress’in perde arkasında nasıl çalıştığını ve WordPress tema şablonlarını öğrenmektir.
Bundan sonra takip etmek isteyebileceğiniz bazı en iyi uygulamalar vardır. Örneğin, değişikliklerinizi doğrudan tema dosyalarınızda yapmak yerine bir alt tema oluşturmak.
WordPress’i bilgisayarınıza kurarak da temanız üzerinde pratik yapabilirsiniz.
Bununla birlikte, yeni başlayanlar için WordPress tema hile sayfamıza dalalım.
Temel WordPress Tema Şablonları
Her WordPress teması şablon adı verilen farklı dosyalardan oluşur. Tüm WordPress temalarının bir stil sayfası ve bir dizin dosyası olmalıdır, ancak genellikle başka birçok dosya ile birlikte gelirler.
Aşağıda her temanın sahip olduğu temel dosyaların listesi bulunmaktadır:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- sayfa.php
- yorumlar.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Kendi temanızı oluşturuyorsanız, WordPress başlangıç temalarından biriyle başlayabilirsiniz. Bu temalar kullanıma hazır WordPress şablon dosyaları ve CSS ile birlikte gelir ve size üzerine inşa edebileceğiniz bir çerçeve sunar.
Başlıktaki Şablon Etiketleri
WordPress, temanız boyunca farklı şeylerin çıktısını almak için kullanılabilecek çok sayıda kullanışlı işlevle birlikte gelir. Bu işlevlere şablon etiketleri denir.
Tüm standart uyumlu WordPress temalarında gerekli olan ilk ve muhtemelen en önemli işlev wp_head olarak adlandırılır ve aşağıdaki gibi görünür:
<?php wp_head(); ?>
Bu kod, WordPress’in web sitenizdeki her sayfanın <head> bölümüne eklemesi gereken tüm önemli HTML’leri getirir. Ayrıca birçok WordPress eklentisinin web sitenizde düzgün çalışması için de gereklidir.
Aşağıda, temanızın header.php dosyasında yaygın olarak bulacağınız ve kullanacağınız şablon etiketlerinin bir listesi yer almaktadır. Ancak, ihtiyaç duyduğunuzda temanızın başka yerlerinde de kullanılabilirler.
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
Diğer Tema Dosyalarında Kullanılan Şablon Etiketleri
Şimdi yaygın olarak kullanılan diğer bazı şablon etiketlerine ve ne işe yaradıklarına bir göz atalım.
Aşağıdaki şablon etiketleri diğer şablonları çağırmak ve dahil etmek için kullanılır. Örneğin, temanızın index.php dosyası üstbilgi, altbilgi, içerik, yorumlar ve kenar çubuğu şablonlarını dahil etmek için bunları kullanacaktır.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
Aşağıdaki şablon etiketleri, yazılarınızdaki içeriği, alıntıyı ve meta verileri görüntülemek için WordPress döngüsü içinde kullanılır.
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
WordPress temaları Kenar Çubukları adı verilen widget’a hazır alanlarla birlikte gelir. Bunlar, tema dosyalarınızda kullanıcıların WordPress widget’larını sürükleyip bırakabilecekleri konumlardır. Genellikle bir temada kullanıcıların widget ekleyebileceği birden fazla konum bulunur.
Ancak en yaygın olarak bu widget alanları tema düzeninin sağ veya sol kenar çubuğunda yer alır. Daha fazla bilgi edinmek için WordPress temanıza dinamik widget hazır kenar çubuklarını nasıl ekleyeceğinize ilişkin kılavuzumuza bakın.
İşte temanızda bir kenar çubuğu görüntülemek için kullanılan kod.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
sidebar-1’i temanız tarafından söz konusu widget’a hazır alan veya kenar çubuğu için tanımlanan adla değiştirmeniz gerekecektir.
Gezinti Menülerini Görüntülemek için Şablon Etiketleri
WordPress, kullanıcıların web siteleri için navigasyon menüleri oluşturmalarına olanak tanıyan güçlü bir menü yönetim sistemi ile birlikte gelir. Bir WordPress teması birden fazla navigasyon menüsü konumuna sahip olabilir.
Bir WordPress temasında kendi özel gezinme menülerinizi nasıl oluşturacağınıza ilişkin kılavuzumuza bakın.
Temanızda bir navigasyon menüsü görüntülemek için kullanılacak kod aşağıdadır.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Tema konumu, temanızın gezinti menüsünü kaydetmek için kullandığı ada bağlıdır. CSS konteyner sınıfı istediğiniz herhangi bir şekilde adlandırılabilir. Navigasyon menünüzü çevreleyecektir, böylece ona uygun şekilde stil verebilirsiniz.
Çeşitli Şablon Etiketleri
WordPress temanızda yaygın olarak kullanacağınız etiketlerden bazıları aşağıda verilmiştir.
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
WordPress Temalarında Koşullu Etiketler
Koşullu etiketler, sonuçları True veya False olarak döndüren işlevlerdir. Bu koşullu etiketler, belirli koşulların karşılanıp karşılanmadığını görmek ve ardından buna göre bir şeyler yapmak için temanız veya eklentiniz boyunca kullanılabilir.
Örneğin, geçerli gönderinin öne çıkan bir görseli olup olmadığı. Öne çıkan bir görsel yoksa, bunun yerine varsayılan bir öne çıkan görsel gösterebilirsiniz.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
Aşağıda kullanabileceğiniz birkaç koşullu etiket daha bulunmaktadır.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Kullanabileceğiniz daha birçok koşullu etiket vardır. Koşullu etiketlerin tam listesini WordPress kodeksinin koşullu etiketlerle ilgili sayfasında bulabilirsiniz.
WordPress Döngüsü
Döngü ya da WordPress döngüsü, WordPress’te yazıları almak ve görüntülemek için kullanılan koddur. Birçok WordPress şablon etiketi, post veya post_type nesneleriyle ilişkili oldukları için yalnızca döngü içinde çalışabilir.
Aşağıda basit bir WordPress döngüsü örneği verilmiştir.
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
Döngü hakkında daha fazla bilgi edinmek için WordPress’te Döngü Nedir (İnfografik) bölümüne göz atın.
Umarız bu makale yeni başlayanlar için temel WordPress tema hile sayfası olarak size yardımcı olur. WordPress fonksiyonlar dosyası için en kullanışlı püf noktaları listemizi de görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Marco says
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support says
What we share in this article is still currently relevant.
Yönetici
Henry Obilor says
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support says
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
Yönetici
Biplob says
It’s awesome thing. it’s very useful
Zaki says
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate “How to add a custom page”.
Sanam says
Bro where to paste that code in functions.php
WPBeginner Support says
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
Yönetici
Shahbaz Ahmed Bhatti says
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon says
Thanks very much, i really appreciate.
Pali Madra says
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben says
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca says
what is – Site’s Description
I think it is
madalinignisca says
what is “<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is “<?php bloginfo(‘description’); ?>”
mirzayasir4 says
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John says
Fantastic, I’ve been looking for an easy WordPress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. WordPress has such a lot of power under the hood.
mark says
this is gr8 for beginner
Russell Poulter says
This is SO bookmarked!
Thanks.
asif eminov says
Thanks this details.
Ersatzknochen says
Yeah, very useful. Thank you.
Delighted says
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY says
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson says
This is great, Thanks.
Manoj says
Great info! bookmarked
Obed Ward says
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor says
Very Useful, just printed it.
Blog2Life says
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami says
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K. says
This is very useful thanks.
Jon Rawlins says
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi says
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK says
Cool, Thanks for sharing, consider it tweeted