【WordPress】ブログ末尾の「○○はこう思った」をショートコードで簡単に作る方法

〜はこう思った

WordPressのカスタマイズに徐々にチャレンジしてます。よっひー(@yosiakatsuki)です。

前からやってみたいと思っていた「~は思った。」的な記事の終わり方。

WordPressのショートコードで簡単に実現できました!

毎記事同じタグを書き込むと、後で一括変更するのが大変ですが、ショートコードで出力すれば、後々のデザイン変更にも柔軟に対応出来ます!

「~は思った。」的な記事の終わり方

よく見るブログ記事の最後に「~は思った。」という見出しを入れる方法。

アイコンがあったり、なかったりしますが、僕がやりたいと思っていたのは「拡張現実ライフ」さんのようなアイコン+フォローボタンを入れる方法。

次の記事をみて、やってみたいと思っていたのをとうとう実現させました!

ショートコードで「~は思った。」

先に紹介した記事を参考に、たらハコでは「おわりに」に該当する部分を「~は思った。」的な見出しに変えました。

function.phpに追加したコード

記事を参考に次のコードを追加しました。

//ラストショートコード
function LastNumberFn() {
    $img_path = 'http://lh5.gght.com/-LqNGWgZYBWA/U2T7-YlzUqI/AAAAAAAACH0/hLBzEERIqgM/d/guutarayosssiy400.jpg';

return <<<EOD

<h3 class="th_post_last">今日のラストナンバー</h3>

<div class="th-last-img" style="text-align:center;">
<a href="https://twitter.com/yosiakatsuki" onclick="ga('send', 'event', 'post-footer', 'click', 'pl-t-follow-i');">
<img src="{$img_path}" border="0" width="185" height="185" /></a>
</div>

<div class="th-last-buttom" style="text-align:center;">
<a class="twitter-follow-button" data-lang="ja" data-show-count="false" href="https://twitter.com/yosiakatsuki" onclick="ga('send', 'event', 'post-footer', 'click', 'pl-t-follow-b');">@yosiakatsukiさんをフォロー</a>
</div>

EOD;
}
add_shortcode('lastnumber', 'LastNumberFn');

function.phpは修正方法を間違えるとブログがホワイトアウトしたり、管理画面にログインできなくなるのでご注意を…

ちょっとした注意点としては、「return <<<EOD」の行をタブでインデントしていたら、見事にエラーが発生しました。

インデント無しなら問題ないので、心配なら全部インデントなしで書いたほうが無難かもしれません。

あとは、記事本文に次のコードを記述すると、その部分が上のコードの<<<EOD~EOD;の間のHTMLに置き換わります。

[lastnumber]

「~は思った。」ではなく「今日のラストナンバー」にしました。

「~は思った。」って書いてる方結構いますよね。

今更同じように乗っかって「お前もか!」ってなるのもつまらないので、ちょっと変えてみました。

また変えたくなった時でも、ショートコード内に記述しているので、ショートコード内の文を変えるだけで全記事に変更が反映されます!

「今日のラストナンバー」はなんとなく音楽に絡めた何かにしようと思ってつけました。なにかいいのがひらめいたらまた変えます。

よっしーのひとこと

よっひー

とうとう↑このアイコン+フォローボタンをブログ記事の最後に置き始められました!

今回、ショートコードを使ってみて思ったのが「ショートコードって便利!」ということ。

ちゃんと勉強したら、なにかできることの幅が広がりそうですね!

ではまた。