Ana Sayfa WordPress Eklenti Yazılarınıza Ekleyebileceğiniz WordPress İlgili Kartı Eklentisi Yapımı

Yazılarınıza Ekleyebileceğiniz WordPress İlgili Kartı Eklentisi Yapımı

Yazar:
Oğulcan Özügenç
-
16
Yazılarınıza Ekleyebileceğiniz WordPress İlgili Kartı Eklentisi Yapımı

Merhabalar. Elektrik ve Elektronik Mühendisi olduğumdan bazı yazılım dillerine hakimiyetim sebebiyle kendi kendime WordPress eklentisi yapmaya karar verdim. Hazır kullandığım binlerce satırlık hantal eklenti istediğim gibi çalışmıyordu ve boş yere sitemi yoruyordu. Bu yüzden en doğrusu kendim yapmak diyerek sıfırdan yaptım. PHP diliyle yazdığım bu koddan gurur duymuyorum. Sonuçta yazılımcı değilim ama yine de bu yazdığım beni tatmin etti ve mutlu oldum.

Yaptığım ilgili kartı eklentisinin nasıl çalıştığını hemen altta görebilirsiniz. Örnek göstermişken aşağıdaki yazımı da okumanızı tavsiye ederim.

İlgili Kartı Eklentisi Nasıl Çalışıyor?

Yaptığım ilgili kart eklentisi yazılar içine ekleyeceğimiz Shortcode ile çalışıyor. Shortcode’un ne olduğuna resmi WordPress sayfasındaki bu yazıdan ulaşabilirsiniz. Yazı içerisindeyken sadece ilgili yazının link bilgisini yazarak yazıyla ilgili tüm detayları getirebiliyor ve ilgili kart şeklinde çalıştırabiliyoruz. Link bilgisinden otomatik olarak yazının ana görsel adresi, yazının başlığı ve yazının kendi adresi gibi bilgiler WordPress’in içinden çekiliyor. Ayrıca ilgili kartı eklentim mobil tasarımlarla da uyumlu çalışmakta. Sayfayı küçülterek görebilirsiniz.

İlgili Kartı Eklentisinin Yazı İçinde Kullanımı

İlgili kart eklentimi yazılarınız içinde aşağıdaki şekilde kullanabilirsiniz. Okuyucuları yönlendirmek istediğiniz yazının sadece link bilgisini girmeniz gerekiyor. Bu bilgiyi de aşağıda örnek olarak gösterdiğim link yerine yazabilirsiniz.

[ilgilikarti2 perma="https://ogulcanozugenc.com/bastan-sona-vps-virtual-private-server-kurulumu/"]

İlgili Kartı Eklentisinin PHP Kodu

Hazırladığım eklentinin PHP kodunu aşağıda görebilirsiniz.

<?php
/*
Plugin Name: İlgili Kartı Eklentisi Oğulcan Özügenç
Plugin URI: https://ogulcanozugenc.com/
Description: Basit, kullanımı kolay ve hızlı bir ilgili kartı eklentisi.	
Author: Oğulcan Özügenç
Author URI: https://ogulcanozugenc.com/
Text Domain: ilgili-karti-ogulcan-ozugenc
Domain Path: /languages/
Version: 1.0
*/

add_action('wp_enqueue_scripts', 'ilgili_karti_includes');
function ilgili_karti_includes() {
    wp_register_style( 'ilgili-karti-ogulcan-ozugenc-css', plugins_url('includes/css/style.css',__FILE__ ));
    wp_enqueue_style( 'ilgili-karti-ogulcan-ozugenc-css' );
}

function ilgilikarti2($atts)
	{
  
  $id = $atts['id'];
  $perma = $atts['perma'];
  
	$id2 = url_to_postid($perma);
	if ($id2 > 0)
		{
		$id = $id2;
		}

	$baslik = get_the_title($id);
	$url = get_permalink($id);
	$img = wp_get_attachment_url(get_post_thumbnail_id($id));
  
  $out = "<html><body><div class=\"ilgili_karti\"><div class=\"ilgili_karti_gorsel\"><a href=\"$url\" target=\"_blank\"><img class=\"img\" src=\"$img\" /></a></div><div class=\"ilgili_karti_kategori\"><a>İLGİLİ YAZI</a></div><div class=\"ilgili_karti_baslik\"><a href=\"$url\" target=\"_blank\">$baslik</a></div></div></body></html>";
  
  return $out;
	}

add_shortcode('ilgilikarti2', 'ilgilikarti2');

İlgili Kartı Eklentisinin CSS Kodu

Hazırladığım eklentinin CSS kodunu aşağıda görebilirsiniz.

.ilgili_karti {
     margin-left: auto;
     margin-right: auto;
     max-width: 100%;
     margin-bottom: 20px;
     background-color: white;
     -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);
     -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);
     -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);
     -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);
     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);
     border: 0 solid;
     overflow: hidden;
     padding: 0;
}
 .ilgili_karti_gorsel .img {
     width: 260px;
     padding-right: 16px;
     margin-left: auto;
     margin-right: auto;
     height: auto;
     max-width: 100%;
     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;
     margin-bottom: 0px;
}
 .ilgili_karti_kategori a {
     font-size: 0.9em;
     padding-top: 8px;
     padding-bottom: 4px;
     display: table-cell;
     color: #999;
     font-family: "Open Sans";
     text-decoration: none !important;
}
 .ilgili_karti_kategori a:hover {
     color: #999;
     text-decoration: unset !important;
}
 .ilgili_karti_baslik {
     font-size: 1.2em;
     line-height: 1.5;
     color: #141412;
     font-weight: bold;
     margin: 0 15px 5px;
}
 .ilgili_karti_baslik a {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     -o-box-shadow: none;
     box-shadow: none;
     color: #141412;
     text-decoration: none !important;
}
 .ilgili_karti_gorsel a:focus {
     outline: none;
}

@media (max-width: 960px) {
     .ilgili_karti_gorsel .img {
         width: 100%;
         padding-right: 0;
    }
     .ilgili_karti_kategori a {
         padding-left: 16px;
         text-decoration: none !important;
    }
}

İlgili Kartı Eklentisi Kurulum ve İndirme Bağlantısı

Eklentiyi WordPress Admin / Eklentiler / Yeni Ekle kısmından “Eklenti Yükle” butonuna basarak direk .zip dosyasını upload ederek kurabilirsiniz. Kullanımını da yukarıda anlatmıştım zaten. Kolay gelsin 🙂

5/5 - (11 votes)

İlgili Yazılar

16 Yorum

  1. Merhabalar,

    Öncelikle ellerinize sağlık. Tasarım çok güzel olmuş. Çoğu ücretli içerikten çok daha güzel gözüküyor. Ancak anladığım kadarıyla responsive olarak mobil cihazlara uyumlu değil. Mobil cihazlarda görselin çeyreği gözüküyor ve başka bir şey yok. Bu konuda yapabileceğimiz bir şey var mıdır? Yardımcı olabilirseniz çok sevinirim.

  2. bu karta yazının özetini nasıl çekicez. $excerpt = get_the_excerpt($id); ile çekmeye çalıştım out kısmını da düzenledim ama ilgili başlığın içeriğini değil hangi sayfaya koyarsam onun içeriğini çekiyor

    • hallettim teşekkürler ancak resimin webtekno’daki gibi kare olmasını istiyorum nasıl yapabilirim

  5. hocam ben bunu siteye koydum çalıştı lakin biraz bozuk oldu. mesela resimin altından hemen çizgi çıkıyor ya sizin sitede benim sitede arada biraz beyaz boşluk var ondan sonra çıkıyor. ilgili yazı kısmında link varmış gibi oluyor falan ne yapabiliriz bu konuda?

CEVAP VER

Lütfen yorumunuzu yazın!
Lütfen buraya adınızı girin

© Copyright 2024 | Oğulcan Özügenç | I ♥ Google
Exit mobile version