WordPress temalarıydı blog düzenlemesiydi derken fazla konu giremiyordum bloguma. Bugün sizler için kendi temalarımda kullandığım shortcode yani kısakod özelliğiyle renkli kutucuk,buton ve youtube videoları gösterme gibi bir özelliği temanıza kazandırmanızı sağlayacağım.

İlk Olarak Temanızın functions.php dosyasını açın. Aşağıdaki kodu uygun bir yere ekleyin.

[html]

<?php
include(“functions/tinymce/tinymce.php”);
add_filter(‘widget_text’, ‘shortcode_unautop’);
add_filter(‘widget_text’, ‘do_shortcode’);
include(“functions/theme-shortcodes.php”);?>

[/html]

bu kod ile – temanızın klasörüne atmanız gereken bazı dosyalar var onları aşağıda vereceğim – dosyaların çağrılmasını sağlıyorsunuz.

Daha sonra style.css dosyanızı açıp içine

[html]

/*———————————————–

/* Shortcodes

/*———————————————*/

&nbsp;

/*-[ Notifications ]—————————*/

&nbsp;

.message_box {

margin: 15px 0;

}

pre {

overflow: auto;

background: #F7F7F7 url(‘imagas/code.png’) 10px 2px no-repeat;

padding: 2em 1em 1em 1em;

border: 1px solid #DDD;

margin: 15px 0;

}

.note {

border-radius: 3px;

background: rgba(255, 220, 68, 0.78);

color: #919191;

border: 1px solid #DDB000;

}

.note p {

padding: 0.5em 1em 0.8em 3.5em;

background: url(‘images/thumb.png’)no-repeat 8px 7px;

}

.announce {

border-radius: 3px;

background: #D8F2FF;

color: #666;

border: 1px solid #6CCFFF;

}

.announce p {

padding: 0.5em 1em 0.8em 3.5em;

background: url(‘images/speaker.png’)no-repeat 6px;

}

.success {

border-radius: 3px;

padding-left: 18px;

background: #D3FF8E;

color: #666;

border: 1px solid #8CE200;

}

.success p {

padding: 0.5em 1em 0.8em 3.5em;

background: url(‘images/tick.png’) left no-repeat;

margin: 0.3em 0.8em;

}

.warning {

border-radius: 3px;

background: #FBA5FF;

color: #666;

border: 1px solid #E700CB;

}

.warning p {

padding: 0.5em 1em 0.8em 3.5em;

background: url(‘images/cross.png’)no-repeat 6px 7px;

}

/*-[ Buttons ]———————————*/

.buttons {

font-size:12px;

text-decoration:none;

position:relative;

padding:10px 20px 7px;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

margin: 15px 25px 15px 0;

padding: 12px 10px;

}

