GeneratePress'te Sosyal Paylaşım Butonları Nasıl Oluşturulur?

Bu eğitimde aşağıdakilere bakacağız: GeneratePress'te Sosyal Paylaşım Düğmeleri Nasıl Oluşturulur?

Bu şüphesiz blog gönderinizin kanallar arası tanıtımını geliştirmenize yardımcı olacaktır. Bu da web varlığınızı artıracaktır.

Size, blog girişlerinizin ön kısmında yer alan yapışkan sosyal paylaşım düğmelerini nasıl oluşturacağınızı göstereceğim. Yani her zaman hedef kitleniz tarafından görülebileceklerdir.

Bunu bir eklenti aracılığıyla başarabiliriz, ancak en iyi kısmı bunları manuel olarak oluşturmaktır. Bu şekilde sitenize JavaScript eklemekten (web sitesi performansını düşürür) kaçındığınızı bilirsiniz.

Bu ders, Elements modülünü kullanacağımız için GeneratePress premium'a sahip olmanızı gerektirir.

GeneratePress'te Eklenti Olmadan Sosyal Paylaşım Düğmeleri Oluşturun

GeneratePress temasında eklentiler olmadan sosyal paylaşım düğmeleri oluşturmak, SVG simgeleri hakkında bilgi sahibi olmanızı gerektirir.

SVG'ler Ölçeklenebilir Vektör Grafikleridir. W3C (World Wide Web Consortium) (World Wide Web Consortium) tarafından geliştirilen açık standart görsellerdir (çoğunlukla ikon olarak kullanılır).

SVG Kullanmanın Yararları

• Site hızını asla etkilemeyen küçük bir dosya boyutuna sahiptirler.
• SVG simgelerine kolayca köprüler ekleyebilirsiniz.
• Herhangi bir vektör grafik yazılımıyla kolaylıkla değiştirilebilirler.
• SVG simgeleri çözünürlükten bağımsızdır; bu da onları masaüstü, tablet ve mobil görünüm için mükemmel kılar.
• SVG resimleri geleneksel resimlere göre daha SEO dostudur.

Iconmount'un SVG'lerini kullanacağız. Yani yalnızca simge değil, XML koduyla birlikte simge de.

Adım 1: GeneratePress Elements Hook'a Sosyal Paylaşım Düğmeleri Kodunu Ekleyin

Bunu başarmak için öncelikle GeneratePress'te Yeni Bir Öğe oluşturmanız gerekecek. WordPress Kontrol Panelinize gidin, Görünüm altında Öğeler'e tıklayın. Bu, Öğeler sayfasını açacaktır, Yeni Öğe Ekle'ye tıklayın.

Yeni Öğe Ekle'ye tıkladığınız anda, GeneratePress bir diyalog penceresi gösterecektir. Hook'a tıklayın. Bu doğru, bu eylem için GeneratePress özel kancasına ihtiyacınız var.

Yeni Elemente bir isim verin ve kodu ekleyin.

Başlıktan sonra oluştur olarak kancayı seçin, PHP'yi çalıştırın ve görüntüleme kurallarını Mesajlar – Tüm Mesajlar olarak ayarlayın.

Çünkü sosyal paylaşım simgelerinin ekran görünüm penceremizde gezinmesine ihtiyacımız var. Başlık Kancasından Sonra Oluştur'u seçmeniz önerilir.

Görüntüleme ayarlarını Tüm Gönderiler olarak seçmemizin nedeni, kullanıcılarınızın içeriğinizi sosyal sitelerinde paylaşmalarını istemenizdir.

Yayınla butonuna basmayı unutmayın.

Aynısını web sitenize uygulamak için aşağıdaki kodu kopyalayın.

Adım 2: Sosyal Paylaşım Simgelerine CSS Şekillendirme Gerçekleştirin

Bunu yapmak için WordPress kontrol paneline gidin, Görünüm altında Özelleştir'e tıklayın.

Bu, GeneratePress tema özelleştiricisini açacaktır. Burada sonuna kadar gidin ve Ek CSS'ye tıklayın.

Karşılaştırılabilir stil için aşağıdaki CSS kodunu yapıştırın. CSS'yi gereksinimlerinize göre ayarlamanıza izin verilir.

3. Adım: GeneratePress'teki Sosyal Paylaşım Düğmelerinin nihai sonucu

Son olarak, burada nasıl sosyal paylaşım simgeler web sitenizdeki gibi görünmelidir. Bunları ekran görüntü alanının %70'inde üstten kayan hale getirdiğimizi unutmayın.

GeneratePress'te Sosyal Paylaşım Butonlarının Faydaları (Eklentisiz) (Eklentisiz)

Iconmount'un SVG'lerinin kullanılması simgelerinizi çok hafif hale getirir
Herhangi bir JavaScript kodu bulunmamaktadır.

Bu stratejiyi kullanarak herhangi bir 3. parti eklenti yüklemezsiniz
Duyarlıdır.

Paylaşım amacıyla tüm düğmeler inanılmaz derecede hızlı çalışacaktır.

Sonuç: GeneratePress'te Sosyal Paylaşım Butonları Nasıl Oluşturulur?

Artık GeneratePress'te kod ve eklentileri kullanarak sosyal paylaşım düğmelerini nasıl oluşturacağınızı keşfettiniz.

Sizin için kolay olan ve ihtiyacınızı karşılayan seçeneği kullanın. Lütfen makaledeki PHP ve/veya CSS kodunu düzenlemekten çekinmeyin.