WordPressのプラグインなしでブログカードを作ってみる

ブログ内の回遊率を上げるためによく利用されるブログカードですが、これまで色々な依頼でプラグインを使用して実装してきました。

エンジニアさんが絡む案件ではオリジナルのものを作ってもらったりしていたけど、「そんな難しくないよ」ということで、自分でもサンプルコードをもらって色々といじってみました。

functions.php、style.css、そして実際に記事に挿入する際はショートコードで実装できます。

functions.phpに設定する

function show_blogcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//URLから投稿のIDを取得
	$id = url_to_postid($url);
	//画像横幅
	$img_width ="160";
	//画像高さ
	$img_height = "120";
	//アイキャッチ画像がない場合
	$no_image = 'img/no-image.jpg';
	
	//記事タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
	
	//本文を取得 40文字以内
	if(has_excerpt($id)){
		//抜粋がある場合
		$excerpt = wp_trim_words(get_the_excerpt($id), 40, '…' );
	} else {
		//抜粋がない場合
		$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 40, '…' );
	}
	
	//アイキャッチ画像を取得
	if(has_post_thumbnail($id)) {
		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
		$img_tag = '<img src="'. $img[0] .'" alt="'. $title .'" width="'. $img[1] .'" height="'. $img[2] .'" />';
	} else { 
		$img_tag = '<img src="'. $no_image .'" alt="" width="'. $img_width .'" height="'. $img_height .'" />';
	}
	
	//HTML
	$sc_blogcard .='
	<div class="blogcard">
      <a href="'. $url .'">
        <div class="blogcard-wrapper">
          <div class="blogcard-img">'. $img_tag .'</div>
          <div class="blogcard-content">
            <div class="blogcard-title">'. $title .'</div>
            <div class="blogcard-excerpt">'. $excerpt .'</div>
          </div>
        </div>
      </a>
	</div>';	
	return $sc_blogcard;	
}

//ショートコード
add_shortcode("blogcard_code", "show_blogcard");

自分自身、知り合いからもらったコードなので、調べればどこかで同じようなコードが出ているかもしれませんが、自身の備忘録のためにも書いておきます。

記事タイトル、サムネイル、本文抜粋が表示されるように設定しています。

//投稿日を取得
$date = get_the_date('', $id);

その他に記事投稿日を入れたい場合は上記を追加します。

//URLから投稿のIDを取得
$id = url_to_postid($url);
//画像横幅
$img_width ="160";
//画像高さ
img_height = "120";
//アイキャッチ画像がない場合
$no_image = 'img/no-image.jpg';

画像サイズとアイキャッチが無い場合の代替画像は自由に設定してください。

画像サイズは、ここで設定して更にCSSでも調整可能です。

//記事タイトルを取得
if(empty($title)){
	$title = wp_trim_words(get_the_title($id), 40, '…');
}

本文のところには文字数制限を調整していますが、タイトルも長さによってはレイアウト調整に影響する場合もあるので、タイトル文字数を制限する場合はこちらを使います。

//ブログカードのHTML
$sc_blogcard .='
  <div class="blogcard">
    <a href="'. $url .'">
      <div class="blogcard-label">関連記事</div>
      <div class="blogcard-img">'. $img_tag .'</div>
      <div class="blogcard-content">
        <div class="blogcard-title">'. $title .'</div>
        <div class="blogcard-excerpt">'. $excerpt .'</div>
      </div>
    </a>
  </div>';	
	return $sc_blogcard;	
}

こちらが表示されるhtml部分です。
順序の入れ替えなどはご自由にどうぞ。

日付を入れる場合はこのコードのどこかに

<div class="blogcard-date">'. $date .'</div>

などとして追加してください。

CSSを設定する

.blogcard {
    width: 100%;
    margin: 30px 0;
    line-height: 1;
    background-color: #fff;
    border: 3px solid #eeeeee;
    word-wrap: break-word;
}
.blogcard a {
    color: #000;
    display: flex;
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s ease;
    position: relative;
}
.blogcard-label {
    font-size: 1.3rem;
    display: inline-block;
    background-color: #f3f;
    color: #fff;
    text-align: center;
    line-height: 25px;
    width: 70px;
    height: 25px;
    transform-origin: 50% 50%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.blogcard a:hover {
    color: #5a91cd;
    opacity: 0.8;
}
.blogcard-img {
    width: 240px;
    padding: 0;
}
.blogcard-content {
    width: calc(100% - 240px);
    padding: 10px;
}
.blogcard-title {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}
.blogcard-excerpt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 10px;
}
.blogcard-date {
    font-size: 1.3rem;
}

/** スマホ用 **/
@media screen and (max-width: 767px) {
    .blogcard {
        margin: 20px 0;
    }
    .blogcard-img {
        width: 120px;
        height: 110px;
    }
    .blogcard-img img {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .blogcard-content {
        width: calc(100% - 120px);
    }
    .blogcard-title {
        font-size: 1.3rem;
    }
    .blogcard-excerpt  {
        display: none;
    }
}

ホントにざっくりなので適当です。

実際に記事内に設置してみる

このような形で自分の会社のサイトに設置してみました。

記事にはこのような形でショートコードを書くだけです。

[blogcard_code url="リンク先のURL"]

そうするとこんな感じで表示されます。

あくまで一例なので、日付入れたりだけでなく、色々とまだまだカスタマイズできそう。

プラグインなしでブログカードを作ることの意味

今までプラグインを使っていたのに、どうして急に使わないようにしようかと思ったのは、去年の案件でカスタマイズでちょっと面倒なことが起きたのと、単純にプラグインばっかり頼っている状況を少しずつ変えていかなければ、と思ったことが大きいでしょうか。

あとはプラグインを使うことで表示速度が遅くなって、サイトが重くなったりすることもあるので、そういったところも改善できたら良いかなと。

こちらで書いたコードは本当にざっくりとした内容なので、自分自身でももっと改善していきたいですね。