Wordpressテーマ「Customizr」でカスタムフィールドを使うには

Wordpressの海外製「Customizr」というテーマ（無料版）をインストールしましたが、カスタムフィールドの投稿を表示させるにはどうすればよいのでしょうか？
https://ja.wordpress.org/themes/customizr/

カスタムフィールドの管理にはACF（Advanced Custom Fields）とCPT UI（Custom Post Type UI）の２つのプラグインを使用しており、アーカイブページはテーマディレクトリ内のルートにある「index.php」を「archive-{post-type}.php」にリネームしただけで表示することができました。

しかし同様にindex.phpを「single-{post-type}.php」にリネームし、以下のようにカスタムフィールド表示用のコードを記載したところ、投稿ページには何も表示されませんでした。
（「追記箇所」から「追記箇所ここまで」が自分で記載したコードです）

PHP
1<?php
2/**
3 * The main template file. Includes the loop.
4 *
5 *
6 * @package Customizr
7 * @since Customizr 1.0
8 */
9if ( apply_filters( 'czr_ms', false ) ) {
10  do_action( 'czr_ms_tmpl' );
11  return;
12}
13?>
14<?php do_action( '__before_main_wrapper' ); ##hook of the header with get_header ?>
15<div id="main-wrapper" class="<?php echo implode(' ', apply_filters( 'tc_main_wrapper_classes' , array('container') ) ) ?>">
16
17    <?php do_action( '__before_main_container' ); ##hook of the featured page (priority 10) and breadcrumb (priority 20)...and whatever you need! ?>
18
19    <div class="container" role="main">
20        <div class="<?php echo implode(' ', apply_filters( 'tc_column_content_wrapper_classes' , array('row' ,'column-content-wrapper') ) ) ?>">
21
22            <?php do_action( '__before_article_container'); ##hook of left sidebar?>
23
24                <div id="content" class="<?php echo implode(' ', apply_filters( 'tc_article_container_class' , array( CZR_utils::czr_fn_get_layout( czr_fn_get_id() , 'class' ) , 'article-container' ) ) ) ?>">
25
26                    <?php do_action ('__before_loop');##hooks the heading of the list of post : archive, search... ?>
27
28                        <?php if ( czr_fn__f('__is_no_results') || is_404() ) : ##no search results or 404 cases ?>
29
30                            <article <?php czr_fn__f('__article_selectors') ?>>
31                                <?php do_action( '__loop' ); ?>
32                            </article>
33
34                        <?php endif; ?>
35
36                        <?php if ( have_posts() && ! is_404() ) : ?>
37                            <?php while ( have_posts() ) : ##all other cases for single and lists: post, custom post type, page, archives, search, 404 ?>
38                                <?php the_post(); ?>
39
40                                <?php do_action ('__before_article') ?>
41                                    <article <?php czr_fn__f('__article_selectors') ?>>
42                                        <?php do_action( '__loop' ); ?>
43                                    </article>
44				<!--追記箇所-->
45					<div class="example">
46						<?php
47						  $image = get_field('c_mainimage');
48						  $size = 'medium'; // (thumbnail, medium, large, full or custom size)
49						  if( $image ) {
50						    echo wp_get_attachment_image( $image, $size );
51						  }
52						?>
53					</div>
54					<dl>
55						<dt>アルバム名</dt><dd><?php the_field('example-album'); ?></dd>
56						<dt>アーティスト名</dt><dd><?php the_field('example-artist'); ?></dd>
57						<dt>レビュー</dt><dd><?php echo nl2br(get_post_meta($post->ID, 'example-review', true)); ?></dd>
58					</dl>
59				<!--追記箇所ここまで-->
60
61                                <?php do_action ('__after_article') ?>
62
63                            <?php endwhile; ?>
64
65                        <?php endif; ##end if have posts ?>
66
67                    <?php do_action ('__after_loop');##hook of the comments and the posts navigation with priorities 10 and 20 ?>
68
69                 <?php // <hr> introduced in july 2019 to fix https://github.com/presscustomizr/customizr/issues/1767 ?>
70                  <hr class="featurette-divider tc-mobile-separator">
71                </div><!--.article-container -->
72
73           <?php do_action( '__after_article_container'); ##hook of right sidebar ?>
74
75        </div><!--.row -->
76    </div><!-- .container role: main -->
77
78    <?php do_action( '__after_main_container' ); ?>
79
80</div><!-- //#main-wrapper -->
81
82<?php do_action( '__after_main_wrapper' );##hook of the footer with get_footer ?>
83

