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

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

例えば ↓こんな感じの。

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

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

ショートコードを作る

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

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

まず、テーマの functions.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');

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

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

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

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

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

フリーランスの Web 系エンジニアで、主に Web サイト制作やシステム・アプリケーション開発を仕事にしています。
好きな事は高校野球、将棋、インターネット、子どもと遊ぶ、食べること。
>>詳しいプロフィールはこちら