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

    VALORANT Satın Alma Geçmişi Nasıl Kullanılır?

    VALORANT satın alma geçmişi, oyuncuların yaptığı satın alım işlemlerini gösteren bir sistemdir. Bu veriler sayesinde satın alınan ürün ve hizmetlere hızlıca ulaşılır.

    VALORANT İsim Değiştirme Nasıl Yapılır?

    VALORANT oyununda isim veya nick değiştirmek, oldukça kolaydır. Bunun için ilk olarak nick belirlenmeli ve isim değişikliği bağlantısından gerekli alanlar doldurulmalıdır.

    Instagram Fotoğrafları Nasıl İndirilir?

    Instagram'dan fotoğraf indirmek için birçok farklı yöntem vardır. Bunun için uygulamalar kullanılabileceği gibi web tabanlı platformlar da tercih edilebilir.

    QR Kod Nasıl Oluşturulur?

    QR kod, oluşturulması son derece kolay olan bir tür barkoddur. Farklı yöntemlerle oluşturulan QR kod ile istenilen bilgiler, kullanıcılara kolaylıkla iletilir.

    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