WordPress özel teması nasıl oluşturulur

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 tarafından kullanılabilen ö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 odaklanacak ve tartışacağız ve bir WordPress özel temasının nasıl oluşturulacağı konusunda gerekli temel bilgilerde size 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'nin en üstünde olmalıdır .

 /* Theme Name: Updraft Theme URI: https://updraftplus.com Author: UpdraftPlus Author URI: https://updraftplus.com Description: The custom theme built for the website. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: updraft */

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 komut dosyalarını functions.php dosyasından aşağıdaki gibi ekleyebilir . Daha fazla belge için lütfen aşağıdaki bağlantıya bakın .

 function include_js_css() { wp_register_style( “bootstrap”, get_stylesheet_directory_uri() . “/styles/bootstrap.min.css”, array(), false, “all” ); wp_enqueue_style( “bootstrap” ); wp_register_script('bootstrap', get_stylesheet_directory_uri() . '/scripts/bootstrap.min.js', array(), false, true); wp_enqueue_script('bootstrap'); } add_action('wp_enqueue_scripts', 'include_js_css');

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:

 function updraft_theme_setup() { add_theme_support( 'post-thumbnails' ); register_nav_menus( array( 'primary' => __( 'Primary Menu' ), 'footer1=' => __( 'Footer Menu' ), 'shop' => __( 'Shop Page Menu' ), ) ); } add_action( 'after_setup_theme', 'updraft_theme_setup' );

Ardından, WordPress panosuna gidin ve bir gönderi veya sayfa ekleyin. 'Öne Çıkan Resim' bölümünü görmelisiniz. Ek olarak, Görünüm >> Menüler altında, Konumları Yönet altında Birincil Menü ve Alt Bilgi Menüsü 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 comments.php şablonunu kullanırsınız. Şablon dosyaları bir .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.

 <?php /* Template Name: Career */

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:

 <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <!-- your menu -->

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

• wp_head() : Bu yöntem, örneğin komut dosyaları, stiller ve meta etiketler gibi önemli öğeleri belgenize ekler.
• 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.

 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menus', ) ); ?>

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, alt bilgi için ortak kodunuz footer.php şablonunun içine girecektir.

 <!-- footer elements --> <?php wp_footer(); ?> </body> </html>

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 pencere öğeleri 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 .

 function updraft_widgets_init() { register_sidebar( array( 'name' => esc_html__( Home Sidebar' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here to appear in your sidebar.' ), 'before_widget' => '<section class="widget">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'updraft_widgets_init' );

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'ye ekleyin.

 <div class="sidebar"> <?php if ( is_active_sidebar( 'sidebar-1' ) ) { dynamic_sidebar( 'sidebar-1' ); } ?> </div>

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.

 <?php get_header(); ?> <div class="content-area"> <main class="site-main"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( has_post_thumbnail() ) : the_post_thumbnail(); endif; ?> <header class="entry-header"> <?php the_title(); ?> </header> <div class="entry-content"> <?php the_content(); ?> </div> <?php endwhile; ?> </main> </div> <?php get_footer();

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.

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

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

 <h2><?php _e('First Name', 'updraft); ?></h2> <?php echo __('User Email', 'updraft'); ?>

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.