Bu yazıyı yayınlamak için sanırım baya geç kaldım. Yinede kendimce codex.wordpress sitesinden aldığım örneklerle anlatmaya çalışacağım dilim döndüğünce. Bildiğini gibi v3 çıktıktan sonra temanın belirli yerlerine farklı menüler ekleyebiliyoruz. Ayrıca bu desteği de ekledikten sonra Admin paneli>Görünüm>Menüler diye bir sekme eklenecektir. Bu bölümden Kategorileriniz ve sayfalarınız için yeni menüler oluşturarak temaya ekleyeceğiniz menü desteği sayesinde temanızın farklı yerlerine farklı kategori yada sayfalar ekleyebilirsiniz. Sitenin en üstü (header), en altı (footer) ve dilerseniz sidebarda bile menü görüntülenmesini sağlayabilirsiniz.
1. Öncelikle Görünüm>Düzenleyici sekmesinden menü desteği eklemek istediğiniz şablonu seçip function.php dosyasını açın ve içine aşağıdaki kodu ekleyin ve function.php dosyasını güncelleyin.
function register_menulerim() {
register_nav_menus(
array(
'primary' => __( 'Menu 1' ),
'secondary' => __( 'Menu 2' )
)
);
}
add_action( 'init', 'register_menulerim' );
2. Şimdi sıra geldi menüyü şablonumuza eklemeye. Yukarıda kullanabileceğimiz iki adet menü kodu verdik. Primary ve Secondary diye. Primary menüyü çağırmak için aşağıdaki kodu kullanıyoruz. Nerede görünmesini istiyorsanız oraya yerleştirin. Header.php yada index.php dosyalarına ekleyebilirsiniz aşağıdaki kodları. Yada birini header.php dosyasına diğerini de footer.php dosyasına ekleyin. Karar size kalmış.
Primary çağırma kodu :
'primary', 'menu_class' => 'nav-menu' ) ); ?>
Secondary çağırma kodu :
'secondary', 'menu_class' => 'nav-menu1' ) ); ?>
Artık menülerimiz hazır. Eğer doğru yapmışsanız sonuç olarak aşağıdaki gibi gözükecektir.
Birine sayfaları ekledim diğerine de kategorileri ekledim. Sıra geldi bunlara Css ile ayrı ayrı şekil vermeye.
3. Ben daha öncesinden her menü için farklı Css kodları hazırladım. Bu yüzden çağırma kodlarını da kendi belirlediğim Css sınıfları ile göstermek istiyorum.
Primary çağırma kodu :
Şimdi Css sınıflarını da belirledikten sonra sıra geldi Css kodlarını eklemeye. aynı function.php yi açtığınız gibi style.css dosyasını da açın ve içine aşağıdaki Css kodları ekleyip dosyayı güncelleyin.
.menucontainer {
max-width: 1200px;
width:auto;
height:40px;
margin: auto;
background-color:#2ba3ed;
}
#navigasyonmenu {
width:auto;
display:block;
margin: auto;
}
#navigasyonmenu ul.nav-menu {
width:90%;
height:40px;
float:left;
}
#navigasyonmenu ul.nav-menu li {
width:auto;
list-style:none;
float:left;
padding-top:9px;
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
text-align:center;
margin-left:1px;
background:#009bff;
}
#navigasyonmenu ul.nav-menu li:hover {
background-color:white;
}
#navigasyonmenu ul.nav-menu li a {
text-transform:uppercase;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
color: #ffffff;
font: 13px Monospace, Serif;
outline: none;
vertical-align: middle;
}
#navigasyonmenu ul.nav-menu li:hover a {
color: #009bff;
}
Primary artık kullanıma hazır. Sonuç olarak aşağıdaki gibi mavi renkli bir görüntüsü olacak. Daha sonra isterseniz renklerini değiştirebilirsiniz. Yanlız tek seviye olduğu için alt kategoriler eklerseniz bozuk görünebilir. Yada alt kategoriler görünmeyebilir. Bu tek seviyelidir. Yönetim panelinden sayfa sıralamalarına dikkat etmediğim için böyle ters bi numaralandırma oluştu. Yönetim panelinden kategori ve sayfa sırasını kendiniz belirliyorsunuz.
4. Primary bittiğine göre Secondary için de bir tane hazırlayalım. Öncelikle aşağıdaki kodu menünün olmasını istediğiniz bir yere ekleyin.
'secondary', 'menu_class' => 'nav-menu1' ) ); ?>
Şimdi de sıra geldi Css kodlarını eklemeye. Aşağıdaki Css kodları style.css dosyasının içine kaydedin.
.secondaryMenu {
max-width: 1200px;
width:auto;
height:40px;
margin: auto;
border-bottom: 1px #666666 solid;
border-top: 1px #666666 solid;
}
.secondaryMenu #cerceveMenu {
width:auto;
display:block;
margin: auto;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 {
width:90%;
height:40px;
float:left;
line-height:40px;
position:absolute;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 a{
display: block;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: Garamond, serif;
padding-left:20px;
padding-right:20px;
font-weight:bold;
font-size: 0.9em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.secondaryMenu #cerceveMenu ul.nav-menu1 > li {
float:left;
height: 40px;
line-height: 40px;
display:block;
list-style:none;
position:relative;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 > li:hover {
color: #468ECD;
background-color:#d75813;
z-index: 3;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 ul {
visibility:hidden;
position: absolute;
background-color:#d75813;
padding-top:5px;
padding-bottom:5px;
width: 150px;
top:50px;
opacity: 0;
text-align: left;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 li:hover ul{
opacity: 1;
top: 40px;
visibility:visible;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 ul li {
display: block;
position: relative;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 ul li:hover {
display: block;
position: relative;
background-color:#FFFFFF;
}
.secondaryMenu #cerceveMenu ul.nav-menu1 ul li a {
padding-left: 30px;
}
Secondary için de Css kodlarını kaydetme işlemini bitirdiyseniz eğer sonuç olarak aşağıdaki gibi bir menünüz olacak. Arkaplan rengi yok. Üst ve alt kısımda ince border ile görünmesini sağlayan iki çizgi var. Mouse ile linklerin üzerine geldiğinizde link arkaplanı turuncu oluyor ayrıca açılan alt kategori çerçevesi de turuncu oluyor. alt linklerin üzerine mouse geldiğinde linklerin arkaplan rengi beyaz rengine dönüşüyor. Bence gayet zarif ve olduğu gibi kullansanız sitenize farklı bir görünüm vermeye yeter. Değiştirip değiştirmemek size kalmış tabi. Bu haliyle her türlü site rengine uyum sağlayacağını düşünüyorum.
Arkaplan desteği :
Hazır tema desteklerinden bahsetmişken konuyu biraz daha genişletelim. Yönetim panelinden bazı şablonları önizlediğimizde sol tarafta fazladan birkaç tane özellik olur. Aşağıdaki resimde görüldüğü gibi.
Bazı şablonlarda herhangi bir Css kod bilgisine ihtiyaç olmadan önizleme bölümünde arkaplan rengi değiştirme seçeneği eklenebiliyor. Aşağıdaki kodu kullanarak şablonunuza bu özelliği kazandırabilirsiniz. Bu kodu alıp function.php dosyasına kaydedin
add_theme_support( 'custom-background', apply_filters( 'benimtema_custom_background_args', array( 'default-color' => 'f5f5f5', ) ) );
Bu kodu ekledikten sonra ön izleme bölümünden arkaplan rengini değiştirebilirsiniz artık.
Bileşen alanları oluşturma :
Çoğu yerde merakla araştıran kişiler vardır. Sidebar yada footere nasıl fazladan bileşen alanları ekleyebilirim diye. Daha öncesinden yapmaya çalıştığım ama bitiremediğim Maykıl şablonunda kullandığım bileşen alanlarını sizlerle paylaşmak istiyorum. Sidebar bölümü için bir tane ve footer bölümü için de dört tane bileşen alanı hazırlamıştım kendim için. Sizlerde aynı şekilde alıp temanızda kullanabilirsiniz eğer bileşen alanlarınızın eksikliğinden şikayet ediyorsanız. Aşağıdaki kodu function.php dosyası içine kaydedin.
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'before_title' => '',
));
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name'=> 'Footer 1',
'id' => 'footer1',
'before_widget' => '',
'before_title' => '',
));
register_sidebar(array(
'name'=> 'Footer 2',
'id' => 'footer2',
'before_widget' => '',
'before_title' => '',
));
register_sidebar(array(
'name'=> 'Footer 3',
'id' => 'footer3',
'before_widget' => '',
'before_title' => '',
));
register_sidebar(array(
'name'=> 'Footer 4',
'id' => 'footer4',
'before_widget' => '',
'before_title' => '',
));
}
- ‘name’ : Bileşe nalanının adı
- ‘id’ : Çağıracağımız bileşenin idesi
- ‘before_widget’ : Bileşenden önce ne gelsin ? Buraya bileşen için hazırladığınız Css tasarımını ekleyebilirsiniz. Aynısı alttaki seçenekler için de geçerli.
- ‘after_widget’ : Bileşenden sonra ne gelsin ? Genelde sadece /div diye olur ama bu bileşen alanını kaç tane div içine eklemenize bağlı tabi.
- ‘before_title’ : Bileşen başlığından önce ne eklensin ? Gördüğünüz gibi benim eklemiş olduğum class=”footerTitle” ve span kapatma işlemi de aynı şekilde. After titlede görebilirsiniz.
- ‘after_title’ : Bileşen başlığından sonra ne gelsin ?
Bunlar için gerekli ayarlamaları da Css ile yapmanız gerek.
Şimdi sıra geldi bileşen alanlarımızı sayfaya çağırma. Sidebar.php dosyasını açalım ve içine aşağıdaki kodu ekleyelim. Böylelikle function.php de belirlediğimiz bileşen alanlarını sidebara çekebiliriz.
Footer bölümüne bileşen alanı eklemek için footer.php dosyasını açıp içine aşağıdaki kodu kopyalayın. Dört tane bileşen için hazırlanmış çağırma kodu.
Bu kodları da ekledikten sonra bileşen alanları artık kullanıma hazırdır.
Resmi farklı boyutlarda yükleme
Farklı boyutlarda resim yükleme nedir ve ne işinize yarayacak ?
Eminim çoğu kişi biliyordur Wordpress yönetim panelinde bir yazıya resim yüklerken yüklemiş olduğumuz resim farklı farklı boyutlarda bir kaç tane olarak yüklenir. Başlarda bu durum benim canımı sıkan bir olaydı. Hani neden durduk yere 1 resmi 3 – 4 defa yüklüyor diye söylenirdim kendi kendime.
Diyelim ki bir tane tema hazırlıyorsunuz yada temanıza benzer yazılar gib ekstra bir özellik yükleyeceksiniz. Yazıların altında gösterilen benzer yazılara ait resimler için 50×50 piksellik bir resim oldukça iyi bir boyuttur. Hatta 100×100 bile yapabilirsiniz. Bu karar size ve tasarımınıza kalmış birşey. Yazıya yüklediğiniz resim boyutu örneğin 4 mb ve siz öne çıkarılmış görseli benzer yazılara çağırdınız. Yazıların altında da toplamda 6 tane resimli benzer yazı çıkarsa eğer 4×6 = 24mb alan eder. Ama böyle değilde yüklediğiniz resimler farklı boyutlarda bir kaç tane olarak yüklenirse eğer o zaman isteğinize göre küçük boyda bir resim çağırıp yazının altında görünmesini sağlayabilirsiniz.
Codex.wordpress sitesinden olduğu gibi aldığım resim boyutlandırma kodları.
the_post_thumbnail('thumbnail'); // kucuk (default 150px x 150px max)
the_post_thumbnail('medium'); // orta resolution (default 300px x 300px max)
the_post_thumbnail('large'); // buyuk resolution (default 640px x 640px max)
the_post_thumbnail('full'); // orjinal boy (unmodified)
the_post_thumbnail( array(100,100) ); // diger
Yukarıdaki kod yardımıyla 640 pikselden daha büyük olan resimler öncelikle 640 piksel (büyük), 300×300 piksel (orta) ve 150×150 piksel (küçük) olarak kaydedilecek. Birde bunun tam boy olanını da eklersek toplamda 4 tane resim yüklenmiş olacak. 100×100 pikselden daha küçük resimleri de olduğu gibi kaydedecek. Bu boyutları hazırladığınız temalara ve tema özelliklerine göre değiştirebilirsiniz. Mesela anasayfada 500piksel genişliğinde bir çerçeeye 640 piksel resim çağırmak sitenizi sadece yavaşlatacaktır.
Şimdi sıra geldi bu resimlerin her birini ayrı ayrı çağırmaya. Thumbnail (küçük), medium (orta), large (büyük) ve full (tam boy) resimleri çağırmak için aşağıdaki kodları kullanabilirsiniz. ‘alignleft’ sizin Css sınıfınızdır.
'alignleft')); ?> 'alignleft')); ?> 'alignleft')); ?> 'alignleft')); ?>
Yani düzenlemek için .alignleft { buraya css değerleri } kullanmanız gerekiyor. Yada kendi hazırlamış olduğunuz bir Css sınıfını alignleft ile değiştirebilirsiniz.
Altı üstü bir menü desteği eklemekten bahsedecektik konu buralara kadar uzadı. Bunlar dışında temalar için kullanılabilen destekler yazı formatı, otomtik rss beslemeleri oluşturma ve header için banner yükleme diye biliyorum. Banner ve yazı formatı pek işinize yaramayabilir. Otomatik rss beslemeleri için de aşağıdaki kodu function.php dosyasına yükleyebilirsiniz.
add_theme_support( 'automatic-feed-links' );
Sayfaya çekmek için
Örnek :