WordPressにブログカードを設置する【プラグイン無し】

WordPressにブログカードを設置する【プラグイン無し】

ブログカードを自作する方法をご紹介します。

ブログカードとは?

本サイトでも設置しているのですが、ブログカードとは…これです。
↓↓↓

他の投稿のリンクを貼りたい時に使用します。
左にアイキャッチ画像、右にタイトル抜粋を出力しています。
クリックをすると本サイトの別投稿に飛びます。

テキストだけのリンクでは味気無い、目立たない…だけどアイキャッチ画像をひっぱってきてHTMLを編集して…は大変ですよね。そこでショートコードを使用して簡単に設置してみましょう。

ショートコードでどのように記述するの?

投稿編集画面に簡単なコードで記述します。
本記事ではスラッグを指定する方法投稿IDで指定する方法の2パターンをご紹介します。

ショートコード(投稿画面に記述する)
スラッグで指定
[blogcard slug="database-table"]
投稿IDで指定
[blogcard id="123"]

パターン1 : スラッグで指定する場合

functions.php
function blogcard_func($atts) {
    $page_data = get_page_by_path($atts['slug'], OBJECT, 'post');
    $post_id = $page_data->ID;
    $permalink = esc_url(get_permalink($post_id));
    $title = esc_html(get_the_title($post_id));
    $the_excerpt = apply_filters('get_the_excerpt', get_post_field('post_excerpt', $post_id));

    if (has_post_thumbnail($post_id)) {
        $img_src = get_the_post_thumbnail_url($post_id);
        $img = '<img src="'. $img_src .'" alt="' . $title . '">';
    } else {
        $img = '<img src="/xxx/no-image.png" alt="">'; //アイキャッチ画像が無い場合に表示する画像
    }

    $excerpt = has_excerpt($post_id) ? '<p class="blogcard-excerpt">'. $the_excerpt .'</p>' : '';

    $blogcard = '<div class="blogcard"><a href="'. $permalink .'">'. $img . '<div class="blogcard-content"><p class="blogcard-title">' . $title .'</p>'. $excerpt .'</div></a></div>';
    return $blogcard;
}
add_shortcode("blogcard", "blogcard_func");
編集画面に記述するショートコード
[blogcard slug="xxx"]
スラッグについて

slug=”xxx”のxxxに記事のスラッグを指定してください。
例えば本サイトの上記サンプルの場合はslug=”database-table”です。

パターン2 : 投稿IDで指定する場合

functions.php
function blogcard_func($atts) {
    $post_id = $atts['id'];
    $permalink = esc_url(get_permalink($post_id));
    $title = esc_html(get_the_title($post_id));
    $the_excerpt = apply_filters('get_the_excerpt', get_post_field('post_excerpt', $post_id));

    if (has_post_thumbnail($post_id)) {
        $img_src = get_the_post_thumbnail_url($post_id);
        $img = '<img src="'. $img_src .'" alt="' . $title . '">';
    } else {
        $img = '<img src="/xxx/no-image.png" alt="">'; //アイキャッチ画像が無い場合に表示する画像
    }

    $excerpt = has_excerpt($post_id) ? '<p class="blogcard-excerpt">'. $the_excerpt .'</p>' : ''. get_bloginfo('description') .'</p>';

    $blogcard = '<div class="blogcard"><a href="'. $permalink .'">'. $img . '<div class="blogcard-content"><p class="blogcard-title">' . $title .'</p>'. $excerpt .'</div></a></div>';
    return $blogcard;
}
add_shortcode("blogcard", "blogcard_func");
編集画面に記述するショートコード
[blogcard id="xxx"]
投稿IDについて

id=”xxx”のxxxに記事のIDを指定してください。
例えば本サイトの上記サンプルの場合はid=”283″です。

functions.phpのソース解説と補足

変数$post_idに格納している記事IDを元にパーマリンクやタイトル、抜粋、アイキャッチ画像を取得しているのですが、「スラッグで指定する場合」の方はまずget_page_by_path関数でページ情報を取得し、そこからIDを取得しています。

アイキャッチ画像

if (has_post_thumbnail($post_id)) …
でアイキャッチが存在するかの判定をしています。
もし無い場合は、elseの$img変数に指定した画像(no-image.png)が表示される仕様にしていますので <img src=”/xxx/no-image.png” alt=””> のxxx部分に画像パスを指定してください。

抜粋

抜粋が無い場合は空に(何も表示しない)していますが、もし「管理画面 >設定 > 一般設定」で設定した”キャッチフレーズ”を入れる場合は、下記の通りに変更してみてください。

functions.php
$excerpt = $the_excerpt ? '<p class="blogcard-excerpt">'. $the_excerpt .'</p>' : '<p class="blogcard-excerpt">'. get_bloginfo('description') .'</p>';

ブログカードのCSS

本サイトのブログカードのスタイルを参考までに載せておきます。
メディアクエリを使用してウィンドウ幅が狭い場合(768px以下)は抜粋を非表示にしています。
またhoverができる場合はブログカードにマウスオーバーした際にhover効果を付けています。(スマートフォン等ではホバーイベントが発動しないようにしています)

CSS
.blogcard {
  border: 1px solid #d2d2d2;
  transition: transform 0.3s;
  margin-bottom: 1em;
}

.blogcard a {
  padding: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #252525;
}

.blogcard img {
  flex: 0 0 200px;
  width: 200px;
  margin-right: 15px;
}

.blogcard-title {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 0;
  font-weight: bold;
}

.blogcard-excerpt {
  font-size: 14px;
  margin-top: 1em;
  margin-bottom: 0;
  line-height: 1.3;
}

@media (hover: hover) {
  .blogcard:hover {
    transform: translateY(-5px);
  }
}

@media only screen and (max-width: 767.98px) {
  .blogcard img {
    flex: 0 0 150px;
    width: 150px;
  }
  .blogcard-excerpt {
    display: none;
  }
}

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