ブログ記事末尾の「◯◯◯はこう思った」、この方法で共通化しておけば後から一括でデザイン変更できるよ
公開日:
:
WordPress
記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
ブログ記事の最後に「◯◯◯はこう思った」と入れる手法、少なくとも僕の周辺ではよく見かけます。
(ちなみに僕がこの手法を見たのは、「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&id=twitter-widget-1&lang=ja&screen_name=akio0911&show_count=false&show_screen_name=true&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はこう思った。
というわけで、 ↑ の部分、実はWordPressのショートコードで実装しています。この方法のポイントは「【テーマ内の】functions.phpに記述する」というところです。つまり、PC版とモバイル版で別テーマを使っている場合、functions.php内に異なる記述をしておくことで、「アキオはこう思った」のデザインを出し分けることができるんですね!
今回紹介した「ショートコード」、シンプルな仕組みの割りに応用範囲が非常に広いです。ぜひブログ運営に取り入れてみてくださいね!