Tema Yapımı sidebar.php Takvim

Bu bölümde WordPress Tema Yapımına sidebar.php ile devam ediyoruz. Ziyaretçilerin site içinde gezinmelerine olanak sağlayan menüler, takvim, arşiv dosyaları, site içi arama formu, kayan duyuru yazıları, etiketler, son yazılan yazılar ve sayfalar, adsense reklamlar vb. gibi birçok yönlendirme ve tanıtma işlevi genellikle sidebar bölümünden yürütülür.

Yukarıda saydığım eklenti ya da özelliklerin hepsini tek bir sayfa altında toplamak sıkıcı olacak düşüncesiyle, WordPress Tema Yapımı sidebar.php konusunu bölümlere ayırmaya karar verdim. Bu bölümde sidebar.php dosyamızı oluşturup, index.php’ye tanıtacağız ve en son olarak sidebar üzerine takvim uygulamasını çağıracağız.

Kontroller ve Hatırlatmalar

* XAMPP çalıştırın

* Oluşturacağımız tüm dosyaları aşağıdaki dizine kaydedin
C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema

* Yaptığımız değişiklikleri kaydettikten sonra localhost
üzerinde sonucu görmek için adres barına aşağıdaki adresi yazın.
http://localhost/wordpress/

*Yaptığımız her değişiklikten sonra kayıt edelim ve browserda refresh ederek izleyelim.

*İşlerimiz bittiğinde XAMPP kapatalım

TemaYapımı sidebar.php dosyası

text editor programında (notepad++, webocton, Dreamweaver) yeni bir php sayfası oluşturup, sidebar.php olarak “C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema” dizininin altına kaydedelim. index.php dosyamızı açalım ve sidebar div kısmını kesip, sidabar.php sayfamıza yapıştırıp kaydedelim. Not:her iki dosyayıda kaydedelim. (index.php ve sidebar.php)

Şu aşamada browserdan baktığımızda, “sidebar bölümü” yazısının kaybolduğunu görmemiz gayet normal. Çünkü; index.php henüz sidebar.php’den habersiz. Tanıştırmak tabiki bizim görevimiz. index.php dosyamıza geri dönüp “<?php get_sidebar();?>” komutunu, az önce sidebar div taglarını kestiğimiz yere ekliyoruz. Kayıt ettikten sonra browserdan baktığımızda sayfamızın normale döndüğünü göreceğiz. Bundan sonra sidebar ile ilgili tüm komutlarımızı sidebar.php üzerine yazacağız.

sidebar.php içindeki “sidebar bölümü” yazısını siliyoruz. Bunun yerine Takvim başlığını ve takvimi göstermek için iki ayrı div ekliyoruz. İlk eklediğimiz div’in id bölümüne “calendar_baslik“, ikincisine ise “calendar” isimlerini veriyoruz. calendar_baslik div taglarının arasına “<?php echo “Takvim”;?>” yazıyoruz. “calendar” div taglarının arasına ise takvimi çağıracak olan “<?php get_calendar(); ?>” komutunu yazıyoruz. Kaydettikten sonra, browser’dan izliyoruz. Artık takvim başlığımız ve takvimimiz sidebar üzerinde gözükmeye başladı. Dikkat ederseniz son oluşturduğumuz divlerle ilgili yükseklik ve genişlik özelliği belirtmedik. İçlerine açtıkları uygulamalara göre boyutlarını ayarladılar ve ana div olan sidebar divinin dışına taşmadılar. sidebar.php dosyasının son halini üstteki resimden görebilirsiniz. Aşağıda da kodlarını veriyorum.

<!–– #calendar_baslik ––>

<!–– #calendar ––>

</div>

<!–– #sidebar ––>

Şimdi style.css dosyası ile sidebar, calendar_baslik ve calendar divlerimizin görünümlerini değiştirip, biraz daha güzel bir görüntü elde edelim. style.css dosyamızı açalım ve aşağıdaki kodları dosyamıza ekleyelim. Aradığımız bölümleri daha sonra rahat bulabilmek için kafamızda bir guruplama yapabiliriz. Mesela; sidebar div özelliklerinin hemen altına bu yeni iki div özelliğini vermek çok mantıklı olur. Ben yazı dizisinin daha rahat takip edilmesi için, son konulara ait komutları dosya sonuna eklemeye çalışıyorum. Sayfa dizaynına fazla girmeden sadece neyi nerden değiştirebileceğinizi gösteriyorum. Tema yapımımız bittiğinde görünüm olarak çok profesyonel birşey beklemeyin, ancak tıkır tıkır işleyen bir wordpress teması yapmış olacağız. Neyse; şimdi style.css dosyasına aşağıdaki kodları ekleyelim ve bu bölümü bitirelim.

#sidebar {
 background:#829587;//Sidebar için sadece background renk eklenecek.
}
#calendar_baslik{
	font-size:16px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    color:#0CF;
}
#calendar{
	margin-left:25px;
}

#sidebar {

background:#829587;//Sidebar için sadece background renk eklenecek.

}

#calendar_baslik{

font-size:16px;

font-style:italic;

font-weight:bold;

text-align:center;

font-family:Tahoma, Geneva, sans-serif;

color:#0CF;

}

#calendar{

margin-left:25px;

}

Bu kodlarıda eklediğimize göre artık WordPress Temamızın son görüntüsünü ve sayfaların kodlarını aşağıda görebilirsiniz.

