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 13.04.2022 23:53 239 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:

    Samsung Galaxy Unpacked 2022 Etkinliği Nasıl İzlenir?

    Samsung'un Ağustos'ta düzenleneceği açıklanan "Samsung Galaxy Unpacked" etkinliğine dair detaylar belli oldu. Galaxy Z Flip 4 ve Galaxy Z Fold 4 gibi modellerin tanıtılacağı etkinlik nasıl izlenir?

    iPhone DNS Ayarları Nasıl Değiştirilir?

    iPhone'ndaki DNS ayarları değiştirilebilmektedir. Bu şekilde, Safari'yi ve internet kullanan diğer iPhone uygulamaları önemli ölçüde hızlanmaktadır.

    KOSGEB Teşvikleri Nasıl Kullanılır?

    Türkiye’deki küçük ve orta ölçekli işletmelerin ekonomideki yerini ve işlevini artırmak, onlara rekabet şansı sağlamak ve sanayide bütünleşmeyi ekonomik gelişmelere uygun olarak gerçekleştirmek amacıyla kurulmuş kamu kurumudur.

    Sosyal Medya Platformları İçin İlginç Çevre Raporu Açıklandı! İşte Çevreyi Kirleten Platformlar!

    Bir pazarlama şirketi tarafından sosyal ağlara yönelik olarak "karbon ayak izi" araştırması yapıldı. Dünyanın en çok kullanılan ilk 10 sosyal ağı üzerinde yapılan araştırmanın sonuçları sosyal medyanın küresel ısınmaya katkı sağladığını gösteriyor.

    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