プログラミングの勉強

模写コーディングした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 を使用して記述していきます。

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

上記に関する参考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に実際に下記のコードを記述しました。

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

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

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

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

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

ナビゲーションメニューの部分を上のようにコピペしました。
このナビゲーションメニューを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を読み込みます。

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

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

 

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

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

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

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


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

具体的には下記のように

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

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

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

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

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関数を使って、組み込んでいきます。

「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」も同じ構造なので、
同じ要領で下記のコードにて処理をしていきます。

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

これで <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 という関数を使いカスタムフィールドの値を取得したもの格納します。

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

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

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

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

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