WordPress özel teması nasıl oluşturulur

Yayınlanan: 2021-08-06

WordPress, dünyadaki web sitelerinin büyük bir yüzdesini kaplar ve şu anda çevrimiçi olan tüm sitelerin %37'sini oluşturur . Bu başarının pek çok nedeni ve faktörü olsa da, ana nedenlerden biri tüm kullanıcılar için mevcut olan özelliklerin popülerliğidir. Eklentiler, temalar, gönderiler, sayfalar, kategoriler, taksonomiler, kullanıcı rolleri ve medya yönetimi bunlardan sadece birkaçı. WordPress'ten en iyi şekilde yararlanmak için, kullanıcıların tüm bu özellikleri nasıl kullanacaklarını öğrenmeleri önerilir. Bu blogda, WordPress Temalarına odaklanıp tartışacağız ve size özel bir WordPress temasının nasıl oluşturulacağı konusunda gerekli temel bilgilerde yol göstereceğiz.

Özel tema nedir?

Sitenizin ön ucundaki her şey 'tema' adı verilen bir şeyden çalıştırılıyor ve kontrol ediliyor. Bir web sitesinin teması, web sitesinin özel tasarımından ve işlevselliğinden sorumludur. Tema örnekleri için WordPress tema deposuna veya Themeforest'a göz atabilirsiniz ; burada keşfetmeniz ve indirmeniz için listelenmiş binlerce tema bulacaksınız.

Yerleşik WordPress temaları harika olsa da, yeteneğiniz ve ihtiyacınız varsa, bir müşteri için, kendiniz için kendi özel temanızı oluşturmak veya satmak niyetiyle pazarlara göndermek isteyebilirsiniz. Ticari bir tema oluştururken, kodlama standartları, dosya ve klasörlerin yapısı vb. için pazaryeri yönergelerini izlemeniz gerekir. Bu yönergelerle ilgili daha fazla ayrıntıyı pazaryerlerinin web sitelerinde bulabilirsiniz .

Bu blogda, süreçle ilgili tüm temel bilgileri ve adımları ele alarak kendi WordPress temanızı nasıl oluşturacağınıza dair temel bir genel bakış göstermek için bir öğretici üzerinden geçeceğiz.

Bir WordPress özel teması oluşturun

WordPress temaları şablon dosyaları, komut dosyaları, stiller, resimler vb. ile oluşturulmuştur. Devam etmek için, özel bir tema oluşturmak için gerekli olan PHP, HTML ve CSS hakkında çalışma bilgisine sahip olmalısınız. JavaScript'i anlamak da ek bir avantaj olabilir.

Başlamak için önce temaya 'Updraft' adını vereceğiz. wp-content/themes içinde 'Updraft' adında bir klasör oluşturun . Bu 'Updraft' klasörü içinde tema ile ilgili kodunuzu yazacak, dosyaları, resimleri, yazı tiplerini vb. depolayacaksınız.

Özel WordPress temasının ana dosyaları şunlardır:

  • stil.css
  • index.php
  • işlevler.php

style.css ana stil sayfası dosyası olacak ve tüm CSS'lerinizi bu dosyaya ekleyebilirsiniz. Tema hakkında bir bilgi başlığı eklemeniz gerektiğini unutmayın. Başlık, aşağıdaki biçime benzer görünmeli ve style.css dosyasının en üstünde olmalıdır .

 [kod]
/*
Tema Adı: Yükseltme
Tema URI'si: https://updraftplus.com
Yazar: UpdraftPlus
Yazar URI'si: https://updraftplus.com
Açıklama: Web sitesi için oluşturulmuş özel tema.
Sürüm: 1.0
Lisans: GNU Genel Kamu Lisansı v2 veya üstü
Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html
Metin Alanı: yukarı hava akımı
*/
[/kod]

Ardından, temanızın listelendiğini göreceğiniz Görünüm >>Temalar'a gidin. Etkinleştir. Sitenizin ön yüzünü kontrol ettiğinizde, henüz temaya herhangi bir şey eklemediğimiz için boş bir ekran görünecektir.

Resimlerinizi, komut dosyalarınızı ve stillerinizi tema dizininize kaydetmeyi unutmayın. Tema dizini, 'wp-content/themes/Updraft' klasörüne atıfta bulunur. İyi bir klasör yapısı kullanarak, resimler, komut dosyaları ve stiller için özel klasörler oluşturarak bunları düzenli tuttuğunuzdan emin olun; Dosyaları ilgili dizine kopyalayın.

Fonksiyonlar Dosyası

Functions.php , farklı amaçlar için kod ekleyebileceğiniz dosyadır. Bu dosya, WordPress başlatma sırasında otomatik olarak yüklenir ve içinde yazılan kod otomatik olarak yürütülür.

Functions.php dosyasındaki aşağıdaki işlemler genellikle bu sırayla gerçekleştirilir:

  • Tema stil sayfalarını ve komut dosyalarını kuyruğa alın (web sitesine JS ve CSS dosyalarını ekleyin).
  • Kenar Çubukları, Gezinme Menüleri, Küçük Resimleri Gönder, vb. Etkinleştir.
  • Uygulama boyunca kullanılan işlevleri tanımlayın.
  • Vb.

Kullanıcı, stillerini ve betiklerini function.php dosyasından aşağıdaki gibi ekleyebilir . Daha fazla belge için lütfen aşağıdaki bağlantıya bakın .

 [kod]
