プログラミングの勉強

模写コーディングしたHTMLファイルをWordPress化していく

前回模写コーディングしたHTMLファイルを今回はWordPress化していこうと思います。
自分への備忘録を含めてその手順・プロセスのポイントを書いていけたらと思います。

まず一番最初にWordPress化していく上での準備作業をしていきます。

下記わたしが使った参考動画教材(Udemy)

Udemy: Brad Hussey:
WordPress Theme Development with Bootstrap
Section 8 Lesson 40. Create Your “Underscores” Starter Themeを参照

このUdemy動画教材は長い間ベストセラーであり、HTMLファイルをWordPress化する作業をする上でとても参考になります。Bootstrap3を使っているので、5,6年前のちょっと古い情報にはなりますが、そのデメリットを圧倒的に上回るクオリティーの高い動画教材です。内容がいまだ有益で、そして分かりやすく面白いです!

英語ですが、英語が完全に分からなくてもBootstrapを使ってHTMLの静的サイトを制作してから、それを動的なWordPressサイト化していく手順・プロセスはコードを追っていけば大体理解できるかと思います。

0. まずWordPressローカル環境を構築していきます。

日本国内だとあまり使われていないのですが、海外だとよく使われていて
WordPressのインストールが非常にスピーディーで簡単な「Local by Flywheel」
を使用していきます。

Local by Flywheel」とは何か、「Local by Flywheelのセットアップと基本的なつかいかた」など詳しくは下記の記事に書きましたので、そちらを参考にしてください。
こちらでの詳しい説明は割愛します。

Local by Flywheel — WordPress開発環境を超絶簡単に構築する方法 —

1.WordPress Starter Themeであるunderscoresを使い、
スターター・テンプレートを使用しカスタムテーマを構築していく。

Underscores WordPress Starter Theme
http://underscores.me/

Underscores Starter Themeを使います。
こちらの「アンダースコア(_s underscores)」について詳しいことは下記の記事にて説明しているのでそちらをご覧ください。

HTMLファイルをWordPress化してオリジナルテーマを作成する際に便利な「アンダースコア(_s underscores)」

Local by Flywheelのインストール・セットアップと「アンダースコア(_s underscores)」をWordPressのテーマとして反映が完了したら、早速HTMLファイルをWordPress化する作業を進めていきましょう。

まずWordPress化する上で必要なファイルが存在する場所の在り処ですが、
Local by Flywheelの管理画面から作業をしていくサイトを選び、右クリックをすると
「Reveal in Finder」という項目があるので、それをクリック。


そうすると、下記の画面に飛びます。今回はnirvanalifeというサイトを開発していきますので、nirvanalifeのフォルダをクリック。


次に「app」をクリック。

「app」の次は「public」


「public」のフォルダの中に入ると、おなじみのWordPressのフォルダが表示されます。


ここからは「wp-content」→「themes」→「kfa」
(今回WordPressのテーマとして反映させたブランクテーマ)

この「kfa」フォルダの中のファイルをいじっていきますので、

わたしの場合、テキストエディターはVisual Studio Code(以前はAtomを使っていましたが、個人的にはこちらの方が使いやすい。オススメです!)を使っていますが、
「kfa」をドラッグ・アンド・ドロップします。


次に模写コーディングの静的サイトで使用していた「img」「css」「js」が入った「assets」フォルダを作成し、/wp-content/your-theme/フォルダ直下に置きます。

下のようなフォルダ「assets」を

「wp-content」→「themes」→「kfa」
(今回WordPressのテーマとして反映させたブランクテーマ)の中に移動させます。


そしてこの「image」「css」「js」をWordPress上で読み込んでいきます。
「css」「js」の読み込みに関して、header.phpで下記のようなコードを使って読み込むことも出来ますが、

<link href=”<?php echo get_stylesheet_directory_uri(); ?>/assets/css/bootstrap.min.css” rel=”stylesheet”>

<link href=”<?php echo get_stylesheet_directory_uri(); ?>/assets/css/bootstrap.min.css” rel=”stylesheet”>

こちらのやり方はWordPressでは非推奨なので、
function.phpでWordPress関数であるwp_enqueue_stylewp_enqueue_script を使用して記述していきます。

