
投稿のループ外で投稿記事に関するデータを取得する時に使えるTips
基本的に投稿記事に関する情報は、投稿情報のループ内で、それぞれの値を出力することが多いかと思います。しかし、固定ページや詳細ページなどでも、ヘッダーやフッターなど共通部分といったところで投稿記事の情報を扱いたいケースもあるかと思います。そんな時にわざわざループ処理を書くのもナンセンスです。
そこで今回はループ外でも使える関数をメインに、投稿ループ外で記事に関するデータを取得する方法などをまとめていきたいと思います。
1. 投稿タイトル(固定ページ・シングルページ)
タイトルはWordPressに用意されている関数の「single_post_title()」を使うことでシンプルに記述できます。
// サンプル <h1> <?php single_post_title(); ?> </h1> // 出力されるHTML <h1> 投稿記事タイトル </h1>2. パーマリンク(固定ページ・シングルページ) パーマリンクも同じくWordPressに用意されている関数の「get_permalink()」で取得できます。引数のデフォルト値は表示されている投稿のIDになるので、対象記事とページが同一の場合は指定不要です。
// サンプル <a href="<?php echo get_permalink(); ?>">記事を見る</a> // 出力されるHTML <a href="https://example.com/?p=123">記事を見る</a>3. 記事コンテンツ本文(固定ページ・シングルページ) コンテンツ本文の情報はグローバル変数の「$post」に入っています。$postの中の「post_content」キーを参照します。本文にはHTMLが含まれることもあるので、出力する時には「esc_html()」といったサニタイズをしておきます。
// サンプル <div> <?php global $post; $postContent = $post->post_content; echo esc_html($postContent) ?> </div> // 出力されるHTML <div> <h1>見出しテキスト</h1><p>コンテンツ本文テキストコンテンツ本文テキスト........ </div>4. 抜粋テキスト(固定ページ・シングルページ) 抜粋テキストも同じくグローバル変数の「$post」に値が入っています。$postの中の「post_excerpt」キーを参照します。こちらもサニタイズをしておくと安心です。「mb_substr()」などでテキストをトリミングするケースもよく見かけます。
// サンプル <p> <?php global $post; $postExcerpt = $post->post_excerpt; echo esc_html(mb_substr($postExcerpt, 0, 30)); ?> </p> // 出力されるHTML <p>抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト抜粋テキスト</p>5. アイキャッチ画像(固定ページ・シングルページ) アイキャッチ画像に関しても「get_the_post_thumbnail_url()」というWordPressに用意されている関数で、URLの値を簡単に取得できます。現在の投稿IDを引数に入れるので、グローバル変数の$postから投稿IDを取得しておきます。
// サンプル <img src="<?php $postId = get_the_ID(); $size = 'full'; echo get_the_post_thumbnail_url( $postId, $size ); ?>" alt="IMAGE"> // 出力されるHTML <img src="https://example.com/wp-content/uploads/20**/**/thumbnail.jpg" alt="IMAGE">6. カテゴリ(シングルページ) 投稿記事が持つカテゴリは、複数の場合もあるので配列としてデータを保持しています。「get_the_category()」で保持しているカテゴリーの一覧が取得できますので、foreachでループさせることで、一つひとつの値を取っていきます。
// サンプル
<h1>
<?php
$categories = get_the_category();
foreach ( $categories as $category ) {
$categoryName = $category->name;
}
echo $categoryName;
?>
</h1>
// 出力されるHTML
<h1>お知らせ</h1>
7. カテゴリ(アーカイブページ)
シングルページと違ってアーカイブページの場合には、対象となるカテゴリは1つになるので、「single_cat_title()」という関数で簡単に取得できます。引数には出力文字の直前にプレフィックスとして付けるテキストを指定できます。
// サンプル <h1><?php single_cat_title( 'カテゴリ:', true ); ?></h1> // 出力されるHTML <h1>カテゴリ:お知らせ</h1>8. カスタムフィールド(固定ページ・シングルページ) カスタムフィールドに関しては少し複雑ですが、「$wp_query」のグローバル変数から投稿IDを取得し、「get_post_meta()」関数でカスタムフィールドの値を取り出します。取り出す値に対応するキーを引数に指定します。また、Advanced Custom Fieldsのプラグインを使っている場合には「the_field()」というプラグイン側で用意されている関数でも取得できます。
// サンプル <span> <?php global $wp_query; $postId = $wp_query->post->ID; echo get_post_meta($postId, 'FIELD_NAME', true); ?> </span> <span> // Advanced Custom Fieldsプラグインの場合は下記の方法でもOK <?php echo the_field( 'FIELD_NAME' ); ?> </span> // 出力されるHTML <span>カスタムフィールドの値</span>ちょうど先日クライアントワークで要件に含まれており、勉強になったのでメモとして残しておきたいと思います。これら投稿記事の値はデザインや導線設計によってはループ外で表示させたいこともあるかと思います。そんな時に覚えておくと便利ですね。 (参考にさせて頂いたサイト) ループの外でカスタムフィールドを取得する
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)