WordPressのプラグインなしでブログカードを作成する方法

2023.10.28
WordPress

WordPressのプラグインを使用せずに、記事内に別の記事へのリンクを設置するブログカードを作成する方法の備忘録です。

下記のような別の記事のブログカードをショートコードで簡単に表示できるように作成します。

WordPressにSwiperでスライダーを実装する方法

Swiperを使って、WordPressサイトにスライダーを実装する手順の備忘録です。 Swiperは、スライダーを簡単に作成することができるJavaScriptのプラグインです。 jQuery非依存…

ブログカードを作成

まずは、ブログカードを作成するショートコードを作成します。

「functions.php」に、下記のコードを記述します。

add_shortcode("blogcard", "blogcard_shortcode");
function blogcard_shortcode($atts) {
  $url = $atts['url'];
  $id = url_to_postid($url);

  $title = esc_html(get_the_title($id));

  $exerpt = get_post_field('post_excerpt', $id);
  if(empty($exerpt)) {
    $exerpt = wp_trim_words(get_post_field('post_content', $id), 100);
  }

  if(has_post_thumbnail()) {
    $img = wp_get_attachment_image_src(get_post_thumbnail_id($id), 'thumbnail', true);
    $img_url = esc_html($img[0]);
  } else {
    global $post;
    $post = get_post($id);
    ob_start();
    ob_end_clean();
    $img_url = '';
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $img_url = $matches [1] [0];
    if(empty($img_url)) {
      $img_url = esc_url(get_template_directory_uri()) . "/images/thumbnail.png"; 
    }
  }
  
  $card = '<div class="blog-card">
    <a href="'.$url.'">
      <div class="blog-card_img">
      <img src="'.$img_url.'" alt="'.$title.'">
      </div>
      <div class="blog-card_text">
        <p class="blog-card_title">'.$title.'</p>
        <p>'.$exerpt.'</p>
      </div>
    </a>
  </div>';
  return $card;
}

add_shortcodeでブログコードのショートコードを設定しています。

ショートコードに設定されたURLから、表示する投稿ページの情報を取得しブログカードのHTMLに出力しています。

例えば、記事のタイトルは$titleに取得され、HTMLコードの<p class="blog-card_title">'.$title.'</p>の部分で出力されています。

同様に$exerptでは記事の内容を取得していますが、そのまま表示すると長くなってしまうのでwp_trim_words()で100字だけ取得するようにしています。

$img_urlでは、記事のサムネイルを取得しています。通常は記事のアイキャッチ画像を取得していますが、設定されていない場合は、記事の1枚目の画像を取得します。記事に画像が含まれていない場合は、デフォルトで用意している「thumbnail.png」を表示します。

ショートコードを記事に設置

投稿ページのブログカードを表示したい箇所に、下記のショートコードを記入します。

[blogcard url="記事のURL"]

引数には、表示したいリンク先の記事のURLを記入します。

プレビューで表示して、設定した記事のサムネイルやタイトルが表示されれば設定は完了です。

CSSを設定する

最後に、デザインをCSSで設定してブログカードの完成です。

参考までに、上記のサンプルで使用しているCSSを用意しました。

.blog-card a {
  border: solid 2px #e5eaea;
  padding: 10px;
  color: #333;
  text-decoration: none;
  display: flex;
  transition: .2s ease-out;
}
.blog-card a:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 1px #ececec;
}
.blog-card_img {
  flex: 0 0 300px;
  margin-right: 16px;
}
.blog-card_text p {
  font-size: 14px;
  margin: 0;
}
.blog-card_text p.blog-card_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

ブログカード全体を囲む<a>タグにborderでグレーの枠線を付けています。

また、display: flex;を設定することで、画像とテキストを横並びにしています。

「.blog-card a:hover」の部分で、マウスオーバーでカードが上に浮き上がるようなエフェクトを追加しています。

スマホでの表示は、デザインに合わせて調整してみてください。