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

  関連記事

linkwighin
WordPressの関連記事表示に便利なLinkWithinプラグインを入れてみた。

LinkWithin WordPressで関連記事を表示するのにとても便利なプラ …

着火
CodeIgniterのCLIでバッチ処理を実行してみる

※この記事は CodeIgniter Advent Calendar 2015 …

PERARI
WebRTCで動画チャットできる「PERARI」というWebサービスを作りました

※この投稿は「WebRTC Advent Calendar 2014」の3日目の …

phpDocumentor2
phpDocumentor2を試してみたのでそのセットアップ手順など

・phpDocumentor しばらくぶりにサイトを見たら新しいphpDocum …

wordpress-logo-stacked-rgb
MySQLの最適化でWordPressのアクセス不能状態を復旧

XREAでWordpressのサイトをいくつか運営していますが、そのうちの一つが …

ERMaster
ERMasterの動作が重くなった時に変更履歴の削除を試してみてはいかが

・ER Master DBのモデリングには対応DBが多く、エクスポート機能も充実 …

引っ越し
WordPressのサーバ移転した時の以降作業手順まとめ

先日、とあるサイトのWordPressサイトをサーバ移転する作業を行いました。 …

鍵
WordPressで不正アクセス履歴がチェックできるプラグイン「Crazy Bone(狂骨)」でセキュリティ意識を高めよう

とあるサイトのお客さんから、WordPress管理画面のログイン履歴が確認したい …

VNC
Ubuntu 12.04 にVNCでリモート接続するための設定手順

Ubuntu 12.04 LTS に Windows からリモート接続できるよう …

Git
とりあえずGit使ってみたい!「Gitポケットリファレンス」はそんな人に向いてる一冊でした。

今さらながら、最近ようやくGitを使い始めている今日この頃です。 少し前までは、 …