ソーシャルボタンを自作してWordPressの高速化

タイトル通りなんですが、これでソーシャルボタン(SNSボタン)の設置はプラグイン「WP Social Bookmarking Light」で設置していたのですが、これをやめて自作する事にしました。今回作成したのはこんな感じです。一応シェア数も表示させる事も可能です。

sns-4

自作した理由ですが単純にSNSボタンが重い!これはプラグインが悪い訳ではありません。ソーシャルボタン自体に表示速度を重くする原因がありました。

スポンサーリンク

ソーシャルボタンが重い理由

普通のソーシャルボタンは、TwitterやFacebook等の各サイトでHTMLやJavaScriptのコードを入手して、簡単に設置する事ができます。しかし、その入手したコードを見てみると分かるのですが、ボタン1つ1つにscriptタグ、画像、iframe等が含まれています。

つまり、Twitterのボタン1つにしても読み込むのに前述したようなscript、ボタンの画像等を読み込む必要があります。他にもFacebookやはてな等複数のボタンを設置すると同じように1つ1つscript、画像等を読み込む訳です。そのため、ボタンの数が多い程読み込みには時間がかかるという事になります。

対策としては色々な方針があると思いますが、今回はボタンの画像を使わずにボタン自体をCSSで作成してアイコンはウェブフォントを使って軽量化する事にしました。

ウェブフォントの利用とそのメリット

ウェブフォントは画像のようなアイコンを文字として使う事ができます。例えば先ほど紹介した私のソーシャルボタンではTwitterやFacebookのアイコンが付いています。

icon-1

これがウェブフォントです。これは画像のように見えますが、文字として読み込まれますので普通の文字と同じ扱いです。colorやfont-sizeのようにCSSの記述で色や大きさも変える事ができるので非常に便利です。このウェブフォントを利用するために先に使うウェブフォントだけダウンロードしてサーバーにアップしておきました。

今回SNSボタンを自作しますが、同じようにアイコンを利用したいという場合には先にアイコンを用意しておきましょう。
アイコン画像をWebフォントに変更して高速化

SNSボタン作成の手順

これからSNSボタンの設置をしていきますが、テーマによって表示が崩れたりする事もあるかも知れませんので、その場合にはコメントでお知らせして頂けると助かります。

まずは子テーマのCSSでボタンのスタイルを作成しておきます。子テーマのCSSに次の記述をしておきます。

全部1つ1つ説明すると日が暮れますので重要な部分だけ説明しておきます。最後の記述「.share li」の部分で各ボタンの幅(width)を25%にしております。これはボタンを8つ設置するのですが、4つずつ並べたいので100%を4で割って25%という計算です。

続いてスマートフォン用のページのボタンのスタイルも追加しておきます。

@media screen and (max-width: 599px)がブラウザのサイズが599px以下ならという条件分岐です。

つまりスマートフォン用のページでは各ボタンの横幅(width)を100%にしています。スマートフォンで横一列は見にくいですよね。横幅100%にしておけばスマートフォンではこのように表示されます。

sns-3

ここの横幅を46%くらいに変更すると横に2つずつ並ぶようにもできます(余白があるので50%では2列になりません)。さて、これでCSSは完成です。続いてSNSボタンを設置するのですが、先に各ボタンの設置コードから紹介して最後に設置場所を紹介していきます。

ソーシャルボタン設置コード

さて、ソーシャルボタンの設置ですが、全部のコードを書くと非常に複雑で長くなってしまいますので、子テーマに「sns.php」を用意して、そこにソーシャルボタンのコードを書きます。それで完成させた「sns.php」を設置したい場所で呼びだすという方針です。

これなら設置したい複数の場所でこの「sns.php」を呼びだすだけですし、もしソーシャルボタンをもう少しカスタマイズしたいという場合に「sns.php」を編集するだけで設置したすべての場所のコードを全部一括で変更できますので簡単です。

という訳でまずは子テーマに「sns.php」を作成しておきます。これは他の子テーマを作成する手順と同じで、子テーマのフォルダに「sns.php」と名づけたファイルをアップするだけです。中身は後で書きますので、とりあえず名前だけ付けてファイルを作成しておきます。

sns-1

sns-2

子テーマに「sns.php」の作成ができたらWordPressに戻って「外観」⇒「テーマ編集」と進み、先ほど作成した「sns.php」を開きます。

それで「sns.php」にSNSボタンの設置コードを書いて行きます。

えっと「feedly」のコードには自分のドメインを入れる部分がありますので、「自分のドメイン」と書かれている部分を消してここに自分のドメインを入れます。

