WordPress Eklentisiz Sosyal Medya Paylaş Butonu Ekleme
WordPress site sahipleri için hazırladığımız rehberlere devam ediyoruz. Bu yazımızda ile WordPress sitenize sosyal medya siteleri için paylaş butonları eklemeyi anlatacağız. Bir önceki yazımızda WordPress Eklentisiz Sosyal Medya Butonları eklemeyi göstermiştik.
Yapacağımız işlem bir önceki yazımızda anlattığımız gibi oldukça kolay. Hiçbir eklenti kullanmadan sadece basit birkaç HTML/CSS kodu ile ve temanızın functuion.php dosyasına birkaç küçük kod ekleyeceğiz. Kodları size zaten hazır olarak aşağıda vereceğim.
Sitenize paylaş butonlarını birçok farklı eklenti ile ekleyebilirsiniz. Fakat böylesine kolay bir işlem için eklenti yüklemektense tema dosyanıza bir kaç küçük kod eklemek;
- Sitenizin daha hızlı açılmasına (çağırılan dosya sayısı azalacağı için)
- Veritabanından daha az sorgu yapılmasına
- Eklentilerden kaynaklanabilecek bazı güvenlik açıklarını engellemenize
imkan sağlayacaktır.
Güvenlik ve hız demişken eğer henüz okumadıysanız WordPress Güvenlik Önlemleri ve WordPress Site Hızlandırma Yöntemleri yazılarımızı mutlaka okumanızı okumanızı tavsiye ederiz.
WordPress Site Hızlandırma ile ilgili Diğer Yazılarımız (Yeni Sekmede Açılır)
- WordPress Site Hızlandırma Yöntemleri
- WordPress AMP Kurulumu
- WordPress Eklentisiz Sosyal Medya Butonları Eklemek
- WordPress Eklentisiz Sosyal Medya Paylaş Butonları Eklemek
- WordPress Yazıları Sayfalara Bölmek
- WordPress Tema Seçimi
Mutlaka Okumalısınız (Yeni Sekmede Açılır)
- Detaylı WordPress Site İçi SEO Teknikleri – WordPress On Page SEO İpuçları
- WordPress En İyi SEO Eklentisi
- WordPress Güvenlik Önlemleri
Hazırladığımız butonlar için herhangi bir görsel kullanmayacağız ve butonları CSS ile oluşturacağız. Hazırladığımız butonlar mobil cihazlarla uyumlu olacak. Ayrıca sayfamızı ziyaret eden mobil ziyaretçiler Whatsapp paylaşım butonu da görünecek.
Eklediğimiz butonlar yukarıdaki gibi gözükecek. Mobil cihaz kullanıcıları ek olarak Whatsapp paylaş butonunu da görecekler. CSS üzerinden kendi istediğiniz gibi değişiklikler yaparak farklı butonlar üretebilirsiniz. Sitemizde de şu anda kullandığımız butonları yazının en alt kısmında görebilirsiniz.
Anlatıma başlamadan önce önemli bir hatırlatma yapmakta fayda var. Temanızda değişiklik yapmadan önce temanızın ve sitenizin yedeklerini almanızı tavsiye ederiz.
Not: Eğer sizde sitenizde yazı içine kodlar eklemek istiyorsanız WordPress Yazı İçine Kod Ekleme yazımızı okuyabilirsiniz.
Öncelikle CSS kodlarımızı sizlerle paylaşalım. Ben tüm etiketlerin başında “ogrenio” kelimesini kullandım fakat bu kısmı istediğiniz gibi değiştirebilirsiniz. Değiştirirken dikkat etmeniz gereken nokta ise hem Function.php hem de CSS kodlarının hepsinde bu kısmı değiştirmenizdir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | @media screen and (min-width: 1024px) { .ogrenio-whatsapp { display: none !important; } } .ogrenio-link { padding: 2px 8px 4px 8px !important; color: white; font-size: 12px; border-radius: 2px; margin-right: 2px; cursor: pointer; -moz-background-clip: padding; -webkit-background-clip: padding-box; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); margin-top: 2px; display: inline-block; text-decoration: none; } .ogrenio-link:hover,.ogrenio-link:active { color: white; } .ogrenio-twitter { background: #00aced; } .ogrenio-twitter:hover,.ogrenio-twitter:active { background: #0084b4; } .ogrenio-facebook { background: #3B5997; } .ogrenio-facebook:hover,.ogrenio-facebook:active { background: #2d4372; } .ogrenio-googleplus { background: #D64937; } .ogrenio-googleplus:hover,.ogrenio-googleplus:active { background: #b53525; } .ogrenio-whatsapp { background: #43d854; } .ogrenio-whatsapp:hover,.ogrenio-whatsapp:active { background: #009688; } .ogrenio-social { margin: 20px 0px 25px 0px; -webkit-font-smoothing: antialiased; font-size: 12px; } |
Bu CSS dosyasını temanıza ait style.css dosyasına eklemelisiniz.
Temanıza ait function.php dosyasına ise aşağıdaki kodları eklemelisiniz. Bu kodlar sayesinde paylaş butonları yazıların ve sayfaların altında çıkacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | function ogrenio_social_sharing_buttons($content) { global $post; if(is_singular() || is_home()){ // Get current page URL $ogrenioURL = urlencode(get_permalink()); // Get current page title $ogrenioTitle = str_replace( ' ', '%20', get_the_title()); // Construct sharing URL without using any script $twitterURL = 'https://twitter.com/intent/tweet?text='.$ogrenioTitle.'&url='.$ogrenioURL.'&via=ogrenio'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$ogrenioURL; $googleURL = 'https://plus.google.com/share?url='.$ogrenioURL; $whatsappURL = 'whatsapp://send?text='.$ogrenioTitle . ' ' . $ogrenioURL; // Add sharing button at the end of page/page content $content .= '<div class="ogrenio-social">'; $content .= '<h5>Paylas</h5> <a class="ogrenio-link cogrenio-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>'; $content .= '<a class="ogrenio-link ogrenio-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>'; $content .= '<a class="ogrenio-link ogrenio-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>'; $content .= '<a class="ogrenio-link ogrenio-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>'; $content .= '</div>'; return $content; }else{ // if not a post/page then don't include sharing button return $content; } }; add_filter( 'the_content', 'ogrenio_social_sharing_buttons'); |
Dosyalarınızı düzenledikten sonra Paylaş butonunun yazılarınızın ve sayfalarınızın sonlarına eklendiğini göreceksiniz.
Takıldığınız veya danışmak istediğiniz kısımlar için yorum yapabilirsiniz. WordPress için hazırladığımız diğer rehberleri okumak için WordPress sayfamızı ziyaret edebilirsiniz.
Yapacağınız değişiklerden kaynaklanacak problemlerden ogrenio.com sorumlu değildir.
Kaynak: http://crunchify.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/
kodlarda bizim eklememiz gereken link vs var mı direk eklesek olur mu?
Merhaba,
Kodları direk eklemeniz yeterlidir. İyi çalışmalar.
kardeşim benim istediğim şu açılan pencere küçük bir pencere olmalı yeni sayfa vaya aynı sayfada açılmasını istemiyorum bununla alakalı bir çalışma varsa yardımı olursan sevinirim teşekkürler
Selam ,
Üstad öncelikle emeğinize sağlık,teşekkürler..
Kodları aynen ekledim lakin bende yazı şeklinde çıktı butonlar görünmüyor,yardımcı olursanız sevinirim..
İyi çalışmalar..
Site adresi: