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 ö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.
[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>İLGİLİ 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.
Denedim, kesinlikle mükemmel çalışıyor. CSS tecrübesi olan arkadaşlar görünümü özelleştirme konusunda çok şanslılar 😀
yorumunuz için teşekkür ederim. her temada sorunsuz olarak çalışmaktadır.
Kodları başka bir temada tekrar deneyebilir misiniz? Sorun alan arkadaşlar acaba yapamadıklarından dolayımı hata alıyor yoksa kodlardan sorun var anlaşılır.
Böyle bir sonuç ile karşılaştım. güzel olmadı. css kodları çalışmıyor galiba. nasıl çözebilirim?
https://i.hizliresim.com/WGEOlP.png
sitenizde hangi konuya eklediyseniz o konunun linkini atın bir bakayım.
Tarayıcı ön bellekleme eğer açıkça mevcut tarayıcın da hala eski css dosyaların vardır. Ctrl + f5 yap düzelir. Bende de aynı sorun oldu. Şuan sen sadece öyle görüyorsun. Gizli sekmeden gir düzgün hali görünecektir.
Valla on numara oldu, koduna sağlık kardeşim :)) Sadece resim bottomda sıkıntı vardı, 140px yaptım düzeldi
sitenize baktım çok şık durmuş. ne demek yorum yazdığınız için ben teşekkür ederim. resim boyutlarını diğer arkadaşlarda o şekilde kendine göre ayarlayabilir.
ellerinize sağlık. çok yararlı ve güzel bir konuya değinmişsiniz. bu tarz paylaşımlarınızın devamı gelir inşallah. 🙂
Merhaba bu özellik çok ilgimi çekti ancak ben yapamadım. Bir kaç sorunum var. Umarım yardımcı olursunuz ayrıca konuya katkı sağlar umarım bu yorum.
1- php kodunu ?> kodundna önce ekleyin demişsiniz. Function.php dosyası içinde 5 tane “?>” bu koddan var. Ben en aşağıdakinin hemen önüne ekledim doğru mu ?
2- style.css dosyasına ilgili kodu dosyanın en altına yapıştırdım.
3- Post id sizin anlattığınız gibi mause ile üzerien gelince çıkmıyor bende. Mause ile üzerine gelince bir şey göremiyorum.
Bende konuyu düzenlemeye girdiğimde admin panelindeyken düzenleme modunda url adres yerinde post id görüyorum. Bu şekidle yaptım kodu ekledim. Ancak konuyu yayınladığım da kod olduğu gibi yazıda göründü yani çalışmadı.
dilerseniz iletisim@volbiex.com adresine veya volbiex@gmail.com adresine functions.php ve style.css dosyalarınızı yollayın kontrol edelim. onun dışında wordpress admin panelinden tüm yazılara tıklayıp, yazının üzerine mouse ile geldiğinizde id kodunun gözükmesi gerekiyor.
Selamlar dediğinizi yaptım fakat bir içerikte ilgili yazılar verince resim kocaman çıkarak ekranı kapladı 🙁
normalde resimde herhangi bir bozukluk oluşmaz fakat site adresinizi yazarsanız ne yapmanız gerektiğini açıklayabilirim.
Hocam yorum yaparken website kısmında belirttim siteyi. sosyalcalisan
herhangi bir yazınızda kullanıp bana yazının ismini belirtin inceleyeyim.
Hocam yaptım çok güzel oldu emeğinize sağlık. Bir sorum olacak bende 1500 ü aşkın içerik var tüm içeriğin içerisine makalelerin içerisine benzer anahtar kelime bazlı toplu şekilde nasıl uygulayabiliriz ? Mesela sağlık ile ilgili bir makalenin içine başlığı sağlık olan başka bir makaleyi ilgili yazı olarak otomatik ekletebilir miyiz bir sefere mahsus şeklinde ?
vakit ayırıp yorum yazdığınız için teşekkür ediyorum. Anlattığınız modifikasyon için biraz uğraşmak gerekiyor. Vaktim kısıtlı olduğu için bu konuda yardımcı olamayacağım. Yalnız dediğinizi yapan wordpress eklentileri mutlaka vardır. Tabi eklenti kullanmak ister misiniz orası muamma.
Hocam merhaba, dediğiniz şekilde functions.php ye kodları ekledim lakin sitem hata verdi. Erişim gitti, ftp den tekrar kodları kaldırmam gerekti. functions kısmınde ioncube loader yüklü ondan mıdır nasıl çözebilirim?
bunun için ek functions.php dosyanız yok mu ? eğer varsa ona ekleyip deneyin. yoksa temanızı satın aldığınız arkadaşa müracaat edin oluştursun.
Varmış hocam dediğiniz gibi ben dikkat etmemişim teşekkürler
Hocam düzelttim sorunu lakin mobilde pek hoş bir görüntü olmadı.
sitenizde herhangi bir konuda özelliği kullanın. bana konunun adını söyleyin inceleyip yardımcı olayım.
Hocam resim bir garip durdu diğer kısımlarda sorun yok.
eklediğiniz css kodlarında .ilgili_karti_gorsel .img { kodu altında bulunan height: 130px; değerini silin. düzelecektir.
hocam gerekli kodları yapıp haberi koydum daha sonra önizleme yaptığımda ilgili haberin böyle gözüktüğünü gördüm. bunu nasıl düzeltebiliriz?
https://i.hizliresim.com/Ooqa1A.jpg
pre tagı içinde neden kullanıyorsunuz ? bunları sildiğinde özüne dönüyor. eğer bu sistemi stabil bir şekilde kullanamazsanız wordpress embed özelliğini kullanabilirsiniz. Yazı içerisine paylaşmak istediğiniz konunun linkini direk yapıştırın.
hocam hiç farketmemişim pre tagını. ben direkt görsel editörün içerisine [affiliate_news2 id=”4317″] bu kodu girip güncellemiştim fakat metin olarak incelediğimde kullandığım kodun pre içerisine alındığını gördüm. teşekkürler. şu an muhteşem gözüküyor.
rica ederim güle güle kullanın bol hitli günler 🙂
selamlar değerli yazınız için teşekkür ederim. dediklerinizi uyguladım ve ilgili yazılar vermeye başladım. fakat bende gölgelendirme resmin hemen ardından olmuyor araya beyaz bir boşluk giriyor ve ilgili yazının altı çizik oluyor. sizce bunu düzeltmek için nasıl bir değişiklik yapmalıyım? https://i.hizliresim.com/G92QBb.jpg
özelliği kullandığınız bir yazınızın linkini paylaşın yardımcı olalım.
bu sayfada kullandım hocam sanıyorum ki resim fazla büyümüyor.
sitenizi inceledim fakat gerekli css kodlarını doğru dosyaya eklediğinize emin misiniz? çünkü css kodlarını çekmediğinden özellik görünmüyor.
eminim hocam style.css dosyasının tam en sonuna ekledim. düzenleyici işlemini kullanarak.
cache eklentisi kullanıyorsanız. kalıntıları silin. birde öyle göz atın. eğer yine olmazsa kodları yanlış dosyaya ekliyorsunuz demektir. kodları doğru dosyaya ekliyorsanız %100 sonuç verir.
şu an bende farkettim hocam cacheden ilgili sayfayı yeniledim gizli sekmeden daha düzgün gözüküyor ama boşluklar halen var.
css dosyanızda (.td-post-content img, .wpb_text_column img, .td_block_text_with_title img, .woocommerce #tab-description img, .mce-content-body img) kodunu bulup >> (margin-bottom: 21px;) olan koddaki 21 değerini 0 yapın.
dediklerinizi yapınca düzeldi. çok sağolun sizin gibi yardımsever insanlar pek bulunmuyor teşekkür ederim iyi geceler dilerim
estağfurullah ne demek. hayırlı geceler.
Hocam selamlar, aylardır sizin sayenizde bu muhteşem sistemi sitemde kullanıyorum ve gerçekten çok hoş gözüküyor. Yalnız şöyle bir durum farkettim. İlgili haberi payaştığımız haber başlığı biraz uzun olunca başlık resimi geçiyor ve resimin altında beyaz bir boşluk kalıyor. Bu durumla ilgili bir şey yapılabilir mi yazı boyutunu küçültmek gibi.
rica ederim. işinize yaramasına sevindim. sorun yaşadığınız linki buradan paylaşabilirseniz yardımcı olurum.
websitesi kısmında örnek linki yolladım hocam. hem normal hem de uzun halini inceleyebilirsiniz.
css dosyanızda .ilgili_karti_baslik { kodunu bulup /* line-height: 1.5; */ ve /* margin: 10px 15px 7px; */ değerlerini silin.
teşekkür ederim hocam ilgilendiğiniz için. fakat dediğiniz değişiklikleri yaptım. önbellek ve cache temizleme işlemi yaptım ctrl + f5 ve gizli sekmede bakmama rağmen bir değişiklik olmadığı gözüküyor.
işlemleri kontrol edip tekrar cache temizleyin. kodları sildiğinizde herhangi bir problem olmaması lazım.
eminim hocam. gerçi benim cache sistemi pek stabil değil style.css dosyasındaki değişiklikleri siteye geç yansıtıyor birkaç gün buluyor zaman zaman. herhalde birkaç gün içinde yapılan değişiklikler gözükür.
hocam bunu blogger bir siteye entegre edemezmiyiz, ya da blogger için bu eklentiden varmıdır başka?
blogger hiç denemedim. araştırıp kısa bir süre sonra bilgi verebilirim.