simplicityのSNSボタンのデザインを記事下とタイトル上で変える方法

WordPressのテーマの１つであるsimplicityでは標準でツイートボタンやFacebookのシェアボタン、はてなブックマークやPocketなどのSNSボタンが搭載されています。

SNSボタンでの記事の拡散力というのはとても強力なので標準でこういう機能がついているのはブロガーにとってはありがたいです。

ただ便利なのは便利ですが細かいカスタマイズをsimplicityのカスタマイズ画面でやろうとするとできないこともあります。

例えばタイトル下では小さ目のSNSボタンを表示して、記事下では大き目のSNSボタンを表示しようと思っても管理画面にはそのような設定はできません。

そこでここでは表示する場所でSNSボタンのデザインを変える方法を解説します。

SNSボタンはカスタマイズしにくい

simplicityでは「外観」ー＞「カスタマイズ」から「SNS」を選ぶとSNSボタンのカスタマイズができます。

このカスタマイズ画面で設定できることは次のような項目です。

• ボタンのスタイル
• シェアボタンの表示位置(タイトル下か記事本文上のみ)
• 表示するSNSボタンの種類
• その他いろいろ...

色々設定できますが、それでも細かい処理をしようとすると限界があります。

例えばスマホなどでは画面幅と高さがとても狭いです。そのためあまりスペースの取らないアイコンタイプのボタンが使われます。しかし記事下には目立つ大きめのボタンを設置しようとしても管理画面ではそのような高度な設定はありません。

場所によってSNSボタンを切り替えたい場合はPHPから操作する必要があります。

と言ってもそんなに難しいことではなく記事内でPHPを使えるプラグインを使えば安全に記述できます。

SNSボタンのカスタマイズに必要なプラグイン

SNSボタンをカスタマイズするにはPHPを扱う必要があります。しかし直接テーマのPHPを編集してエラーなどが出るとサイト全体に影響が及ぶことがあります。

そこでここではウィジェット内で局所的にPHPが扱える「PHP Code Widget」というプラグインを使用します。

このプラグインは「プラグイン」ー＞「新規追加」をクリックしてプラグイン名で検索すると検索結果に出てきます。

次のURLからダウンロードして使う事もできます。

https://ja.wordpress.org/plugins/php-code-widget/

インストールして有効化すると「外観」ー＞「ウィジェット」に進むと「PHPコード」というウィジェットが追加されます。

これをPHPコードを表示したい領域にドラッグ＆ドロップします。以下はその設置例です。

PHPコードを書いて「保存」ボタンを押すと設置した場所でPHPコードが実行されます。

ここではこのプラグインを使って特定の場所のSNSボタンをカスタマイズします。

タイトル上と記事下でSNSボタンを変える

まずタイトル下と記事下の両方にSNSボタンを設置している場合、デザインを変えたい方のSNSボタンを非表示にしてください。ここではタイトル下のSNSボタンをカスマイズするものとします。

そして「外観」ー＞「ウィジェット」と進んで「投稿本文上」の領域にPHPコードを設置します。その中にSNSボタンを出力するコードを書いていきます。

WordPressではあるテンプレートを出力するのにget_template_part関数を使用します。

<?php
get_template_part('template');
?>

上のコード例では現在使用しているテーマフォルダ内にあるtemplate.phpというPHPファイルが出力されます。

このget_template_partにSNSボタンを出力しているテンプレートを渡せばいいということです。例えば標準のSNSボタンを出力するには次のようなコードを記述します。

<?php
get_template_part('sns-buttons-default');
?>

これを書いて保存するとタイトル下に次のようなSNSボタンが表示されます。

SNSボタンのデザインを変えるにはget_template_part関数に渡すテンプレート名を変えます。simplicityで用意されているSNSボタンのテンプレート名とデザインは次の通りです。

• sns-buttons-default
  各SNSで用意されているデザインのボタン(非推奨)
  
• sns-buttons-viral
  パソコン向けの大きめのデザインのボタン
  
• sns-buttons-balloon
  上にシェア数の吹き出しが表示されるバルーンタイプのボタン
  
• sns-buttons-icon
  画面の狭いスマホ端末で高速表示できるボタン
  
• sns-buttons
  各端末に最適なSNSボタンを表示。PCではsns-buttons-balloon、スマホではsns-buttons-iconが表示される

このテンプレートの中からタイトル上で表示したいものをget_template_part関数に渡せばそのデザインで表示されます。

もしさらにPCとスマホでも振り分けたい場合はsns-buttonsを使う以外にwp_is_mobile関数を使って次のように振り分けることも可能です。

if(!wp_is_mobile()){
    /** PCの場合 */
    get_template_part('PCのテンプレート');
}else{
    /** スマホの場合 */
    get_template_part('スマホのテンプレート');
}

wp_is_mobile関数はページを表示している端末がスマホまたはタブレットの場合にtrue、そうでないPCの場合はfalseを返してきます。

上のコードのように分岐させれば端末ごとに好きなSNSボタンを表示することも可能です。

以上タイトル下と記事本文下で別々のデザインのSNSボタンを表示する方法について解説しました。