Özel Sosyal Paylaşım Simgeleri ile WordPress Hız Optimizasyonu

Kolay bir görev gibi görünebilir, ancak bir WordPress sitesine iyi davranış gösteren sosyal paylaşım düğmelerinin eklenmesi zor olabilir. İyi davranışlar derken, basit, hafif, kaynak dostu, hızlı - demek istediğim, çoğu sosyal paylaşım eklentisi böyle değil. Deli gibi kaynakları tüketme eğilimindedirler ve neden birileri sadece bazı ikonları göstermek için eklenti yükleme süresini% 25-35 artırmak istiyor? kendi sitesinde?

İyi haber şu ki, bu görevi gerçekleştirmek için mutlaka bir eklentiye ihtiyacınız yok. Bu derste, size nasıl kolayca yapabileceğinizi göstereceğim. özel sosyal paylaşım düğmeleri ekle WordPress sitenizdeki yayınların sonuna sadece birkaç kod satırı.

1. Adım: Sosyal Paylaşım Düğmelerini Oluşturun

Paylaşım ikonlarını oluşturmak için kullanışlı ve kullanımı kolay bir web aracı olan Simple Sharing Buttons Generator'ı kullanacağız. Bu uygulamanın temel avantajı, ürettiği düğmelerin ön uçta çalışmasıdır. sunucunuzu zorlamazlar Ayrıca, kullanıcılarınızın etkinliklerini gizli tutabilirsiniz..

Özel düğmelerinizi oluşturmak için buraya gidin ve Başla. 6 farklı düğme stilinden 1'i seçin. Click Sonraki ve işaretleyin sosyal ağlar sitenize eklemek istiyorum. İşiniz bittiğinde, web sitenizin bilgilerini doldurmanız gerekecektir..

Bu ekranda (aşağıda) iki seçenek bulacaksınız: 'JavaScript yok' ve 'JavaScript'. kene JavaScript, tarayıcının URL’yi dinamik olarak algılamasını sağlayacağından, ziyaretçileriniz her girişi yalnızca ana sayfanın URL’sini değil ayrı ayrı paylaşabileceklerdir..

Sonunda canlı önizlemeye bir göz atın, seçilen simge setini indirin ve oluşturduğunuz kodu alın.

2. Adım: Bir Çocuk Teması Oluşturun

Artık oluşturulan simgeleri ve kodu sitenize eklemeniz gerekecek. Her şeyden önce bir çocuk teması oluşturmanız gerekecek.

Öğreticimizin yardımıyla bir WP alt temasını kolayca oluşturabilir veya bu WP Kodeksi makalesinin adımlarını takip edebilirsiniz. Zaten bir tane varsa, 3. Adıma atlayabilirsiniz..

Çocuk teması, şu anda kullandığınız temayla ilgilidir - bir çocuğun ailesiyle ilgili olarak aynı şekilde. O her şeyi (stil ve işlevsellik) ana temadan devralır ama sen yapabilirsin ekstra işlevsellik ekleyin ona.

Bizim durumumuzda ekstra işlevsellik özel sosyal paylaşım düğmeleri olacak.

Adım 3: Simgeleri Gösteren Özel Bir İşlev Oluşturma

Alt temanın functions.php dosyasına özel bir işlev ekleyeceğiz..

Bu fonksiyonun yardımıyla, özel bir eylem kancası kullanarak sitenizde istediğiniz yere sosyal simgeleri ekleyebilirsiniz. Alt temanızda henüz bir function.php dosyası yoksa, alt temanızın kök klasöründe ad işlevleriyle boş bir metin dosyası oluşturun ve uzantısını .php olarak değiştirin.

Aşağıdaki kod satırını bu boş dosyaya ekleyin:

 
Senin ne zaman functions.php dosya ayarlanmış, aşağıdaki kod parçacığını ekleyin:
 
 / * * Özel sosyal paylaşım simgelerini ekler * / function add_social_sharing () ?> 
