• 2014.7.20
• TCDANカスタマイズ
• コメントを書く

プラグインを使わずにSNSボタンを好きな場所に表示させる

ソーシャルメディアボタンを、プラグインを使わずに記事内の好きな場所に設置したいと思い、調べてみました。

このブログで使っているTCDテンプレート「AN」では、ソーシャルメディアボタンは、bookmark.phpが読みこまれるようになっています。なので、記事内の任意の場所にbookmark.phpというファイルを読み込むことにしました。

phpファイルを記事内の任意の場所で読み込む方法

phpファイルを記事内の任意の場所で読み込むには、ショートコードを使いますので、ショートコードを有効にさせるためのコードを、functions.phpに追加します。

functions.phpは、ちょっとの記述ミスで、驚きの白さを見せてしまいますので、コードを追加する際はお気をつけください。

//phpファイルをショートコードで読み込むためのコード
function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
 
add_shortcode('myphp', 'Include_my_php');

そして、記事内の任意の場所に以下のショートコードを書きます。

今回は、bookmark.phpを読み込むので[[myphp file=’bookmark’]]と書きます。もし、hoge.phpというファイルを読み込む場合は、[[myphp file=’hoge’]]と書いてください。

<p>じゃあ、説明するれすよ！これは「TALジャンピングサービス」！！<br />
大人間は重いので飛ぶ事はできません！！</p>
[[myphp file='bookmark']]
<p>時間もない事ですし！！とりあえず飛んでくださーい！！</p>
<p><a href="http://○○">広告コード</a></p>

これで、「大人間は重いので飛ぶ事はできません！！」という文章の次に、ソーシャルボタンが表示されます。下図のようなイメージです。

functions.phpのどこに追加するの？

テーマをカスタマイズをしようと思った時にいろいろ調べていると、「functions.phpに追加します」という文章をよく見かけます。実際に、私も先ほど書きました(笑)

「functions.phpにコードを追加します」と言われた時、どこに追加すればいいのか、コード挿入の目安となる位置を書いておきます。phpファイルに書かれている関数は、テーマによって違いますので、一概に「ここに追加して」とは言えないことをご了承ください。

まず、一番わかりやすいと思うのが、phpファイルの1行目に必ず書いてあるphpの開始タグ<?phpのすぐ下です。

変更前

<?php

// 言語ファイルの読み込み --------------------------------------------------------------------------------
load_textdomain('tcd-w', dirname(__FILE__).'/languages/' . get_locale() . '.mo');

変更後

<?php

//phpファイルをショートコードで読み込むためのコード
function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
 
add_shortcode('myphp', 'Include_my_php');

// 言語ファイルの読み込み --------------------------------------------------------------------------------
load_textdomain('tcd-w', dirname(__FILE__).'/languages/' . get_locale() . '.mo');

また、最終行に書いてある<?php } ?>の波括弧「}」の後、phpの終了タグ「?>」の前に書いても大丈夫です。

変更前

<?php } ?>

変更後

<?php }

//phpファイルをショートコードで読み込むためのコード
function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}

add_shortcode('myphp', 'Include_my_php');

?>

phpがよくわかっていない者(←私ｗ)からすると、「追加して」と言われてもどこに追加すればいいかで悩むんですよね(汗)それで見つけたのが、りくまさん(@rikuma_)の記事でした。

[Я]functions.phpに機能追加する時、コード挿入の目安となる位置

りくまさんの記事を読んで、機能と機能のあいだに追加すればいいという事がわかり、このTCDテンプレートで上手く表示できる場所、真っ白になってしまう場所を探しました。下図は、挿入しても大丈夫だったところ、ダメだったところです。

デフォルトで表示されるSNSボタンを消す

最後に、投稿ページでは、SNSボタンが記事下に自動的に表示されるようになっていますので、これを表示されないようにします。

変更箇所は、single.phpです。SNSボタンを表示する1行をまるっと消します。

  <?php if($options['show_bookmark']) { include('bookmark.php'); };?>

最後に

TCDテンプレートの場合、テーマオプションに広告コードをいれておけば、自動で記事下に広告を入れられるようになってます。なので、投稿ページで記事を書くと、記事本文 → ソーシャルメディアボタン → 広告、という順番で表示されます。

私の場合、記事下の広告は記事毎に変わる(変えたい)ため、テーマオプションで入れていません。毎回、記事毎に広告コードをいれているため、記事本文 ＋ 広告 → ソーシャルメディアボタンの順番になってしまいます。

記事のすぐ下をアフィリエイトリンクにするか、ソーシャルメディアボタンにするかで選択肢は変わるのですが、私は、記事下にまずソーシャルメディアボタンを置くようにしているから、この方法にしました。