TCDのアップデートに影響されないようにする方法１【PHP Everywhere】

カスタムフィールドを作成し、PHPで表示するためには「function.php」にphpを追加する必要があるが、TCDテーマのアップデート時に上書きされてしまうので、アップデート後に再度該当箇所に追記する必要があった。以下はその解決法と応用。
（参考サイト：https://lpeg.info/wordpress/cptui_and_acf.html）

【目的】
保育園の求人情報を一覧として固定ページ１ページに集約、さらにクライアント側で更新しやすいようにする。
・園の情報を表示、非表示ができること
・HPを持たない園があるため、連絡方法は電話番号またはURL両方、またはどちらか１つのことがあるため、データがない欄は非表示にする

事前準備

まず一覧表示のための固定ページ「採用情報一覧」を作成しておき、カスタムフィールドを作成する。（以下記事参照）
表示位置は「固定ページ ＝採用情報一覧＝に等しい」としておく。

http://miyabido.co.jp/test/web/?p=410

①プラグイン「PHP Everywhere」を追加

固定ページ内にphpやHTMLやCSS、JavaScriptを記述することができるプラグイン。
参考：https://manuon.com/wordpress-start-phpeverywhere/

②プラグイン「Custom Post Type UI」（CPTUI）を追加

カスタム投稿を作成するプラグイン。（ACFにも同様の機能はあるが有料）
新たなカスタム投稿「採用情報」を追加する。１園につき１投稿となるのであとは通常投稿と同じように表示非表示など自由にできる。

③固定ページに一覧として表示

①により追加されたブロックを選択し、以下のphpを直接記述する。

<?php
	$wp_query = new WP_Query();
	$my_posts = array(
		'post_type' => 'recruit_list',
		'posts_per_page'=> '100', //とりあえず100件
	);
	$wp_query->query( $my_posts );
	if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="recruit_data">
<div class="recruit_item">
    <div class="data_title">園名</div>
    <div class="data_detail">
        <?php the_field('nursery_name'); ?>
    </div>
</div>
<div class="recruit_item">
    <div class="data_title">所在地</div>
    <div class="data_detail">
        <?php the_field('nursery_address'); ?>
    </div>
</div>
<?php if (get_field('nursery_tel')): ?>
<div class="recruit_item">
    <div class="data_title">TEL</div>
    <div class="data_detail">
        <?php the_field('nursery_tel'); ?>
    </div>
</div>
<?php endif; ?>
<?php if (get_field('nursery_url')): ?>
<div class="recruit_item">
    <div class="data_title">URL</div>
    <div class="data_detail"><a href="<?php the_field('nursery_url'); ?>" target="_blank"><?php the_field('nursery_url'); ?></a></div>
</div>
<?php endif; ?>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>

CSS

   .recruit_data {
        margin-bottom: 30px;
    }
    .recruit_item {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        margin: 0 0 -1px;
    }
    .data_title {
        font-weight: bold;
    }
    @media (min-width: 751px) {
    .data_title {
        flex: 0 0 10%;
        text-align: center;
        border-right: 1px solid #ccc;
        padding: 10px;
        margin-right: 10px;
        background-color: #f0f0f0;
    }
}
    .data_detail {
        width: 100%;
    }
    @media (max-width: 750px) {
        .recruit_item {
            display: block;
            padding: 10px;
        }
        .data_title {
            margin-bottom: 10px;
        }
    }

解説

緑文字の箇所は、投稿タイプスラッグ（ここではCPTUIで作成したカスタム投稿）

if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();

青文字の箇所はif〜ならwhileの処理を繰り返す（データを全て表示するまで出力を繰り返す）

赤文字の箇所は、ACFで設定したフィールド名。電話番号とURLのみどちらか一方の場合があるので、if文でデータがある場合のみ表示させるようにした。

//ループ処理01
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); //コンテンツの書き出し ?>
<?php endwhile; endif; ?>
 
//ループ処理02
<?php
if (have_posts()) {
  while (have_posts()) {
    the_post();
    the_content(); //コンテンツの書き出し
  }
}
?>

出力結果

※画像を表示させたいときは、ACFの設定で返り値を「画像URL」にした上で、以下のように記述する。

<img src="<?php the_field('member_image'); ?>" alt="<?php the_field('member_name'); ?>">

WordPressカスタマイズに必要なphpの基本知識 │ Webトビラ

WordPressをカスタマイズするにあたってphpの基本的な知識を知らずに適当にいじってしまうと画面が真っ白…

Webトビラ