işlev include_js_css() {
wp_register_style("bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", dizi(), false, "tümü" );
wp_enqueue_style("önyükleme");
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', dizi(), yanlış, doğru);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/kod]

get_stylesheet_directory_uri () işlevi, etkin tema dizininin göreli bir yolunu verir. Kodun geri kalanı varlıkların yolu olarak görülebilir.

Benzer şekilde, Gezinme Menüleri eklemek için Küçük Resimler Gönderin:

 [kod]
function updraft_theme_setup() {
add_theme_support('küçük resim sonrası');
register_nav_menus(
dizi(
'birincil' => __( 'Birincil Menü' ),
'footer1=' => __( 'Altbilgi Menüsü' ),
'mağaza' => __( 'Mağaza Sayfası Menüsü' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup');
[/kod]

Ardından, WordPress panosuna gidin ve bir gönderi veya sayfa ekleyin. 'Öne Çıkan Resim' bölümünü görmelisiniz. Ayrıca, Görünüm >> Menüler altında, Konumları Yönet altında Birincil Menü ve Alt Bilgi Menüsü'nü bulacaksınız .

Bunlar, 'İşlev' dosyasını kullanırken kapsayabileceğiniz temel özelliklerden sadece birkaçıdır. Dilerseniz bu dosyaya ekleyebileceğiniz daha pek çok şey var.

Şablon dosyaları

Temanızı oluştururken, web sitenizin farklı bölümlerinin düzenini ve tasarımını etkilemek için şablon dosyaları kullanılabilir. Örneğin, bir başlık oluşturmak için header.php şablonunu veya sitenize yorum eklemek için comment.php şablonunu kullanırsınız. Şablon dosyaları .php uzantısına sahiptir. PHP dosyaları oldukları için tüm sayfalar HTML olarak çıkar.

Geliştiriciler, şablonları kullanarak kodu birden çok dosya arasında dağıtabilir. Aşağıda, söz konusu dosyalardan bazıları listelenmiştir.

  • index.php : Ana şablon. Bu dosya, gönderi listesinden sorumlu olmalıdır. Ayarlar >> Okumalar'dan Gönderiler sayfasını ayarladığınızda , bu şablon yürütülür.
  • page.php : Bu şablon, sayfalarınızı oluşturmaktan sorumludur. Bu ayar, tek tek sayfalara özel bir sayfa şablonu atanarak geçersiz kılınabilir.
  • single.php : Tek bir gönderi sorgulandığında kullanılır.
  • header.php : Başlık parçanızı bu şablona ekleyin.
  • footer.php : Bu şablona altbilgi bölümünü ekleyin.
  • sidebar.php : Bu şablona widget ekleyin.

Burada bulunan tüm şablon dosyalarının bir listesini alın .

Özel sayfa şablonları

Varsayılan olarak, tüm sayfalarınız page.php şablonu aracılığıyla oluşturulur. Ancak pratikte bazen farklı sayfalarda ayrı akışlar görüntülemeniz gerekir. Bu senaryoda, özel sayfa şablonlarının gücünü kullanmanız önerilir.

Örneğin bir 'Kariyer' sayfanız varsa ve kodunuzu bu sayfaya eklemek istiyorsanız; Bunu başarmak için tema dizinine bir kariyer.php dosyası oluşturmanız ve aşağıdaki yorumu dosyanın en üstüne yerleştirmeniz gerekir.

 [kod]
<?php
/*
Şablon Adı: Kariyer
*/
[/kod]

Ardından, sayfa düzenleme bölümüne gidin ve Sayfa Nitelikleri kutusunun altından bu 'Kariyer' şablonunu atayın .

Şimdi Kariyer sayfasını ziyaret ettiğinizde – kariyer.php kodu çalıştırılacaktır.

Başlık dosyası

Web sitenizin tüm sayfalarında ortak bir başlığı olacaktır. Bu ortak başlığı header.php dosyasına yerleştirebilirsiniz . Başlık kodu şöyle bir şey olacaktır:

 [kod]
<!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.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- menünüz -->
[/kod]

Yukarıdaki kodda, WordPress'te bulunan bazı işlevleri kullandığımızı fark edeceksiniz.

  • wp_head() : Bu yöntem, önemli öğeleri belgenize ekler - örneğin, komut dosyaları, stiller ve meta etiketler.
  • body_class() : Bu, body öğesine farklı sınıflar ekler.
  • wp_body_open() : Gövde etiketi açıldıktan hemen sonra kod eklemek için kullanılır. Buna bir örnek, Google Analytics komut dosyası olabilir.

Menüler, wp_nav_menu() işlevi aracılığıyla dinamik olarak eklenebilir . İlk önce Görünüm >> Menüler altında bir menü oluşturduğunuzu ve ona 'birincil' konum atadığınızı varsayalım. Aşağıdaki kod, menü öğelerini dinamik olarak oluşturur.

 [kod]
<?php
wp_nav_menu(
dizi(
'theme_location' => 'birincil',
'container_class' => 'menüler',
)
);
?>
[/kod]

Başlık dosyanız ayarlandıktan sonra, bu dosyayı diğer şablonlarınıza dahil etmek için get_header() işlevini kullanın.

Altbilgi dosyası

Başlık dosyasına benzer şekilde, altbilgi için ortak kodunuz footer.php şablonunun içine girecektir.

 [kod]
<!-- altbilgi öğeleri -->
<?php wp_footer(); ?>
</body>
</html>
[/kod]

Burada, bu konuma öğeler, özellikle komut dosyaları ekleyen wp_footer() işlevini kullanın. get_footer() kullanmak , bu dosyanın içeriğini başka yerlerde içerecektir.

Kenar çubuğu dosyası

Kenar çubuğu, sitenizdeki ana içerikte gösterilmeyen bilgileri görüntülemek için kullanılan dikey bir sütundur. Popüler makaleler, reklam afişleri, haber bülteni gönderme formu vb. içerebilir. Kenar çubukları, bir yöneticinin özelleştirebileceği widget'lar içerir. sidebar.php şablonu site widget'larınızı içerecektir .

Bu örnekte, function.php dosyasına aşağıdaki kodu ekleyerek temel bir kenar çubuğu oluşturacağız .

 [kod]
function updraft_widgets_init() {
register_sidebar(
dizi(
'name' => esc_html__( Ana Sayfa Kenar Çubuğu' ),
'id' => 'kenar çubuğu-1',
'description' => esc_html__( 'Kenar çubuğunuzda görünmesi için buraya widget ekleyin.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/kod]

Ardından, Görünüm >> Widget'lara gidin . Burada yukarıdaki kenar çubuğunu bulacaksınız. Bu örnekte, bu kenar çubuğuna bazı widget'lar ekleyeceğiz. Bu kenar çubuğunu ön uca eklemek için aşağıdaki kodu sidebar.php içine ekleyin.

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

Son olarak, kenar çubuğunu diğer sayfalara gerektiği zaman ve istediğiniz yere kolayca dahil edebilmeniz için yöntemi ' get_sidebar()' olarak adlandırmayı unutmayın.

Sayfaları ve gönderileri oluşturma

Daha önce de belirtildiği gibi, tüm WordPress sayfaları , özel sayfa şablonuna sahip sayfalar hariç , page.php dosyasına yazdığınız kod kullanılarak oluşturulur ve yürütülür . Aşağıdaki kod, sayfa başlığını, açıklamasını ve öne çıkan görseli içeren bir sayfayı gösterecek bir örnektir.

 [kod]
<?php
get_header();
?>
<div class="içerik alanı">
<main class="site-ana">
<?php
while ( have_posts() ):
posta();
?>
<?php
if ( has_post_thumbnail() ):
the_post_thumbnail();
endif;
?>
<header class="giriş-başlığı">
<?php the_title(); ?>
</header>
<div class="giriş içeriği">
<?php the_content(); ?>
</div>
<?php
son zaman;
?>
</main>
</div>
<?php
get_footer();
[/kod]

Benzer kod , gönderi bilgilerini görüntülemek için single.php dosyasının içine girecektir. Gönderi listesini düzgün bir şekilde oluşturmak için ( index.php ), yukarıdaki yöntemlere ek olarak - aşağıdakileri de kullanmak isteyebilirsiniz:

  • the_catgeory() : Bir gönderi için kategori listesini görüntüler.
  • the_permalink() : Geçerli gönderi için kalıcı bağlantıyı görüntüler.
  • the_excerpt() : Gönderi alıntısını görüntüleyin.

WordPress özel temaları için I18n

Özel bir tema oluştururken, uluslararasılaşmayı destekleyecek şekilde geliştirilmesi gerektiğini hatırlamaya çalışın. Bunu yaparak, temanızın diğer dillere kolayca çevrilmesini mümkün kılar.

I18n desteği eklemek için, kaynak dosyaları ayrıştırabileceğiniz ve çevrilebilir dizeleri ayıklayabileceğiniz bir metin alanı kullanmayı unutmayın. Bu örnekte, 'Updraft' metin alanını kullanıyoruz, ancak herhangi bir benzersiz tanımlayıcı seçebilirsiniz. Metin alanını aşağıdaki gibi tanımlayabiliriz.

 [kod]
function i18n_setup() {
load_theme_textdomain('updraft', get_stylesheet_directory() .'/languages');
}
add_action('after_setup_theme', 'i18n_setup');
[/kod]

Artık tema dosyalarınızda statik dizeler kullandığınızda, bunları __() veya _e() işlevlerinin içine sarın.

 [kod]
<h2><?php _e('Ad', 'updraft); ?></h2>
<?php echo __('Kullanıcı E-postası', 'updraft'); ?>
[/kod]

POEDIT gibi çevrilmiş dil dosyaları oluşturmaya yardımcı olan özel araçlar mevcuttur. Daha fazla bilgi için lütfen bu bloga bakın.

Bu blog, WordPress özel temaları oluşturmanın temellerini ele almıştır. Ancak, çok zaman ve sabır gerektiren geniş bir konudur. Aşağıda, WordPress temalarınızı oluşturmaya başlamanıza yardımcı olacak, aşina olmanız gereken bazı yararlı kaynaklar bulunmaktadır.

  • WordPress Döngüsü
  • Şablon Etiketleri
  • Kategori Sayfaları
  • İşlev_Referans
  • Koşullu Etiket
  • WordPress Kodlama Standartları

WordPress siteniz için yeni bir tema oluşturduğunuzda, her değişiklikten sonra onu yedeklemeniz gerekeceğini veya tüm çalışmalarınızı kaybetme riskini alacağınızı unutmayın. UpdraftPlus'ı kullanın – Dünyanın önde gelen ve en güvenilir WordPress yedekleme, geri yükleme ve klonlama eklentisi.

Bir WordPress özel teması nasıl oluşturulur yazısı ilk olarak UpdraftPlus'ta göründü. UpdraftPlus – WordPress için yedekleme, geri yükleme ve taşıma eklentisi.