rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

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

      2014/07/31   WordPress, 開発

  • このエントリーをはてなブックマークに追加
  • Pocket

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

例えば ↓こんな感じの。

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

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

ショートコードを作る

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

  • 引数は投稿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]

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

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

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

ゴミの分別
だいぶスッキリ。WordPressのカテゴリーを整理してみた。

当ブログのカテゴリーを整理してみました。 今までカテゴリーは無計画に作っていまし …

Thank you
1月28日はWordPressの「プラグイン開発者に感謝する日」

WordPress 公式ブログによると1月28日は「プラグイン開発者に感謝する日 …

キーボード
WordPressでEnterキー押下時のsubmitはうまくできている

タイトルのままですが、WordPressを使っていてEnterキー押下時のsub …

棋士出身地マップ
将棋棋士データベースで遊ぶ(4)〜OpenStreetMapで棋士出身地マップを作る〜

※この記事は「将棋 Advent Calendar 2016 – A …

Google Adsense
Stingerのスマホ用Google Adsense表示問題を別な方法で修正してみる

当サイトのテーマをつい最近Stingerに変えたばかりだったのですが、とてもタイ …

svnエクスポート
svnコマンドでバージョン間の差分ファイルをエクスポートする方法

Subversionを使っていてバージョン間の差分ファイルをエクスポートする機会 …

WordCamp Tokyo 2015
初めて尽くしの「WordCamp Tokyo 2015」に行ってきました!

行ってきました!年に一度の WordPres のお祭り「WordCamp Tok …

Contact Form 7
Contact Form 7で使える特別メールタグや独自タグの作成方法など

photo credit: Kalexanderson via photopin …

20130328_jodconverter
OpenOfficeとLibreOfficeを使ってJODConverterのPDF変換結果を比べてみる

photo credit: hfreesartography via photo …

notify_from_wp
WordPressからLINE Notifyにメッセージを通知してみた

先日いじってみた LINE Notify が面白かったので、今度は WordPr …