WordPress’te Yazılara “Yeni” İbaresi

new-label-wordpressWordPress’te yeni yayınlanmış ve ziyaretçilerinizin daha önce görüntülemediği yazılara “Yeni” ibaresi eklemek mümkün. Böylece hem kullanıcıları yeni içerikler hakkında bilgilendirmiş, hem de sayfa gösterimini olursunuz.

Bu makalemizde çerez desteğiyle ilk defa görülen makalelerin yanına “Yeni” ibaresi ekleyeceğiz.

Neden yeni yazılar önplana çıkarılmalı?

Sitenize belirli sıklıklarla giren ve bir şekilde geri dönen kullanıcılar genellikle en sadık takipçilerinizdir. Bu kişilere yeni içerikleri bildiriyor olmanız, onların site içi navigasyonunu kolaylaştırır, yeni içeriği görüntülemeye teşvik eder.

“Yeni” nasıl hazırlanır?

Temanızın function.php isimli dosyasını açın ve aşağıdaki kodları ekleyin.

function yeni_makale ( $title, $id ) {

if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title;

if ( !isset($_COOKIE['lastvisit']) ||  $_COOKIE['lastvisit'] == '' ) return $title;
$lastvisit = $_COOKIE['lastvisit'];
$publish_date = get_post_time( 'U', true, $id );
if ($publish_date > $lastvisit) $title .= '<span class="yeni-makale">YENİ</span>';
return $title;
}

add_filter( 'the_title', 'yeni_makale', 10, 2);

function yeni_makale_cookie() {
if ( is_admin() ) return;
$current = current_time( 'timestamp', 1);
setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN );
}

add_action( 'init', 'yeni_makale_cookie' );

Bu kod web sayfanıza giren ziyaretçide lastvisit isimli çerezi arıyor. Eğer öyle bir çerez bulamazsa, ilgili çerez tarihini o anın tarihine eşliyor. Eğer öyle bir çerez varsa da o tarihten sonra yazılmış her makalenin yanına “Yeni” ifadesini ekliyor.

Tasarım için yeni-makale classını tanımladığınız öğeyi kullanmanız gerekmektedir.

Yani CSS kodlarınızı bu class üzerine yazabilirsiniz.

Biz Adobewordpress olarak pommiegranit tarafından hazırlanmış bu yapıyı kullanmaktayız.

wordpress-new-label

Eğer üstteki tasarım hoşunuza gittiyse işte CSS kodları;

background: #feffdd;
padding: 4px;
border: 1px solid #eeefd2;
border-radius: 5px;
font-size: small;
color: #BEBFA9;

İyi çalışmalar.