Kapat

WordPress İlgili Haber Özelliği [Üstelik Eklentisiz]

Anasayfa
Wordpress WordPress İlgili Haber Özelliği [Üstelik Eklentisiz]
wordpress-ilgili-haber-ilgili-yazi

WordPress ilgili haber veya ilgili yazı özelliğini eklentisiz olarak nasıl kullanabileceğinizi göstereceğiz. WordPress yazı içerisinde ilgili haber özelliğini eklenti ilede gösterebilirsiniz fakat eklenti kullanmanıza hiç gerek yok.

WordPress İlgili Haber Özelliğini Nasıl Kullanacağız ?

WordPress ilgili haber özelliği ile yayınladığınız yazılarla alakalı olan diğer yazıları konu içerisinde ilgili haber veya ilgili yazı olarak gösterebileceksiniz.

Volbiex adresi wordpress ilgili haber özelliğini kullanmaktadır. Yazı içeriğinde ilgili haber veya ilgili yazı özelliğini görebilirsiniz. Göremeyenler için;

wordpress ilgili haber

WordPress ilgili haber özelliğini kısa kod yardımı ile kullanacağız.

[pembe]Kullanacağımız kod;[/pembe]

[affiliate_news2 id="2341"]

Yazılarınızda gözükmesini istediğiniz yere yukarıda ki kodu yapıştıracaksınız. Kodla ilgili açıklama yapalım.

İlgili haber kodunda bulunan [mavi]id=”2321”[/mavi] bölümü, ilgili haberin id kodunu ifade etmektedir. Yani yazılarınızda gözükmesini istediğiniz ilgili haberin id kodunu bilmeniz gerekiyor.

İlgili Haberin ID Kodunu Nasıl Bulurum ?

Yazılarınızın içinde göstereceğiniz ilgili haberin id kodunu bulmak için öncelikle wordpress admin paneline giriş yapın.

Sol menüden [yesil]”Yazılar > Tüm Yazılar”[/yesil] yolunu izleyin.

Ardından yayınlamış olduğunuz ilgili haber olarak gözükmesini istediğiniz yazının üzerine mouse ile gelin.

Mouse ile yazının üzerine geldiğinizde aşağıdaki resimde gördüğünüz gibi bir kısım belirir. Burada yazan post=537 kodundaki [mavi]537[/mavi] id kodunuzdur.

 

wordpress-ilgili-yazi

[affiliate_news2 id=”537″] şeklinde yazı içerisinde görünmesini istediğiniz yere kodu yazdığınızda ilgili haber özelliği çalışacaktır.

WordPress İlgili Haber Özelliğini Temanıza Entegre Edelim

Öncelikle aşağıdaki php kodlarını temanızın içerisinde bulunan [gri]functions.php[/gri] dosyanıza ?> kodundan önce ekleyiniz.

// İlgili Kart Özelliği
function affiliate_news2($atts) {
 extract( shortcode_atts( array(
 'id' => 'id',
 ), $atts ) );
$baslik = get_the_title($id);
$url = get_permalink($id);
$img = wp_get_attachment_url( get_post_thumbnail_id($id) );
return <<<HTML
<html>
 <body><div class="ilgili_karti">
 <div class="ilgili_karti_gorsel"><a href="$url" target="_blank"><img class="img" alt="$baslik" src="$img" /></a></div>
 <div class="ilgili_karti_kategori"><a>&#304;LG&#304;L&#304; YAZI</a></div>
 <div class="ilgili_karti_baslik"><a href="$url" title="$baslik" target="_blank">$baslik</a></div>
 </div>
 </body>
 </html>
HTML;
}
add_shortcode('affiliate_news2', 'affiliate_news2');
// İlgili Kart Özelliği

Sonra aşağıdaki css kodlarını temanızın içerisinde bulunan [gri]style.css[/gri] dosyasına olduğu gibi ekleyiniz.

 /* İlgili Kart */
.ilgili_karti {
 background-color: white;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
 border: 0 solid;
 overflow: hidden;
 -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
 -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
 padding: 0;
 }
.ilgili_karti_gorsel .img {
 width: 220px;
 padding-right: 16px;
 margin-left: auto;
 margin-right: auto;
 height: 130px;
 float: left;
 text-align: center;
 display: block;
 overflow: hidden;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 }
.ilgili_karti_kategori a {
 display: table-cell;
 color: #999;
 padding-top: 16px;
 font: inherit;
 }
.ilgili_karti_kategori a:hover {
 color: #999;
 }
.ilgili_karti_baslik {
 font-size: 1.5em;
 font-weight: bold;
 color: #141412;
 line-height: 1.5;
 margin: 10px 15px 7px;
 }
.ilgili_karti_baslik a {
 box-shadow: none;
 color: #141412;
 text-decoration: none;
 }
@media (max-width: 960px) {
 .ilgili_karti_gorsel .img {
 width: 100%;
 padding-right: 0px;
 }
 .ilgili_karti_kategori a {
 padding-left: 16px;
 }
 }

Hepsi bu kadar. WordPress ilgili haber özelliği temanıza entegre edilmiştir. İlgili haber özelliği responsive uyumludur. Yani tüm cihazlarda sorunsuz taşmadan çalışmaktadır. Gönül rahatlığıyla kullanabilirsiniz.

İlgili haber özelliğiyle merak ettiğiniz, kafanıza takılan bir sorun olduğunda yorum alanından veya iletişim bölümünden irtibata geçebilirsiniz.