Yazı hakkındaki yorumun nedir?
WordPress kısa kod yapımı [BBCode]
Merhaba arkadaşlar.
Az önce Usluer v3 teması için uğraşırken aklıma kısa kod eklemek geldi. Birkaç araştırmadan sonra basit bir yapıya sahip olduğunu gördüm ve başladım yazmaya.
En basit örnekten başlayayım anlatmaya.
Yazıları kısa kod ile kalın yazmak
Temamızın functions dosyasını açıyoruz.
?>
Yukarıdaki kodu bulup hemen üstüne aşağıdaki kodları ekleyelim.
function kalin( $atts, $content = null ) {
return '<span style="font-weight: bold;">' . $content . '</span>';
}
add_shortcode( 'kalinyaz', 'kalin' );
Bir fonksiyon tanımladık. Fonksiyonumuza bir değer yolluyoruz ve aynı değeri fonksiyondan çıkartıp bize geri gönderiyor. Burada yapılan işlem fonksiyona yollanan yazının bize kalın olarak gözükmesi. 2. kod dizininde 4. satırdaki kalinyaz kelimesi kısa kod ismi, kalin kelimesi ise fonksiyonumuzun ismidir.
Peki bunu nasıl kullanacağız?
Yazı içlerinde veya sayfalarda [kalinyaz]yazılacak olan metin[/kalinyaz] şeklinde kullanabiliriz.
Rengarenk arkaplanlı yazılar yazmak
Öncelikle temanızın style dosyasının en altına aşağıdaki kodları ekleyiniz.
.gri_arka {
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
padding: 5px;
background-color: #eeeeee;
}
.sari_arka {
border-top: 2px solid #efe3ae;
border-bottom: 2px solid #efe3ae;
padding: 5px;
background-color: #fef6d2;
}
.kirmizi_arka {
border-top: 2px solid #f0baa2;
border-bottom: 2px solid #f0baa2;
padding: 5px;
background-color: #ffd9c8;
}
.mavi_arka {
border-top: 2px solid #aec3ef;
border-bottom: 2px solid #aec3ef;
padding: 5px;
background-color: #d2d8fe;
}
.yesil_arka {
border-top: 2px solid #d4ebaf;
border-bottom: 2px solid #d4ebaf;
padding: 5px;
background-color: #edfcd5;
}
.pembe_arka {
border-top: 2px solid #efaeed;
border-bottom: 2px solid #efaeed;
padding: 5px;
background-color: #fed2fd;
}
Daha sonra functions dosyasını açıyoruz.
?>
Yukarıdaki kodu bulup üstüne aşağıdaki kodları ekleyelim.
function gri_arka( $atts, $content = null ) {
return '<div class="gri_arka">' . $content . '</div>';
}
function sari_arka( $atts, $content = null ) {
return '<div class="sari_arka">' . $content . '</div>';
}
function kirmizi_arka( $atts, $content = null ) {
return '<div class="kirmizi_arka">' . $content . '</div>';
}
function mavi_arka( $atts, $content = null ) {
return '<div class="mavi_arka">' . $content . '</div>';
}
function yesil_arka( $atts, $content = null ) {
return '<div class="yesil_arka">' . $content . '</div>';
}
function pembe_arka( $atts, $content = null ) {
return '<div class="pembe_arka">' . $content . '</div>';
}
add_shortcode( 'gri', 'gri_arka' );
add_shortcode( 'sari', 'sari_arka' );
add_shortcode( 'kirmizi', 'kirmizi_arka' );
add_shortcode( 'mavi', 'mavi_arka' );
add_shortcode( 'yesil', 'yesil_arka' );
add_shortcode( 'pembe', 'pembe_arka' );
Bu örnek ile ise arkaplanı birbirinden farklı olan yazılar yazabiliriz. Kullanılışı ise; [ gri]yazılacak olan metin[/gri] şeklindedir. Buradaki gri rengi yerine sarı, kırmızı, mavi, yeşil, pembe renklerini kullanabilirsiniz. Kısa kodları yazarken Türkçe karakter kullanmayınız. sarı değilde sari, yeşil değilde yesil vs. yazınız.
Bunlara örnek verecek olursak;
[gri]Bu makale İsmail Usluer tarafından yazılmıştır.[/gri]
[sari]Bu makale İsmail Usluer tarafından yazılmıştır.[/sari]
[kirmizi]Bu makale İsmail Usluer tarafından yazılmıştır.[/kirmizi]
[mavi]Bu makale İsmail Usluer tarafından yazılmıştır.[/mavi]
[yesil]Bu makale İsmail Usluer tarafından yazılmıştır.[/yesil]
[pembe]Bu makale İsmail Usluer tarafından yazılmıştır.[/pembe]
Parametreli kısa kod yazımı
Bununla ise fonksiyonumuza istediğimiz değeri yollayayıp ona göre işlem yaptırabiliyoruz. Hemen nasıl yapıldığına geçelim.
Öncelikle style dosyamızın en altına aşağıdaki kodları ekleyelim.
.et_quote { background: url(images/left-quotes-big.png) no-repeat; padding-left: 57px; min-height: 40px; font-family: Georgia, serif; font-size: 14px; font-style: italic; }
.et_right_quote { width: 100%; }
.quote-center { font-size: 18px; line-height: 1.2; text-align: center; background: url(images/left-quotes-small.png) no-repeat 0px 3px; padding-left: 30px; }
.quote-center .et_right_quote { padding-right: 30px; width: 95%; background: url(images/right-quotes-small.png) 100% 3px no-repeat; }
Daha sonra functions dosyamızı açalım.
?>
Yukarıdaki kodu bulup üstüne aşağıdaki kodları ekleyelim.
function et_quote($atts, $content = null) {
extract(shortcode_atts(array(
'style' => '',
'id' => '',
'class' => '',
'type' => 'normal'
), $atts));
$style = ( $style <> '' ) ? ' style="' . $style . '"' : '';
$id = ($id <> '') ? " id='{$id}'" : '';
$class = ($class <> '') ? ' ' . $class : '';
if ( $type == 'center' ) $class = ' quote-center';
$output = "
<div{$id} class='et_quote{$class}'{$style}>
<div class='et_right_quote'>
{$content}
</div>
</div>
";
return $output;
}
add_shortcode('quote','et_quote');
Burada fonksiyonumuza style, id, class ve type olmak üzere 4 adet değer yolluyoruz. Mesela type değerini boş bırakırsak normal olarak alacaktır. Fakat biz type değerine center yazarsak farklı bir gösterim yapacaktır.
Eğer type değeri boş yani normal olursa şu şekilde;
[quote]Bu makale İsmail Usluer tarafından yazılmıştır.[/quote]
Eğer type değer center olursa şu şekilde gözükecektir;
[quote type=”center”]Bu makale İsmail Usluer tarafından yazılmıştır.[/quote]
Bu kısa kodu kullanmak için ise iki yöntem vardır. Eğer type değeri normal olsun istiyorsak [ quote]yazılacak olan metin[/quote], yok ikinci örnekteki gibi olsun istiyorsak [ quote type=”center”]yazılacak olan metin[/quote] şeklinde kullanmalıyız.
NOT: Bu kısa kodları tema dosyaları içerisinde kullanamazsınız. Sadece blog içerisindeki yazı ve sayfalarda kullanılabilir.
NOT: Kısa kodların yazımında yukarıdaki gibi boşluk yoktur. Benim boşluk koymamın sebebi örnek olarak gözükmemesi içindir.
hocam ben bi tema yı guzel cene editliyorum sizin ki gibi ama http://www.wmkafe.tk/b.bmp ana sayfada bole gozkmuo yanı bu resimdekı cıkmıo acaba kodunu paylaşırmısınız hocam cok acil (:
Style kodları ile oynayarak bu şekilde görünmesini sağlayabilirsiniz.
Forum gibi bi site olcak? :) Eline sağlık ismail..
resimdekı gibi degil ana sayfada paylaşım gozkmuor
Temanızdan kaynaklanıyordur. Yazı içlerinde gözükecektir.
hocam hiç gozkmuor acaba paylaşırmısınz blogunuzda
Zaten kodları paylaştım. :)
anlatım için sağolasın kardeşim, şuan bende kullanıyorum. Çok hoşuma gitti. :)
Çok teşekkür ederim İsmail Abi. :) Sayende Görsel Editör içerisinde tagını kullandım. ;) Çok teşekkürler.. Ellerine sağlık.
WordPress sitemde yazmış olduğum shortcode fonksiyon.php içerisinde çalıştırıyorum. Tüm yazılarda sorunsuz çalışıyor fakat title ve description “[shortcode]” olarak görünüyor. Buralarda nasıl çalıştırabilirim acaba?