e
sv

WordPress Tema Geliştirme

Sıfırdan Wordpress Tema Yapımı
avatar

Yazılım Method

  • e 1

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Özel WordPress temaları oluşturmayı öğrenmek, keşfetmeniz için yepyeni bir dünyanın kapılarını açar. Kendiniz ve müşterileriniz için özel tasarımlar oluşturmanıza ve hatta açık kaynak topluluğuna katkıda bulunmanıza olanak tanır.

Bu kılavuzda, sizi sıfırdan WordPress.org tema dizinine gönderilebilecek tamamen işlevsel bir temaya sahip olmaya götüreceğiz.

Devam etmek için HTML, CSS, PHP ve WordPress’in nasıl çalıştığı hakkında temel bir anlayışa ihtiyacınız olacak.

Bu kılavuzda kullanılan tüm kodlar, bu Github deposunda referans olarak bulunacaktır.

İçindekiler:

  1. Özel temanız için temel dosyalar oluşturma
  2. function.php oluşturun
  3. Şablon parçaları ekle
  4. singular.php, arşiv.php, search.php ve 404.php ekleyin
  5. yardımcı dosyalar
  6. Sayfa şablonları oluşturun
  7. Temanızı RTL.css ile uyumlu hale getirin
  8. Her zaman en iyi uygulamaları takip edin
  9. WordPress temanızı dağıtın
  10. Kodu test edin ve geliştirin

Adım #1: Özel Temanız için Temel Dosyalar Oluşturma

Çalışan bir WordPress teması yalnızca iki dosyadan oluşabilir: style.css ve index.php . Bu, WordPress’in şablon hiyerarşisi nedeniyle mümkündür .

WordPress bir web sayfasının çıktısını aldığında, mevcut en spesifik şablonu arar, eğer bir şablon yoksa, onu bulana kadar hiyerarşide aşağı iner. İşte pratik bir örnek:

Kullanıcı, bir sayfa olan https://example.com/practical-example adresindedir . WordPress şu sırayla bir şablon bulmaya çalışacaktır:

  1. page-{slug}.php – Sayfa bilgisi /practical-example’dir, WordPress sizin-temanızı/sayfa-pratik-example.php’yi kullanmaya bakacaktır
  2. page-{id}.php – Sayfa kimliği 42’dir, WordPress temanızı/sayfa-42.php’yi kullanmaya bakacaktır.
  3. page.php – WordPress genel amaçlı temanız/page.php şablonunu deneyecektir.
  4. singular.php – Tekil şablon, Mesajları ve Sayfaları oluşturabilir, bu nedenle daha spesifik page.php’den sonra denenir
  5. index.php – Son olarak, başka bir şablon bulunamazsa temanız/index.php kullanılır.

Sadece temel dosyalarla bir tema oluşturarak başlayalım ve ardından nasıl çalıştıklarını keşfederken daha fazla özellik üzerinde katman oluşturabiliriz.

içinde /wp-content/themes/, adlı bir klasör my-custom-themeoluşturun ve aşağıdaki iki dosyayı oluşturun:

stil.css

WordPress’in temamızı tanıması ve Görünüm → Temalar listesinde düzgün bir şekilde çıktı alması için style.css dosyasının en üstüne WordPress’e özgü bazı kodlar yerleştirmemiz gerekir , şöyle görünür:

/*
Theme Name: HidemYas Web Tas. Hiz. Teması
Theme URI: https://www.r10.net/profil/132259-hidemyas.html
Author: HidemYas
Author URI: https://byhidemyas.com/
Description: Web Tasarım Hizmetleri
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hidemyas
Tags: hidem,hidemyas
*/

Teknik olarak alanların hiçbiri gerekli değildir, ancak temanızın wp-admin’de iyi görünmesini istiyorsanız, o zaman şiddetle tavsiye edilir. Temanızı WordPress’te dağıtıyorsanız da gereklidir.

  1. Tema Adı – Her zaman bir tema adı sağlamalısınız. Bunu yapmazsanız, örneğimizde klasör adı, my-custom-theme kullanılacaktır.
  2. Tema URI’si – Kullanılıyorsa, tema URI’si, ziyaretçilerin tema hakkında daha fazla bilgi edinebileceği bir sayfaya bağlantı sağlamalıdır.
  3. Yazar – Adınız buraya gelecek.
  4. Yazar URI’si – Kişisel veya ticari web sitenize bir bağlantı buraya yerleştirilebilir.
  5. Açıklama – Açıklama, wp-admin tema modelinde ve ayrıca WordPress tema listesinde gösterilir.
  6. Sürüm – Sürüm numaraları, geliştiricilerin değişiklikleri takip etmesine yardımcı olur ve kullanıcılara en son sürümü kullanıp kullanmadıklarını bildirir. Bir güncellemedeki değişikliklerin önem derecesini belirtmek için SemVer numaralandırma sistemini takip ediyoruz .
  7. Lisans – Temanızı nasıl lisanslayacağınız size bağlıdır, ancak GPL uyumlu olmayan bir lisans seçerseniz temanızı WordPress’te dağıtamazsınız.
  8. Lisans URI’si – Bu sadece yukarıda listelenen lisansa bir bağlantıdır.
  9. Metin Alanı – Metin alanı, temanız diğer dillere çevrilirken kullanılır. Merak etmeyin, bunu daha sonra derinlemesine inceleyeceğiz. Şimdilik, tema klasörünün ve metin-alanının tema adının boşluklar yerine kısa çizgilerle ayrılmış olmasının iyi bir uygulama olduğunu bilmek yeterli.
  10. Etiketler – Etiketler yalnızca temanızı WordPress.org tema dizinine yüklüyorsanız kullanılır. Bunlar, ‘Özellik Filtresi’ mekanizmasının temelidir.

Yukarıdakileri style.css’ye kopyalayıp yapıştırın ve şöyle bir şeye sahip olacaksınız:

Not: Henüz bir ekran görüntümüz olmadığı için şu anda biraz boş görünüyor. Bunu daha sonra ekleyeceğiz.

index.php

index.php kesinlikle gerekli olan diğer tek dosyadır. Görevi, temamız için tüm ön uç çıktıyı oluşturmaktır.