index.php sayfa kodu

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
&lt;link rel="stylesheet" href="&lt;?php bloginfo('stylesheet_url'); ?&gt;" 
type="text/css" media="screen" /&gt;
&lt;title&gt;WP_ilk_tema&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper"&gt;
            &lt;?php get_header();?&gt;

            &lt;div id="container"&gt;
            Content içerik Bölümü
            &lt;/div&gt;&lt;!-- #container --&gt;

            &lt;?php get_sidebar();?&gt;

             &lt;div id="clearfloat"&gt;
             &lt;!-- Bu div bölümü ekranda gözükmeyecek.
            &lt;/div&gt;&lt;!-- #clearfloat --&gt;
            &lt;div id="footer"&gt;
             footer bölümü
            &lt;/div&gt;&lt;!-- #footer --&gt;
&lt;/div&gt;&lt;!-- #wrapper --&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

type="text/css" media="screen" />

</head>

<body>

<?php get_header();?>

Content içerik Bölümü

</div>

<?php get_sidebar();?>

<!-- Bu div bölümü ekranda gözükmeyecek.

</div>

footer bölümü

</div>

</div>

</body>

</html>

sidebar.php sayfa kodu

&lt;div id="sidebar"&gt;
 &lt;div id="calendar_baslik"&gt;
 &lt;?php echo "Takvim";?&gt;
 &lt;/div&gt;&lt;!-- #calendar_baslik --&gt;
 &lt;div id="calendar"&gt;
 &lt;?php get_calendar(); ?&gt;
 &lt;/div&gt;&lt;!-- #calendar --&gt;
&lt;/div&gt;&lt;!-- #sidebar --&gt;

<?php echo "Takvim";?>

</div>

<?php get_calendar(); ?>

</div>

</div>

style.css sayfa kodu

@charset "utf-8";
/*
Theme Name: WP_ilk_tema
Theme URI: https://wpkurs.com
Description: Bu kısım temamızın özelliklerini anlatacağımız bölüm olacak.
Tema yapısı (kaç menü olduğu, kaç tane widget kullanılabileceği vb. gibi
konularda bilgi verecek. Temamız WordPress temalar bölümünde izlenirken,
kullanıcıya kısaca temamızı tanıtmış olacağız.
Author: WP-Videolu-Kurs(Kendi isminizi yazabilirsiniz).
Version: 1.1
Tags: Etiketlerle ilgili bilgilerin verildiği bölüm.
 */
#wrapper {
    width: 960px;
    margin: auto;
    border: thin;
    border-style:solid;
    border-color:#F00;

}
#header {
    height:150px;
    border: thin;
    border-style:solid;
    border-color:#00F;
    background-image:url(images/header.png);
    background-repeat:no-repeat;

}
#container {
    float: left;
    border: thin;
    border-style: solid;
    border-color: #0F0;
    width:700px;

}
#sidebar {
    float: right;
    border: thin;
    border-style: solid;
    border-color: #FF0;
    width:250px;
	background:#829587;

}
#clearfloat {
    clear:both;
}
#footer{
    width:960px;
    border: thin;
    border-style: solid;
    border-color:#000;
}
#blogname{
    font-size:24px;
    font-style:italic;
    font-family:Tahoma, Geneva, sans-serif;
}
#slogan{
    font-size:16px;
    font-style:italic;
    font-family:Tahoma, Geneva, sans-serif;
    color:#0CF;
}

a:link, a:visited{
text-decoration:none;
color:#0CF;
}
#calendar_baslik{
	font-size:16px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    color:#0CF;
}
#calendar{
	margin-left:25px;
}

@charset "utf-8";

Theme Name: WP_ilk_tema

Theme URI: https://wpkurs.com

Description: Bu kısım temamızın özelliklerini anlatacağımız bölüm olacak.

Tema yapısı (kaç menü olduğu, kaç tane widget kullanılabileceği vb. gibi

konularda bilgi verecek. Temamız WordPress temalar bölümünde izlenirken,

kullanıcıya kısaca temamızı tanıtmış olacağız.

Author: WP-Videolu-Kurs(Kendi isminizi yazabilirsiniz).

Version: 1.1

Tags: Etiketlerle ilgili bilgilerin verildiği bölüm.

#wrapper {

width: 960px;

margin: auto;

border: thin;

border-style:solid;

border-color:#F00;

}

#header {

height:150px;

border: thin;

border-style:solid;

border-color:#00F;

background-image:url(images/header.png);

background-repeat:no-repeat;

}

#container {

float: left;

border: thin;

border-style: solid;

border-color: #0F0;

width:700px;

}

#sidebar {

float: right;

border: thin;

border-style: solid;

border-color: #FF0;

width:250px;

background:#829587;

}

#clearfloat {

clear:both;

}

#footer{

width:960px;

border: thin;

border-style: solid;

border-color:#000;

}

#blogname{

font-size:24px;

font-style:italic;

font-family:Tahoma, Geneva, sans-serif;

}

#slogan{

font-size:16px;

font-style:italic;

font-family:Tahoma, Geneva, sans-serif;

color:#0CF;

}

a:link, a:visited{

text-decoration:none;

color:#0CF;

}

#calendar_baslik{

font-size:16px;

font-style:italic;

font-weight:bold;

text-align:center;

font-family:Tahoma, Geneva, sans-serif;

color:#0CF;

}

#calendar{

margin-left:25px;

}

WordPress Tema Yapımı Alınan Dersler:

sidebar.php oluşturma
index.php içindeki bölümün sidevar.php’ye kopyalanması
sidebar için iki ayrı div oluşturulması
“<?php get_sidebar();?>” komutunun kullanımı
“<?php echo “Takvim”;?>” komutunun kullanımı
“<?php get_calendar(); ?>” komutunun kullanımı
style.css dosyası ile oluşturulan divlerin özelliklerinin ayarlanması

Benzer Konular:

Tema Yapımı sidebar.php Takvim

Tema Yapımı sidebar.php Takvim

TemaYapımı sidebar.php dosyası

Yorum Gönder Cevabı iptal et

Son Yazılar