どうやら「single-{post-type}.php」の中でtemplate>parts>content>singular>post_content.phpを呼び出しているようだということまではわかったのですが、知識がなくここからどうしていいか全くわからず途方に暮れています。

どのphpファイルのどこにカスタムフィールド用のコード（<?php the_field('example'); ?>など）を書けばよいかなど
どなたか方法をご存じでしたらアドバイス頂けませんでしょうか。
宜しくお願い致します。

CHERRY

2020/04/23 06:30

> しかし同様にindex.phpを「single-{post-type}.php」にリネームし、いくつかカスタムフィールド表示用のコードを書いてみたところ、投稿ページには何も表示されませんでした。どのようなコードを何処に記載したのかを、ソースコードを記載する等の方法で、具体的に記載していただけないでしょうか？

HD-evo87

2020/04/27 05:36

CHERRY様ありがとうございます。本文内にソースコードを記載致しました。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと単純な例で各フィールドが表示できることを確認しました。
すべてのフィールドを get_post_meta($post_id, $key, $single) で取得しています。

php
1<?php
2if ( have_posts() ) :
3  while ( have_posts()) : the_post();
4    echo '<h2>'.get_the_title().'</h2>';
5    echo '<div>'.get_the_content().'</div>';
6    $image = get_post_meta($post->ID, "c_mainimage", true);
7    $size = 'medium'; // (thumbnail, medium, large, full or custom size)
8    if( $image ) {
9      echo wp_get_attachment_image( $image, $size );
10    }
11    //example-album example-artist example-review
12    echo '<dl>';
13    $album = get_post_meta($post->ID, "example-album", true);
14    if( $album ) {
15      echo '<dt>アルバム名</dt><dd>'.get_post_meta($post->ID, 'example-album', true).'</dd>';	
16    }
17    $artist = get_post_meta($post->ID, 'example-artist', true);
18    if ( $artist ) {
19      echo '<dt>アーティスト名</dt><dd>'.get_post_meta($post->ID, 'example-artist', true).'</dd>';	
20    }
21    $review = get_post_meta($post->ID, 'example-review', true);
22    if ( $review ) {
23      echo '<dt>レビュー</dt><dd>'.nl2br(get_post_meta($post->ID, 'example-review', true)).'</dd>';	
24    }
25    echo '</dl>';
26  endwhile;
27endif;
28?>

【参考にしたページ】
WordPressにCSSやJavascriptを個別設定できるように | D-NET

【補足】
custom-page.php を元にすると良いかもしれません。ただ、このファイル、Modern style と Classical style の両方の例が入っているのでどちらかを削除してから、利用するようです。

【custom-page.php を元にしたバージョン】

custom-page.php を元に single-custom.php にしたバージョンも載せておきます。