index.php tüm sayfalarımızı (ev, gönderiler, kategoriler, arşivler) oluşturacağı için çok fazla iş yapacak. Başlamak için HTML temellerini kapsayacak bir baş bölümüne ihtiyacımız var.

<!DOCTYPE html>
<html <?php dil_attributes(); ?>>
  <kafa>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>

Bu, bir istisna dışında standart HTML’dir, [wp_head()](<https://developer.wordpress.org/reference/hooks/wp_head/>)wp_headWordPress ve üçüncü taraf eklentilerin şablon dosyalarınızı değiştirmeden başlığa kod eklemesine izin veren temel bir işlevdir. Buna eylem kancası denir.

HTML’ye aşina iseniz, sayfa başlığının çıktısını almak için bir <title> etiketi olmadığını fark edebilirsiniz. Bunun nedeni, WordPress’in başlığı dinamik olarak eklemek için wp_head kancasını kullanabilmesidir.

wp_head’in başka bir kullanımı da stilleri (.css) ve komut dosyalarını (.js) kuyruğa almaktır. Bunları kodlamak yerine bunu yapmak için daha sonra bakacağımız çok iyi nedenler var.

Ardından, sayfanın gövdesine sahibiz:

<body <?php body_class(); ?>>

body_class() , WordPress tarafından sağlanan ve aşağıdaki gibi görüntülenen sayfayı tanımlayan faydalı CSS sınıflarının bir listesini çıkaran yardımcı bir işlevdir:

class="page page-id-2 page-parent page-template-default logged-in"

body_class() ; ayrıca kendi sınıflarınızı ekleyebilmeniz için bir parametreyi de kabul eder, örneğin:

<body <?php body_class( 'geniş şablon mavi-bg'); ?>>

Ardından, şablon başlığına sahibiz.

<header class="site-header">
	<p class="site başlığı">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<?php bloginfo('isim'); ?>
		</a>
	</p>
	<p class="site-açıklaması"><?php bloginfo( 'açıklama'); ?></p>
</header><! – .site başlığı – >

Burada, Site Başlığı ve Açıklamasının çıktısını almak için WordPress’in yerleşik şablon işlevlerini kullanıyoruz. Ayrıca , Site Başlığını ana sayfaya geri bağlamak için home_url() adlı bir yardımcı işlev kullandık.

Sırada, sayfanın gövdesi:

<div class="site içeriği">
	<?php
	if ( have_posts() ):
	
		while ( have_posts() ):
	
			posta();
			?>
	
			<makale <?php post_class(); ?>>
			
				<header class="giriş-başlığı">
					<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
				</header><! – .entry-header – >
			
				<div class="giriş içeriği">
					<?php the_content( esc_html__( 'Okumaya devam et →', 'özel temam' ) ); ?>
				</div><! – .entry içeriği – >
			
			</makale><! – #post-## – >
			
			<?php
			// Yorumlar açıksa veya en az bir yorumumuz varsa, yorum şablonunu yükleyin.
			if (yorum_open() || get_comments_number() ) :
				yorumlar_şablon();
			endif;
	
		eskimiş;
	
	başka :
		?>
		<article class="sonuç yok">
			
			<header class="giriş-başlığı">
				<h1 class="page-title"><?php esc_html_e( 'Hiçbir Şey Bulunamadı', 'benim-özel temam'); ?></h1>
			</header><! – .entry-header – >
		
			<div class="giriş içeriği">
				<p><?php esc_html_e( 'Bu konumda hiçbir şey bulunamadı.', 'benim-özel-tema'); ?></p>
			</div><! – .entry içeriği – >
		
		</makale><! – .sonuç yok – >
	<?php
	endif;
	?>
</div><! – .site içeriği – >

Burası ilginçleştiği yer (ve biraz daha karmaşık). Burada WordPress’in en önemli özelliği olan Loop’u kullanıyoruz . Döngü, kullanıcının hangi sayfada olduğunu ve neyin gösterilmesi gerektiğini bulmanın zor işini yapar. Daha sonra, şablon işlevlerini kullanarak döngüye girip veri çıkarabileceğimiz bir veya daha fazla ‘gönderinin’ listesini döndürür.

Döngü, örneğin bir 404 sayfasında veya silinmiş bir gönderide herhangi bir sonuç döndürmezse, önceden tanımlanmış bir mesajı göstermek için else operatörünü kullanırız.

Çevreleyen kodlardan herhangi biri olmadan, basitleştirilmiş bir döngü şöyle görünür:

if ( have_posts() ) : // döngünün herhangi bir gönderi döndürüp döndürmediğini kontrol edin.

	while ( have_posts() ) : // döndürülen her gönderi arasında döngü.
		posta(); // the_title() gibi şablon etiketlerini kullanabilmemiz için içeriği ayarlayın.
		başlık(); // yazı başlığının çıktısını alın.
		içerik(); // gönderi içeriğini çıkar.
	eskimiş;

başka :

	echo 'Sayfa Bulunamadı'; // gönderi yoksa bir hata mesajı verir.

endif;
?>

Not: WordPress’in kökeni blog yazarlığına dayandığından , birçok işlev, herhangi bir içerik türünü (gönderiler, sayfalar, özel gönderi türleri) döndürüp çıkarabilseler bile, ‘gönderi’ terminolojisini kullanır.

Son olarak, altbilgimiz var, burada tek yapmamız gereken daha önce açtığımız HTML etiketlerini kapatmak. Sayfayı oluşturmak için gereken altbilgiye komut dosyalarını eklemek için WordPress ve eklentiler tarafından aktif olarak kullanılan wp_footer() adlı başka bir eylem kancası var .

<?php wp_footer(); ?>
	</body>
</html>

Şimdiye kadar takip ettiyseniz, şuna benzeyen tamamen işlevsel bir WordPress temasına sahip olacaksınız:

Temamız herhangi bir tasarım ödülü kazanmayacak (CSS’si yok) ve kullanıcıların gerekli gördüğü birçok özelliği (kenar çubukları, gezinme, meta veriler, küçük resimler, sayfalandırma vb.) eksik, ancak bu harika bir başlangıç!

Devam edelim ve nasıl geliştirebileceğimizi görelim.

Adım #2: function.php oluşturun

Functions.php kesinlikle gerekli bir dosya değildir, ancak o kadar çok fayda sağlar ki temaların %99,99’unda bulunur. Functions.php’de WordPress’in yerleşik tema işlevselliğini kullanabilir ve ayrıca kendi özel PHP kodunuzu ekleyebilirsiniz .

Sonraki bölümlerde ona kod ekleyeceğimiz için şimdi tema klasörünüzde bir function.php oluşturun .

Navigasyon Menüsü Ekleme

Çoğu, tüm web siteleri bir gezinme menüsü kullanmıyorsa da, şimdiye kadar temamız birini desteklemiyor. WordPress temamızın bir gezinme menüsü içerdiğini söylemek için bunu function.php dosyasına şu şekilde kaydetmeliyiz:

register_nav_menus( dizi(
    'menu-1' => __( 'Birincil Menü', 'özel temam'),
);

Not: register_nav_menus() bir diziyi kabul eder, böylece gerekirse birden fazla menüyü kaydedebilirsiniz.

WordPress artık menümüzü biliyor, ancak yine de temamızda çıktısını almamız gerekiyor. Bunu index.php içindeki site açıklamasının altına aşağıdaki kodu ekleyerek yapıyoruz :

wp_nav_menu( dizi(
    'theme_location' => 'menü-1',
) );

Artık (stilsiz) bir gezinme menümüz var:

Kenar Çubuğu Ekleme

Bizim temamızda da kenar çubuğu (widget alanı) yok, şimdi düzeltelim.

İlk olarak, kenar çubuğunu functions.php içine kaydetmemiz gerekiyor :

function my_custom_theme_sidebar() {
    register_sidebar( dizi(
        'name' => __( 'Birincil Kenar Çubuğu', 'benim-özel temam'),
        'id' => 'kenar çubuğu-1',
    ) );
}
add_action('widgets_init', 'my_custom_theme_sidebar');

Şimdi tema klasörünüzde sidebar.php oluşturun ve aşağıdaki kodu ekleyin:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?>
    <ul class="kenar çubuğu">
        <?php dynamic_sidebar('sidebar-1' ); ?>
    </ul>
<?php } ?>

Burada , kodu çıkarmadan önce kenar çubuğunun ‘etkin’ olup olmadığını kontrol etmek için bir if ifadesi kullanıyoruz. Etkin kenar çubuğu, kullanıcının en az bir widget eklediği kenar çubuğudur.

Son adım, wp_footer()’ın üstüne bir get_sidebar() çağrısı eklemek için, kenar çubuğunu index.php içine dahil etmektir .

Öne Çıkan Görüntüler Ekleme

Kenar çubukları ve gezinme menüleri gibi, temamızda öne çıkan görüntülerin çıktısını alıp bunların çalışmasını bekleyemeyiz, önce WordPress’e bu özelliği desteklediğimizi söylemeliyiz. Functions.php’de şunu ekleyin :

add_theme_support('küçük resim sonrası');

Şimdi _post_thumbnail(); döngümüz içinde ve küçük resimler çalışacaktır. Tek sorun, çoğu kullanım için çok büyük olan WordPress’in maksimum 1920 piksel x 2560 piksel boyutunda çıktı almalarıdır. Neyse ki WordPress’in başka bir yardımcı işlevi var: add_image_size() ;

Bir kullanıcı bir resim yüklediğinde ve resim boyutu tanımlanmışsa, WordPress yüklenen resmin bu boyutta bir sürümünü oluşturur (orijinalini korurken). Kullanıcının resmi ayarladığınız boyutlardan daha küçükse, WordPress orijinalden daha büyük bir resim oluşturamayacağı için hiçbir şey yapmaz.

Orijinal yerine optimize edilmiş bir özellik görüntüsü kullanmak için, function.php içine aşağıdaki kodu yerleştirin :

add_image_size( 'özel-görüntü boyutum', 640, 999);

İlk parametre tutamaç, ikincisi görüntü genişliği ve üçüncüsü yüksekliktir. Yalnızca bir boyutu sınırlamak istemeniz durumunda hem yükseklik hem de genişlik isteğe bağlıdır.

index.php’de : _

the_post_thumbnail('benim-özel-görüntü-boyutum');

Stilleri ve Komut Dosyalarını Sıraya Alma

Daha önce, stilleri ve komut dosyalarını doğrudan şablon dosyalarına kodlamak yerine sıraya koymanın daha iyi olduğunu belirtmiştik. Bunun nedeni, sıraya almanın çok daha fazla esneklik sağlamasıdır.

Doğru yapıldığında, kuyruğa alma, WordPress’e hangi kaynakların yüklendiğini de söyler. WordPress hangi kaynakların gerekli olduğunu bildiğinde, aynı kaynağın birden fazla kez yüklenmediğinden emin olabilir. Bu, özellikle jQuery veya FontAwesome gibi çok sayıda tema ve eklentinin kullanacağı son derece popüler bir kitaplığınız olduğunda önemlidir.

Kuyruğa almanın bir başka yararı da, kuyruğa alınan bir kaynağın, şablon dosyalarını değiştirme gereğini ortadan kaldırarak bir eklenti tarafından kuyruğa alınabilmesidir.

Temamızın bir style.css dosyası olmasına rağmen henüz onu kullanmıyor, hadi şimdi sıraya koyalım:

function my_custom_theme_enqueue() {
    wp_enqueue_style( 'özel temam', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue');

get_stylesheet_uri()geçerli temanın stil sayfasının URI’sini alan yardımcı bir işlevdir. Başka bir dosyayı kuyruğa alıyor olsaydık, bunun yerine bunu yapmamız gerekirdi:

wp_enqueue_style( 'stil sayfam', get_template_directory_uri() .'/css/style.css');

Temamızın herhangi bir betiği yok, olsaydı onları şöyle sıralardık:

function my_custom_theme_enqueue() {
wp_enqueue_style( 'özel temam', get_stylesheet_uri() );
wp_enqueue_script('betiklerim', get_template_directory_uri() .'/js/scripts.js');
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue');

Yukarıdakilerin bir istisnası, WordPress tarafından önceden kaydedilmiş komut dosyalarıdır , bu durumlarda yalnızca ilk parametreyi ($handle) sağlamanız gerekir:

wp_enqueue_script( 'jquery' );

CSS ile Stil Eklemek

Temamızın güçlü temelleri var ama herhangi bir tasarımı yok, style.css’ye bazı temel CSS eklemek büyük bir fark yaratacak. Örnek temamıza gösterim olarak yaklaşık 100 satır CSS ekledik ve sonuç şöyle görünüyor:

Başlık Etiketi

Tüm temalar, bu kodu function.php dosyanıza ekleyerek etkinleştirilen başlık etiketini oluşturmak için WordPress’in yerleşik işlevselliğini kullanmalıdır : Hepsi bu kadar, WordPress <title>add_theme_support( 'title-tag' ); sayfasının çıktısını işleyecek ve gerekirse eklentiler, filtreleri kullanarak çıktıyı değiştirebilir. SEO eklentileri, genellikle başlıkları daha da optimize etmek için bunu yapar.

Adım #3: Şablon Parçaları Ekleyin

Şu anda şablon kodumuzun %80’i index.php içinde .

Bu çalışırken, singular.php , search.php ve arşiv.php gibi başka şablon dosyalarımız olduğunda çok fazla kod tekrarı ile sonuçlanacaktır . Şablon Parçaları, kodu şablonlar arasında yeniden kullanmamıza izin vererek tema geliştirmeyi kolaylaştırır. Üstbilgi ve altbilgimiz her sayfada aynı olacağından, şablon parçalarını kullanmak için mükemmel bir adaydır. İlk olarak, header.php oluşturun ve aşağıdaki kodu index.php’den taşıyın :

<!DOCTYPE html>
<html <?php dil_attributes(); ?>>
	<kafa>
		<meta charset="<?php bloginfo('charset'); ?>">
		<meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1">
		<link rel="profile" href="<https://gmpg.org/xfn/11>">
		<?php wp_head(); ?>
	</head>
  <header class="site-header">
    <p class="site başlığı">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <?php bloginfo('isim'); ?>
      </a>
    </p>
    <p class="site-açıklaması"><?php bloginfo( 'açıklama'); ?></p>
	<?php
	wp_nav_menu( dizi(
    	'theme_location' => 'menü-1',
	) );
	?>
  </header><! – .site başlığı – >

index.php içinde yukarıdaki kodu şununla değiştirin:

<?php get_template_part( 'başlık'); ?>

Not: Bir şablon parçası alırken , şablon parçası tanıtıcısından .php dosyasını çıkarmanız gerekir .

Ardından, bu kodu footer.php’ye taşıyarak ve yukarıdaki işlemi tekrarlayarak bir altbilgi şablonu parçası oluşturun :

<?php wp_footer(); ?>
	</body>
</html>

Son olarak, birden fazla şablonda kullanılması muhtemel olduğundan, ‘sonuç yok’ kodunu da bir şablon bölümüne taşıyacağız. content-none.php oluşturun ve bu kodu yeni dosyaya taşıyın.

<article class="sonuç yok">

  <header class="giriş-başlığı">
    <h1 class="page-title"><?php esc_html_e( 'Hiçbir Şey Bulunamadı', 'benim-özel temam'); ?></h1>
  </header><! – .entry-header – >

  <div class="giriş içeriği">
    <p><?php esc_html_e( 'Bu konumda hiçbir şey bulunamadı.', 'benim-özel-tema'); ?></p>
  </div><! – .entry içeriği – >

</makale><! – .sonuç yok – >

Dizininiz şimdi şöyle görünmelidir:

<?php get_template_part( 'başlık'); ?>
  <div class="site içeriği">
    <?php
    if ( have_posts() ):
      while ( have_posts() ):

        posta();
        ?>

        <makale <?php post_class(); ?>>

		  <?php the_post_thumbnail(); ?>

          <header class="giriş-başlığı">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
          </header><! – .entry-header – >

          <div class="giriş içeriği">
            <?php the_content( esc_html__( 'Okumaya devam et →', 'özel temam' ) ); ?>
          </div><! – .entry içeriği – >

        </makale><! – #post-## – >

        <?php
        // Yorumlar açıksa veya en az bir yorumumuz varsa, yorum şablonunu yükleyin.
        if (yorum_open() || get_comments_number() ) :
          yorumlar_şablon();
        endif;
      eskimiş;

    başka :
      get_template_part('içerik-yok');
    endif;
	?>
	</div><! – .site içeriği – >
<?php
get_sidebar();
get_template_part('altbilgi');

Yukarıdakiler mükemmel bir şekilde çalışacak olsa da, yapabileceğimiz küçük bir iyileştirme var. WordPress, üstbilgi, altbilgi ve kenar çubuğu şablon bölümlerini dahil etmek için yardımcı işlevlere sahiptir. Mümkün olan yerlerde temel işlevleri kullanmak en iyi uygulama olduğundan, bunun yerine bunları kullanmalıyız.

get_template_part( 'header' );ile get_header();ve get_template_part( 'footer' );ile değiştiringet_footer();

Adım 4: singular.php, arşiv.php, search.php ve 404.php ekleyin

Şablon bölümleriyle tamamladığımız altyapı, temamıza yeni şablon dosyaları ekledikçe karşılığını alacaktır. Aşağıda en yaygın olanları listeledik. Kod örnekleriyle sizi bunaltmamak için bunun yerine Github’daki kaynak koda bağladık.

page.php

Gönderiler ve Sayfalar, kendi URL’lerinde gösterildiğinde, çoğu zaman bu sayfa türlerinin her ikisi için de düzen aynı olacağından ‘Tekil’ olarak kabul edilir. Ancak, olmaması durumunda bunun yerine daha spesifik page.php ve single.php (post) kullanabilirsiniz.

Örnek Kod – singular.php

archive.php

Arşiv şablonları genellikle tekil şablonlardan iki şekilde farklıdır: tam içerik yerine alıntılar gösterirler ve içeriği açıklayan bir arşiv başlığına sahiptirler.

Şablon hiyerarşisine geri dönün ve arşiv şablonunun tüm arşiv türlerini (yazar, kategori, etiket, sınıflandırma, tarih) kapsadığını göreceksiniz.

  • yazar.php
  • kategori.php
  • tag.php
  • taksonomi.php
  • tarih.php

Örnek Kod – arşiv.php

search.php

WordPress web siteleri ?s= URL parametresi kullanılarak aranabilir, örneğin yourwebsite.com?s=test. search.php şablonu bu aramaların sonuçlarını verir .

Örnek Kod – search.php

404.php

index.php’ye eklediğimiz else ifadesi “sayfa bulunamadı” hatalarını yakalar, ancak çıktı üzerinde daha fazla kontrole sahip olmak için bu işlevselliği kendi şablon dosyasına ayırmak isteyebilirsiniz. 404.php şablon dosyasının kullanım durumu budur .

Örnek Kod – 404.php

Adım #5: Yardımcı Dosyalar

Temanızı halka dağıtıyorsanız, aşağıdaki dosyalar zorunludur. Bunlar olmadan temanız, tema havuzlarından ve pazar yerlerinden reddedilecektir.

screenshot.png

Kullanıcı yeni bir tema seçerken ekran görüntüsü wp-admin temaları listesinde gösterilir. İşte izlemeniz gereken en iyi uygulamalardan bazıları:

  • Ekran görüntüleri 1200px x 900px olmalıdır
  • Ekran görüntüleri .png veya .jpg formatında olmalıdır
  • Ekran görüntüleri temanın doğru bir temsili olmalıdır
  • Ekran görüntüleri optimize edilmelidir ( tinypng.com veya benzerini kullanın)

readme.txt

WordPress readme.txt dosyasındaki herhangi bir bilgiyi kullanmaz , ihtiyaç duyduğu her şeyi style.css dosyasından çeker . Öte yandan, WordPress tema dizini benioku dosyasından önemli bilgileri alır ve onu gerekli bir dosya olarak kabul eder.

Çoğu geliştirici , temalarıyla ilgili tüm bilgileri depolamak için merkezi konum olarak benioku.txt’i kullanır. Basit bir benioku.txt dosyası şöyle görünür:

=== Tema Adı ===
En az gerektirir: 5.0
5,2'ye kadar test edildi
PHP gerektirir: 5.6
Lisans: GPLv2 veya üstü
Lisans URI'sı: <https://www.gnu.org/licenses/gpl-2.0.html>

Kısa Açıklama. 150 karakterden fazla değil.

== Açıklama ==
Tema açıklaması

== Değişiklik günlüğü ==

= 1.0 =
* Yeni seçenek eklendi

== Kaynaklar ==
* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher ve Jonathan Neal, [MIT](<https://opensource.org/licenses/MIT> )
  • En azından gerektirir – Bu, temanızın uyumlu olduğu minimum WordPress sürümüdür.
  • Test edildi – Bu alan, temanızın test edildiği en son WordPress sürümünü belirtir.
  • PHP gerektirir – Bu alan, temanızın üzerinde çalışacağı minimum PHP sürümünü belirtir.
  • Açıklama – Bu açıklama alanı şu anda hiçbir yerde görüntülenmiyor.
  • Değişiklik günlüğü – Değişiklik günlüğü hiçbir yerde kullanılmaz, ancak geliştiriciler ve bazı kullanıcılar, hangi değişikliklerin yapıldığını görmek için bu dosyaya başvuracaktır.
  • Kaynaklar – Çoğu üçüncü taraf kaynağı, bir tür ilişkilendirme gerektirir. Kaynaklar bölümü, bunları koymak için yaygın olarak kabul edilen bir yerdir. Açıkça ilişkilendirme gerektirmeyen kaynaklar için bile, kullanıcıların kullandıkları kaynakların lisanslarından haberdar olmaları için bunları burada listelemek yine de iyi bir uygulamadır.

Adım #6: Sayfa Şablonları Oluşturun

Sayfa Şablonları, geliştiricilerin tek tek gönderiler ve sayfalar için kullanılabilecek özel şablonlar oluşturmasına olanak tanır. Örneğin, çoğu temanın iki sütunlu (içerik – kenar çubuğu) bir düzeni vardır, ancak bazı sayfalarda kullanıcı bir kenar çubuğu göstermek yerine yalnızca içeriğe odaklanmak isteyebilir. Bir sayfa şablonunun yardımcı olabileceği yer burasıdır.

“Sayfa Şablonları” nasıl oluşturulur?

Tema klasörümüzde ‘page-templates’ adında yeni bir klasör oluşturun ve bu klasör içinde single-column.php adlı bir dosya oluşturun . İşleri hızlandırmak için tüm kodu singular.php’den page -templates/single-column.php’ye kopyalayın ve bu şablonun buna ihtiyacı olmayacağından get_sidebar() çağrısını kaldırın .

Şimdi WordPress’e bunun bir sayfa şablonu olduğunu söyleyen özel bir başlık eklememiz gerekiyor, şöyle görünüyor:

/*
Şablon Adı: Tek Sütun Şablonu
Şablon Gönderi Türü: post, page
*/

Kod kendini açıklayıcıdır, biz sadece WordPress’e şablonun adını ve hangi yazı tipleriyle kullanılabileceğini söylüyoruz.

Hepsi bu kadar, yeni sayfa şablonumuz artık editörde ‘Sayfa Nitelikleri’ altında mevcut.

Adım #7: Temanızı RTL.css ile Uyumlu Hale Getirin

Tüm diller soldan sağa okunmaz. Örneğin Arapça ve İbranice, Sağdan Sola (RTL) okunur. Temanızı RTL dilleriyle uyumlu hale getirmenin basit bir yolu var.

Tema klasörünüzde rtl.css adlı yeni bir dosya oluşturun , ardından aşağıdaki kodu kopyalayıp yapıştırın:

gövde {
	yön: rtl;
	unicode-bidi: embed;
}

Bir WordPress web sitesinde aktif dil bir RTL diliyse, WordPress bu CSS dosyasını otomatik olarak yüklemeyi bilir.

Bu, başlamanıza yardımcı olacak çok temel bir RTL işlevselliği uygulamasıdır. Daha fazlasını öğrenmekle ilgileniyorsanız, burada iki harika kaynak var:

Sağdan Sola Dil Desteği Belgeleri

Yirmi Yirmi RTL kodu

8. Adım: Daima En İyi Uygulamaları Takip Edin

En iyi uygulamalar, WordPress temalarını oluşturmayı ve sürdürmeyi kolaylaştırmak için zaman içinde gelişti. Bu ilkeleri izlemek yalnızca size yardımcı olmakla kalmayacak, aynı zamanda kodunuzla çalışmaları gerektiğinde diğer geliştiricilerin işini kolaylaştıracaktır.

1) Başlangıç ​​Temalarını Kullanın

Başlangıç ​​temaları, temanızı üzerine inşa etmeniz için sağlam bir temel sağlar. Tipik olarak hafiftirler, çok az veya hiç stil içermezler ve yapılandırma seçenekleri yoktur. Zamanla, tüm projelerinizi temel alabileceğiniz kendi başlangıç ​​temanızı oluşturabilirsiniz, ancak şimdilik bazı popüler seçenekler şunlardır:

2) WordPress Kodlama Standartlarını Öğrenin

Kodlama standartları, kodunuzu tüm kod tabanında tutarlı bir şekilde biçimlendirmenin bir yoludur. WordPress, HTML, CSS, Javascript ve PHP için kodlama standartlarına sahiptir. Bir kodlama standardı kullanmanın son kullanıcı deneyimi üzerinde hiçbir etkisi olmasa da, kodunuzu çok daha okunabilir hale getirir. WordPress kodlama standartlarını kullanmasanız bile, her zaman bir standart kullanmanızı öneririz.

3) Yerelleştirmeyi Kullan

Gönüllülerin sıkı çalışması sayesinde WordPress yüzlerce dilde mevcuttur. Temanız herkese açık olarak yayınlanacaksa, çevrilmesine de izin verecek şekilde oluşturulmalıdır.

Endişelenme, yapması çok kolay. Tek yapmamız gereken, tüm dizelerin doğrudan çıktı olmaktansa bir ‘yerelleştirme işlevinden’ geçirildiğinden emin olmaktır.

Bunun yerine:

<?php echo 'Önceki Gönderi'; ?>

Bunun yerine şunu yapıyoruz:

<?php echo __( 'Önceki Gönderi', 'benim-özel temam'); ?>

__() , bir dize ve bir metin etki alanı kabul eden bir yerelleştirme işlevidir. İşlev, sağlanan dizenin bir çevirisini veya bir çeviri yoksa orijinal dizeyi döndürür.

4) Eklenti İşlevselliğinden Kaçının

Bir kullanıcı temayı değiştirdiğinde, yalnızca sunum katmanı değişmelidir. İçerik ve işlevsellik çoğunlukla aynı kalmalıdır. Bunun anlamı, WordPress rollerinin temanızda değil, bir eklentide nasıl yer alması gerektiğini etkileyen herhangi bir işlevin olmasıdır. Eklenti işlevselliğine ilişkin bazı örnekler şunları içerir:

  • Özel Gönderi Türleri
  • Sayfa Oluşturucular
  • Sosyal Medya Paylaşımı
  • Arama Motoru Optimizasyonu (SEO)

Bir temaya SEO kontrolleri eklemek uygun (ve muhtemelen bir satış noktası) gibi görünse de, aslında uzun vadede kullanıcıya zarar verir. Gelecekte, temalarını değiştirmeleri gerekecek, ancak tüm SEO yapılandırmaları mevcut temaya sıkı sıkıya bağlı olduğu için yapamıyorlar. Buna karşılık, konfigürasyonlar bir eklentide saklandıysa, temayı endişelenmeden değiştirebilirler.

5) Ön Ek (Çatışmaları Önler)