.btn_brown {

background-color: #D9C2A5;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D9C2A5), color-stop(100%, #C3A178));

background-image: -webkit-linear-gradient(top, #D9C2A5, #C3A178);

background-image: -moz-linear-gradient(top, #D9C2A5, #C3A178);

background-image: -ms-linear-gradient(top, #D9C2A5, #C3A178);

background-image: -o-linear-gradient(top, #D9C2A5, #C3A178);

background-image: linear-gradient(top, #D9C2A5, #C3A178);

border-top: 1px solid #BD986A;

border-right: 1px solid #BD986A;

border-bottom: 1px solid #9A7445;

border-left: 1px solid #BD986A;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 0 0 #DFCC9F;

-moz-box-shadow: inset 0 1px 0 0 #DFCC9F;

box-shadow: inset 0 1px 0 0 #DFCC9F;

color: white;

font: bold 11px “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;

line-height: 1;

padding: 8px 25px;

text-shadow: 0 -1px 1px #BA905E;

text-transform: uppercase;

padding: 12px 10px;

}

.btn_brown:hover {

background-color: #D1B593;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D1B593), color-stop(100%, #BC966B));

background-image: -webkit-linear-gradient(top, #D1B593, #BC966B);

background-image: -moz-linear-gradient(top, #D1B593, #BC966B);

background-image: -ms-linear-gradient(top, #D1B593, #BC966B);

background-image: -o-linear-gradient(top, #D1B593, #BC966B);

background-image: linear-gradient(top, #D1B593, #BC966B);

border-top: 1px solid #BD986A;

border-right: 1px solid #BD986A;

border-bottom: 1px solid #9A7445;

border-left: 1px solid #BD986A;

-webkit-box-shadow: inset 0 1px 0 0 #DFCC9F;

-moz-box-shadow: inset 0 1px 0 0 #DFCC9F;

box-shadow: inset 0 1px 0 0 #DFCC9F;

cursor: pointer;

color:white!important;

}

.btn_brown:active {

border: 1px solid #B2824C;

-webkit-box-shadow: inset 0 0 8px 2px #C19B70;

-moz-box-shadow: inset 0 0 8px 2px #C19B70;

box-shadow: inset 0 0 8px 2px #C19B70;

}

.btn_blue {

background-color: #A5B8DA;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A5B8DA), color-stop(100%, #7089B3));

background-image: -webkit-linear-gradient(top, #A5B8DA, #7089B3);

background-image: -moz-linear-gradient(top, #A5B8DA, #7089B3);

background-image: -ms-linear-gradient(top, #A5B8DA, #7089B3);

background-image: -o-linear-gradient(top, #A5B8DA, #7089B3);

background-image: linear-gradient(top, #A5B8DA, #7089B3);

border-top: 1px solid #758FBA;

border-right: 1px solid #6C84AB;

border-bottom: 1px solid #5C6F91;

border-left: 1px solid #6C84AB;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;

-moz-box-shadow: inset 0 1px 0 0 #aec3e5;

box-shadow: inset 0 1px 0 0 #aec3e5;

color: white;

font: bold 11px “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;

line-height: 1;

padding: 8px 25px;

text-shadow: 0 -1px 1px #64799E;

text-transform: uppercase;

padding: 12px 10px;

}

.btn_blue:hover {

background-color: #9badcc;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6));

background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);

background-image: -moz-linear-gradient(top, #9badcc, #687fa6);

background-image: -ms-linear-gradient(top, #9badcc, #687fa6);

background-image: -o-linear-gradient(top, #9badcc, #687fa6);

background-image: linear-gradient(top, #9badcc, #687fa6);

border-top: 1px solid #6d86ad;

border-right: 1px solid #647a9e;

border-bottom: 1px solid #546685;

border-left: 1px solid #647a9e;

-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;

-moz-box-shadow: inset 0 1px 0 0 #a5b9d9;

box-shadow: inset 0 1px 0 0 #a5b9d9;

cursor: pointer;

color:white!important;

}

.btn_blue:active {

border: 1px solid #546685;

-webkit-box-shadow: inset 0 0 8px 2px #7e8da6;

-moz-box-shadow: inset 0 0 8px 2px #7e8da6;

box-shadow: inset 0 0 8px 2px #7e8da6;

}

.btn_green {

background-color: #6CB24C;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6CB24C), color-stop(100%, #52873A));

background-image: -webkit-linear-gradient(top, #6CB24C, #52873A);

background-image: -moz-linear-gradient(top, #6CB24C, #52873A);

background-image: -ms-linear-gradient(top, #6CB24C, #52873A);

background-image: -o-linear-gradient(top, #6CB24C, #52873A);

background-image: linear-gradient(top, #6CB24C, #52873A);

border-top: 1px solid #477532;

border-right: 1px solid #477532;

border-bottom: 1px solid #3A6029;

border-left: 1px solid #477532;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 0 0 #8FC477;

-moz-box-shadow: inset 0 1px 0 0 #8FC477;

box-shadow: inset 0 1px 0 0 #8FC477;

color: white;

font: bold 11px “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;

line-height: 1;

padding: 12px 10px;

text-shadow: 0 -1px 1px #416B2D;

text-transform: uppercase;

}

.btn_green:hover {

background-color: #5F9D43;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #68AB49), color-stop(100%, #4A7834));

background-image: -webkit-linear-gradient(top, #68AB49, #4A7834);

background-image: -moz-linear-gradient(top, #68AB49, #4A7834);

background-image: -ms-linear-gradient(top, #68AB49, #4A7834);

background-image: -o-linear-gradient(top, #68AB49, #4A7834);

background-image: linear-gradient(top, #68AB49, #4A7834);

border-top: 1px solid #4E8037;

border-right: 1px solid #4E8037;

border-bottom: 1px solid #3A6029;

border-left: 1px solid #4E8037;

-webkit-box-shadow: inset 0 1px 0 0 #8FC477;

-moz-box-shadow: inset 0 1px 0 0 #8FC477;

box-shadow: inset 0 1px 0 0 #8FC477;

cursor: pointer;

color:white!important;

}

.btn_green:active {

border: 1px solid #436D30;

-webkit-box-shadow: inset 0 0 8px 2px #467131;

-moz-box-shadow: inset 0 0 8px 2px #467131;

box-shadow: inset 0 0 8px 2px #467131;

}

.btn_yellow {

background-color: #FFDA6B;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFDA6B), color-stop(100%, #FEAE2D));

background-image: -webkit-linear-gradient(top, #FFDA6B, #FEAE2D);

background-image: -moz-linear-gradient(top, #FFDA6B, #FEAE2D);

background-image: -ms-linear-gradient(top, #FFDA6B, #FEAE2D);

background-image: -o-linear-gradient(top, #FFDA6B, #FEAE2D);

background-image: linear-gradient(top, #FFDA6B, #FEAE2D);

border-top: 1px solid #D6AB00;

border-right: 1px solid #D6AB00;

border-bottom: 1px solid #BC9600;

border-left: 1px solid #D6AB00;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 0 0 #FFE599;

-moz-box-shadow: inset 0 1px 0 0 #FFE599;

box-shadow: inset 0 1px 0 0 #FFE599;

color: white;

line-height: 1;

padding: 8px 25px;

text-shadow: 0 -1px 1px #FF9B05;

text-transform: uppercase;

font: bold 11px “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;

line-height: 1;

padding: 12px 10px;

}

.btn_yellow:hover {

background-color: #FFD351;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFD351), color-stop(100%, #FDA00B));

background-image: -webkit-linear-gradient(top, #FFD351, #FDA00B);

background-image: -moz-linear-gradient(top, #FFD351, #FDA00B);

background-image: -ms-linear-gradient(top, #FFD351, #FDA00B);

background-image: -o-linear-gradient(top, #FFD351, #FDA00B);

background-image: linear-gradient(top, #FFD351, #FDA00B);

border-top: 1px solid #D6AB00;

border-right: 1px solid #D6AB00;

border-bottom: 1px solid #BC9600;

border-left: 1px solid #D6AB00;

-webkit-box-shadow: inset 0 1px 0 0 #FFE599;

-moz-box-shadow: inset 0 1px 0 0 #FFE599;

box-shadow: inset 0 1px 0 0 #FFE599;

cursor: pointer;

color:white!important;

}

.btn_yellow:active {

border: 1px solid #F29202;

[/html]

kodlarını ekliyorsunuz.

Ve aşağıdaki dosyaları indirip temanızın içine atıyorsunuz.

[button-green url=”http://yadi.sk/d/5ccCs4oKCo8it” target=”_self” position=”left”] İndir [/button-green]

Kullanmak İçin Yeni Yazı Ekleye Tıkladığınızda Temanızın Metin Editörüne + Şeklinde Bir Buton Eklendiğini Göreceksiniz. Burdan Kullanabilirsiniz.

Gelelim Örneklere =)

[alert-note] Gördüğünüz Gibi Gayet Güzel Çalışıyor [/alert-note]

[alert-announce] Gördüğünüz Gibi Gayet Güzel Çalışıyor [/alert-announce]

[alert-success] Gördüğünüz Gibi Gayet Güzel Çalışıyor [/alert-success]

[alert-warning] Gördüğünüz Gibi Gayet Güzel Çalışıyor [/alert-warning]

[button-blue url=”#” target=”_self” position=”left”] Buton [/button-blue] [button-red url=”#” target=”_self” position=”left”] Button text [/button-red]

İsterseniz Renkleri css ile oynayarak değiştirebilirsiniz.

Bir önceki yazımız olan Tozbulutu Okyanus Teması başlıklı makalemizde kişisel blog temaları, kişisel blog teması ve okyanus hakkında bilgiler verilmektedir.



Etiketler:, , ,