HOME
BLOG
CODINGBLOG
【WordPress】ブログカードをプラグインなしで自作する方法
CODING
【WordPress】ブログカードをプラグインなしで自作する方法
WordPressで作ったブログサイトで記事を書いていると、記事内で「自分が書いた他の記事へのリンク」を貼ることが多々あると思います。
ただ、よくある青色の文字でリンクを貼っても良いですが、「ブログカード」形式にしてよりクリックしてもらいやすくするための一工夫を加えてみます。
ちなみに本サイトの「ブログカード」はこんな感じです。
- ブログカードをプラグインなしで自作したい
- 極力シンプルなコードで作成したい
このような方に向けて、この記事では「WordPressサイトでブログカードをプラグインなしで自作する方法」について解説しています。
他サイトで紹介されているコードがあまりにも煩雑だったので、極力シンプルなコードになるように仕上げています。
ブログカードを自作するためのコード解説
ブログカードを作成するショートコードを設定
今回ブログカードの作成には、WordPressの機能の1つである「ショートコード」を使います。
functions.phpに以下を記述し、ブログカードを作成するショートコードを設定します。
add_shortcode("blogcard", "blogcard_shortcode");
// ブログカードを作成するショートコードを作成
function blogcard_shortcode($atts) {
// ショートコード挿入時に引数として渡す"URL"から投稿IDを取得
$url = $atts['url'];
$id = url_to_postid($url);
// 投稿IDから各種データを取得
$title = esc_html(get_the_title($id));
$exerpt = get_post_field('post_excerpt', $id);
//抜粋記入欄が空欄の場合は、本文の先頭から100文字を取得
if(empty($exerpt)) {
$exerpt = wp_trim_words(get_post_field('post_content', $id), 100);
}
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id));
$img_link = esc_html($img[0]);
$date = esc_html(get_the_date('Y.m.d', $id));
// ブログカードとして挿入するHTMLタグを$cardに代入
$card = '<div">
<a href="'.$url.'">
<div style="background: url('.$img_link.') no-repeat center/cover"></div>
<div>
<p>'.$title.'</p>
<p>'.$exerpt.'</p>
<p>'.$date.'</p>
</div>
</a>
</div>';
return $card;
}ブログカードとして挿入するHTMLタグについては、例として本サイトで使用しているブログカードのHTMLタグを記載しています。
ご自身のサイトのデザインに合わせてお好みでカスタマイズしてください。クラスを付与してCSSでブログカードっぽくなるように調整します。
ショートコードを記事内に挿入
記事内でブログカードを挿入したい箇所に、以下のショートコードを記述します。
[blogcard url="サイト内記事URL"]引数urlには、リンク先となるサイト内の記事のURLを記入してお使いください。
おわりに
記事タイトルが設定されていない場合、アイキャッチ画像が設定されていない場合などのイレギュラーケースにも対応したブログカードを作りたい場合は、if関数で場合分けするなど自分なりに少しアレンジを加えてみてください。
もしこの記事に関する質問や、ブログカードのデザインの依頼希望などがあれば、問い合わせフォームよりお気軽にお尋ねください。