Çakışmaları önlemek için, temanız tarafından oluşturulan tüm işlevler, sınıflar ve global değişkenler önek olmalıdır. Bu önemlidir, çünkü kullanıcınızın web sitesinde başka hangi kodun çalıştığını bilmek imkansızdır. Ön ek, ad çakışmalarını ve önemli hataları önler.

Kısa çizgi veya alt çizgi ile ayrılmış temanızın adı çoğu zaman önek olarak çalışır. Tema adı çok uzunsa, bunun yerine baş harfler kullanılabilir.

Tema Adı: İskele

sınıf İskele_Sınıfı {}
function iskele_fonksiyonu() {}
küresel $iskele_global

Tema Adı: Uzun Tema Adım

sınıf MLTN_Sınıfı {}
function mltn_function() {}
küresel $mltn_global

6) Temel İşlevselliği Kullanın

Varsa, tekerleği yeniden icat etmek yerine her zaman temel işlevleri kullanmalısınız. Buna Kenar Çubukları, Gezinme Menüleri, Küçük Resimler Gönderi, Özel Başlıklar ve Özel Arka Planlar dahildir ancak bunlarla sınırlı değildir. Bu özellikler milyonlarca kullanıcı tarafından test edildi ve aktif olarak sürdürüldü ve geliştirildi.

Bir çekirdek işlevin işlevselliğini veya çıktısını değiştirmeniz gerekiyorsa, WordPress’in sunduğu birçok kanca ve filtreden birini kullanmak mümkündür. Örneğin wp_nav_menu(), çıktı üzerinde tam kontrole sahip olabilmeniz için bir ‘yürüteç’ parametresine sahiptir.

7) Verilerden Kurtulmak ve Temizlenmek

Bir tema geliştiricisi olarak, kullanıcılarınızı olası açıklardan korumak için kaçan ve verileri temizlemeye aşina olmalısınız.

kaçmak

Kaçma, verilerin çıktısından önce güvenli olup olmadığını kontrol etme işlemidir ve sterilize etme, verileri veritabanına kaydedilmeden önce kontrol etmektir.

WordPress, verilerden kaçmak için kullanabileceğiniz yardımcı işlevlere sahiptir, böylece bunları kendiniz oluşturmanıza gerek kalmaz. esc_html , kaçış işlevine bir örnektir. Çıkış yapılmamış bir çıktı şöyle görünür:

echo get_theme_mod( 'error_page_title' );

Çıktıdan kaçmak için şunu yaparız:

echo esc_html( get_theme_mod( 'error_page_title' ) );

Farkında olmanız gereken diğer bazı kaçış işlevleri şunlardır: esc_attr() , absint() , esc_url() .