Bu gönderiyi paylaş
   
En sonunda HTML yorumu satırını silmek Yukarıdaki kod pasajından ve HTML koduyla değiştirin Sosyal Paylaşım Düğmeleri Jeneratörü ile 1. Adımda oluşturdunuz.
 
Adım 4: Uygun Şablon Dosyasını Alt Tema Klasörüne Kopyalayın
 
Varsayılan olarak, tek gönderiler adlı bir şablon dosyası tarafından yönetilir. single.php. Bazen - özellikle daha modern temalarda - single.php ek şablon dosyaları da yüklediğinden daha karmaşıktır. Bu adımda, daha sonra simgeleri ekleyebileceğimiz uygun şablon dosyasını bulmamız gerekiyor..
 
Sosyal düğmeler için doğru noktayı bulmak için bu şablon dosyasını bulmamız gerekir. Tek mesajların içeriğini yükleyen işlevi içerir.
 
Tema düzenleyicisini, altındaki WordPress admin panelinde açalım. Görünüm> Editör. Sağ üst köşede, ana temanızı seçebileceğiniz bir açılır liste bulacaksınız. Açılır listenin altında, ana temanızın içerdiği tüm şablon dosyalarını görebilirsiniz. Bulana kadar aşağı kaydırın. Tek Gönderi şablonu (single.php denir) ve açın.
 
Ana tema get_template_part () WP işlevi single.php Tek gönderinin içeriğini yüklemek için ek bir şablon dosyası kullandığı anlamına gelir.
 
İlk önce bunun hangisi olduğunu bulmalısınız. Ek şablon dosyasının adı, listenin ilk parametresidir. get_template_part () fonksiyon.
 
İçinde Yirmi Onbeş şuna benziyor:
 
get_template_part ('content', get_post_format ());
 
İlk parametre 'Content' bu, adlandırılan şablon dosyasını aradığımız anlamına gelir content.php. Bu dosyayı, değiştirmek için üst tema kök klasöründen alt tema kök klasörüne kopyalamanız gerekir..
 
 
Adım 5: Eylem Kancasını Sağ Şablon Dosyasına Ekleyin
 
Adlı bir fonksiyon yarattık add_social_sharing () 3. Adımda, adı verilen özel bir işlem kancasına taktık. custom_social_share. Şimdi bu kancayı, işlevin yürütülmesini istediğimiz noktaya eklemek zorunda kalacağız..
 
Doğru yere eklemeniz gereken kod pasajı:
 
 
Sonra doğru yeri bulalım.
 
4. adımda alt temanıza eklediğiniz şablon dosyasını bir kod düzenleyicide veya WordPress yönetici panosunun tema düzenleyicisinde açın ve içerik() fonksiyon.
 
Olup olmadığını kontrol edin wp_link_pages () hemen sonra işlev içerik() işlevi. Varsa, yukarıdaki kod pasajı bundan sonra gelir; Aksi takdirde içerik() fonksiyon.
 
 
Adım 6: CSS Kodunu Alt Temaya Ekleyin
 
Aç style.css alt tema düzenleyicinizdeki dosyayı, kod editörünüzde veya WordPress yönetici panosunun tema editöründe, 1. Adımda oluşturduğunuz CSS kodunu kopyalayın, dosyayı sonuna yapıştırın ve kaydedin..
 
 
Sosyal paylaşım simgelerinin her bir temada doğru şekilde görüntülenmesini sağlamak için CSS dosyasına iki ekstra satır ekleyeceğiz. Aşağıdaki kod parçasını kopyalayıp sonuna kadar yapıştırın. style.css dosya:
 
 ul.share-buttons li a kenarlık: 0;  ul.share düğmeleri li img görüntüleme: satır içi;  
 
Adım 7: Sosyal Medya Icon Setini Sunucuya Yükleyin
 
