横浜のITサポート・WEB制作会社

Webサイト制作

WordPressの使い方を知りたい!

Windows

パソコンのトラブル解決方法を知りたい!

Office365

Office365でできることを知りたい!

アプリ

便利なアプリを知りたい!

h

すべての記事

人気記事TOP15

タグ一覧

会社情報

採用情報

お問い合わせ

【PHP】Divi の投稿アーカイブページにカスタムフィールド入力値を表示する方法

2022/10/24 | PHP, WEB, WEBデザイン, WordPress

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!

こんにちは。

WordPress テーマ Divi のブログモジュールでつくった投稿アーカイブページにカスタムフィールドの入力値を表示させたい、なんて場面ありますでしょうか。

ブログモジュールにはその投稿のタイトル、アイキャッチ、公開日、カテゴリ、執筆者などの情報を表示させることができますが、カスタムフィールドの入力値は表示させることはできません。

今回はそこにカスタムフィールドの入力値を表示する方法をご紹介したいと思います。

WordPress テーマ Divi の投稿アーカイブページにカスタムフィールドの値を表示する

Divi のブログモジュールでつくったで投稿一覧にカスタムフィールドの入力値を表示させるには、functions.php に数行の処理を追加する必要があります。

functions.php に追加する処理

function function_name( $title, $id ) {
    $cf_value = get_post_meta( $id, 'cf-field-name', true );
    if ( !empty($cf_value) ) {
        $title .= "<p class='cf-field-name'>フィールド名:{$cf_value}</p>";
    }
    return $title;
}

if( strcmp($_SERVER['REQUEST_URI'], '/archive_slug/') === 0 ){
    add_filter( 'the_title', 'function_name', 10, 2 );
}

カスタムフィールドの入力値を表示させたい投稿アーカイブページが表示されるときに、the_title でフックします。

the_title は、投稿タイトルを画面に表示する前に適用されるフィルターで、引数に投稿タイトルと投稿 ID が渡されてきます。

フックされた関数では、投稿 ID からその投稿のカスタムフィールド入力値を取得して投稿タイトルにマージします。

まとめ

他のやり方として、archive.php をベースにその投稿タイプ専用のアーカイブページをつくるのがよくある方法なのかなと思っています。

しかし、この方法だとアーカイブを表示するためのロジックだけでなく、CSS でデザインの作り込みも行う必要があるかと思います。

これだと Divi のいいところが台無しになっているなと感じるので、極力 Divi でつくったアーカイブページをベースにカスタムフィールドの入力値を表示させる方法を検討しました。

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!