軽量なソーシャル共有ボタンプラグイン「Scriptless Social Sharing

すでに何度も言っているように、私は普段、WordPressで運営されているブログの小さな仕事を担当しています。 最適化WordPressで運営されているブログの場合。私は通常、適用するものはすべてここで事前にテストと測定を行い、最終的には備忘録として、また誰かの役に立つかもしれないので、メモを記事にすることにしています。これもその一つです。

ソーシャルネットワーク上の共有ボタンは、重いビジュアルアーチファクトやカウンター、ドロップダウンのスクロールを伴うか、使用されていない場所でもロード要求があるか、一度にロードされるため、時として本当にロードを遅くしてしまうものの1つです。

スクリプトレスソーシャルシェアリングによって開発された、投稿やページに典型的なボタンを追加するための軽量かつ無料のプラグインです。 ロビン・コーネットを、すべて払拭するものです。

各ネットワークが許容する最も基本的な方法で共有リンクを追加するだけなので、とても軽量です。javascriptも、アニメーションも、カウンターも、飾り気もない。それは単に、独自の小さなCSSでリンクのセットを構築するものです。その結果、リクエストをゼロ、ゼロにすることができるのです。

設定ページも非常にシンプルで、どのタイプのコンテンツに共有ボタンをつけるか、どのボタンを追加するか、プラグインのスタイルを使用するかどうかなどを調整できます。さらに、フィルターを使って、対応する.SVGアイコンをホストしている他のネットワークを追加することも可能です。

このプラグインが行うことはすべて、アイコンを登録することで手作業で行うことができますが、リクエストを追加することなく、重量も最小限、コードもクリーンなので、ちょっとした手間を省くには最適な選択肢の一つです。

作者はWordPress 5.8との完全な互換性を宣言しており、WordPress 5.8との互換性は発表されていませんが、新しいバージョンで完全に動作します。 ワードプレス5.9新しいバージョンでは、何も新しいものが追加されないので、完全に動作します。

設定

デフォルトでは、プラグインを有効化すると、このようなアイコンが表示されます。

また、「名前を表示」を選択するとこのようになります。

そして、この結果で、ここでアイコン設定が機能している画面です。

しかし、ボタンを丸く表示させたり、メネアメボタン（または他のネットワーク）を追加するには、そのフィルターを引っ張ってきてアイコンを登録し、CSSを少しいじるだけでいいのです。複雑なことは何もしていません。

新しいボタンを追加する手順

1- 追加したいネットワークの.SVGアイコンを検索してダウンロードします。この場合、Menéameから見つけた、改良の余地があるものの最高のものを使用します。 というのは.

2. アイコンをテンプレートの /assets/svg/ディレクトリにアップロードすると（このパスが存在しない場合は作成する必要があります）、プラグインがそれを認識し、自動的に使用します。 code

アイコンとそのフィルタを登録する方法は、ファンクションプラグインへの追加、Code Snippetsの使用、テンプレートのfunctions.phpへの手作業による追加と、方法はお客様次第です。

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;
}

フィルターが動作するためには、アイコンファイルを"loquesea-square.svg"と呼ぶ必要があります。

また、当該ネットワークの共有リンクは 「url_base」に追加する必要があるため、正確な構造に注意することが重要です。メネアメの場合は、https://www.meneame.net/submit?url='.get_permalink()です。

最後に、最終的な外観と位置が決まるまで、CSSを弄る必要があります。

/* 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;
}

うまくいけば、プラグインの設定にアイコンが追加され、それを注文したり、削除したり、他のデフォルトアイコンと同じように配置したりすることができます。

Gutenbergブロックとショートコード

また、このプラグインはGutenbergにブロックを追加し（解除可能）、段落間や特定のコンテンツ要素の下にボタンを配置することができます。

も持っています。 ショートコードそのため、好きな場所に設置でき、特定の場所に表示されるネットワークを制限することも可能です。

追加 [ ]する

Generic」ショートコード。

scriptless

見出しを削除したり、カスタマイズしたりする場合。

scriptless heading=""

特定のボタンだけを表示する（カンマで区切り、スペースは入れない）。

scriptless buttons="email,facebook"

また、著者は自身のウェブサイトで、 Facebook Messengerボタンを追加するために必要な具体的なフィルターも追加しています。

他にも軽量で美観に優れたプラグインはありますが、読み込み速度にこだわるのであればこのプラグインが最適です。より軽量で、より多くのデザインオプションを持つ有償の代替品として。 ノバシェア(のクリエイターから パーフマターズ) も非常に良い選択肢です。