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 1043 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:

    EURO 2024 Hangi Kanalda? EURO 2024 Maçları Nasıl İzlenir?

    Almanya'nın ev sahipliğinde gerçekleşecek olan 17. Avrupa Futbol Şampiyonası (EURO 2024) bugün başlıyor. Futbolseverler, maçları hangi kanalda ve nasıl izleyebileceklerini merak ediyor. İşte EURO 2024 maçlarının yayın bilgileri ve izleme detayları.

    TRT 1 Neden Yok? TRT Nasıl Ayarlanır, TRT Yeni Frekansı Nedir?

    TRT 1 frekans bilgileri ve ayar detayları hakkında merak edilen tüm sorulara cevap veriyoruz. EURO 2024 maçlarını kesintisiz ve yüksek kalitede izlemek isteyenler için güncellenmiş frekans bilgilerini ve TRT 1'in nasıl ayarlanacağını adım adım açıklıyoruz

    Vodafone'dan Herkese 25 GB İnternet Hediyesi: Nasıl Alınır?

    Vodafone, 2024 Voleybol Milletler Ligi'ne özel, Vodafone Yanımda uygulaması üzerinden 25 GB internet hediye ediyor. Peki, hediye internet nasıl alınır?

    ChatGPT 4o Nasıl Kullanılır? İşte Detaylı Rehber!

    OpenAI'nin GPT 4o modeli, kullanımı kolay yapay zeka teknolojisiyle ses, metin ve görüntü analizi yaparak etkileşimi artırıyor. İşte GPT 4o kullanım adımları!

    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