Wordpress Tasarım

Wordpress Tasarım

Wordpress tema ile google aramaların da 1 doğru yükselen işgücü
garantisi.

Temel bir WordPress teması nasıl oluşturulur.?

Temanızı oluşturmaya başlamak için önce WordPress klasörünüzdeki wp-content / themes dizininde bir alt klasör oluşturun. Bu öğreticinin amacı için, "tutorial_theme" klasörünü arayacağız. Klasörün adı, oluşturmak istediğiniz temanın adıyla aynı olmalıdır. Bunu yapmak için sevdiğiniz birini kullanabilirsiniz FTP istemcisi veya Dosya Yöneticisi sizin cPanel aracı.

Temayı oluşturmaya başlamadan önce, web sitenizin düzeninin nasıl göründüğüne karar vermelisiniz. Bu yazıda aşağıdaki gibi bir üstbilgi, kenar çubuğu, içerik alanı ve altbilgiden oluşan bir WordPress teması oluşturacağız:
 

Bunu yapmak için, tutorial_theme dizinine aşağıdaki dosyaları yaratmamız gerekecek:

Header.php - Bu dosya, temanın üstbilgi bölümünün kodunu içerir;
Index.php - Temanın ana dosyası. Ana Alanın kodunu içerecek ve diğer dosyaların nereye ekleneceğini belirtecektir;
Sidebar.php - Bu dosya kenar çubuğuyla ilgili bilgileri içerir;
Footer.php - Bu dosya altbilginizi işleyecek;
Style.css - Bu dosya yeni temanızın stilini işleyecek;
(Örneğin not defteri gibi) basit bir metin editörü ile yerel bu dosyaları oluşturmak ve FTP üzerinden yükleyin veya kullanabilirsiniz ya Dosya Yöneticisi sizin aracı cPanel için doğrudan dosyaları oluşturmak için bir hosting hesabı.

Şimdi her bir dosyayı ve içeriğini ne hakkında daha yakından inceleyelim:

Header.php dosyası

Bu dosyada aşağıdaki kodu eklemeniz gerekir:

<html> 
<head> 
<title> Öğretici tema </ title> 
<link rel = "stylesheet" href = "<? php bloginfo ( 'stylesheet_url');?>"> 
</ head> 
<body> 
<div id = "kapsayıcı"> 
<div id = "header"> 
<h1> BAŞLIĞI </ h1> 
</ div>
Temel olarak, bu, bir php kodu ve standart bir WordPress işlevi içeren tek bir satırdaki basit HTML kodudur. Bu dosyada web sitenizin başlığı, meta açıklaması ve sayfanızın anahtar kelimeleri gibi meta etiketlerinizi belirtebilirsiniz.

Başlıktan hemen sonra eklediğimiz satır

<Link rel = "stylesheet" href = "<? Php bloginfo ('stylesheet_url');?>">
WordPress'e style.css dosyasını yüklemesini söyler. Web sitenizin stilini idare edecektir.

The

<? Php bloginfo ('stylesheet_url'); ?>
Satırın bir kısmı aslında stil sayfası dosyasını yükleyen bir WordPress işlevidir.

Ardından, web sitesinin ana kapsayıcısı olacak sınıf sarmalayıcıya "div" başlığını ekledik. Bunun için sınıf ayarladık, böylece style.css dosyasıyla değiştirebiliriz.

Bundan sonra, daha sonra stil sayfası dosyasında belirtilecek "başlık" sınıfıyla "div" içine sarılmış basit bir etiket HEADER ekledik.

Index.php dosyası

