WordPressで過去記事のリンクを画像付きで表示するショートコードの作り方

記事内で、自分のサイトの過去の投稿を紹介する機会って結構ありますが、そんな時にリンクだけだとちょっと味気無く感じるものです。

例えば ↓こんな感じの。

そこで、記事のサムネイル画像とタイトルを並べたような見栄えで簡単にリンクを貼れるようなショートコードを作ってみようと思います。

でき上がりイメージは、↓こんな感じ。

[displayPost url=https://blog.ko31.com/201407/wordpress-viral-site/]

ショートコードを作る

ショートコードは下記のような仕様で作ることにします。

  • 引数は投稿URLを指定
  • 投稿のタイトル、URL、アイキャッチ画像を自動で取得して表示

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

[php]
function myDisplayPost($atts) {
extract(shortcode_atts(array(
‘url’ => ”,
), $atts));
if (!$url) {
return false;
}
// 投稿URLからIDを取得
if ($url) {
$id = url_to_postid( $url );
}
if (!id) {
return false;
}
// 投稿のタイトル、URL、サムネイル画像を取得
$title = get_the_title( $id );
$url = get_permalink( $id );
$thumb = get_the_post_thumbnail( $id, array(100, 100), array(‘border’=>0, ‘width’=>100, ‘height’=>100, ‘style’=>’display:inline; float:left; margin:0 5px 0 0;’) );
if (!$thumb) {
$thumb = ‘<img src="’ . get_template_directory_uri() . ‘/images/no-img.png" width="100" height="100" style="display:inline; float:left; margin:0 5px 0 0;" />’;
}
// 表示するHTML組み立て
$html = ‘<a href="’ . $url . ‘">’ . $thumb . ‘</a><a href="’ . $url . ‘">’ . $title . ‘</a><br style="clear:both;">’;
return $html;
}
add_shortcode(‘displayPost’, ‘myDisplayPost’);
[/php]

コード内に埋め込まれた html や css は適当にサイトに合わせて調整してください。

後は、add_shortcode で指定した「displayPost」がショートコード名になるので、投稿本文内で次のように書けば画像付きのリンクが表示できるようになるはずです。

[php]
[displayPost url=リンクする投稿URL]
[/php]

※上記の大括弧「[」「]」は半角で記述してください。

画像が入ると見た目が良くなるのはもちろん、クリックが促されて回遊率が高まる効果も期待できると思いますので、改善したいと思っている方は試してみてはいかがでしょうか。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

宮内 隆行, 西川 伸一, 岡本 渉, 三好 隆之
発売日: 2014/07/19
Amazonの情報を掲載しています

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

Gosign(ゴーサイン)という屋号でフリーランスの Web エンジニアとして活動しています。
当ブログでの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたが、お気軽にお問い合わせください!

合わせて読みたい記事