Tek bir işlev kullanarak bir dizeyi çevirmek ve bundan kaçmak da mümkündür:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Olur:

echo esc_html__( '404 Bulunamadı', 'özel temam');
// veya
esc_html_e('404 Bulunamadı', 'özel temam');

İpucu: Temanızın herhangi bir yerinde, kaçmanız echo $gerekip gerekmediğini kontrol etmelisiniz, genellikle olur.

sanitasyon

Temanıza ayarlar eklerseniz, kullanıcıların bu ayarlara girdiği verilerin veritabanına girmeden önce güvenli olduğundan emin olmanız gerekir. WordPress, girdiyi temizlemeye yardımcı olacak bir dizi işleve sahiptir.

Özelleştirici API’sini kullanarak temanıza bir ayar eklerken, temizleme işlevinin adını kabul eden ‘ sanitize_callback ‘ adlı bir parametreye sahiptir. Ayarın aldığı herhangi bir giriş , veritabanına girmeden önce ‘ sanitize_callback ‘ için sağladığınız işlev tarafından kontrol edilir .

Ayarlarınızdan biri bile sanitize_callback eksikse, bunun WordPress tema dizinine kabul edilmeyeceği, temizlemenin önemini vurgular.

$wp_customize->add_setting(
    'my_custom_theme_setting',
    dizi(
        'sanitize_callback' => 'sanitize_text_field' // Temel temizleme işlevi.
    )
);