それから各ボタンのテキストの部分の直前に前回「IcoMoon」で取得してきたウェブフォント(アイコンフォント)のコードを入れてアイコンを表示させてますので、この部分は自分の取得したアイコンのコードに書き換えて下さい。各SNSのこの部分です。

こんな感じで各ボタンのテキスト部分の直前に「IcoMoon」で取得したアイコンを呼び出してます。全部のボタンにこの記述をしてますので、確認してみて下さい。

また、各ボタンのシェア数まで表示させたい場合にはWordPressのプラグイン「SNS Count Cache」を入れて有効化すればシェア数まで表示されるようにしてます。プラグインを有効化してしばらく時間が経つと表示されるようになります。

SNSボタンの設置場所

えっと、ボタンの設置場所ですが、私の場合(TwentyTwelve)では子テーマの「content.php」と「content-page.php」に追加しています。まずは「content.php」の中から次の記述を探します。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。

これが記事本文のコンテンツの終わりの部分ですのでこの「直前」で作成した「sns.php」を呼び出してみましょう。

私の場合はカテゴリーページでは表示したくないので「個別ページなら」という条件分岐をしておきました。

こんな感じになります。「php if ( is_single() ) 」という部分が「もし個別ページなら」という条件分岐タグです。

sns-3

続いて固定ページのテンプレート「content-page.php」も同じ要領です。

これの直前に設置コードを追加します。ここでは条件分岐は必要ないのでそのまま追加でOKです。

私の場合は固定ページをトップページに指定(表示設定でできます)しているのでこれで終了ですが、トップページを固定ページにしていないという方はトップページにSNSボタンが表示されないと思います。その場合は子テーマに「index.php」を作成して親テーマの記述をコピペしておきます。

それで子テーマの「index.php」から次の記述を探します。

これがページ下のナビゲーションの部分になりますのでこの直前にでも設置コードを追加します。ただ、ここで注意点があり、トップページにSNSボタンを設置する場合には若干コードを変更する部分がありますのでSNS.phpは呼び出さずに直接全部書いてしまうと良いとおもいます。設置コードの先頭部分だけこのように変更します。

「div class=”share”」以下はそのままでOKです。こんな感じになります。

sns-5

以上で設置が完了です。今回の作業は結構大変でした。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

ソーシャルボタンを自作してWordPressの高速化”に97件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. るー

    しげぞう様

    帰宅後PCで確認しました。
    ソーシャルボタンの症状は条件分岐コードを外したら改善されました。サイトの構成上、現在は問題ないのでこのまま進めていこうと思いますが、目次については未だ改善できません。もう少しいじってみます。

  2. るー

    しげぞう様

    迅速な返答ありがとうございます。
    勤務中ですのでスマホ(Android、Xperia z4)で確認したところ。Chromeで開くと反映されておらず。Googleで開くと(PC版サイトも)個別ページは反映されていました。しかし、更新すると消えてしまい(目次も一緒に)ちんぷんかんぷんな事になっています。。。

    固定ページについては、帰宅後作業しようと考えております。

  3. しげぞう 投稿作成者

    るー様

    コメントありがとうございます。個別ページは反映されているのではないでしょうか?推測ですが反映されてないのは固定ページではないかなと思いますので、固定ページのテンプレートでボタンの設置ができているか確認してみて下さい。

  4. るー

    しげそう様

    はじめまして。
    一方的にですがお世話になっております(笑)
    しげぞうさんのお陰様で、初めてのWordpressのブログもなんとか形になりつつあります。

    現在、ソーシャルボタンの設置作業を行っているのですが、HTMLの更新後『プレビュー』で確認すると反映されているのですが、ページを開いても反映されていないという状態が解決できないでいます。
    キャッシュの削除も行いましたが解決できず、私の力では完全にお手上げ状態に陥ってます。
    どのような原因が考えられますでしょうか?助言頂けると助かります。

    私のページは以下のURLです

  5. 乃風

    しげぞう博士様

    必要のないものは処分しておきたいところですが、
    とりあえずのこのまま残しておくことにします。

    色々とありがとうございました。(^^♪

    もうすぐ春です。季節の変わり目なので、体調にお気を付けて!    

  6. しげぞう 投稿作成者

    乃風様

    「SNS Count Cache-old」は残しておいても問題はないと思いますが、削除する場合は念のため事前のバックアップは必要かと思います。

  7. 乃風

    しげぞう博士様

    管理画面から消除できました。よかったです。
    絶対必要なプラグインという訳ではないですね。それでしたら、再インストールはやめておきます。

    ロリポップの方で「SNS Count Cache」を「SNS Count Cache-old」で、今残しているのですが、
    これはこのままずっと残しておけばいいのでしょうか?