1. Adımda indirdiğiniz seçilen sosyal medya simge setini alt tema klasörünüze yükleyin. Sunucunuzu FTP üzerinden bağlayın, adlı yeni bir klasör oluşturun. Görüntüler alt tema klasörünün kök dizinine (/ wp-content / themes / senin-çocuğun-teması / resimler) ve buraya yerleştirdiğin simgeyi buraya yükle.
 
Klasörü adlandırırız Görüntüler çünkü bu, Basit Paylaşım Düğmeleri Jeneratörünün kullandığı resim klasörünün varsayılan adıdır..
 
Adım 8: İkon Dosyalarının Yolunu Kontrol Edin
 
Sosyal medya simgelerini Sunucunuza 7. Adımda yükledikten sonra, yükleneceklerinden emin olmak için simge dosyalarının yolunu kontrol etmek önemlidir..
 
Bir görüntü dosyasının yolu, tarayıcıya sunucudaki konumu hakkında bir ipucu verir. İçindeki görüntü yollarını kontrol edelim functions.php alt tema dosyası. Dosyayı kod editörünüzde açın ve add_social_sharing () Simple Sharing Buttons Generator ile oluşturduğunuz HTML kodunu kontrol etmeniz gereken işlev.
 
HTML kodunda bir  ile etiketle src Her simge için öznitelik. Her olup olmadığını kontrol edin src Öznitelikler, simge kümenizin 7. Adım'da yüklendiği yeri gösterir..
 
Basit Paylaşım Düğmeleri Jeneratör, göreceli yolları ekler.  Dosyalar. Ara sıra göreceli bir yol kullanırsanız tarayıcılar görüntüleri oluşturamaz, bu yüzden bu iyi bir fikir mutlak yollar kullan. Bu sayede ziyaretçileriniz tarafından potansiyel olarak kullanılan her tarayıcı, gerekli simge dosyalarının konumundan emin olabilir..
 
Jeneratör tarafından eklenen göreceli görüntü yolu şuna benzer:
 
 
Hadi değiştirelim src Her bir simgenin mutlak bir yola atfedilmesi, dosyanın tam URL'sini içereceği anlamına gelir.
 
Yukarıdaki URL yolu şöyle görünecek:
 
 
Adım 9: Değiştirilmiş Dosyaları Yükleyin ve Çocuk Temasını Etkinleştirin
 
Sunucunuzu FTP üzerinden bağlayın ve bu eğiticide henüz oluşturmamış olduğunuz tüm dosyaları yükleyin: functions.php,  style.css, ve uygun şablon dosyası (bu rehberde single.php ya da content.php).
 
Sonunda Alt tema WP admin kontrol panelinde alt tema aktive Görünüm> Temalar Menü.
 
Artık süper hafif, kaynak tasarruflu, kişiselleştirilmiş sosyal paylaşım simgelerinize hazırsınız. Çevrimiçi olabilir ve sitenizde canlı olarak kontrol edebilirsiniz.
 
 
Sonuç
 
Bu derste size özel sosyal paylaşım düğmelerini tekil mesajların sonuna nasıl ekleyebileceğinizi gösterdim. Oluşturduğumuz eylem kancası yardımıyla, paylaşım simgelerini web sitenizdeki diğer konumlara ekleyebilirsiniz..
 
Düğmelerin görüntülenmesini istediğiniz noktaya 5. Adımda kullandığımız kodu eklemeniz yeterlidir:
 
 
Simgeleri başka bir yere yerleştirmek istiyorsanız doğru şablon dosyasını da bulmanız gerekir. Tek sayfalar, adı verilen bir şablon dosyası tarafından yönetilir. page.php, görüntüler gibi medya ekleri attachment.php.
 
Sosyal paylaşım düğmelerini web sitenizde farklı bir noktada görüntülemek isterseniz, bulmak için WordPress Şablon Hiyerarşisini kullanabilirsiniz..
 
Kaynak İndir