Temizleme ve kaçış işlevlerinin resmi listesi burada görülebilir: Veri Temizleme/Kaçış

9. Adım: WordPress Temanızı Dağıtın

Temalar, elde etmek istediğiniz sonuca bağlı olarak farklı kanallar aracılığıyla dağıtılabilir. Sonucunuz yalnızca açık kaynak topluluğuna katkıda bulunmaksa, bunu yapmanın temanızı WordPress dizinine yüklemekten daha iyi bir yolu yoktur. Bunun yerine temanızı satmak ve doğrudan para kazanmak istiyorsanız, bunu yapmanın da yolları vardır.

Tema dağıtımı için önde gelen web siteleri şunlardır:

1) WordPress.org (İndirmeler ve kullanıcılar için en iyi yer)

Temanızı WordPress’te barındırmanın birincil yararı, temanızın yalnızca wordpress.org web sitesinde değil, aynı zamanda wp-admin panosunda da görülmesiyle görünürlük artışı elde etmenizdir.

Temanızı WordPress ile barındırmanın bir başka avantajı da yerleşik güncelleme sistemidir. Temanızı güncellerseniz, tüm kullanıcılara wp-admin panolarında bilgi verilir ve en son sürüme güncellemeleri için kolay bir yol verilir.

WordPress.org yalnızca ücretsiz temaları kabul eder, ancak bu para kazanamayacağınız anlamına gelmez. Ücretsiz bir tema, premium temanızı, eklentinizi veya hizmetinizi tanıtmak için harika bir kanal olabilir.