<? Php get_header (); ?> 
<Div id = "main"> 
<div id = "content"> 
<h1> Main Bölgesi </ h1> 
<php if (have_posts ()): while (have_posts ()):? The_post (); ?> 
? <H1> <? Php the_title (); ?> </ h1> 
<h4> Yayınlanan <? php the_time ( 'F iS, Y')> </ h4>? 
<p> <? php the_content (__ ( '(daha fazla ...)')); ?> </ p> 
<hr> <? php endwhile; ? Başka:> 
? <p> <? php _e ( '. Üzgünüz, yok kriterinize uygun'); ?> </ P> <? Php endif; ?> 
</ Div> 
<? Php get_sidebar (); ?> 
</ Div> 
<div id = "sınırlayıcı"> 
</ div> 
<? Php get_footer (); ?>
Bu dosyadaki kod,

<? Php get_header (); ?>
Header.php dosyasını ve içindeki kodu ana sayfaya ekleyecektir. Bunu yapmak için dahili bir WordPress işlevi kullanıyor. Bunu daha sonra bu öğreticide açıklayacağız. Ardından, temanızın hangi bölümünün bu alanda görüntülendiğini belirtmek için bir Ana Alan metni yerleştirdik.

Önümüzdeki birkaç satır, bir PHP kodu ve standart WordPress işlevlerinden oluşur. Bu kod, blogunuzda WordPress idari alanı aracılığıyla oluşturulan yayınlarınız olup olmadığını kontrol eder ve bunları görüntüler.

Sonra, sidebar.php dosyasını bu satıra dahil ediyoruz.

<? Php get_sidebar (); ?>
Bu dosyada, gönderilen kategorilerinizi, arşivlerinizi vb. Görüntüleyebilirsiniz.

Bu satırdan sonra, Ana Alan ve Kenar Çubuğu'nu altbilgiden ayıran boş bir "div" ekliyoruz.

Son olarak, son bir satır ekliyoruz

<? Php get_footer (); ?>
Hangi footer.php dosyasını sayfanıza ekleyecektir.

Sidebar.php dosyası

Sidebar.php dosyasında aşağıdaki kodu ekleyeceğiz:

<div id = "sidebar"> 
? ( 'Kategoriler') <h2> <? php _E; ?> </ h2> 
<ul> 
<? php wp_list_cats ( 'sıralanacak_sütun = isim & optioncount = 1 & hiyerarşik = 0'); ?> 
</ Ul> 
? <H2> <? Php _e ( 'Archives'); ?> </ h2> 
<ul> 
<? php wp_get_archives ( 'type = aylık'); ?> 
</ Ul> 
</ div>
Bu dosyada yayınların Kategoriler ve Arşivlerini görüntülemek için dahili WordPress işlevlerini kullanıyoruz. WordPress işlevi bunları liste öğeleri olarak döndürür, bu nedenle fiili işlevleri sınıflandırılmamış listelerde sarmış bulunmaktayız (<ul> etiketleri).

Footer.php dosyası


Bu satırları footer.php dosyasına eklemeniz gerekir:

<div id = "footer"> 
<h1> FOOTER </ h1> 
</ div> 
</ div> 
</ body> 
</ html>

Bu kod ile basit bir FOOTER lable ekledik. Bu kod yerine bağlantıları, ek metinleri, temanızın telif hakkı bilgilerini ve ek nesneleri ekleyebilirsiniz.

Style.css dosyası

Style.css dosyasına aşağıdaki satırları ekleyin:

Vücut {text-align: center; } 
#wrapper {Display: block; Sınır: 1px # a2a2a2 katı; Genişlik:% 90; Marj: 0 piksellik otomatik; } 
#header {Border: 2px # katı a2a2a2; } 
#content {Width: 75%; Sınır: 2px # a2a2a2 katı; Şamandıralı: sol; } 
#Sidebar {Width: 23%; Sınır: 2px # a2a2a2 katı; Şamandıra: sağa; } 
#delimiter {Clear: both; } 
#footer {Border: 2px # katı a2a2a2; } 
.title {Font-size: 11pt; Font-family: verdana; Font-weight: kalın; }
Bu basit css dosyası, temanızın temel görünümlerini ayarlar. Bu satırlar, sayfanızın arka planını belirler ve kolaylık olması için sitenizin ana bölümlerini sınırlarla kuşatır.

ND Yazılım Sunar...