カスタムソーシャル共有アイコンを使用したWordPress速度の最適化

それは簡単なタスクのように思えるかもしれませんが、WordPressサイトに行儀の良いソーシャル共有ボタンを追加するのは面倒なことです。私がよく振る舞うと言うとき、私は単純、軽量、資源にやさしい、速いということを意味します - ほとんどのソーシャルシェアリングプラグインはそこにはありません。彼らは狂ったように資源を浪費する傾向があります、そして アイコンを表示するためだけに、プラグインのロード時間を25〜35％増やす必要があるのはなぜでしょうか。 彼らのサイトで?

良いニュースは、あなたがこのタスクを達成するために必ずしもプラグインを必要としないということです。このチュートリアルでは、簡単にできることを説明します。 カスタムのソーシャルシェアボタンを追加する WordPressサイトの投稿の最後に ほんの数行のコード.

ステップ1：ソーシャルシェアボタンを生成する

共有アイコンを生成するために、便利で使いやすいWebツールであるSimple Sharing Buttons Generatorを使用します。このアプリの主な利点は、それが生成するボタンがフロントエンドで実行されることです。 彼らはあなたのサーバーに負担をかけません そして、あなたはまたあなたのユーザーの活動を非公開にすることができます.

カスタムボタンを生成するには、ここに行き、を押してください。 ベギン. 6種類のボタンスタイルから1を選択します。クリック 次 とをチェック ソーシャルネットワーク あなたのサイトに追加したいです。終了したら、あなたはあなたのウェブサイトの情報を記入しなければならないでしょう.

この画面（下）には、2つの選択肢があります。 「JavaScriptがありません」 そして 「JavaScript」. ダニ JavaScript, ブラウザがURLを動的に検出できるようにするため、訪問者はホームページのURLだけでなく各投稿を個別に共有できます。.

最後にライブプレビューを見て、選択したアイコンセットをダウンロードして、生成したコードを入手します。.

ステップ2：子テーマを作成する

今すぐあなたのサイトに生成されたアイコンとコードを追加する必要があります。まず第一にあなたは子供のテーマを作成する必要があります.

あなたは私たちのチュートリアルの助けを借りて簡単にWP子テーマを作成することができます、あるいはこのWP Codexの記事のステップに従うことができます。すでにお持ちの場合は、手順3に進むことができます。.

子供のテーマはあなたが現在使用しているテーマに関連しています - 子供が彼の両親に関連するのと幾分似た方法で。それ 親テーマからすべて（スタイルと機能）を継承 でも君ならできる 機能を追加する それに.

私たちの場合、追加機能はカスタムソーシャルシェアボタンになります.

手順3：アイコンを表示するカスタム関数を作成する

子テーマのfunctions.phpファイルにカスタム関数を追加します.

この機能の助けを借りてあなたはあなたがあなたのサイト上で好きなところにカスタムアクションフックを使うことによってソーシャルアイコンを追加することができるでしょう。子テーマにfunctions.phpファイルがまだない場合は、子テーマのルートフォルダに空白のテキストファイルをfunctionsという名前で作成し、拡張子を.phpに変更します。.

この空のファイルに次のコードを挿入します。

 
あなたの functions.php ファイルを設定するには、次のコードスニペットを追加します。
 
 / * *カスタムソーシャル共有アイコンを追加します* / function add_social_sharing（）？> 
この記事を共有する
   
最後に HTMLコメントの行を削除する 上記のコードスニペットから HTMLコードに置き換えます ステップ1でSocial Sharing Buttons Generatorを使用して生成したもの.
 
ステップ4：適切なテンプレートファイルを子テーマフォルダにコピーする
 
デフォルトでは、単一の投稿は次の名前のテンプレートファイルによって支配されています。 single.php. 時々 - 特により現代的なテーマでは - の構造 single.php 追加のテンプレートファイルもロードされるため、より複雑です。このステップでは、後でアイコンを追加できる適切なテンプレートファイルを見つける必要があります。.
 
ソーシャルボタンの正しい場所を見つけるために、テンプレートファイルを見つける必要があります。 単一の投稿のコンテンツをロードする関数を含みます.
 
WordPressの管理ダッシュボードでテーマエディタを開きましょう。 外観>エディタ. 右上隅には、親テーマを選択できるドロップダウンリストがあります。ドロップダウンの下には、親テーマに含まれているすべてのテンプレートファイルがあります。あなたが見つけるまでスクロールダウン 単一投稿テンプレート （single.phpと呼ばれる）それを開く.
 
親テーマが get_template_part（） WP機能 single.php つまり、追加のテンプレートファイルを使用して単一の投稿のコンテンツを読み込むということです。.
 
最初にあなたはこれがどれであるか見つけなければなりません。追加のテンプレートファイルの名前は、最初のパラメータです。 get_template_part（） 関数.
 
に 二十五十五 それはこのように見えます：
 
get_template_part（ 'content'、get_post_format（））;
 
