WordPressでショートコードを使用して内部リンクのブログカードをオリジナルデザインで作成する方法

2018/05/02 2018/12/16

以前、ショートコードを自作して投稿内で呼び出す方法と引数の受け渡し方について、メモしました。

今回はこれを応用して、内部リンクを貼ったときにできる「ブログカード」を、独自のデザインで作成する方法をご紹介します。

まずは普通に、WordPress標準のブログカードをみてみましょう。

WordPressの投稿内で任意のPHPコードを実行できる「ショートコード」を自分で作成する方法と呼び出し方。引数の受け渡しも簡単！

でっかいんですよね、これ。笑

iframeが作成されるのも、個人的には好きじゃなくて、もっとシンプルがいいな、と思って私が当ブログで作成した自作ブログカードがこちら

ショートコードで呼び出したブログカード

WordPressの投稿内で任意のPHPコードを実行できる「ショートコード」を自分で作成する方法と呼び出し方。引数の受け渡しも簡単！

表示する内容も自分で決めれるし、デザインも、マウスホバー時のエフェクトも、好きなようにできちゃいます。

【限定セール中！】ブログ向けWordPressテーマを開発しました！

ブログカードを表示するショートコードの中身

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');

さっとコードについて説明しておきます。（ショートコードの基本的な扱い方については、冒頭で貼ってあるリンクを参照してください。）