Tema desteği eklemek

0
124
Okunma

tema destegi Tema desteği eklemek

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 :

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Secondary çağırma kodu :

 <?php wp_nav_menu( array( 'theme_location' => '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.

destek Tema desteği eklemek

 

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 :

<div class="menucontainer">
  <div id="navigasyonmenu">
    <ul>
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </ul>
   </div><!-- navigasyonmenu -->
</div> <!-- menucontainer-->

Ş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.

destekheader Tema desteği eklemek

 

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.

<div class="secondaryMenu">
	<div id="cerceveMenu">
	   <ul>
         <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu1' ) ); ?>
	   </ul> 
	</div><!--cerceveMenu-->
</div><!--secondaryMenu-->

Ş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.

SecondaryTamam Tema desteği eklemek

 

 

 

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.

supports Tema desteği eklemek 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' => '<div class="sidebarBox">',
        'after_widget' => '</div><div class="clear"></div>',
        'before_title' => '<div class="sidebarTitle"><span>',
        'after_title' => '</span></div>',
    ));

if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name'=> 'Footer 1',
		'id' => 'footer1',
		'before_widget' => '<div class="footerBox">',
		'after_widget' => '</div>',
		'before_title' => '<div class="footerTitle"><span>',
		'after_title' => '</span></div>',
	));
	register_sidebar(array(
		'name'=> 'Footer 2',
		'id' => 'footer2',
		'before_widget' => '<div class="footerBox">',
		'after_widget' => '</div>',
		'before_title' => '<div class="footerTitle"><span>',
		'after_title' => '</span></div>',
	));
	register_sidebar(array(
		'name'=> 'Footer 3',
		'id' => 'footer3',
		'before_widget' => '<div class="footerBox">',
		'after_widget' => '</div>',
		'before_title' => '<div class="footerTitle"><span>',
		'after_title' => '</span></div>',
	));
	register_sidebar(array(
		'name'=> 'Footer 4',
		'id' => 'footer4',
		'before_widget' => '<div class="footerBox">',
		'after_widget' => '</div>',
		'before_title' => '<div class="footerTitle"><span>',
		'after_title' => '</span></div>',
	));
}
  • ‘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.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>

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.

<?php 
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(footer1) ) : ?>							
<?php endif; ?>
<?php 
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(footer2) ) : ?>							
<?php endif; ?>
<?php 
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(footer3) ) : ?>							
<?php endif; ?>
<?php 
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(footer4) ) : ?>							
<?php endif; ?>

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.

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

<?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?>

<?php the_post_thumbnail('large', array('class' => 'alignleft')); ?>

<?php the_post_thumbnail('full', array('class' => '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

<link rel="alternate" type="application/rss+xml" title="<?php the_title(); ?> Comments" href="<?php bloginfo('url'); ?>/?feed=rss2&amp;p=<?php the_ID(); ?>" />

Örnek :

<?php if (is_single()) { ?>

<?php while (have_posts()) : the_post(); ?>

<link rel="alternate" type="application/rss+xml" title="<?php the_title(); ?> Comments" href="<?php bloginfo('url'); ?>/?feed=rss2&amp;p=<?php the_ID(); ?>" />

<?php endwhile; ?>

<?php rewind_posts(); ?>

<?php } ?>

 

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here