最初のパラメータは 'コンテンツ' これはというテンプレートファイルを探すことを意味します。 content.php. このファイルを変更するには、このファイルを親テーマのルートフォルダから子テーマのルートフォルダにコピーする必要があります。.
 
 
手順5：アクションフックを正しいテンプレートファイルに追加する
 
という関数を作成しました add_social_sharing（） ステップ3では、それをというカスタムアクションフックにアタッチしました。 custom_social_share. 今度は、このフックを関数を実行したい場所に追加する必要があります。.
 
正しい場所に挿入する必要があるコードスニペットは、次のとおりです。
 
 
次に、正しい場所を見つけましょう.
 
ステップ4で子テーマに追加したテンプレートファイルをコードエディタまたはWordPress管理ダッシュボードのテーマエディタ内で開き、次のファイルを探します。 コンテンツ（） 関数.
 
があるかどうか確認してください wp_link_pages（） 直後の機能 コンテンツ（） 関数。もしあれば、その後に上記のコードスニペットが来ます。それ以外の場合は コンテンツ（） 関数.
 
 
ステップ6：子テーマにCSSコードを追加する
 
開く style.css コードエディタまたはWordPress管理ダッシュボードのテーマエディタのいずれかで子テーマのファイルを作成し、手順1で生成したCSSコードをコピーしてファイルの末尾に貼り付け、保存します。.
 
 
各テーマでソーシャルシェアリングのアイコンが正しく表示されるように、CSSファイルに2行追加します。次のコードスニペットをコピーしての最後に貼り付けます。 style.css ファイル：
 
 ul.share-buttons li a border：0; ul.share-buttons li img display：inline;  
 
ステップ7：ソーシャルメディアのアイコンセットをサーバーにアップロードする
 
手順1でダウンロードしたソーシャルメディアのアイコンセットを自分の子テーマフォルダにアップロードします。 FTPでサーバーを接続し、という名前の新しいフォルダーを作成してください。 画像 あなたの子供のテーマフォルダ（/ wp-content / themes /あなたの子供のテーマ/ images）のルートの中にあり、ここに設定されたアイコンをアップロードしてください。.
 
フォルダに名前を付けます 画像 これは、Simple Sharing Buttons Generatorが使用する画像フォルダのデフォルト名です。.
 
ステップ8：アイコンファイルのパスを確認する
 
手順7でソーシャルメディアのアイコンをサーバーにアップロードした後は、アイコンファイルのパスを調べて、それらが読み込まれることを確認することが重要です。.
 
画像ファイルのパスは、サーバー上のその場所についてのヒントをブラウザに与えます。内部の画像パスを確認しましょう functions.php 子供のテーマのファイル。コードエディタでファイルを開き、 add_social_sharing（） Simple Sharing Buttons Generatorで生成したHTMLコードを確認する必要がある機能.
 
HTMLコードには、  付きのタグ src 各アイコンの属性。それぞれ確認してください src 属性は、手順7でアイコンセットがアップロードされた正確な場所を指します。.
 
Simple Sharing Buttons Generatorは相対パスを追加します。  ファイル時々 相対パスを使用すると、ブラウザは画像をレンダリングできません。, だからそれは良い考えです 代わりに絶対パスを使用してください。. このようにあなたの訪問者によって潜在的に使用される各ブラウザは必要なアイコンファイルの場所について確実に死んでいる可能性があります.
 
ジェネレータによって追加された相対画像パスは、次のようになります。
 
 
変更しましょう src 各アイコンの絶対パスへの属性、つまりファイルの完全なURLが含まれることを意味します。.
 
上記のURLパスは次のようになります。
 
 
ステップ9：変更したファイルをアップロードして子テーマをアクティブにする
 
FTPでサーバーを接続し、このチュートリアルで作成した、まだアップロードしていないすべてのファイルをアップロードします。 functions.php, の style.css, そして適切なテンプレートファイル（このチュートリアルでは single.php または content.php）.
 
最後に、WP管理ダッシュボードの下にある子テーマをアクティブにします。 外観>テーマ メニュー.
 
今、あなたはあなたの超軽量、省資源、カスタマイズされたソーシャルシェアリングのアイコンで準備ができています。あなたはオンラインでそれをあなたのサイトでライブでチェックすることができます.
 
 
結論
 
このチュートリアルでは、単一の投稿の最後にカスタムのソーシャル共有ボタンを追加する方法を紹介しました。作成したアクションフックを使用して、共有アイコンをWebサイトの他の場所に追加できます。.
 
ボタンを表示したい場所に、手順5で使用したコードを追加するだけです。
 
 
アイコンを他の場所に配置したい場合も、正しいテンプレートファイルを見つける必要があります。単一ページは、というテンプレートファイルによって支配されます。 page.php, 画像などのメディア添付ファイルは attachment.php.
 
Webサイトの別の場所にソーシャル共有ボタンを表示したい場合は、WordPressテンプレート階層を使用してそれを見つけることができます。.
 
ソースをダウンロード