関連記事ショートコードで出力される記事タイトルを任意に変更する高度な実装手法
WordPressの運用において、関連記事を表示させるショートコードは非常に強力なツールです。しかし、標準的なプラグインや自作のショートコードでは、記事のタイトルがそのまま出力される仕様になっていることが多く、デザインの一貫性やユーザーのクリック率を考慮した際に「任意のタイトルに書き換えたい」というニーズが頻繁に発生します。本記事では、技術的な知見に基づき、この課題を解決するための堅牢な設計手法を解説します。
なぜタイトルを書き換える必要があるのか
Webデザインの観点から見ると、ブログ記事のタイトルはSEOを意識して長くなりがちです。しかし、関連記事エリアという限られたスペースにおいて、長すぎるタイトルはレイアウトを崩す原因となり、視認性を著しく低下させます。また、記事の内容をより端的に、あるいはクリックを誘発するような「訴求力の高い表現」に置き換えることは、UX（ユーザーエクスペリエンス）向上に直結します。
単にタイトルを短縮するだけでなく、コンテキストに応じて動的にタイトルを制御する仕組みを構築することで、Webサイトの質は一段と高まります。
技術的アプローチ：カスタムフィールドの活用
最も推奨されるアプローチは、カスタムフィールドを利用して「代替タイトル」を保存し、ショートコード内でそれを参照する方法です。これにより、データベース上の本来の記事タイトルを維持したまま、表示上のタイトルのみを柔軟に変更可能になります。
まずは、Advanced Custom Fields (ACF) などのプラグイン、あるいはWordPress標準のカスタムフィールド機能を使用して、記事編集画面に「関連記事用タイトル（rel_title）」というフィールドを作成します。
詳細実装：PHPによるショートコードのカスタマイズ
以下に、ショートコード内でカスタムフィールドの値を判定し、存在すればそれを優先的に表示する実装例を示します。
/**
* 関連記事を表示するショートコードのロジック
* [related_posts ids="1,2,3"]
*/
function custom_related_posts_shortcode($atts) {
$atts = shortcode_atts(array(
'ids' => '',
), $atts);
$post_ids = explode(',', $atts['ids']);
$output = '<div class="related-posts-container">';
foreach ($post_ids as $post_id) {
$post = get_post($post_id);
if (!$post) continue;
// 優先順位: カスタムフィールド > 本来のタイトル
$display_title = get_post_meta($post->ID, 'rel_title', true);
if (empty($display_title)) {
$display_title = get_the_title($post->ID);
}
$permalink = get_permalink($post->ID);
$thumbnail = get_the_post_thumbnail($post->ID, 'medium');
$output .= '<div class="related-item">';
$output .= '<a href="' . esc_url($permalink) . '">';
$output .= '<div class="thumb">' . $thumbnail . '</div>';
$output .= '<div class="title">' . esc_html($display_title) . '</div>';
$output .= '</a>';
$output .= '</div>';
}
$output .= '</div>';
return $output;
}
add_shortcode('related_posts', 'custom_related_posts_shortcode');
コードの詳細解説
上記のコードでは、以下のポイントを重視しています。
1. get_post_meta関数の利用：カスタムフィールドに値があるかを確認します。これにより、全ての記事に代替タイトルを入力する必要がなくなり、運用コストを削減できます。
2. esc_htmlとesc_urlの徹底：セキュリティ対策として、出力されるデータは必ずエスケープ処理を行います。特に外部から入力される可能性のあるメタデータは、XSS（クロスサイトスクリプティング）のリスクを考慮し、適切にサニタイズする必要があります。
3. 柔軟なフォールバック：カスタムフィールドが空の場合は、本来の記事タイトル（get_the_title）を自動的に取得するため、レイアウトが欠落するリスクを防いでいます。
CSSによる横長レイアウトの最適化
ショートコードで出力されたHTMLを美しく整えるためのCSS設計も重要です。横長レイアウトを実現するためには、FlexboxまたはGridレイアウトが最適です。
.related-posts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.related-item {
flex: 1 1 300px;
border: 1px solid #eee;
padding: 10px;
}
.related-item .title {
font-size: 14px;
font-weight: bold;
margin-top: 10px;
line-height: 1.5;
/* 2行で省略する設定 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
実務アドバイス：保守性と拡張性を高めるために
シニアデザイナーの視点から、実務でこの機能を運用する際の注意点をいくつか共有します。
1. 運用ルールの策定：代替タイトルは「何のためのものか」を明確にすべきです。例えば「SEOタイトルは検索エンジン用」「関連記事タイトルはユーザーのクリック率向上用」と役割を分けることで、編集者が迷わずに運用できます。
2. データベースの負荷軽減：もし関連記事を自動取得するロジック（tax_queryなど）と組み合わせる場合、WP_Queryのクエリ結果をTransient API（キャッシュ）で保存することを強く推奨します。都度DBにアクセスするのはパフォーマンス低下を招きます。
3. 文字数制限の検討：手動でタイトルを入力する場合、文字数が長すぎるとレイアウトが崩れる可能性があります。入力時に文字数制限を設けるか、あるいはCSSの「text-overflow: ellipsis」を利用して、強制的に省略する設計を組み込んでおくのが賢明です。
まとめ
関連記事のタイトルを任意のものに変更する仕組みは、WordPressサイトの細かいブラッシュアップにおいて非常に効果的な手法です。カスタムフィールドを活用することで、データベースの整合性を守りつつ、デザイン的な柔軟性を確保することが可能になります。
本記事で紹介した実装は、単なる機能追加に留まらず、将来的なサイトの拡張性や運用負荷の軽減も考慮したものです。技術的な実装だけでなく、ユーザーがどう感じるか、編集者がどう運用するかという視点を常に持ち合わせることが、優れたWebサイト構築には不可欠です。ぜひ貴社のプロジェクトや自身のサイトで、この仕組みを実装してみてください。適切な設計は、必ずサイトの品質を底上げしてくれます。
コメント