投稿オブジェクトからカスタムフィールドを取得・表示

投稿オブジェクトからカスタムフィールドを取得・表示

TOPページにおすすめの記事を選択して表示したい!といったようなご要望はよく頂きます。
この記事では、そんなときによく使う「投稿オブジェクト」からカスタムフィールドの値を取得し、表示させる方法をご紹介いたします!
記事の中にサムネイル用の画像などを用意しておけばどこでも表示させることができるので是非使ってみてください!

投稿オブジェクト

ACFで使用できるフィールドの一つ。
編集画面にselectで表示され、記事が選べるようになるフィールドです。
トップページや記事下などに設置する記事を設定したい場合等によく利用されます。

【Advanced Custom Field:通称 ACF】
公式サイト

投稿オブジェクトから取得できる情報

返り値として以下のようなものが設定されているため、簡単に取得可能です。
[“ID”]
[“post_author”]
[“post_date”]
[“post_date_gmt”]
[“post_content”]
[“post_title”]
[“post_excerpt”]
[“post_status”]
[“comment_status”]
[“ping_status”]
[“post_password”]
[“post_name”]
[“to_ping”]
[“pinged”]
[“post_modified”]
[“post_modified_gmt”]
[“post_content_filtered”]
[“post_parent”]
[“guid”]
[“menu_order”]
[“post_type”]
[“post_mime_type”]
[“comment_count”]
[“filter”]

実際にコードを書くと以下のようになります!


//変数に格納
<?php
$post_obj = get_field('custm_field');
?>

//タイトル
<?php echo $post_obj->post_title; ?>

//パーマリンク
<?php echo get_the_permalink($post_obj->ID); ?>

//アイキャッチ
<?php echo get_the_post_thumbnail( $post_obj->ID,'サイズ'); ?>

//投稿日時
<?php echo get_the_date('Y.m.d',$post_obj->ID); ?>

//所属しているカテゴリ
<?php
$categorys = get_the_category($post_obj->ID);
$category = $categorys[0];
$cat_name = $category->cat_name;
?>
<?php echo $cat_name; ?>

カスタムフィールドの取得

本題のカスタムフィールドの値の取得ですが、少し記述を変更する必要があります。
具体的には以下のように記述しました。


//変数に格納
<?php
$post_obj = get_field('custm_field');
?>

<?php
//「topPage_kvImg」というカスタムフィールドを取得
$topPage_kvImg = get_post_meta($post_obj->ID, 'topPage_kvImg', true);
//「topPage_kvImg」のURLを取得
$topPage_kvImg_url = wp_get_attachment_image_url($topPage_kvImg, 'topPage_kvImg'); ?>

//出力
<img src="<?php echo $topPage_kvImg_url; ?>" alt="">

//「text」というフィールドを取得
<?php $text_meta = get_post_meta($post_obj->ID, 'text', true); ?>

//出力(100文字以降「...」を表示)
<p>
<?php
if(mb_strlen($text_meta)>100){
$text= mb_substr(strip_tags($text_meta), 0, 100);
echo $text.'…';
}else{
echo strip_tags($text);
}
?>
</p>

以上が投稿オブジェクトからカスタムフィールドの取得・表示方法でした!
投稿オブジェクトの選択はシンプルでユーザーにとって使いやすいフィールドですので今後も活用していきたいと思います!

SNSシェア

WP TECH WordPress技術専門 Tips

コーポレートサイトへ

WP TECH WordPress技術専門 Tips

採用サイトへ