WordPress Eklentisiz Sosyal Paylaşım Butonları Nasıl Yapılır?

Sosyal paylaşım butonları websitelerimizin olmazsa olmazından. Bunun için sayısız eklenti olsa da, kendi butonlarımızı eklentisiz yaparak hem sitemizi ekstra bir yükten kurtaracağız, hem de kendi stilimizi yansıtacak bir görünüm oluşturabileceğiz.

Sosyal paylaşım butonları nasıl eklenir?

Paylaşım butonları oluştururken küçük bir javascript kütüphanesi kullanacağız: Sharer.js

Öncelikle temamızın klasörü içerisine js adında yeni bir klasör oluşturalım. Daha sonra buradan indireceğimiz javascript dosyasını js klasör içerisine ekleyelim.

Eklediğimiz bu javascript dosyasını sitemizin etiketleri içerisinde göstermemiz gerekiyor. Bunun için wp_enqueue_script() fonksiyonunu kullanacağız. Bu fonksiyon sayesinde bütün javascript dosyalarını temanızın head kısmına ekleyebilirsiniz. Aşağıdaki kodu temanızın functions.php dosyasının en altına ekleyin.

add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_script( 'Sharer.js', get_template_directory_uri() . '/js/sharer.min.js', array( 'jquery' ), '1.0.0', true );
	}
);

Kodu ekledikten sonra sharer.min.js dosyasının sitenin kaynak kodunda olduğunu göreceksiniz. Fakat buraya ince bir detay eklemek isteyebilirsiniz. Eğer paylaşım butonlarını sadece içerik sayfasında kullanacaksanız, javascript dosyasını sitenin tamamına eklemek doğru değil. Bunun için yukarıdaki kodu aşağıdaki gibi değiştirebiliriz:

add_action(
	'wp_enqueue_scripts',
	function () {
		if ( is_singular( 'post' ) ) {
			wp_enqueue_script( 'Sharer.js', get_template_directory_uri() . '/js/sharer.min.js', array( 'jquery' ), '1.0.0', true );
		}
	}
);

Burada is_singular() fonksiyonunu kullanarak, içerik sayfası olup olmadığını kontrol ettik.

Javascript dosyasını eklediğimize göre şimdi sırada paylaşım butonlarını eklemek var. Bunun için javascript kütüphanesinin dökümantasyon sayfasına bakacağız. https://ellisonleao.github.io/sharer.js/

Ayrıca butonları göstermek için bir de kısa kod oluşturacağız. add_shortcode() fonksiyonu ile bir kısakod oluşturalım. Temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin:

add_shortcode(
	'r10_share',
	function () {
		$post_title = get_the_title();
		$post_link  = get_the_permalink();

		$res = '';

		// Twitter için button.
		$res .= 'Tweetle!';

		// Facebook için button.
		$res .= 'Facebook\'ta paylaş';

		// Linkedin için button.
		$res .= 'Linkedin\'de Paylaş';

		$res .= '';

		return $res;
	}
);

Artık [r10_share] kısakodunu kullanarak içeriklerimizde paylaşım butonlarını gösterebiliriz. Fakat her yazı için bu işlemi tekrarlamak pek kullanışlı olmaz. Bu yüzden otomatik olarak her yazının sonuna butonlarımızı ekletmemiz gerekiyor. Temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin:

add_filter(
	'the_content',
	function ( $content ) {
		if ( is_singular( 'post' ) ) {
			$content .= do_shortcode( '[r10_share]' );
		}

		return $content;
	}
);

Hepsi bu kadar! Şimdi de biraz stil verelim. Temanızın içerisine css adında yeni bir klasör oluşturup içerisine sharer.css diye bir CSS dosyası ekleyin. Aşağıdaki kodu da bu css dosyasının içerisine yerleştirin:

.r10-sbs {  margin-top: 30px;}.r10-sbs__btn {  display: inline-flex;  align-items: center;  justify-content: center;  margin-right: 15px;  padding: 10px 20px;  border: 0;  border-radius: 5px;  transition: 250ms;  color: #fff;}.r10-sbs__btn:last-child {  margin-right: 0;}.r10-sbs__btn:hover {  opacity: .8;}.r10-sbs__btn--facebook {  background-color: #1877f2;}.r10-sbs__btn--twitter {  background-color: #1da1f2;}.r10-sbs__btn--linkedin {  background-color: #0077b5;}

Şimdi de css dosyasını sitenin tagları arasında gösterelim. Temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin:

add_action(
	'wp_enqueue_scripts',
	function () {
		if ( is_singular( 'post' ) ) {
			wp_enqueue_style( 'Sharer.js', get_template_directory_uri() . '/css/sharer.css', array(), '1.0.0' );
		}
	}
);

İçerik sayfalarının sonuda buna benzer bir görüntü elde etmiş olacaksınız:

Artık kendi paylaşım butonlarınız yazılarınızı paylaşmaya hazır!