php
1<?php
2/*
3Template Name: Custom Page Example
4*/
5if ( apply_filters( 'czr_ms', false ) ):
6    /*
7    *  This is the reference Custom Page Example template if you use the theme Modern style
8    */
9
10    get_header();
11    // This hook is used to render the following elements(ordered by priorities) :
12    // slider
13    // singular thumbnail
14    do_action('__before_main_wrapper')
15  ?>
16
17    <div id="main-wrapper" class="section">
18
19          <?php
20            /*
21            * Featured Pages | 10
22            * Breadcrumbs | 20
23            */
24            do_action('__before_main_container')
25          ?>
26
27          <div class="<?php czr_fn_main_container_class() ?>" role="main">
28
29            <?php do_action('__before_content_wrapper'); ?>
30
31            <div class="<?php czr_fn_column_content_wrapper_class() ?>">
32
33                <?php do_action('__before_content'); ?>
34
35                <div id="content" class="<?php czr_fn_article_container_class() ?>">
36
37                  <?php
38
39                    do_action( '__before_loop' );
40
41                    if ( have_posts() ) {
42                        /**
43                        * this will render the WordPress loop template located in templates/content/loop.php
44                        * that will be responsible to load the page part template located in templates/content/singular/page_content.php
45                        */
46                        czr_fn_render_template( 'loop' );
47                    }
48
49                    /*
50                     * Optionally attached to this hook :
51                     * Comments | 30
52                     */
53                    do_action( '__after_loop' );
54                  ?>
55<!-- Edit start -->
56
57                    <div class="example">
58                        <?php
59                          $image = get_post_meta($post->ID, 'c_mainimage', true);
60                          $size = 'medium'; // (thumbnail, medium, large, full or custom size)
61                          if( $image ) {
62                            echo wp_get_attachment_image( $image, $size );
63                          }
64                        ?>
65                    </div>
66                    <dl>
67                        <dt>アルバム名</dt><dd><?php echo get_post_meta($post->ID, 'example-album', true); ?></dd>
68                        <dt>アーティスト名</dt><dd><?php echo get_post_meta($post->ID, 'example-artist', true); ?></dd>
69                        <dt>レビュー</dt><dd><?php echo nl2br(get_post_meta($post->ID, 'example-review', true)); ?></dd>
70                    </dl>
71
72<!-- Edit end -->
73                </div>
74
75                <?php
76                  /*
77                   * Optionally attached to this hook :
78                   * Comments | 30
79                   */
80                  do_action('__after_content'); ?>
81
82                <?php
83                  /*
84                  * SIDEBARS
85                  */
86                  if ( czr_fn_is_registered_or_possible('left_sidebar') )
87                    get_sidebar( 'left' );
88
89                  if ( czr_fn_is_registered_or_possible('right_sidebar') )
90                    get_sidebar( 'right' );
91                ?>
92
93            </div><!-- .column-content-wrapper -->
94            <?php do_action('__after_content_wrapper'); ?>
95
96
97          </div><!-- .container -->
98
99          <?php do_action('__after_main_container'); ?>
100
101    </div><!-- #main-wrapper -->
102
103    <?php do_action('__after_main_wrapper'); ?>
104
105    <?php
106      if ( czr_fn_is_registered_or_possible('posts_navigation') ) :
107    ?>
108      <div class="container-fluid">
109        <?php
110            czr_fn_render_template( "content/singular/navigation/singular_posts_navigation" );
111        ?>
112      </div>
113    <?php endif ?>
114
115<?php get_footer() ?>
116<?php
117  return;
118endif;
119
120

Modern style を残して、 から  までが追記部分です。

以下に追記部分を抜粋します。

php
1<!-- Edit start -->
2
3                    <div class="example">
4                        <?php
5                          $image = get_post_meta($post->ID, 'c_mainimage', true);
6                          $size = 'medium'; // (thumbnail, medium, large, full or custom size)
7                          if( $image ) {
8                            echo wp_get_attachment_image( $image, $size );
9                          }
10                        ?>
11                    </div>
12                    <dl>
13                        <dt>アルバム名</dt><dd><?php echo get_post_meta($post->ID, 'example-album', true); ?></dd>
14                        <dt>アーティスト名</dt><dd><?php echo get_post_meta($post->ID, 'example-artist', true); ?></dd>
15                        <dt>レビュー</dt><dd><?php echo nl2br(get_post_meta($post->ID, 'example-review', true)); ?></dd>
16                    </dl>
17
18<!-- Edit end -->

投稿2020/05/10 06:31

編集2020/05/10 07:00

Yasumichi

総合スコア1773

HD-evo87

2020/05/11 04:27

Yasumichi様、懇切丁寧にご回答頂きまして本当にありがとうございます！！長らく途方に暮れていたもので、本当に助かりました… ご教示頂いた通り、custom-page.phpをsingle-exsample.phpにリネームした後、記載して下さったコードを丸々コピペしまして使用する予定のないClassical styleの記述をバッサリ削除したところ、無事にカスタムフィールドの内容が表示されました！ ※「You may also like」のセクションがページの上部（カスタムフィールドの内容より上）に表示されてしまうので、do_action('__after_content');をdo_action( '__after_loop' );に書き換えたところ、こちらもうまく表示されました。

行動規範の内容に同意します