【いろんなところにサムネイル付き最新記事を表示できます】WordPressプラグイン「Newpost Catch」の新機能「ショートコード」の使い方

先日、WordPressプラグイン「Newpost Catch」のバージョンアップを行いました。その際、新機能として「ショートコード」を使えるようにしました。ショートコードを使うことで、投稿本文、テーマファイル、テキストウィジェット内に簡単に最新記事を表示させられます。

また、「Newpost Catch」プラグインのショートコードは、これまでウィジェットとして提供していた機能をさらに拡張させて、やれることを広げました。今回は、「ショートコード」の使い方を基礎の部分から解説いたしますので、興味がありましたらご参考ください。

まず、ショートコードの基本形はこちらです

「Newpost Catch」プラグインをインストールすると、プラグイン専用のショートコードを使うことができます。「[npc]」と書くルールがあります。

この書き方が基本形です

[npc]

上記のコードを単純に入れるだけで、サムネイル付き最新記事が表示されます。とてもシンプルな仕組みですね。

ショートコードが反映される箇所は主に3つあります

とても簡単なショートコードですが、どこにでも書いていいのではなく、主にショートコードが有効となる箇所は以下の3つです。

1. 投稿本文中
2. テキストウィジェット内
3. テーマファイル内

というわけで、それぞれ3つのパターンを順番に解説いたしますので、ご確認ください。

１．「投稿本文中」でショートコードを使うには

ショートコードを投稿本文中に入れる方法です。

例えば、新規投稿にショートコードを追加します

結果サンプル（Twenty Thirteenテーマで実験）

投稿本文中に最新記事を表示させることができました。

２．「テキストウィジェット内」でショートコードを使うには

続いて、「テキストウィジェット内」でショートコードを使う方法をご紹介します。まずは、使用しているテーマフォルダ内に「functions.php」ファイルがあると思いますので、テキストエディタなどでファイルを開いて、以下のコードがあるかどうか確認します。

以下のコードが「functions.php」ファイル内にあるかどうか確認します

add_filter('widget_text', 'do_shortcode');

もし、コードが見当たらないようでしたら、ファイルの最後尾などに追記しましょう。追記をしたら保存をお忘れなくです。以上で、テキストウィジェット内でショートコードを使うことができます。早速、下の画像のようにテキストウィジェット内に入れましょう～。

テキストウィジェット内にショートコードを入れる

結果サンプル（Twenty Thirteenテーマで実験）

うまく表示されました。続いて、テーマファイル内にショートコードを入れる場合です。

３．「テーマファイル内」でショートコードを使うには

例えばですが、「個別記事の本文の最後らへんに最新記事を表示させたい」とします。その場合、ご使用のテーマフォルダ内に「single.php」ファイルがあると思いますので、テキストエディタなどで開いてショートコードを追記します。ただし、一点注意がありまして、ファイル中にショートコードを書く場合は、以下のように書く必要があります。

<?php echo do_shortcode( '[npc]' ); ?>

それでは例として、Twenty Thirteenテーマの「single.php」ファイルに以下のようにコードを入れます。

下線の部分が追加したショートコードです

結果サンプル（Twenty Thirteenテーマで実験）

どの単一記事を開いても、本文の最後に最新記事が表示されます。

idを指定して、表示箇所ごとにCSSで見た目を整えましょう

ところで、ここまで

1. 投稿本文中
2. テキストウィジェット内
3. テーマファイル内

の3パターンでショートコードを使って最新記事を表示できましたが、もう少しかっこよく見た目を整えたいですね。表示箇所はそれぞれ違うのに、同じ見た目で表示するのはちょっとダサい気がします。その場合はショートコードに属性を加えると効率よくできます。利用できる属性については、プラグインのFAQページにも書いてあります（英文）が、以下に一覧をご紹介します。

ショートコードに利用できる属性一覧

• id(string) – ulエレメントのid名(default:npcatch)
• cat(int) – カテゴリID(default:NULL)
• width(int) – サムネイルのwidth値(default:10)
• height(int) – サムネイルのheight値(default:10)
• posts_per_page(int) – 表示件数(default:5)
• sticky(boolean) – 先頭に固定表示の記事を表示するかどうか(on:1 off:0 default:0)
• offset(int) – 先頭からx番目の記事から表示(default:0)
• orderby(string) – 記事の並び方(default:date)
• order(string) – orderbyで並べた記事を昇順か降順で表示(降順：DESC 昇順：ASC default:DESC)
• date(boolean) – 記事の公開日の表示有無(on:1 off:0 default:0)
• dynamic(boolean) – 同じカテゴリの最新記事を動的に表示する。（カテゴリIDを指定している場合は、こちらの値が優先されます）また、投稿タイプが「post」の時のみ設定が有効になります。「post」以外のページを表示している場合はカテゴリIDの値を優先します。(on:1 off:0 default:0)

・・・上記の一覧は、難しく書いてあるように見えますが「こういうの使えるよ」程度で、今はご理解いただけるだけでいいんじゃないか、と思います。

というわけで、今回はその中から「id属性」についてピックアップして、書き方をご紹介します。

ショートコードに属性を加えて、お好みの値で出力する方法

それでは早速、ショートコードにid属性を入れましょう～。まずは、何も入れないパターンからです。

単純に「[npc]」と入れます

デフォルトのid属性の値は「npcatch」で出力されます。

<ul id="npcatch">
 <li>記事1</li>
 <li>記事2</li>
 <li>記事3</li>
</ul>

続いて、ショートコードにid属性を加えます。

「[npc id="single_new"]」とid属性を加えると・・・

id属性の値が「single_new」に変更されて出力されます。

<ul id="single_new">
 <li>記事1</li>
 <li>記事2</li>
 <li>記事3</li>
</ul>

上記のサンプルのように、ショートコードを使ってid属性の値を変更すると、例えばCSSで見た目を整えるときにも、他のスタイルからの干渉は少なくなると思います。お好みのデザインにカスタマイズしやすいです。

まとめ

以上でショートコードの使い方について、基本的な使い方の説明でした。今までショートコードを使ったことがない方は、記事の後半から難しく感じたのではないかと思いますが、この機会に是非ともお試しください。使えば使うほど、便利さを実感できるんじゃないかな～と思っています。

このショートコードの属性を使って「同じカテゴリの最新記事を動的に表示」する方法もあります。便利な機能ですので、あわせてご参考くださいますと嬉しいです。

「Newpost Catch」プラグイン専用ページはこちら