Scriptless Social Sharing, hafif sosyal paylaşım düğmesi eklentisi

Daha önce defalarca söylediğim gibi, genellikle WordPress altında çalışan bloglar için küçük işler yapıyorum optimizasyon wordPress altında çalışan bloglar için. Uyguladığım her şeyi genellikle buradan önce test ediyor ve ölçüyorum ve sonunda notları bir hatırlatma olarak ve birileri için yararlı olması durumunda bir yazıya dönüştürüyorum. Bu da onlardan biri.

Bazen yüklemeyi gerçekten yavaşlatan şeylerden biri, sosyal ağlardaki o ezik sosyal paylaşım düğmeleridir, çünkü ya ağır görsel eserler, sayaçlar ve açılır kaydırmalarla birlikte gelirler ya da kullanılmadıkları yerlerde bile istekleri yüklerler veya hepsi aynı anda.

Komut Dosyasız Sosyal Paylaşım tarafından geliştirilen yazılarınıza ve/veya sayfalarınıza tipik düğmeler eklemek için hafif ve ücretsiz bir eklentidir Robin Cornett tüm bunları ortadan kaldırıyor.

O kadar hafiftir ki, yalnızca her ağın izin verdiği en temel yöntemi kullanarak paylaşım bağlantıları ekler. Javascript yok, animasyon yok, sayaç yok, gösteriş yok. Basitçe kendi küçük CSS'si ile bir dizi bağlantı oluşturur. Sonuç, talepleri sıfıra, hiç'e indirmesidir.

Yine çok basit olan bir ayarlar sayfasına sahiptir, böylece hangi içerik türlerinin paylaşım düğmelerine sahip olması gerektiğini, hangi düğmelerin ekleneceğini ve eklentinin stillerini kullanıp kullanmayacağınızı ayarlayabilirsiniz. Bunun ötesinde, ilgili .SVG simgesini barındıran başka herhangi bir ağı eklemek için de bir filtre kullanabilirsiniz.

Eklentinin yaptığı her şey simgeleri kaydederek elle yapılabilir, ancak herhangi bir istek eklemediği, ağırlığı minimum ve kodu temiz olduğu için biraz iş tasarrufu yapmak için en iyi seçeneklerden biridir.

Yazarı WordPress 5.8 ile tam uyumluluk beyan etse de WordPress 5.8 ile uyumluluğu duyurmasa da yeni sürümde mükemmel çalışıyor WordPress 5.9yeni bir şey eklemediği için yeni sürümde mükemmel çalışıyor.

Ayarlar

Varsayılan olarak, eklentiyi etkinleştirdiğinizde simgeleri bu şekilde bulacaksınız:

Ya da "isimleri göster" seçeneğini seçerseniz bu şekilde.

Bu da burada bu sonuçla çalışan simge ayarlarının ekran görüntüsüdür:

Ancak düğmelerin yuvarlak görünmesini sağlamak ve Menéame düğmesini (veya başka bir ağı) eklemek için simgeyi kaydetmek üzere filtrelerini çekin ve CSS ile biraz oynayın. Çok karmaşık bir şey değil.

Yeni bir düğme eklemek için adımlar

1- Eklemek istediğiniz ağın .SVG simgesini arayın ve indirin, bu durumda Menéame'den bulduğum en iyisi, geliştirilebilir olmasına rağmen bu.

2. Simgeyi şablonunuzun /assets/svg/ dizinine yükleyin (bu yol mevcut değilse oluşturmanız gerekir) ve eklenti bunu tanıyıp otomatik olarak kullanacaktır

3. İşlevler eklentinize ekleyerek simgeyi ilgili filtreyle birlikte kaydedin Kod Parçacıkları ya da şablonun functions.php dosyasına elle ekleyebilirsiniz, yöntem size kalmış.

add_filter( ‘scriptlesssocialsharing_register’, ‘prefix_scriptless_add_meneame_button’ );
/**
* Añade un botón personalizado a Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_meneame_button( $buttons ) {
$buttons[‘tumblr’] = array(
‘label’ => __( ‘Menéame’, ‘scriptless-social-sharing’ ),
‘url_base’ => ‘https://www.meneame.net/submit?url=’.get_permalink().’» target=»_blank’,
‘args’ => array(
‘query_args’ => array(
‘name’ => ‘%%title%%’,
‘url’ => ‘%%permalink%%’,
),
‘color’ => ‘#e35614’,
‘svg’ => ‘meneame-square’, //Subir a `assets/svg` de tu plantilla
‘icon’ => ‘f173’, // Para fuentes FontAwesome
),
);
return $buttons;
}

Filtrenin çalışması için simge dosyanızı"loquesea-square.svg" olarak adlandırmanız gerekir.

Söz konusu ağın paylaşım bağlantısının tam yapısına dikkat etmeniz de önemlidir çünkü 'url_base' içine eklenmesi gerekir. Menéame durumunda bu https://www.meneame.net/submit?url='.get_permalink() şeklindedir.

Son olarak, istediğiniz nihai görünümü ve konumu bulana kadar CSS ile oynamanız yeterlidir, örnek için bu CSS'yi kullandık:

/* CSS botones compartir del plugin */
.scriptlesssocialsharing__buttons a.button {
    /* CONVERTIR A colores parar linea background*/ 
    background-color: #7F7F7F !important; */
    color: #ffffff;
    border-radius: 100px;
	  margin-right: 1px;
    margin-left: 1px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 900; 
}

.scriptlesssocialsharing__buttons {
    justify-content: right;
}

.scriptlesssocialsharing__buttons a.button:hover {
  background-color: #ff2121 !important;
  color: #ffffff !important;
}

Her şey yolunda gittiyse, artık eklenti ayarlarında simgenin eklendiğini göreceksiniz ve varsayılan simgelerin geri kalanı gibi onu sipariş edebilecek, kaldırabilecek veya kendi stilinize göre ayarlayabileceksiniz.

Gutenberg bloğu ve kısa kodlar

Eklenti ayrıca Gutenberg'e, düğmelerinizi paragraflar arasına veya belirli içerik öğelerinin altına yerleştirmenize olanak tanıyan bir blok (devre dışı bırakabilirsiniz) ekler.

Scriptless Social Sharing, el plugin de botones para compartir en redes sociales más ligero

Ayrıca kısa kodlar böylece bunları istediğiniz yere yerleştirebilir ve belirli bir noktada görüntülenen ağları sınırlama olanağına sahip olursunuz.

Ekle [ ]

Generic" kısa kodu.

scriptless

Başlığı kaldırmak veya özelleştirmek için.

scriptless heading=""

Yalnızca belirli düğmeleri görüntülemek için (virgülle ayrılmış ve boşluksuz)

scriptless buttons="email,facebook"

Yazar ayrıca web sitesinde Facebook Messengerdüğmesi eklemek için gereken belirli filtreleri de ekliyor.

Hafif ve daha estetik özelliklere sahip başka eklentiler de var, ancak yükleme hızı konusunda tutkuluysanız bu mükemmel. Birkaç tasarım seçeneği ile hafif ve ücretli bir alternatif olarak, Novashare (yaratıcılarından Perfmatters) da çok iyi bir seçenektir.