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.

Sonuç

Bu sayede istediğiniz birçok şeyi yapabilirsiniz. Mesela dailymotion videolarını bu şekilde sitenizde oynatabilirsiniz. gibi.

Artık nasıl kullanmak istediğiniz size kalmış.

[kirmizi]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.[/kirmizi]
Benzer Yazılar
Cevap Bırakın

Yorum ( 9 )
  1. isimsiz
    3 Eylül 2011 - 18:27
    Cevapla
    • Usluer Yazar
      3 Eylül 2011 - 18:30
      Cevapla
  2. Tarık Menteşe
    3 Eylül 2011 - 18:43
    Cevapla
  3. isimsiz
    3 Eylül 2011 - 18:50
    Cevapla
    • Usluer Yazar
      3 Eylül 2011 - 19:05
      Cevapla
  4. isimsiz
    3 Eylül 2011 - 19:07
    Cevapla
    • Usluer Yazar
      3 Eylül 2011 - 19:21
      Cevapla
  5. Ubeyid ÖZ
    2 Ekim 2011 - 10:41
    Cevapla
  6. Uğur Dalkıran
    16 Temmuz 2012 - 14:55
    Cevapla