以前、ショートコードを自作して投稿内で呼び出す方法と引数の受け渡し方について、メモしました。
今回はこれを応用して、内部リンクを貼ったときにできる「ブログカード」を、独自のデザインで作成する方法をご紹介します。
まずは普通に、WordPress標準のブログカードをみてみましょう。
WordPressの投稿内で任意のPHPコードを実行できる「ショートコード」を自分で作成する方法と呼び出し方。引数の受け渡しも簡単!
でっかいんですよね、これ。笑
iframeが作成されるのも、個人的には好きじゃなくて、もっとシンプルがいいな、と思って私が当ブログで作成した自作ブログカードがこちら
ショートコードで呼び出したブログカード

表示する内容も自分で決めれるし、デザインも、マウスホバー時のエフェクトも、好きなようにできちゃいます。
目次
ブログカードを表示するショートコードの中身
functions.phpにて、以下のショートコードを作成・登録しています。
function show_internal_link($arg){
$post_id = $arg[0]; //引数の投稿ID
$title = get_the_title($post_id); //投稿タイトル
$url = get_permalink($post_id); //投稿URL
//サムネイル画像を取得
if (has_post_thumbnail($post_id)) {
// アイキャッチ画像があるときはそのURLを取得
$thumb_id = get_post_thumbnail_id($post_id);
$thumb_img = wp_get_attachment_image_src($thumb_id, 'thumbnail');
$src = $thumb_img[0];
} else {
//アイキャッチ画像がなかったときに表示させる画像のパス
$src = get_template_directory_uri().'/img/no_image.jpg';
}
//表示するブログカードのソース
$linkhtml = '<a href="'.$url.'" class="internal_link"><img src="'.$src.'" alt="'.$title.'"><span>'.$title.'</span></a>';
return $linkhtml;
}
add_shortcode('my_link', 'show_internal_link');
さっとコードについて説明しておきます。(ショートコードの基本的な扱い方については、冒頭で貼ってあるリンクを参照してください。)
- 引数から投稿IDを取得
- それを元にタイトルやURL、アイキャッチ画像(サムネイルサイズ)を取得
- アイキャッチ画像が無い場合は、サーバーに用意してあるNoImage画像を取得
- 取得した情報を元に、ブログカードのソースを生成
- ソースをreturnする
という流れになっています。
好きにアレンジしてお使いください。(cssもそれに合わせて自由にどうぞ)
また、「アイキャッチ画像のURLだけを取得する方法」については、下記の記事で詳しくメモしています。
![[WordPress] 投稿IDからアイキャッチ(サムネイル)画像のURLだけを取得する関数を作ってみた。サイズ指定ももちろん可能。](https://wemo.tech/wp-content/uploads/2017/05/eye_eye1-180x104.jpg)
エディタでの呼び出し方
ショートコードの名前は「my_link」としているので、
例:投稿ID100の記事のブログカードを表示したい場合
[my_link 100]
とするだけです!
エディタ内の任意の場所で呼び出してみてください!
コメントする