前回模写コーディングしたHTMLファイルを今回はWordPress化していこうと思います。自分への備忘録を含めてその手順・プロセスのポイントを書いていけたらと思います。最初にWordPress化していく上での準備作業をしていきます。Themeを参照このUdemy動画教材は長い間ベストセラーであり、HTMLファイルをWordPress化する作業をする上でとても参考になります。Bootstrap3を使っているので、5,6年前のちょっと古い情報にはなりますが、そのデメリットを圧倒的に上回るクオリティーの高い動画教材です。内容がいまだ有益で、そして分かりやすく面白いです!英語ですが、英語が完全に分からなくてもBootstrapを使ってHTMLの静的サイトを制作してから、それを動的なWordPressサイト化していく手順・プロセスはコードを追っていけば大体理解できるかと思います。WordPressローカル環境を構築していきます。Flywheel」を使用していきます。Flywheelのセットアップと基本的なつかいかた」など詳しくは下記の記事に書きましたので、そちらを参考にしてください。こちらでの詳しい説明は割愛します。Themeであるunderscoresを使い、スターター・テンプレートを使用しカスタムテーマを構築していく。Themeを使います。underscores)」について詳しいことは下記の記事にて説明しているのでそちらをご覧ください。underscores)」をWordPressのテーマとして反映が完了したら、早速HTMLファイルをWordPress化する作業を進めていきましょう。Finder」という項目があるので、それをクリック。すると、下記の画面に飛びます。今回はnirvanalifeというサイトを開発していきますので、nirvanalifeのフォルダをクリック。次に「app」をクリック。「public」のフォルダの中に入ると、おなじみのWordPressのフォルダが表示されます。Code(以前はAtomを使っていましたが、個人的にはこちらの方が使いやすい。「kfa」をドラッグ・アンド・ドロップします。次に模写コーディングの静的サイトで使用していた「img」「css」「js」が入った「assets」フォルダを作成し、/wp-content/your-theme/フォルダ直下に置きます。下のようなフォルダ「assets」を「wp-content」→「themes」→「kfa」(今回WordPressのテーマとして反映させたブランクテーマ)の中に移動させます。この「image」「css」「js」をWordPress上で読み込んでいきます。使用して記述していきます。);(※非推奨の主な理由としてはプラグインなどのファイルと重複したり、同じファイルを複数回読み込んでしまう、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性がある為です。)上記に関する参考URLWordPress|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.htmlfunction.phpに実際に下記のコードを記述しました。「wp-content」→「themes」→「kfa」テーマフォルダの直下にあるstyle.cssと置き換えます。これで基本的な開発の準備は整いました。前回模写コーディングで作成したHTMLファイルのindex.htmlもテキストエディターにドラッグ・アンド・ドロップします。header.phpをいじっていきます。href="#">DONATE</a></li></ul></div></nav></header>下記のようにheader.phpの方にコピペします。href="#">DONATE</a></li></ul></div></nav></header>ナビゲーションメニューの部分を上のようにコピペしました。このナビゲーションメニューをWordPress管理画面で変更・更新ができるように組込を行っていきます。Bootstrap4用のナビゲーションメニューをサクッとWordPressに組み込むことが出来るwp-bootstrap/wp-bootstrap-navwalkerをダウンロードします。すると自動的にダウンロードが始まります。Gitからダウンロードしたclass-wp-bootstrap-navwalker.phpをテーマフォルダに入れる。次にfunction.phpに下記のコードを記述し、class-wp-bootstrap-navwalkerを読み込みます。underscores)」の先程いじったheader.phpを書き換えていきます。ちなみに現在の状態は下記。href="#">DONATE</a></li></ul></div></nav></header>このナビゲーションメニューの部分をwp_nav_menuというWordPressの関数を使って、WordPressに組み込んでいきます。いう固定ページのHOMEに対応したページを新しく作成します。下の画面が表示されるので、「固定ページ」にチェックを入れて、ホームページ→「HOME」を選択します。トップページとして表示されます。現在下記のようにpage-home.phpが固定トップページとして、表示されています。WordPress関数を使えば、画像を表示させることが出来ます。alt="cart">ただカルーセルスライダー画像を見てみると、月日が書かれたイベント情報が入っているのでWordPress管理画面から登録・更新ができるように、組み込みたいと思います。部分、これも更新を行ないそうな情報が含まれているのでこちらもWP管理画面から登録・更新ができるように組み込んでいきます。構造をみると、カスタム投稿で以下の基本的なWP関数と繰り返し(ループ)、条件分岐を使えば実現できそうです。Schedule」の部分から見ていきます。下記のようなコードを記述してみました。?></div></div>WP_Queryについては下記の記事が詳しく解説されているので、そちらを参考。WP-Queryとは何かを初めての人に解説します。https://haradaweb.com/wordpress/wp-query/wp-query-commentary.htmlいっつも忘れるWP_Queryの使用方法とパラメータ一覧。(768以下のときに)2カラムにしたいので、条件分岐を使って処理をします。?>$wp_queryオブジェクトのcurrent_post変数を使って分岐をしていきます。current_postは現在のループが何番目なのかを保持していて、一番最初の投稿は0番目になっているので、それをif文で比較して等しかった時に処理をしています。1ではなく0なので、注意してください。-【WordPress&PHP】https://dev-memo.com/php/first-lastこれで条件分岐ができました。the_content();上記の基本的なWordPress関数を使って、組み込んでいきます。Schedule」上記のようなコードで処理しました。投稿記事を3つ登録してみましょう。UI」というプラグインをインストールして有効化します。下記のように3つの項目1「投稿タイプスラッグ」2「複数形のラベル」3単数形のラベルを入力していきます。他の項目も色々とあり、様々な設定ができますが基本的に下記の項目以外はデフォルトのままで大丈夫です。抜粋の部分(excerpt)にあらためてチェックを入れます。schedules」という新規のカスタム投稿タイプがWP管理画面のメニューに表示されます。schedules」をクリックして、実際にカスタム投稿タイプの記事を登録してみましょう。本文4アイキャッチ画像を下記の投稿記事画面から入力していきます。下記のようにちゃんと表示されました。同じ要領で残りの2つも登録します。同じ要領で下記のコードにて処理をしていきます。Schedule」と同じ要領のコードで処理します。部分のコード処理はとりあえず完了しました。WP管理画面から登録・更新ができるように組み込んでいきましょう。所はあまり変更をしない部分かもしれませんが、カスタムフィールドの使いかたを学ぶために、やってみます。Field」をインストールします。Field」をインストールします。Fieldをインストールして有効化したら、WP管理画面に「カスタムフィールド」と表示されているので、カスタムフィールドをクリックします。下記のような画面が表示されたら、1、2、3を入力・選択していきましょう。ここでは基本的に1、2、3だけで大丈夫です。Schedule23は固定ページ「Home」から登録・更新を行うようにしたいので、2を「ページ」3を「Home」を選択して、公開をクリックします。はい上記の項目を入力・選択すれば、今回は基本的に他の項目はデフォルトのままでOKです。すると固定ページ「HOME」に行くと、下記のように今登録したカスタムフィールドが表示されます。Fieldの取得と表示方法について詳しくは下記をご参考ください。いう関数を使いカスタムフィールドの値を取得したもの格納します。Scheduleの項目のタイトルが表示されます。いう関数を使いカスタムフィールドの値を取得したもの格納します。