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ılarDiğer Yazılarım