ko31 記事内で、自分のサイトの過去の投稿を紹介する機会って結構ありますが、そんな時にリンクだけだとちょっと味気無く感じるものです。
例えば ↓こんな感じの。
そこで、記事のサムネイル画像とタイトルを並べたような見栄えで簡単にリンクを貼れるようなショートコードを作ってみようと思います。
でき上がりイメージは、↓こんな感じ。
[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]
※上記の大括弧「[」「]」は半角で記述してください。
画像が入ると見た目が良くなるのはもちろん、クリックが促されて回遊率が高まる効果も期待できると思いますので、改善したいと思っている方は試してみてはいかがでしょうか。
