【Smart Custom Fields】SCFを使ってブログカードを作成する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
WordPressは、記事をより魅力的に表示するための小技が数多く存在します。その一つが「ブログカード」— 記事を簡潔に紹介するためのビジュアルリンクです。この記事では、Smart Custom Fieldsを活用して、投稿記事にブログカードを簡単に追加する方法をご紹介します。
この記事の目次を表示
Smart Custom Fieldsとは
WordPressのプラグインの一つであるSmart Custom Fieldsは、専用のカスタムフィールドを作成できるツールです。このプラグインはテキストフィールドやラジオボタンなどの標準的な入力フィールドを生成できるほか、一番の目玉は複製機能です。この機能はAdvanced Custom FieldsではPRO版（有料版）でのみ利用可能ですが、Smart Custom Fieldsを使用すると、複製機能を含むすべての機能を無料で利用できます。これがSmart Custom Fieldsが人気の理由です。
Smart Custom Fieldsの各フィールドの出力方法は以下記事で詳しく解説しています。
それでは早速Smart Custom Fieldsを使用して投稿ID、URLそれぞれの方法でブログカードを作成する方法を解説します。
投稿IDを指定したブログカードの作成
まず前提として、投稿IDからブログカードを作成する際のカスタムフィールド名は「 custom_post_id_field 」とします。
投稿IDからブログカードを作成する関数を作成
まず、投稿IDからブログカードを作成する関数を作成します。今回はcreate_blog_card_by_post_idという関数名にしました。この関数は引数で指定された投稿IDをもとにタイトル、抜粋文、アイキャッチ画像、記事URLを取得します。そして、取得した情報からブログカード用のHTMLを組み立てます。
function create_blog_card_by_post_id($post_id) {
// 無効な投稿IDの場合は早期リターン
if (!is_numeric($post_id) || get_post($post_id) === null) {
return 'Invalid post ID.';
}
// 投稿データを取得
$post = get_post($post_id);
$title = get_the_title($post_id);
$excerpt = get_the_excerpt($post_id);
$thumbnail = get_the_post_thumbnail_url($post_id, 'full');
$permalink = get_permalink($post_id);
// HTMLを生成
$html = '<div class="blog-card">';
if ($thumbnail) {
$html .= '<div class="blog-card-image"><img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . '"></div>';
}
$html .= '<div class="blog-card-content">';
$html .= '<h3 class="blog-card-title"><a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a></h3>';
$html .= '<p class="blog-card-excerpt">' . esc_html($excerpt) . '</p>';
$html .= '</div></div>';
return $html;
}
投稿IDを使ってブログカードを表示する関数を作成
次に、投稿IDを使ってブログカードを画面上に表示するための関数を作成します。create_blog_card_by_post_id関数はブログカードを作成する関数でしたが、次に作る関数はブログカードを表示するための関数です。
この関数をdisplay_blog_card_from_post_idという関数名とします。
Smart Custom Fieldsで作成した「custom_post_id_field」というカスタムフィールドに入力された値をscf::get関数を使用して取得します。取得した投稿IDを先ほど作成したcreate_blog_card_by_post_id関数に引数として投稿IDを指定することでブログカードを作成してくれます。
さらに、add_shortcodeというコマンドを使うことで、この機能をショートコードに変換します。これにより、記事やページを編集しているときに、ショートコードを使って簡単にブログカードを追加することができるようになります。使い方はとても簡単で、投稿エディターにショートコードを入力するだけです。
// 投稿IDをカスタムフィールドから取得してブログカードを表示
function display_blog_card_from_post_id() {
$post_id = scf::get('custom_post_id_field');
echo create_blog_card_by_post_id($post_id);
}
add_shortcode('show_blog_card_by_id', 'display_blog_card_from_post_id');
ショートコード
// 投稿IDのショートコード例
[show_blog_card_by_id]
このショートコードをページの編集画面に貼り付けるだけで、あらかじめ設定された投稿IDに基づいたブログカードをその場に挿入できます。
URLを指定したブログカードの作成
次にご紹介するのがURLを入力して、それをもとにブログカードを作成する方法です。こちらの場合はカスタムフィールド名は「custom_url_field」としました。
URLからブログカードを生成する関数を作成
URLからブログカードを作成する場合、以下の関数を作成します。create_blog_card_by_urlという関数名とします。
この関数はまず、引数で渡されたURLをもとにWordPresss標準関数のurl_to_postidを使用し、投稿IDを取得します。その後、 「投稿IDを指定したブログカードの作成」の方でご紹介したcreate_blog_card_by_post_id関数を使用し、 投稿IDをもとにタイトル、抜粋文、アイキャッチ画像、記事URLを取得します。そして、取得した情報からブログカード用のHTMLを組み立てます。
function create_blog_card_by_url($url) {
// URLから投稿IDを取得
$post_id = url_to_postid($url);
// 無効なURLの場合は早期リターン
if ($post_id == 0) {
return 'Invalid URL.';
}
// 投稿IDを使用してブログカードを生成
return create_blog_card_by_post_id($post_id);
}
URLを使ってブログカードを表示する関数を作成
続いて以下の関数を作成します。こちらそれぞれの名前をurlとしていますが、機能としては 「投稿IDを指定したブログカードの作成」 でご紹介したショートコードを使用できるようにする関数と同じ働きをします。
// URLをカスタムフィールドから取得してブログカードを表示
function display_blog_card_from_url() {
$url = scf::get('custom_url_field');
echo create_blog_card_by_url($url);
}
add_shortcode('show_blog_card_by_url', 'display_blog_card_from_url');
ショートコードを●●
// URLのショートコード例
[show_blog_card_by_url]
投稿IDの方同様、このショートコードをページの編集画面に貼り付けるだけで、あらかじめ設定されたURLに基づいたブログカードをその場に挿入できます。
まとめ
今回はSmart Custom Fieldsを使用したブログカードの作成方法を詳しく解説しました。この方法を使うことで、記事と記事の繋がりを視覚的に際立たせることができ、関連するコンテンツへの読者の流れを自然かつ効果的に促すことが可能になります。美しく機能的なブログカードを通じて、読者が必要とする情報に彼らをスマートに導きましょう。このシンプルながら強力なツールを使って、サイトの使い勝手を向上させ、訪問者の満足度を高めることができます。