2) WordPress.com

WordPress.com hem ücretsiz hem de premium temaları barındırır. Ancak, birkaç yıldır yeni yazar başvurularına açık değiller.

3) TemaForest

ThemeForest , premium temalar için lider pazar yeridir. En çok satan temanın (Avada) 5.000.000 doları aşan satışları var.

Genel olarak Tema Ormanı’ndaki alıcılar, tam özellikli “çok amaçlı” temalar beklemektedir. En iyi temaların tümü, sayfa oluşturucu işlevine sahiptir ve geliştirici ekipleri tarafından desteklenir. Yeni yazarlar için girmesi çok zor bir pazar.

4) Yaratıcı Pazar ve Mojo Pazarı

Creative Market ve Mojo Marketplace , premium temalar pazarındaki küçük oyunculardır, bu yüzden onları bir araya topladık. Her ikisi de ThemeForest ile aynı hizmeti etkili bir şekilde sunar, ancak daha küçük ölçekte.

5) Github

Github , ücretsiz temanızı herkese açık hale getirmenin en kolay yoludur. Gözden geçirme süreci ve izlenecek yönerge yok. Ancak, wordpress.org’un görünürlüğünden faydalanamayacaksınız ve kullanıcıların en son sürümleri alması için kendi güncelleme mekanizmanızı oluşturmanız gerekecek.

Adım #10: Kodu Test Edin ve İyileştirin

1) Temanızı Test Etme

Tema Birim Testi

Tema Birimi Testi , çok çeşitli içerik türleri ve uç durumlar içeren standart bir WordPress içerik içe aktarma dosyasıdır. Geliştirme ortamınıza yüklemek kolaydır ve gözden kaçırmış olabileceğiniz birçok senaryoyu vurgulayacaktır.

WP_DEBUG

Bir tema geliştiricisi olarak, temanızı WP_DEBUG etkinken test etmek yapmanız gereken minimum şeydir. WP_DEBUG true olarak ayarlandığında temanız hiçbir hata veya uyarı döndürmemelidir.

Testi, temanızın desteklediği farklı PHP sürümleriyle tekrarlamak da önemlidir. Her büyük PHP sürümünde yeni değişiklikler, uyarılar ve amortisman vardır. Bir temanın PHP5.6’da hatasız olması, ancak PHP7’de hata göstermesi nadir görülen bir durum değildir.

WP_DEBUG’u etkinleştirmek için wp-config.php dosyasına aşağıdaki kodu ekleyin :

DEFINE('WP_DEBUG', doğru);

Canavar Widget’ı

Monster Widget , kenar çubuğunuza aynı anda 13 temel widget eklemenizi sağlayan yararlı bir eklentidir. Çekirdek widget’lar, temanızı test etmek için mükemmel hale getiren çeşitli HTML öğeleri kullanır.

Tema Sniffer

Theme Sniffer , Theme Review Team (TRT) tarafından oluşturulmuş bir eklentidir. Pek çok (hepsini değil) kaçma ve yerelleştirme hatalarını yakalar. Ayrıca temanızı WordPress kodlama standartlarına göre kontrol eder.

