WordPress

WordPress Yeni [BBCode] Oluşturmak

Az önce temayı geliştirmek için uyarı, bilgi, dikakt gibi ikazlar verip sizlerin dikaktini biraz daha çekmek için bir kaç kısa kod yapmak istedim. Makale hazırlamak veya sizlere çeşitli bilgiler verirken bağzı yerleri büyüterek yazmak yada yazı stillerini değiştirerek gözlerinizi oraya çekecek stiller yapmak en azndan hem sayfa düzenimi hemde hemde sizlerin biraz daha hızlı ve çabuk anlamasını sağlayacak kodlar elde ettim. Şimdi hem kendi siteme uygulayacağım hemde sizlerle yaplaşacağım. Umarım işinize yarar

Rengarenk arkaplanlı yazılar yazmak

Öncelikle temanızın style dosyasının en altına aşağıdaki kodları ekleyelim.

[php].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;

}[/php]

Daha sonra functions.php dosyasını açıyoruz.

[php]?>[/php]

Yukarıdaki kodu bulup üstüne aşağıdaki kodları ekleyelim.

[php]function gri_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

function sari_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

function kirmizi_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

function mavi_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

function yesil_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

function pembe_arka( $atts, $content = null ) {

return ‘</pre>

<div>’ . $content . ‘</div>

<pre>

‘;

}

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’ );[/php]

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]

 

[pembe]Bu makale İsmail Usluer tarafından yazılmıştır.[/pembe]

 

[mavi]Bu makale İsmail Usluer tarafından yazılmıştır.[/mavi]

 

[yesil]Bu makale İsmail Usluer tarafından yazılmıştır.[/yesil]

 

[kirmizi]Bu makale İsmail Usluer tarafından yazılmıştır.[/kirmizi]

 

Alıntı kısmını düzenlemek

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.

[php].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; }[/php]

Daha sonra functions.php dosyamızı açalım.

[php]?>[/php]

Yukarıdaki kodu bulup üstüne aşağıdaki kodları ekleyelim.

[php]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 = “</pre>

<div class=”et_right_quote”>{$content}</div>

<pre>

“;

return $output;

}

add_shortcode(‘quote’,’et_quote’);[/php]

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;

Bu makale İsmail Usluer tarafından yazılmıştır.

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]

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ış.

[poll id=”3″]

Daha Fazla Göster

Emre Allison

Tam bir teknoloji aşığı, yazılım, donanım meraklısı ve sıkı bir web geliştiricisiyim. Tecrübe ve birikimlerini güncel teknolojik gelişmeler ışığında daha geniş kitlelere ulaştırabilmek adına emreallison.com‘da devam ettiriyorum.

2 Yorum

Bir Cevap Yazın

Başa dön tuşu
error: