2021/4/15ツイートシェアB!はてブポケットこんにちは、ゆんつです。WordPressのオリジナルテーマ作成の第4回目です。WordPressのテーマを作成する」を、何回かに分けてやっています。WordPressのテーマを作成する」は、具体的には以下のような作業内容となります。functions.phpを作成する」を行いました。メニューを作成する」までの作業を行います。ヘッダーやフッターは、サイトの各ページで共通して使われます。サイトで共通して使いまわすようなパーツは、いったん別ファイルに切り出して、それを読み込むようにすれば、同じようなコードを記述する必要がなくなり便利です。ブログのヘッダー部分を「header.php」、フッター部分を「footer.php」として切り出し、それを適宜読み込んでいく形に修正していきます。次回に続きますheader.phpを作成するWEBサイトのヘッダー部分を構成する「header.php」を作成しましょう。html>~</header>までを切り取ります。コードエディタで新規ファイルを作成し、切り取ったコードを貼り付けます。「header.php」という名前でテーマフォルダ(index.phpなどがあるフォルダ)に保存します。ファイルの保存が終わったら、index.phpに戻ります。header.phpの読み込みにはget_header()を利用します。先ほどコードを切り取った部分に、以下のコードを記述します。?>get_header()はheader.phpを呼び出す関数で、get_header()を記述した部分にheader.phpに記述したコードが挿入されます。動作確認のためサイトを表示させ、ソースコードを確認してみてください。get_header()を記述した部分に、header.phpが読み込まれていることが解ると思います。ヘッダーメニューを作成するヘッダーにあるメニューを、WordPressのメニューを使って作成します。固定ページを作成するメニューの作成前に、まずメニューをクリックすると表示される固定ページを作成します。管理画面から「固定ページ」をクリック。Policy」という固定ページがあると思います。Pageを編集してタイトルをプロフィールに変更して更新します。ちなみに、今回は固定ページの内容部分までは作成しません。メニューが、固定ページときちんとリンクされるかの確認だけしかしませんので、もしきちんと固定ページを作成したい場合は、プライバシーポリシーやプロフィールなどの文例を入力してきちんと固定ページを作成してみてください。下準備が終わったので、ヘッダーメニューを作成します。管理画面で「外観」⇒「メニュー」をクリック。メニュー画面になるので、「新しいメニューを作成しましょう」をクリック。メニュー名に「ヘッダーメニュー」と入力し、メニューの位置で「ヘッダーメニュー」にチェックを入れて「新規作成」ボタンをクリック。「メニュー項目を追加」で「すべて表示」タブをクリックし、「ホーム」「プライバシーポリシー」「お問合せ」の3つにチェックを入れ、「メニューに追加」ボタンをクリック。ヘッダーメニューに固定ページが追加されるので、メニューを保存ボタンをクリック。これでメニュー画面でのメニューの設定は完了です。メニューが表示されるようにする作成したメニューがヘッダーに表示されるようにします。header.phpを開いてください。pc">~</nav>までのヘッダーメニュー部分を削除します。メニューを表示するにはwp_nav_menu()を利用します。コードを削除した部分に、以下のコードを記述してください。));?>wp_nav_menu()はメニューを表示する関数で、連想配列をつかって必要な事項を設定していきます。各パラメータを簡単に説明します。'depth'は表示するメニューの深さを指定します。今回は1なのでメニューの一番上の階層だけを表示します。'theme_location'は、functions.phpのregister_nav_menus関数で設定した連想配列のキーを指定することで、その値となっているメニューが、その場所に表示されます。今回のケースでは'theme_location'で'header'を指定しています。register_nav_menus()で'header'の値になっているのは'ヘッダーメニュー'です。メニュー画面を再度確認してみましょう。ヘッダーメニューのメニューの位置は「ヘッダーメニュー」が選択されています。これにより、先ほどメニュー画面で作成した「ヘッダーメニュー」が、ヘッダー部分に表示されようになるのです!'container'はメニューを囲む要素のタグを指定します。'container_class'はメニューを囲む要素に付与されるクラス名を指定します。'menu_class'はメニューの各項目の親要素となるulタグに付与されるクラスを指定します。コードを記述したら、いったんWEBサイトを確認してみてください。メニューが表示されていると思います。「ホーム」以外の「プライバシーポリシー」と「お問合せ」はクリックしても、スタイルシートが適用されていないpage.phpが表示されるだけです。これはpage.phpを、まだWordPressのテーマになるように修正していないためです。今後、page.phpをWordPressのテーマになるように修正すると、ヘッダーメニューをクリックすることにより、該当する固定ページが表示されるようになります。以上でヘッダーメニューの作成は完了です。サイト名とキャッチフレーズとリンクの設定を行う現在、サイト名とキャッチフレーズは直接PHPファイルに記述しています。この状態だと、サイト名やキャッチフレーズを変更したい場合に、いちいちエディターでコードを書き換えなければなりません。クリック)のサイト名とキャッチフレーズに設定しておくことにより、関数を使って呼び出すことが出来るようになります。現在PHPファイルに直接記述しているサイト名やキャッチフレーズ部分に、サイト名やキャッチフレーズを表示する関数を記述しておけば、サイト名やキャッチフレーズに変更があったとしてもコードを書き換えなくても済むようになります。それでは、実際に該当部分を関数に置き換えましょう。一般設定画面になります。サイトのタイトルは「Test-Blog」に既になっていると思いますので、キャッチフレーズ欄に「~WordPressのテストブログです~」と入力して、「変更を保存」ボタンをクリックしてください。header.phpの編集画面に戻ります。一般設定画面で設定した、サイトのタイトルやキャッチフレーズをサイトに反映させるにはbloginfo()を利用します。