ブログ記事末尾の「◯◯◯はこう思った」、この方法で共通化しておけば後から一括でデザイン変更できるよ

ブログ記事の最後に「◯◯◯はこう思った」と入れる手法、少なくとも僕の周辺ではよく見かけます。

（ちなみに僕がこの手法を見たのは、「TechWave」というサイトで@tsuruakiさんが使っているのを見たのが最初だったと思います。確か2010年くらい）

【蛇足：オレはこう思う】について僕はこう思う【湯川】 : TechWave

んで、僕のブログでも記事末尾に「アキオはこう思った」というのを入れているわけですが、実はこれ、WordPressの「ショートコード」という仕組みを使って共通化しています。なので、後からこの部分のデザインを一括で変更したい時もすげー楽チンだったりします。というわけで、今回はその方法について解説していきますよ！

最初はHTMLで直書きしていた

当初、「アキオはこう思った」の部分は以下のようなHTMLを記事本文に直書きしていました。

<h3>アキオはこう思った。</h3>
<div class="single-bottom-akio-icon">
<a href="http://twitter.com/#!/akio0911" target="_blank" onclick="_gaq.push(['_trackEvent', 'article-content-footer', 'click', 'twitter-akio0911-icon']);">
<img src="https://akio0911net.deci.jp/wp-content/themes/arlife-pc-20140123-17/akio0911-195x195@2x.jpg" border="0" width="195" height="195"></a>
</div>
<div class="single-bottom-akio-follow">
<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1389999802.html#_=1390478656279&amp;id=twitter-widget-1&amp;lang=ja&amp;screen_name=akio0911&amp;show_count=false&amp;show_screen_name=true&amp;size=l" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 195px; height: 28px;"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

できるだけ簡単に入力できるよう、Macのアプリ「TextExpander」に登録しておいて「,omotta」と入力するだけでHTMLを呼び出せるようにしていました。

キーボード入力を省力化する「TextExpander」 – 拡張現実ライフ

ただ、この「アキオはこう思った」の部分のデザインを後から変更したくなった時に困りました。過去記事の該当部分を手作業で1つずつ直すのはめんどくさいし、「Search Regex」などのプラグインを使って一括置換で処理するのもなんかスマートではないし・・・。

【WordPress】全記事から検索して一括置換出来るプラグイン「Search Regex」が素晴らしい | nori510.com

そこで見つけたのがWordPressの「ショートコード」という仕組み

そこで見つけたのが、WordPressの「ショートコード」という仕組みです。以下、簡単な使い方を解説しますね。

まずはテーマのfunctions.phpに以下のようなコードを追加します。

function testFunc() {
    return "てすてす";
}
add_shortcode('test', 'testFunc');

そして記事の本文内に以下の内容を記述します。

[test]

すると、この「[test]」と書いた部分が「てすてす」に置き換わります。この仕組みを使えば、「アキオはこう思った」をスマートに共通化できることに気付きました。

「アキオはこう思った」をショートコードにしてみる

というわけで、実際には以下の手順で「アキオはこう思った」をショートコード化しています。

まず、functions.phpに以下のコードを追加します。

function akioOmottaFunc() {
    $img_path = get_template_directory_uri() . "/akio0911-195x195@2x.jpg";

return <<<EOD

<h3>アキオはこう思った。</h3>

<div class="single-bottom-akio-icon">
<a href="http://twitter.com/#!/akio0911" target="_blank" onclick="_gaq.push(['_trackEvent', 'article-content-footer', 'click', 'twitter-akio0911-icon']);" >
<img src="{$img_path}" border="0" width="195" height="195" /></a>
</div>

<div class="single-bottom-akio-follow">
<a href="https://twitter.com/akio0911" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@akio0911さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

EOD;
}
add_shortcode('akioOmotta', 'akioOmottaFunc');

そして、記事本文内の「アキオはこう思った」と表示したい箇所で、以下のコードを記述します。

［akioOmotta］

こうしておけば、デザインを変更したくなった際にfunctions.phpを変更するだけで一括修正することができます。

@akio0911はこう思った。

@akio0911さんをフォロー

というわけで、 ↑ の部分、実はWordPressのショートコードで実装しています。この方法のポイントは「【テーマ内の】functions.phpに記述する」というところです。つまり、PC版とモバイル版で別テーマを使っている場合、functions.php内に異なる記述をしておくことで、「アキオはこう思った」のデザインを出し分けることができるんですね！

今回紹介した「ショートコード」、シンプルな仕組みの割りに応用範囲が非常に広いです。ぜひブログ運営に取り入れてみてくださいね！