★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法

WordPressのテーマであるsimplicityでは標準でSNSボタンを表示する機能がついています。

TwitterやFacebookまたはハテブなどのSNSの拡散力というのは無視できず、シェアされることで記事がバズることもあります。なので標準でSNSボタンを表示できるsimplicityはブロガーにとってとても強力なテーマです。

ただsimplicityではSNSボタンをカスタマイズできないことはないですが、自由な場所に表示したり、あるSNSボタンだけ非表示にすることはできません。

そこでここではsimplicityのSNSボタンを位置などを自由にカスタマイズする方法を解説します。

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

simplicityでSNSボタンをカスタマイズするには「外観」ー>「カスタマイズ」と進み、出てきたカスタマイズ画面で「SNS」を選びます。

カスタマイズできるのは次のような項目です。

  • シェアボタンの表示・非表示
  • シェア数の表示
  • ボタンのタイプ
  • シェアボタンの表示位置(タイトル下か本文下のみ)
  • 表示するシェアボタンの種類
  • その他いろいろ・・・

これだけ設定できれば十分というような気もしますが、結構制約もあります。

例えばシェアボタンをタイトル下に表示した場合、次のようなボタンが表示されます。

これでも悪くはないですがこれ以外のデザインは選べず、本文下に表示されるような大きめのボタンにすることはできません。

またタイトル下ではツイートボタンを隠したいなと思ってカスタマイズ画面で「 」からチェックを外すと本文下のツイートボタンまで非表示になってしまいます。

このように標準だと表示できる位置はタイトル上本文下の2か所のみで、あるボタンを非表示にすると2か所ともでそのボタンが非表示になってしまいます。

そこでボタンの位置・表示方法を自由にカスタマイズするにはPHPから操作する必要があります。といっても難しいコードではなく、プラグインを使えばサイトを破壊することなく安全にボタンのカスタマイズができます。

次はその方法について解説します。

SNSボタンのカスタマイズに必要なもの

まずSNSボタンをPHPからカスタマイズするにはウィジェット内でPHPを書くことができる「PHP Code Widget」というプラグインをインストールします。

「プラグイン」ー>「新規追加」からプラグイン名で検索すると次のように出てきます。

ちなみに直にダウンロードして使う場合は以下のURLからダウンロードも可能

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

インストールして有効化すると「外観」ー>「ウィジェット」に「PHPコード」というウィジェットが表示されるのでそれを表示したい位置にドラッグ&ドロップできます。

以下の画像はPHPコードの設置例です。

タイトル欄の下にPHPコードを書き、「保存」を押すとPHPコードを埋め込んだ領域でそのPHPが実行されます。PHPファイルを直接編集する場合と違い、エラーが起きてもサイト全体が壊れることは無いので安全です。

以下の方法ではSNSボタンをカスタマイズするのにこのプラグインを使います。

SNSボタンのカスタマイズ

次がSNSボタンのカスタマイズ方法です。

位置のカスタマイズ方法から最初に見てください。

位置のカスタマイズ

まずSNSボタンがどのように設置されているかという事ですが、内部では次のようにget_template_part関数からSNSボタンのテンプレートファイルを呼び出しています。

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

このように書くとtemplate.phpというPHPファイルの内容が出力されます。

なのでSNSボタンを出力したいならsimplicityのテーマフォルダの中からSNSボタンの出力をしているテンプレートファイルを呼び出しそのファイル名をget_template_partに渡せばいいという事です。

simplicity2のテンプレートフォルダ([WordPressインストールディレクトリ]/wp_content/themes/simplicity2)でSNSボタンを出力するテンプレートは次の3つです。

  • sns-buttons.php
  • sns-buttons-default.php
  • sns-buttons-ballooon.php

このいずれかをget_template_part関数に渡せばSNSボタンが表示されます。

例えばウィジェット画面で「投稿本文上」にPHPコードウィジェットを設置し、次のようなPHPコードを書きます。

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

そして保存すると記事タイトル下に次のようにSNSボタンが設置されます。

標準のカスタマイズ画面のような平たいボタンではなく大きめのアイコンになっています。

またget_template_partに'sns-buttons-balloon'を渡すと次のようなバルーンボタンが表示されます。

ここではタイトル下に表示していますが、PHPコードウィジェットが表示できる場所ならどこにでもSNSボタンを設置することができます。

表示ボタンのカスタマイズ

標準でもどのボタンを表示するかはカスタマイズできますが、あるボタンを非表示にすると全て場所でそのボタンが非表示になってしまいます。

それぞれのSNSボタンの表示・非表示はsimplicityで定義されている次のようなPHP変数で切り替えされています。

変数名 SNSの種類
twitter_btn_visible Twitter
facebook_btn_visible Facebook
google_plus_btn_visible Google+
hatena_btn_visible ハテブ
pocket_btn_visible pocket
line_btn_visible LINE

これらの変数がtrueの時に表示され、failseの時に非表示になります。

例えばツイートボタンとGooglePlusボタンを非表示にしたい場合はPHPコードに次のように書きます。

<?php

/** ツイートボタンを非表示 */
set_theme_mod( 'twitter_btn_visible', false );
/** GooglePlusボタンを非表示 */
set_theme_mod( 'google_plus_btn_visible', false );

get_template_part('sns-buttons');

/** 設定を元に戻す */
set_theme_mod( 'twitter_btn_visible', true );
set_theme_mod( 'google_plus_btn_visible', true );

?>

テーマで定義されている変数を変更するにはset_theme_mod関数を使い、1つめの引数に変数名、2つめに値を渡します。この例ではtwitter_btn_visible変数とgoogle_plus_btn_visible変数にそれぞれfalse(偽)の値を渡しています。

このPHPコードを保存すると次のようにツイートボタンとGooglePlusボタン以外が表示されるようになります。

カスタマイズ画面でボタンを非表示にする場合と違い、この場合なら記事タイトル下にあるSNSボタンだけツイートボタンをGooglePlusボタンが非表示になります。

SNSボタン上のタイトルのカスタマイズ

SNSボタンの上に「シェアする」などのメッセージルが表示されますが、これもカスタマイズ可能です。このメッセージを表示しているのが share_message_label という変数です。

これを次のようにset_theme_mod関数で変えるだけで任意のメッセージになります。

<?php
set_theme_mod('share_message_label', "この記事をシェア!");
get_template_part('sns-buttons');

/** メッセージを元に戻す */
set_theme_mod('share_message_label', "シェアする");
?>

このPHPコードを保存すると次の画像のようにSNSボタン上に「この記事をシェア!」というメッセージが表示されるようになります。

まとめ

simplicityは初めから共有機能がついていて便利です。

しかし標準設定では位置やデザインまで細かく設定する項目がないので、ここではそのカスタマイズ方法について紹介しました。

もしSNSボタンをもっと自由にカスタマイズしたい、という場合はここで解説した方法を試してみてください。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press