function add_files() {
    wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
function add_files() {
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

(※非推奨の主な理由としてはプラグインなどのファイルと重複したり、同じファイルを複数回読み込んでしまう、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性がある為です。)

上記に関する参考URL
WordPress|head内でCSSやJavaScriptファイルを読み込ませる方法
https://cotodama.co/head_add_stylesheet/

【WordPress】CSSやJavaScript(jQuery)ファイルを読み込む正しい方法
https://worpreya.com/add-css-javascript-files/

JSやCSSを一元管理する
https://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

function.phpに実際に下記のコードを記述しました。

/**
 * Enqueue scripts and styles.
 */

function kfa_scripts() {
	//カスタムスタイルシートの読込
	wp_enqueue_style( 'kfa-style', get_stylesheet_uri() );
	//Bootstrapスタイルシート読込
	wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/assets/css/bootstrap.min.css' );
	//Fontawesome読込
	wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css' );

	//jQuery first, then Popper.js, then Bootstrap JS
	wp_enqueue_script( jQuery, get_template_directory_uri().'/assets/js/jquery-3.4.0.js' );
    wp_enqueue_script( popper, get_template_directory_uri().'/assets/js/popper.min.js', '', '', true );
	wp_enqueue_script( bootstrap-js, get_template_directory_uri().'/assets/js/bootstrap.min.js', '', '', true );

	//Google Recaptcha読込
	wp_enqueue_style( 'google-recaptcha', '	https://www.google.com/recaptcha/api.js	' );

そして模写コーディングの静的サイトで使用したstyle.cssを、
「wp-content」→「themes」→「kfa」テーマフォルダの直下にあるstyle.cssと置き換えます。

これで基本的な開発の準備は整いました。
前回模写コーディングで作成したHTMLファイルのindex.htmlもテキストエディターに
ドラッグ・アンド・ドロップします。

まずはheader.phpをいじっていきます。
「アンダースコア(_s underscores)」のデフォルトのheader.phpは下記

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package KFA
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kfa' ); ?></a>

	<header id="masthead" class="site-header">
		<div class="site-branding">
			<?php
			the_custom_logo();
			if ( is_front_page() && is_home() ) :
				?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<?php
			else :
				?>
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
				<?php
			endif;
			$kfa_description = get_bloginfo( 'description', 'display' );
			if ( $kfa_description || is_customize_preview() ) :
				?>
				<p class="site-description"><?php echo $kfa_description; /* WPCS: xss ok. */ ?></p>
			<?php endif; ?>
		</div><!-- .site-branding -->

		<nav id="site-navigation" class="main-navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'kfa' ); ?></button>
			<?php
			wp_nav_menu( array(
				'theme_location' => 'menu-1',
				'menu_id'        => 'primary-menu',
			) );
			?>
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->

上記header.phpに模写コーディングで作成したindex.htmlから
下記のコード<header></header>の部分をまずコピーして、

    <header>
        <!-- Navigation -->
        <nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top ">
            <a class="navbar-brand" href="#"><img src="./img/logo.png" alt="kfa logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">THE TEACHINGS
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PROGRAMS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">VISIT US</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">WHO WE ARE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">STORE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DONATE</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

下記のようにheader.phpの方にコピペします。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package KFA
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kfa' ); ?></a>

    <header>
        <!-- Navigation -->
        <nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top ">
            <a class="navbar-brand" href="#"><img src="./img/logo.png" alt="kfa logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">THE TEACHINGS
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PROGRAMS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">VISIT US</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">WHO WE ARE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">STORE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DONATE</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

ナビゲーションメニューの部分を上のようにコピペしました。
このナビゲーションメニューをWordPress管理画面で変更・更新ができるように
組込を行っていきます。

Bootstrap4用のナビゲーションメニューをサクッとWordPressに組み込むことが出来る
wp-bootstrap/wp-bootstrap-navwalkerをダウンロードします。
https://github.com/wp-bootstrap/wp-bootstrap-navwalker


赤枠で囲われたclone or downloadをクリックすると、下記のように表示されるので
「Download ZIP」をクリック。そうすると自動的にダウンロードが始まります。

Gitからダウンロードしたclass-wp-bootstrap-navwalker.phpをテーマフォルダに入れる。


次にfunction.phpに下記のコードを記述し、class-wp-bootstrap-navwalkerを読み込みます。

<?php
/**
 * kfa functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package kfa
 */

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

次に「アンダースコア(_s underscores)」の先程いじったheader.phpを書き換えていきます。ちなみに現在の状態は下記。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package KFA
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kfa' ); ?></a>

    <header>
        <!-- Navigation -->
        <nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top ">
            <a class="navbar-brand" href="#"><img src="./img/logo.png" alt="kfa logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">THE TEACHINGS
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PROGRAMS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">VISIT US</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">WHO WE ARE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">STORE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DONATE</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

このナビゲーションメニューの部分をwp_nav_menuというWordPressの関数を使って、
WordPressに組み込んでいきます。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package kfa
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kfa' ); ?></a>

    <header>
        <!-- Navigation -->
        <nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top">
                <a class="navbar-brand" href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png" alt="kfa logo"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
				</button>
                    <?php
                        wp_nav_menu( array(
                            'theme_location'  => 'primary', //テーマの中で使われる位置
                            'depth'           => 2, //最大深度
                            'container'       => 'div', //div、navを選択してwrap
                            'container_id'    => 'navbarResponsive', // コンテナに適用されるID
                            'container_class' =>'collapse navbar-collapse', //コンテナに適用されるクラス名
                            'menu_class'      => 'navbar-nav mx-auto', //メニューを構成する ul 要素に適用するCSS クラス名
                            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback', //メニューが存在しない場合にコールバック関数を呼び出す
                            'walker'          => new WP_Bootstrap_Navwalker() // 使用するカスタムウォーカーオブジェクト
                        ) );
                    ?> 
        </nav>
    </header>

 

次にpage-home.php という固定ページのHOMEに対応したページを新しく作成します。
模写コーディングの静的サイトで作成したindex.html から下記のコードをpage-home.php にコピペします。

<?php
/* 
Template Name: Home Page
*/

get_header(); ?>
    <div id="carouselExampleIndicators" class="carousel slide main-visual" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active radius"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1" class="radius"></li>
        </ol>


        <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active">
                <picture>
                    <source srcset="img/carousel-slider_01.jpg" media="(min-width: 769px)">
                    <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
                </picture>
            </div>

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item">
                <picture>
                    <source srcset="img/carousel-slider_02.jpg" media="(min-width: 769px)">
                    <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
                </picture>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    </header>


    <section class="video-feature">
        <div class="d-flex flex-wrap wrapper">
            <div class="col-md-8 krishnamurti_video">
                <div class="iframe-content">
                    <iframe src="https://www.youtube.com/embed/xwQzyAfXpgw" frameborder="0"></iframe>
                </div>
            </div>
            <div class="col-md-4 krishnamurti_quote">
                <p class="quote">“If you have died to one of your pleasures, the smallest or the greatest,
                    naturally, without any enforcement or argument, then you will know what it means to die. To die
                    is to have a mind that is completely empty of itself, empty of its daily longing, pleasure; and
                    agonies.”</p>
                <p class="quote_frm">— J. Krishnamurti, Freedom from the Known, p. 77
                </p>
            </div>
        </div>
    </section>

    <section class="feature-items">
        <div class="d-flex flex-wrap wrapper">
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-globe-africa my-gray icon-size"></i>
                </div>
                <div>
                    <h3>FOUNDATION</h3>
                    <P>Krishnamurti’s lifetime body of work spans more than 60 years. The mission of the KFA is to
                        preserve and disseminate these teachings. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-home my-gray icon-size"></i>
                </div>
                <div>
                    <h3>RETREAT</h3>
                    <P>An oasis for the mind amidst 11 acres of nature, where one may retreat, inquire, and
                        establish a new relationship with life. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-book my-gray icon-size"></i>
                </div>
                <div>
                    <h3>CENTER</h3>
                    <P>The Center is dedicated to the study of the teachings of Krishnamurti. It has an extensive
                        library as well as spaces for study and dialogue. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-graduation-cap my-gray icon-size"></i>
                </div>
                <div>
                    <h3>SCHOOL</h3>
                    <P>The Oak Grove School is a pre-K to Grade 12 school in Ojai, founded in 1975 by Krishnamurti
                        and inspired by his teachings. <a href="#">More...</a></P>
                </div>

            </div>
        </div>
    </section>

    <section class="main-contents">
        <div class="wrapper">
            <div class="d-flex">
                <div class="col-md-9 col-sm-12 left-col">
                    <h2 class="feature-title">Program Schedule</h2>
                    <div class="d-flex flex-wrap">
                        <div class="col-md-4 col-sm-12">
                            <div class="text-center"><img class="responsive" src="img/program_01.jpg"
                                    alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Saturday Dialogue</h3>
                            <p class="date">1st, 2nd & 3rd Saturday</p>
                            <p class="desc">Doors open at 3:45. Dialogue begins promptly at 4:00 p.m. and ends at 6:00
                                p.m.
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div><img class="responsive" src="img/program_02.jpg" alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Annual May Gathering 2019</h3>
                            <p class="date">May 4-5</p>
                            <p class="desc">A 2-day Public Program: Come to listen to speakers, participate in
                                dialogues, attend workshops, or simply hang out at Oak Grove School.
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div><img class="responsive" src="img/program_03.jpg" alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Self-inquiry and Self-transformation</h3>
                            <p class="date">March 30, 2019</p>
                            <p class="desc">Evening program. A Talk by Ravi Ravindra titled: Self-inquiry and
                                Self-transformation
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 right-col">
                    <div class="right-col-wrapper">
                        <h3 class="donation-title">Support our efforts</h3>
                        <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                            alive
                            in print and online for decades. Your gift allows this to continue. Please join us in
                            support of
                            this vital work.
                        </p>
                        <button type="button" class="btn btn-orange">DONATE TODAY</button>

                        <h3 class="online-shop-title">Online Shop</h3>
                        <img src="./img/cart.png" alt="cart">
                        <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                here></a></p>
                    </div>
                </div>
            </div>


            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Teachings</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="text-center"><img class="responsive" src="img/featured_teaching_01.jpg"
                                alt="On Conflict"></div>
                        <h3 class="teaching-title">On Conflict</h3>
                        <p class="desc">Man has accepted conflict as an innate part of daily existence because he
                            has accepted competition, jealousy, greed as a natural way of life.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_02.jpg" alt="On Change"></div>
                        <h3 class="teaching-title">On Change</h3>
                        <p class="desc">Unless I fundamentally change, the future will be what I am now. What is the
                            energy, the intensity that will make me change?
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_03.jpg" alt="Freedom and Authority">
                        </div>
                        <h3 class="teaching-title">Freedom and Authority</h3>
                        <p class="desc">To be free of authority is to die to everything of yesterday so that your
                            mind is always fresh, always young, innocent. Then there is observation and learning.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                </div>
            </div>

            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Books</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="featured-book-img text-center"><img class="responsive"
                                src="img/featured_books_01.jpg" alt="On Conflict"></div>
                        <h3 class="books-title">Choiceless Awareness</h3>
                        <p class="desc">Krishnamurti proposes that the current crisis is a direct consequence of our
                            fragmented way of living. In what way can choiceless awareness heal the division between
                            the observer and the observed?
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_02.jpg"
                                alt="On Change"></div>
                        <h3 class="books-title">What Are You Doing with Your Life?</h3>
                        <p class="desc">Compiled with younger audiences in mind, this book offers an introduction to
                            many themes of Krishnamurti’s work such as Relationships, Love, Work, Fear, and
                            Loneliness.
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_03.jpg"
                                alt="Freedom and Authority">
                        </div>
                        <h3 class="books-title">The First and Last Freedom</h3>
                        <p class="desc">If the truth can set us free, where do we find it? The First and Last
                            Freedom is a comprehensive book on Krishnamurti’s teachings.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

page-home.php をトップページとして表示させる為にWordPress管理画面の「設定」→「表示設定」をクリックすると、

下の画面が表示されるので、「固定ページ」にチェックを入れて、
ホームページ→「HOME」を選択します。そうするとpage-home.php がトップページとして表示されます。

現在下記のようにpage-home.phpが固定トップページとして、表示されています。
画像が表示されていないので、その部分をいじっていきます


<img> の部分を<?php echo get_template_directory_uri(); ?> のWordPress関数を使えば、画像を表示させることが出来ます。

具体的には下記のように

<img srcset="<?php echo get_template_directory_uri(); ?>/assets/img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid"> 

<img class="responsive" src="<?php echo get_template_directory_uri(); ?>/assets/img/program_01.jpg"> 

<img src="<?php echo get_template_directory_uri(); ?>/assets/img/cart.png" alt="cart">

ただカルーセルスライダー画像を見てみると、月日が書かれたイベント情報が入っているのでWordPress管理画面から登録・更新ができるように、組み込みたいと思います。

そして次の「Program Schedule」「Featured Teachings」「Featured Books」の
<section class=”main-contents”> の部分、これも更新を行ないそうな情報が含まれているのでこちらもWP管理画面から登録・更新ができるように組み込んでいきます。

構造をみると、カスタム投稿で以下の基本的なWP関数と繰り返し(ループ)、条件分岐を使えば実現できそうです。

the_post_thumbnail()

<?php the_title();  ?>

<?php the_excerpt();  ?>

<?php the_content();  ?>
    <section class="main-contents">
        <div class="wrapper">
            <div class="d-flex">
                <div class="col-md-9 col-sm-12 left-col">
                    <h2 class="feature-title">Program Schedule</h2>
                    <div class="d-flex flex-wrap">
                        <div class="col-md-4 col-sm-12">
                            <div class="text-center"><img class="responsive" src="<?php echo get_template_directory_uri(); ?>/assets/img/program_01.jpg"
                                    alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Saturday Dialogue</h3>
                            <p class="date">1st, 2nd & 3rd Saturday</p>
                            <p class="desc">Doors open at 3:45. Dialogue begins promptly at 4:00 p.m. and ends at 6:00
                                p.m.
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div><img class="responsive" src="img/program_02.jpg" alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Annual May Gathering 2019</h3>
                            <p class="date">May 4-5</p>
                            <p class="desc">A 2-day Public Program: Come to listen to speakers, participate in
                                dialogues, attend workshops, or simply hang out at Oak Grove School.
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div><img class="responsive" src="img/program_03.jpg" alt="Saturday Dialogue"></div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title">Self-inquiry and Self-transformation</h3>
                            <p class="date">March 30, 2019</p>
                            <p class="desc">Evening program. A Talk by Ravi Ravindra titled: Self-inquiry and
                                Self-transformation
                            </p>
                            <p class="read-more"><a href="#">Read more ></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 right-col">
                    <div class="right-col-wrapper">
                        <h3 class="donation-title">Support our efforts</h3>
                        <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                            alive
                            in print and online for decades. Your gift allows this to continue. Please join us in
                            support of
                            this vital work.
                        </p>
                        <button type="button" class="btn btn-orange">DONATE TODAY</button>

                        <h3 class="online-shop-title">Online Shop</h3>
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cart.png" alt="cart">
                        <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                here></a></p>
                    </div>
                </div>
            </div>


            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Teachings</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="text-center"><img class="responsive" src="img/featured_teaching_01.jpg"
                                alt="On Conflict"></div>
                        <h3 class="teaching-title">On Conflict</h3>
                        <p class="desc">Man has accepted conflict as an innate part of daily existence because he
                            has accepted competition, jealousy, greed as a natural way of life.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_02.jpg" alt="On Change"></div>
                        <h3 class="teaching-title">On Change</h3>
                        <p class="desc">Unless I fundamentally change, the future will be what I am now. What is the
                            energy, the intensity that will make me change?
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_03.jpg" alt="Freedom and Authority">
                        </div>
                        <h3 class="teaching-title">Freedom and Authority</h3>
                        <p class="desc">To be free of authority is to die to everything of yesterday so that your
                            mind is always fresh, always young, innocent. Then there is observation and learning.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                </div>
            </div>

            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Books</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="featured-book-img text-center"><img class="responsive"
                                src="img/featured_books_01.jpg" alt="On Conflict"></div>
                        <h3 class="books-title">Choiceless Awareness</h3>
                        <p class="desc">Krishnamurti proposes that the current crisis is a direct consequence of our
                            fragmented way of living. In what way can choiceless awareness heal the division between
                            the observer and the observed?
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_02.jpg"
                                alt="On Change"></div>
                        <h3 class="books-title">What Are You Doing with Your Life?</h3>
                        <p class="desc">Compiled with younger audiences in mind, this book offers an introduction to
                            many themes of Krishnamurti’s work such as Relationships, Love, Work, Fear, and
                            Loneliness.
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_03.jpg"
                                alt="Freedom and Authority">
                        </div>
                        <h3 class="books-title">The First and Last Freedom</h3>
                        <p class="desc">If the truth can set us free, where do we find it? The First and Last
                            Freedom is a comprehensive book on Krishnamurti’s teachings.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

あらためて<section class=”main-contents”>  は上記のような構造なので、
まず「Program Schedule」の部分から見ていきます。下記のようなコードを記述してみました。

    <section class="main-contents">
        <div class="wrapper">
            <div class="d-flex flex-wrap">
                <div class="col-md-9 col-sm-12 left-col">
                    <h2 class="feature-title"><?php echo $featured_title_01; ?></h2>
                    <?php $wp_query = new WP_Query( array('post_type' => 'program_schedule', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
                    <?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
                    <?php if($wp_query->current_post == 0) : ?>

                    <div class="d-flex flex-wrap">
                        <div class="col-md-4 col-sm-12">
                            <div class="responsive">
                                        <?php
                                if( has_post_thumbnail() ){
                                    the_post_thumbnail();
                            }
                            ?>
                            <!-- 【WordPress】自動生成されるpタグを除去 -->
                            <?php remove_filter ('the_excerpt', 'wpautop'); ?>
                            <?php remove_filter ('the_content', 'wpautop'); ?>

                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>


                        <?php else : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="responsive">
                                
                            <?php
                                if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                            }
                            ?>
  
                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>
                    <?php endif; ?>
                    <?php endwhile; ?>
                    </div>

                </div>

WP_Queryについては下記の記事が詳しく解説されているので、
そちらを参考。

WP-Queryとは何かを初めての人に解説します。
https://haradaweb.com/wordpress/wp-query/wp-query-commentary.html

いっつも忘れるWP_Queryの使用方法とパラメータ一覧。がっつり整理してみた。
https://wemo.tech/160

【コピペ】WordPressの「WP_Query」の使い方について
https://esample.info/wp/402

ここで特筆すべきは3つある投稿のうちの最初の1つ(ここでは「Saturday Dialogue」)だけcol-sm-12 (768px以下のとき)に1カラムにして、残りの2つの投稿(「Annual May Gathering 2019」と「Self-inquiry and Self-transformation」)をcol-sm-6 (768以下のときに)2カラムにしたいので、条件分岐を使って処理をします。

具体的には
<?php if($wp_query->current_post == 0) : ?>

$wp_queryオブジェクトのcurrent_post変数を使って分岐をしていきます。

current_postは現在のループが何番目なのかを保持していて、一番最初の投稿は0番目になっているので、それをif文で比較して等しかった時に処理をしています。
1ではなく0なので、注意してください。

こちらに関して詳しくは下記の参考ページ
WP_Queryで最初と最後だけ違う処理をする方法メモ -【WordPress&PHP】
https://dev-memo.com/php/first-last

これで条件分岐ができました。

あとはアイキャッチ画像を表示 the_post_thumbnail();
投稿記事タイトルを表示 the_title();
抜粋文を表示 the_excerpt();
投稿記事内容を表示 the_content();

上記の基本的なWordPress関数を使って、組み込んでいきます。

    <section class="main-contents">
        <div class="wrapper">
            <div class="d-flex flex-wrap">
                <div class="col-md-9 col-sm-12 left-col">
                    <h2 class="feature-title"><?php echo $featured_title_01; ?></h2>
                    <?php $wp_query = new WP_Query( array('post_type' => 'program_schedule', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
                    <?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
                    <?php if($wp_query->current_post == 0) : ?>

                    <div class="d-flex flex-wrap">
                        <div class="col-md-4 col-sm-12">
                            <div class="responsive">
                                        <?php
                                if( has_post_thumbnail() ){
                                    the_post_thumbnail();
                            }
                            ?>
                            <!-- 【WordPress】自動生成されるpタグを除去 -->
                            <?php remove_filter ('the_excerpt', 'wpautop'); ?>
                            <?php remove_filter ('the_content', 'wpautop'); ?>

                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>


                        <?php else : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="responsive">
                                
                            <?php
                                if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                            }
                            ?>
  
                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>
                    <?php endif; ?>
                    <?php endwhile; ?>
                    </div>

                </div>

「Program Schedule」上記のようなコードで処理しました。

それでは次にWordPress管理画面からカスタム投稿タイプを作成して、
投稿記事を3つ登録してみましょう。

まずWP管理画面「プラグイン」から「Custom Post Type UI」というプラグインをインストールして有効化します。

CPT UIの設定管理画面から「投稿タイプの追加と編集」をクリックして、
下記のように3つの項目①「投稿タイプスラッグ」②「複数形のラベル」③単数形のラベルを入力していきます。

他の項目も色々とあり、様々な設定ができますが
基本的に下記の項目以外はデフォルトのままで大丈夫です。

抜粋の部分(excerpt)にあらためてチェックを入れます。


「投稿タイプを追加」をクリックすると、


上記のように「program schedules」という新規のカスタム投稿タイプがWP管理画面のメニューに表示されます。

それでは「program schedules」をクリックして、実際にカスタム投稿タイプの記事を登録してみましょう。

<h3 class=”program-title”><?php the_title(); ?></h3>
<p class=”date”><?php the_excerpt(); ?></p>
<p class=”desc”><?php the_content(); ?></p>
<div class=”responsive”> <?php if( has_post_thumbnail() ){ the_post_thumbnail(); } ?>

上記のように①title タイトル ②excerpt 抜粋文 ③content 本文
④アイキャッチ画像を下記の投稿記事画面から入力していきます。


下記のようにちゃんと表示されました。


同じ要領で残りの2つも登録します。


ちゃんと3つ表示されました。

「Featured Teachings」と「Featured books」も同じ構造なので、
同じ要領で下記のコードにて処理をしていきます。

    <section class="main-contents">
        <div class="wrapper">
            <div class="d-flex flex-wrap">
                <div class="col-md-9 col-sm-12 left-col">
                    <h2 class="feature-title"><?php echo $featured_title_01; ?></h2>
                    <?php $wp_query = new WP_Query( array('post_type' => 'program_schedule', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
                    <?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
                    <?php if($wp_query->current_post == 0) : ?>

                    <div class="d-flex flex-wrap">
                        <div class="col-md-4 col-sm-12">
                            <div class="responsive">
                                        <?php
                                if( has_post_thumbnail() ){
                                    the_post_thumbnail();
                            }
                            ?>
                            <!-- 【WordPress】自動生成されるpタグを除去 -->
                            <?php remove_filter ('the_excerpt', 'wpautop'); ?>
                            <?php remove_filter ('the_content', 'wpautop'); ?>

                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>


                        <?php else : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="responsive">
                                
                            <?php
                                if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                            }
                            ?>
  
                            </div>
                            <p class="cat">Category: <a href="#">Programs</a></p>
                            <h3 class="program-title"><?php the_title();  ?></h3>
                            <p class="date"><?php the_excerpt();  ?></p>
                            <p class="desc"><?php the_content();  ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>
                    <?php endif; ?>
                    <?php endwhile; ?>
                    </div>

                </div>
                <div class="col-md-3 right-col">
                    <div class="right-col-wrapper">
                        <h3 class="donation-title">Support our efforts</h3>
                        <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                            alive
                            in print and online for decades. Your gift allows this to continue. Please join us in
                            support of
                            this vital work.
                        </p>
                        <button type="button" class="btn btn-orange">DONATE TODAY</button>

                        <h3 class="online-shop-title">Online Shop</h3>
                        <img src="/wp-content/themes/kfa/assets/img/cart.png" alt="cart">
                        <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                here&gt;</a></p>
                    </div>
                </div>


                <div class="col-md-9 left-col">
                    <h2 class="feature-title"><?php echo $featured_title_02; ?></h2>
                    <div class="d-flex flex-wrap">
                    <?php $wp_query = new WP_Query( array('post_type' => 'featured_teachings', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
                    <?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
                    <?php if($wp_query->current_post == 0) : ?>

                        <div class="col-md-4 col-sm-12">
                            <div class="responsive">
                                <?php
                                    if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                                }
                                ?>

                            </div>
                            <h3 class="teaching-title"><?php the_title(); ?></h3>
                            <p class="desc"><?php the_content(); ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>
                        <?php else : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="responsive">
                                <?php
                                    if( has_post_thumbnail() ){
                                            the_post_thumbnail();
                                }
                                ?>
                            </div>
                            <h3 class="teaching-title"><?php the_title(); ?></h3>
                            <p class="desc"><?php the_content(); ?></p>
                            <p class="read-more"><a href="#">Read more &gt;</a></p>
                        </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                    </div>
                </div>

                <div class="col-md-9 left-col">
                    <h2 class="feature-title"><?php echo $featured_title_03; ?></h2>
                    <div class="d-flex flex-wrap">
                        <?php $wp_query = new WP_Query( array('post_type' => 'featured_books', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
                        <?php while( $wp_query->have_posts() ): $wp_query->the_post(); ?>
                        <?php if($wp_query->current_post == 0) : ?>

                        <div class="col-md-4 col-sm-12">
                            <div class="responsive featured-book-img text-center">
                            <?php
                                    if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                                }
                                ?>

                            </div>
                            <h3 class="books-title"><?php the_title(); ?></h3>
                            <p class="desc"><?php the_content(); ?></p>
                        </div>
                        <?php else : ?>

                        <div class="col-md-4 col-sm-6">
                            <div class="responsive featured-book-img">
                            <?php
                                    if( has_post_thumbnail() ){
                                        the_post_thumbnail();
                                }
                            ?>
    
                            </div>
                            <h3 class="books-title"><?php the_title(); ?></h3>
                            <p class="desc"><?php the_content(); ?>
                            </p>
                        </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                    </div>
                </div>

            </div>
        </div>
    </section>

右側のカラム<div class=”col-md-3 right-col”> は「Program Schedule」が終わった直後に下記のように記述して、その次「Featured Teachings」と「Featured books」を「Program Schedule」と同じ要領のコードで処理します。

                <div class="col-md-3 right-col">
                    <div class="right-col-wrapper">
                        <h3 class="donation-title">Support our efforts</h3>
                        <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                            alive
                            in print and online for decades. Your gift allows this to continue. Please join us in
                            support of
                            this vital work.
                        </p>
                        <button type="button" class="btn btn-orange">DONATE TODAY</button>

                        <h3 class="online-shop-title">Online Shop</h3>
                        <img src="/wp-content/themes/kfa/assets/img/cart.png" alt="cart">
                        <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                here&gt;</a></p>
                    </div>
                </div>

これで<section class=”main-contents”>  の部分のコード処理はとりあえず完了しました。

次に「Program Schedule」「Featured Teaching」「Featured Books」各項目のfeature-title もWP管理画面から登録・更新ができるように組み込んでいきましょう。
実際にここのfeature-title の所はあまり変更をしない部分かもしれませんが、
カスタムフィールドの使いかたを学ぶために、やってみます。

まずWP管理画面「プラグイン」の検索ボックスから「Advanced Custom Field」と
入力して、「Advanced Custom Field」をインストールします。


上記のように入力して、「Advanced Custom Field」をインストールします。
Advanced Custom Fieldをインストールして有効化したら、
WP管理画面に「カスタムフィールド」と表示されているので、
カスタムフィールドをクリックします。

そして下記のような画面が表示されたら、


①、②、③を入力・選択していきましょう。
ここでは基本的に①、②、③だけで大丈夫です。

①Program Schedule
②③は固定ページ「Home」から登録・更新を行うようにしたいので、
②を「ページ」③を「Home」を選択して、公開をクリックします。


次に「フィールドグループを追加」をクリックすると、
下記のような画面が表示されるので、
②フィールドラベル  → feature title 01
③フィールド名  →  feature_title_01
④フィールドタイプ  →  テキスト
⑤必須か?  →   はい

上記の項目を入力・選択すれば、今回は基本的に他の項目はデフォルトのままでOKです。
そうすると固定ページ「HOME」に行くと、下記のように今登録したカスタムフィールドが表示されます。

Advanced Custom Fieldの取得と表示方法について詳しくは下記をご参考ください。

Advanced Custom Fieldsの使い方
https://kotori-blog.com/wordpress/advanced-custom-fields/

Advanced Custom Fieldsの出力
https://kotori-blog.com/wordpress/acf_output/

「Advanced Custom Fields」の使い方と出力方法のまとめ
https://haniwaman.com/advanced-custom-fields/

Advanced Custom Fields の取得と表示方法
https://hirashimatakumi.com/blog/7.html


ここにタイトル「Program Schedule」と入力して、「更新」をクリックして
下記のように$featured_title_01  という変数にget_field という関数を使いカスタムフィールドの値を取得したもの格納します。

//  Program Schedule
$featured_title_01         =   get_field('featured_title_01');

そして、下記のようにecho を使い表示させます。
<h2 class=”feature-title”><?php echo $featured_title_01; ?></h2>

これでProgram Scheduleの項目のタイトルが表示されます。

これと全く同じ要領で「Featured Teaching」「Featured Books」もカスタムフィールドを新しく作成して、

// Featured Teachings
$featured_title_02         =   get_field('featured_title_02');


// Featured Books
$featured_title_03         =   get_field('featured_title_03');
<!-- Featured Teachingのtitle -->
<h2 class="feature-title"><?php echo $featured_title_02; ?></h2>

<!-- Featured Booksのtitle -->
<h2 class="feature-title"><?php echo $featured_title_03; ?></h2>

$featured_title_02$featued_title_03という変数にget_field という関数を使いカスタムフィールドの値を取得したもの格納します。
そして格納した変数をecho を使い表示させます。

これで「Program Schedule」「Featured Teachings」「Featured Books」がちゃんと表示されました!