Merhaba arkadaşlar bir kaç arkadaş ısrarı üzerine yapmış olduğum sitene ekle kısmı için makale yazdım.
Resimli anlatım için tıklayın

Sitene ekle nasıl yapılır

İlk olarak BU adreste bulunan bazı örneklerimiz mevcut, öncelikle dikey olan tasarımdan başlamak istiyorum zaten aynı mantık tasarım farklı.

İ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 <body> kısmına yazıyoruz fakat <body class=”a”> olmasına dikkat ediniz.

<body class="a">
 
<h1><span>Teknoloji Haberleri</span></h1>
 
<div class="govde">
 <?php while (have_posts ()): the_post(); ?>
 <a class="cf" href="<?php the_permalink(); ?>" target="_blank" title=" <?php the_title(); ?>">
  
 <?php the_post_thumbnail( array(65, auto) ); ?>
  
 <span class="bas ellips"> <?php the_title(); ?></span>
 <span class="ozet"><?php echo test(); ?></span> 
 </a>
 <?php endwhile; ?>
 </div>
</body>
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.

<!– BAŞLA: Teknoloji Haberi Sitene Ekle –><br />
<div style="font: normal 11px Arial; width: 298px; border: solid 1px #ccc; background: #fff; border-radius: 3px; box-shadow: 1px 1px 3px #ccc;"><br />
<h2 style="padding: 8px; margin: 0; height: 25px; border: 0; border-bottom: solid 1px #ccc;"><a href="https://www.sanalyer.com/"><br />
<img title="Teknoloji Haberleri" src="https://sanalyer.com/sade-logo.png" alt="Teknoloji Haberleri" /><br />
</a></h2><br />
<iframe src="https://www.sanalyer.com/ekle.php" width="298" height="282" frameborder="0"></iframe><br />
<div style="text-align: center; line-height: 23px; border-top: solid 1px #ccc; color: #666; margin-top: 5px; box-shadow: 0 -1px 3px #ccc;"><a style="text-decoration: none; color: #666; font: normal 11px Arial;" title="Teknoloji Haberleri" href="https://www.sanalyer.com/">Teknoloji Haberleri</a>  |  <a style="text-decoration: none; color: #666; font: normal 11px Arial;" href="https://www.sanalyer.com/teknoloji-haberleri-ekle">Sitene Teknoloji Haberleri Ekle</a></div><br />
</div><br />
<!– BİTİŞ: Teknoloji Haberi Sitene Ekle –>
Sitene Ekle Makalesinin sonuna geldik fakat slider yani sitene manşet ekle makalesini daha sonra yayınlayacağız.