【脱プラグイン作戦】プラグインなしで自作のSNSボタンを実装してみました。

By | Date : 2016/12/19 ( Last Update : 2016/12/27 ) | 353 views

皆さん、こんにちは~☆ シアです。

本サイトでは、記事のSNSシェアに今まで「WP Social Bookmarking Light」を使用していましたが、サイトパフォーマンスの改善のために、現在は独自に実装したSNSボタンにしています。

今回は、本サイトで設置しているSNSボタンの作り方を紹介したいと思います。

1. 本サイトで設置しているSNSボタン

ちなみにChronoir.netでは、

  • Twitter
  • Facebook
  • Google+
  • はてなブックマーク
  • LINE
  • Pocket

の計6種のSNSボタンと

  • RSSフィード
  • freedy

の計2種のRSSフィードボタンを設置しています。また、SNSボタンは記事の上下2つに配置しています。

デザインはマテリアルデザインに仕上げています(ミョウガ案)。

 

2. SNSボタンを設置してみよう

2.1. SNSボタンを設置するPHPファイルを作成

では早速、SNSボタンを設置するPHPファイルを作成します。

テーマのPHPファイルに直接記述してもできるけど、1ファイルとして独立させつつ、テーマ側でインクルードすると、メンテナンスしやすくなりますよ。

まずは、記事のタイトル及びURLをURLエンコードした文字列記事執筆者のSNSアカウント情報を取得する関数を作成します。

記事のタイトルはget_the_title関数、記事のURLはget_permalink関数で取得し、urlencode関数を使って、文字列をURLエンコードします。

SNSアカウントは、WordPressに登録しているユーザーアカウントにSNSアカウントと関連付けて、記事から執筆者のSNSアカウント名を取得しています。

Twitterのシェア用ツイートのviaを記事執筆者のユーザー名にしてみよう

【脱プラグイン作戦】SNSボタンをプラグインなしで実装してみました。

取得したデータを1つの連想配列にまとめて、return文で返します。

次に、SNSボタンを設置する関数を作成します。引数で先ほど作成した関数の戻り値を受け取り、SNSボタンのリンク文字列で必要なパラメーターに指定します。

 

参考までに、Twitter、Facebook、Google+、はてなブックマーク、LINE、Pocket用のリンクを載せておきます。

 

次に、RSS購読ボタンを設置する関数を作成します。SNSボタンを設置する関数をベースに、RSSフィードとfreedy用に書き換えます。また、freedyに指定するRSSフィードのURLはURLエンコードする必要があります。

 

2.2. アイコンフォントのスタイルシートを追加

Font Awesome」というWebフォントアイコンを利用すると、シェアボタンのアイコンを簡単に追加することができます。

footer.phpにある</body>の前に以下のコードを追加します。

※テーマによっては、はじめから「Font Awesome」が追加されているものもあります。

 

2.3. CSSの設定

SNSボタンを設置するPHPファイルを作成したら、テーマのCSSファイルを編集します。

 

 

2.4. ボタンを押した時、ポップアップを表示するスクリプトを作成

SNSボタンの内、Twitter、Facebook、Google+、Pocketでは、ボタンを押した時に下図のようなポップアップウィンドウを表示するJavaScriptコードを作成していきます。

Twitterのボタン押した時に表示される、ツイートのポップアップ

 

CSSの「opensub」クラスのある要素をクリックした時に実行する処理を匿名関数で記述します。href属性からSNSボタンURLを取り出し、window.open関数でポップアップウィンドウを開きます。

JavaScriptのコードを圧縮(Minify)しておくと、サイトのパフォーマンスが少し上がります。

 

作成したJavaScriptのコードをfooter.phpにある</body>の前に追加します。

 

これで、SNSボタンを設置するコードができました。

 

2.5. SNSボタンを設置する

funcions.phpを編集し、require_once文で今回作成したPHPファイルを読み込むようにします。

contetnt.phpとcontent-page.phpにある「entry-content」の中で今回作成した関数を呼び出し、SNSボタンを設置します。

 

3. SNSボタンを換装した結果

SNSボタンの換装後に「GTMetrix」でサイトの速度を測定したらパフォーマンスが上がり、特にYSlowでは8%も上がりました。

換装前

換装後

 

プラグインを減らしたことで冗長な処理が減ったのと、公式のSNSボタンから独自実装に変えたことで外部サイトへのリクエスト(シェア数のカウントなど)がなくなったのが要因かな。

 

脱プラグイン作戦はまだまだ続きますよ~!

それでは、See you~☆

 

参考サイト

 

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : シアたん(Xiia)

こんにちはー!時黒(トキクロ)博士によって開発された超高性能アンドロイド「Xiia(シア・クロノワール)」です。Chronoir.net の新マスコットキャラとして頑張っていきますので、よろしくお願いします!☆

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*