İlk önce tasarıma başlamadan önce kullanacak olacağınız PHP dosyanızın üst tarafına aşağıda ki kodları sayfanın üst kısmına ekleyin.
if (! isset($wp_did_header)):
if ( !file_exists( dirname(__FILE__) . '/wp-config.php') ) {
if (strpos($_SERVER['PHP_SELF'], 'wp-admin') !== false) $path = '';
else $path = 'wp-admin/';
require_once( dirname(__FILE__) . '/wp-includes/classes.php');
require_once( dirname(__FILE__) . '/wp-includes/functions.php');
require_once( dirname(__FILE__) . '/wp-includes/plugin.php');
wp_die("wp-config.php dosyasinin olup olmadigini kontrol ediniz.");
}
$wp_did_header = true;
require_once( dirname(__FILE__) . '/wp-config.php');
wp();
gzip_compression();
require_once(ABSPATH . WPINC . '/template-loader.php');
// cat = KATEGORİ ID, showposts = KAÇ ADET GÖSTERİLECEK
query_posts('cat=54&showposts=20');
function test(){
$excerpt = get_the_content();
$excerpt = strip_shortcodes($excerpt);
$excerpt = strip_tags($excerpt);
$the_str = substr($excerpt, 0, 100);
return $the_str;
}
endif; Bu kodlar yapacağımız döngü için gerekli olan ve veri tabanına bağlanacağımız kodlardır.
Sağ tarafta bulunan görselde ki CSS kodlarımızı yazalım en önemli unsurlardan biri çünkü görünüm ve güzelliği sağlayan kodlardır.
.cf {/* for IE 6/7 */*zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");/* non-JS fallback */*zoom: 1;}
.cf:before, .cf:after {content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}
.cf:after {clear: both;}
.ellips{overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
body, h1{padding: 0; margin: 0;}
body{background-color: #fff;line-height: 1;font: 12px Arial;position: relative;}
/* Basla Kaydirma cubugu */
::-webkit-scrollbar {
width: 9px;
height:4px;
}
::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #222;
}
::-webkit-scrollbar-thumb:hover {
background-color: #222;
}
::-moz-scrollbar {
width: 9px;
height:4px;
}
::-moz-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-moz-scrollbar-thumb {
background-color: #222;
}
::-moz-scrollbar-thumb:hover {
background-color: #222;
}
::-ms-scrollbar {
width: 9px;
height:4px;
}
::-ms-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-ms-scrollbar-thumb {
background-color: #222;
box-shadow:0px 0px 25px 0px black;
}
::-ms-scrollbar-thumb:hover {
background-color: #222;
}
::-o-scrollbar {
width: 9px;
height:4px;
}
::-o-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-o-scrollbar-thumb {
background-color: #222;
}
::-o-scrollbar-thumb:hover {
background-color: #222;
}
/* Bitir Kaydirma cubugu */
h1{font-size: 14px;line-height: 24px;width: 100%; position: fixed;top: 0;left: 0;border-bottom: solid 1px #ccc;box-shadow: 0 1px 3px #ccc;}
h1 span{display: block; padding-left: 10px;}
img{width: 65px;float: left; margin:0 5px 0 0;}
.govde{margin: 35px 10px 10px 10px;}
.govde a{text-decoration: none;display: block; margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #ccc;}
.govde a:last-child{margin-bottom: 0; border-bottom: 0;}
.govde a span{display: block;}
.bas{font-weight: bold; margin-bottom: 3px;}
body.a{color: #333;}
body.k{color: #fff;}
.a h1{background-color: #f3f3f3;color: #414141;}
.k h1{background-color: #273e81; color: #eee;}
.a a{color: #333;}
.a a:hover{color: #000;}
.k a{color: #fff;}
.k a:hover{color: #E9DB00;}
.a .bas{color: #187BB8;}
.a a:hover .bas{color: #004b88;}
.k .bas{color: #fff;}
.k a:hover .bas{color: #E9DB00;}Şimdi gelelim verileri listelemeye, şimdi yazacağımız kodlamada kısmına yazıyoruz fakat olmasına dikkat ediniz.
Teknoloji Haberleri
Bu kodlarımızı da yazdıktan sonra görüntüde ki tasarımı almış ve sitene ekle kısmı hazır olmuş olacaktır. Oluşturmuş olduğunuz ekle.php yada siz nasıl isim verdiyseniz, www ana dizine atınız. Ondan sonra aşağıda ki kodu kendi dosyanıza göre uyarlarsanız çalışmış olacaktır.
Kaynak: github, opencode, ***
İyi forumlar.