WordPress Köşe Yazarları

Uzun zamandan beri basketligi.com sitesi için köşe yazarları gibi bir yer yapmaya çalışıyordum. Onlarca kod, onlarca eklenti denedim. Ama mutlaka ya tarayıcı farklarından kaynaklanan ya da WordPress sürümlerinden kaynaklanan sorunlarla karşılaştım. WordPress Codex sağolsun bana bir kaç bilgisini esirgemedi iki satır da CSS yazarak basketligi.com‘da en altta gördüğünüz gibi bir köşe yazarları sistemi oluşturdum.

WordPress Köşe Yazarları bölümü hazırlamak için işte yapmanız gerekenler:

Adım 1) Biraz sonra vereceğim kod satırını eklediğiniz yerde tek kişinin fotoğrafını ve son 3 yazısını basmaya başlar. Örnek sitede index.php ‘de pagenavi eklentisinin kodundan hemen sonra başlatılmıştır.

<a href="http://www.basketligi.com/?feed=rss2&author=2"><img src="<?php bloginfo('stylesheet_directory'); ?>/yazarlar/ismail.jpg" alt="Ismail Biçermen"/></a>
<div class="yazar01"><h2><?php _e('Ismail Biçermen'); ?></h2>
<?php // Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://www.basketligi.com/?feed=rss2&author=2');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>
<?php if (empty($items)) echo '<li>Yazısı Yok</li>';
else
foreach ( $items as $item ) : ?>
<li><a href='<?php echo $item['link']; ?>'
title='<?php echo $item['title']; ?>'>
<?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>
</div>

Bu kodu geliştirmek isterseniz işte bilmeniz gerekenler:

Maksimum yazı başlığı sayısı 3 olarak yazılmıştır. Düzenlemek için

$maxitems = 3;

satırını kullanınız. Hangi yazarın yazılarını yayınlayacaksanız ilk satırdaki

<a href=”http://www.basketligi.com/?feed=rss2&author=2″&gt;

ve

$rss = fetch_rss(‘http://www.basketligi.com/?feed=rss2&author=2&#8217;);

satırındaki =2 rakamı yazar ID ‘sini bildirir. Hangi yazarın yazısını çekecekseniz o yazarın ID ‘sini yazın.

Fotoğrafı değiştirmek için:

bloginfo(‘stylesheet_directory’); ?>/yazarlar/ismail.jpg”

satırını kullanın. Tema dosyanızın içerisine “yazarlar” isminde bir klasör atın ve yazar fotoğraflarını buradan çekin.

Adım 2) style.css dosyanızın içine bu kodları ekleyin:

.yazar { background: #FFF ; border-top: solid 1px #ffffff; padding: 10px 20px 40px 5px; margin-top:-115px; margin-left:115px; }
.yazar h2 { color: #FFF; background:url(images/yazarka.jpg) no-repeat; font-size: 32px; font-weight: bold; line-height: 42px; margin: 0 0 15px 0; }

Bu kodu geliştirmek isterseniz işte bilmeniz gerekenler:

Div aralığının arka plan rengini background belirler. Div’in duracağı yer buradan belirlenir.

.yazar h2 satırı ise yazar adının başlığını şekillendirir. Font büyüklüğü, rengi ve durduğu yer buradan düzenlenebilir.

background:url(images/yazarka.jpg) ise arka fondaki imajımızdır. Örnek sitede mavi buton şeklindedir. İmajı buradan indirebilirsiniz.