2) Temanızı WordPress.org’a Göndermek

Bu kılavuzun başında, sonuna geldiğinizde wordpress.org’a gönderebileceğiniz bir temanız olacağını söylemiştik. O sürece bakalım.

Yükleme İşlemi

Yükleme işlemi basittir. WordPress hesabınızı oluşturun veya oturum açın ve ardından bu sayfaya gidin – https://wordpress.org/themes/upload/

Temanızı sıkıştırıp hemen yükleyebilirsiniz, ancak önce bilmek isteyebileceğiniz bazı şeyler var.

Gereksinimler

Tema İnceleme Ekibinin (TRT) katı gereksinimleri vardır . Temanız, tüm gereksinimleri karşılayana kadar dizine kabul edilmeyecektir .

İnceleme Süreci

Bir tema yüklediğinizde, dizine kabul edilebilmesi için geçmesi gereken iki aşamalı bir inceleme süreci vardır.

İlk olarak, Yükle’ye basar basmaz otomatik bir kontrol gerçekleştirilir . Perde arkasında, otomatik denetleyici, Theme Sniffer eklentisine çok benzer bir şekilde çalışır. Herhangi bir hata bulursa temayı reddeder ve yükleme işlemi burada biter.

Temanız otomatik kontrolü geçerse, insan incelemesini bekleyen bir tema kuyruğuna katılır. İnsan incelemesi, TRT’den gönüllüler tarafından tamamlandı. Sıradaki temaların sayısı, gözden geçirenlerin sayısını çok aşıyor, bu da temanızın sıranın önüne ulaşmasının genellikle 2-3 ay sürebileceği anlamına geliyor.

Temanızın hatasız olması ve tüm gereksinimlere uygun olması zorunludur, insan inceleme aşamasına geldiğinde 3’ten fazla önemli hata varmış gibi reddedilebilir. Bir tema, insan incelemesi aşamasında reddedilirse, arkadaki kuyruğa yeniden katılması gerekir, bu da başka bir insan incelemesi için 2-3 ay daha beklemek anlamına gelir.

Yararlı Kaynak: En Yaygın WordPress Tema Geliştirme Hataları (ve Nasıl Düzeltilir)

TRT’nin her zaman yeni yorumcular aradığını belirtmekte fayda var , gönüllülük harika bir öğrenme deneyimi ve açık kaynak topluluğuna katkıda bulunmanın bir yolu olabilir.

3) Tema Listeniz

Tebrikler, temanız onaylandı! Artık buna benzeyen kendi girişiniz var .

Bu sayfada görmeyi bekleyebileceklerinize genel bir bakış:

    • Ekran Görüntüsü – Ekran görüntüsü, potansiyel kullanıcıların gördüğü ilk şeydir, bu yüzden onu olabildiğince çekici hale getirin. Ancak bunun yine de temanın doğru bir temsili olması gerektiğini ve bir photoshop oluşturması olmadığını unutmayın. En popüler temalardan ilham alın .
    • Açıklama – style.css’den alınan açıklama, temanızı ve temel özelliklerini tanımlamak için ideal bir yerdir. Ayrıca burada önerilen veya gerekli eklentileri listelemek de yardımcı olur. Açıklama, herhangi bir biçimlendirmeyi (kalın, italik, köprüler) ve hatta satır sonlarını desteklemiyor.
    • Etiketler – Bu, style.css içinde listelediğiniz etiketlerin bir temsilidir . Sadece buradaki etiketler kabul edilir.
    • Önizleme Düğmesi – Önizleme wordpress.org tarafından oluşturulur ve tema geliştiricileri olarak çıktı üzerinde hiçbir kontrolümüz yoktur. Ne yazık ki, önizleyici temel içeriği kullandığı ve yapılandırma olmadığı için, genellikle mükemmel bir önizlemeden daha azına neden olur.
    • Tema Ana Sayfası Bağlantısı – Önizleme düğmesinin URL’si , style.css dosyanızdaki ‘Tema URI’si’ alanından alınır. Bu URL’nin yalnızca temanızla ilgili bilgileri görüntüleyen bir sayfayı görüntülemek için kullanılması konusunda katı gereksinimler vardır.
    • Aktif Kurulumlar – Bu, temayı aktif olarak kullanan web sitelerinin sayısıdır. Sayı en yakın on, yüz veya bine yuvarlanır. Kesin bir sayı almak mümkün değil.
    • Günlük İndirme Sayısı – Bu, temanızın kaç kez indirildiğini gösterir. Bir ‘İndirme’, yeni bir indirme veya bir tema güncellemesi olabilir.
    • İncelemeler – Bir kullanıcının inceleme bırakması için bir wordpress.org hesabında oturum açması gerekir. Genel olarak konuşursak, kullanıcılarınızdan bunları göndermelerini açıkça istemediğiniz sürece incelemeleri almak zordur.
    • Destek – Yerleşik destek platformu, temanızla ilgili sorunları yönetmek ve çözmek için mükemmeldir. Bir destek dizisi oluşturmak için kullanıcının oturum açması gerekir.
    • Çeviriler – Çeviri platformu harika bir kaynaktır. Temanızı yerelleştirmek için bu kılavuzdaki tavsiyeleri takip ettiyseniz, kullanıcılarınız onu diğer dillere çevirebilecek ve potansiyel kullanıcı tabanınızı yalnızca İngilizce konuşan kullanıcıların ötesine genişletebilecektir.

4) Temanızı Güncelleme

Gelecekte temanızda değişiklik yaptığınızda ve WordPress’te barındırılan sürümü güncellemeniz gerektiğinde işlem basittir.

Önce ‘Sürüm:’ alanını ve benioku.txt dosyasındaki değişiklik günlüğünü güncelleyin . Ardından dosyayı sıkıştırın ve öncekiyle aynı yükleme sayfasını kullanarak yeniden yükleyin .

Sistem bunu bir güncelleme olarak algılayacak ve başka bir insan incelemesi gerektirmemesi için otomatik olarak onaylayacaktır.

Sıradaki içerik:

WordPress Tema Geliştirme