WordPressで記事を書いていると、記事の途中で関連記事へのリンクを設置したいことがあります。
ただの<a>タグでもいいけれど、できればembedのように画像や説明も付けたかっこいいリンクにしたい！
ということで、簡単なショートコードで関連記事へのリンクを設定する方法をまとめました。プラグインは使いません。
embedは離脱リスクがある
embed機能は別ウインドウで開けないので、せっかく読んでもらっている記事から読者が離脱してしまうリスクがあります。
記事の最後につけるリンクならそれでもいいんですが、記事の途中でそれは避けたいもの。
いろいろいじればできる可能性はあるかもしれませんが、少し試した限りではembedが表示されるiframeの中からウインドウ状態を操作するのは無理そうです…。
まずは完成形をご覧ください
▼WordPressの投稿画面にこのように入力すると
|
1 |
[kanren url="https://shirankedo.net/wordpress-embed-meta-description/"] |
▼このように表示される！という仕組みです。
プラグイン不要！ショートコードで関連記事を表示しよう
function.php にコードを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//関連記事リンク function shortcode_kanren($arg){ extract ( shortcode_atts ( array ( 'url' => '', //関連記事のURL ), $arg ) ); $post_id = url_to_postid($url); $ret = ''; if ($post_id !== 0) { $post = get_post($post_id); } if ($post) { $ret .= '<div class="kanren">'; if (get_the_post_thumbnail($post_id, 'thumbnail')) { $ret .= '<div class="kanren-image">'; $ret .= '<a href="'.get_the_permalink($post_id).'" target="_blank">'; $ret .= get_the_post_thumbnail($post_id, 'thumbnail'); $ret .= '</a>'; $ret .= '</div>'; } $ret .= '<div class="kanren-title">'; $ret .= '<a href="'.get_the_permalink($post_id).'" target="_blank">'; $ret .= get_the_title($post_id); $ret .= '</a>'; $ret .= '</div>'; $ret .= '<div class="kanren-description">'; $ret .= get_post_meta($post_id, 'bzb_meta_description', true); $ret .= '</div>'; $ret .= '</div>'; } else { $ret .= '<p><a href="'.$url.'" target="_blank">'.$url.'</a></p>'; } return $ret; } add_shortcode('kanren', 'shortcode_kanren'); |
サムネイル画像（アイキャッチ画像）、タイトル、そして27行目ではメタディスクリプションを取得しています。
このサイトはXeory Baseというテンプレートを使用しているので、「bzb_meta_description」というキー名を使っていますが、この部分は適切なものに書き換えてください。
例えば、プラグイン「All in One SEO Pack」を使っている場合は、「bzb_meta_description」を「_aioseop_description」に書き換えるとうまくいくと思います。
また、自サイト以外へのURLを指定しまったり、自サイトの存在しないページを指定してしまった場合は31行目の処理が実行されて、このように何でもない<a>タグが出力されます。
自分のサイトへのリンクの場合はちゃんと表示されます。
いずれも「target=”_blank”」が付いているので、別ウインドウ（別タブ）で開きます。
お好みに合わせてスタイルも設定
style.css にコードを追加
cssはお好みでどうぞ。参考にこのサイトのcssを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*関連記事リンク*/ .kanren{ padding: 5px; margin: 5px; border: 1px #e5e5e5 solid; } .kanren:after { content: ""; display: block; clear: both; } .kanren-image{ float: left; margin-right: 10px; max-width: 250px; } .kanren-title{ font-size: 18px; font-weight: bold; } .kanren-title a:after { content: "\f08e"; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 12px; text-decoration: none; margin: 0 3px; } .kanren-description{ font-size: 12px; } |
21～29行目は、別ウインドウで開くことがわかりやすいようにFontAwesomeのアイコンを設定しています。
アイコンが不要ならばcssの該当箇所をばっさりカットでOKです。
WordPressのテーマによっては使える状態になっているものもありますが、使えない場合は設定して使ってください。
▼参考サイトの一例。これは別ウインドウで開きませんので、できれば右クリックor長押しで別タブで開いて、このサイトのほかの記事も見ていってください（笑）
embedの関連記事
こちらの記事も合わせてどうぞ！
