R10.NET Uygulamaları
Kullanıcılar
Yükleniyor, lütfen bekleyiniz..

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

    WordPress için eklentisiz ve tüy kadar hafif kendi paylaşım butonlarınızı oluşturun.

    bilimokur
    bilimokur R10 Editörü
    13.04.2022 23:53 1008 3 dk okuma süresi
    WordPress Eklentisiz Sosyal Paylaşım Butonları Nasıl Yapılır?
    Son Düzenleme:

    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!

    İçeriği Puanla
    Yorumlar

    Yorumunuz minimum 10 karakter olmalıdır.

    Tüm Yorumlar
    Toplam 3 Yorum

    İlgili İçerikler:

    WhatsApp Yenilikleri Devam Ediyor: Yüksek Kaliteli Fotoğraf ve Video Paylaşımı Kolaylaşacak!

    WhatsApp artık fotoğraf ve video paylaşımlarınızı varsayılan olarak yüksek kalitede yapmanıza olanak tanıyor.

    Threads ve Instagram Algoritması Değişiyor: Siyasi Paylaşımları Öne Çıkarmayacak!

    Instagram ve Threads, siyasi içerikleri sınırlayarak kullanıcı deneyimini yeniden şekillendiriyor; daha geniş içerik yelpazesi sunuyor.

    Disney+, Şifre Paylaşımını Engellemeye Başladı: İşte Detaylar!

    Disney+'ın hesap paylaşımını kısıtlama planları bir süredir gündemdeydi. Şimdi platform, ABD'deki kullanıcılarına bu konuda uyarı mesajları yollamaya başladı.

    WhatsApp’a Çok Hızlı Dosya Paylaşım Özelliği Geliyor: İşte Detaylar!

    WhatsApp, Bluetooth üzerinden 2 GB'a kadar dosya paylaşımı sağlayan yeni bir özelliği ile iOS ve Android arasında kolaylık sunuyor.

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

    Size daha iyi hizmet sunabilmek
    için çerezleri kullanıyoruz.

    Çerez Politikası Kabul Et