ページ最上部にあるナビゲーションの項目・リンク先を、WordPressの管理画面から設定できるようにしまうｓ．
１.スタイルシートのパスを変更
WordPress基礎講座でも設定したように、WordPressのテーマではスタイルシートのパスを変更する必要があります。 style.cssのパスをWordpressタグに変更しましょう。
元のコード
<link rel="stylesheet" href="css/style.css">
変更後
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
※BootstrapやFontawsomeなどCDNのパスはそのままで大丈夫です。
保存してブラウザをリロードすると、独自cssが効くようになっています。
トップエリアの背景画像が表示されないのは、style.cssを１階層上に動かしたためです。 下記のようにstyle.css内の画像パスを直すと表示されるようになります。 (この時点で背景画像が表示されている方は設定不要)
２.タイトルタグを変更する
htmlファイルを書いていた時は、<title>タグ内に文字を打ち込んでいました。
WordPressテーマだとheader.phpは全てのページで共通してつかいます。 このままだと全ページのタイトルが「ブログ一覧ページ」になってしまいますね。
header.phpが呼び出されたページのタイトルを読み込んでくれるように、WordPressが用意してくれているタグに変更しましょう。
<?php echo get_the_title(); ?>
３.ヘッダーナビゲーションの変更
続いてヘッダーナビゲーション部分を変更します。 HTML段階ではindex.html用のナビゲーションをそのまま使いましたが、トップページ（フロントページ）以外だとは「Home」以外役に立ちませんよね。
フロントページ以外の部分では、WordPressと連動させて、見て欲しいカテゴリー一覧・固定ページなどを表示させられるようにしましょう。
３-1.functions.phpを作成する
WordPressでメニューを設定するためには、functions.phpへの記述が必要です。
現在作成中のテーマディレクトリにはまだfunctions.phpがありません。 functions.phpファイルを新規作成して、メニュー機能が使えるように設定します。
基礎編でも登場したアイキャッチを設定するコードと、ウィジェットを設定するコードもまとめて書いてしましましょう。
functions.php
<?php
//アイキャッチを有効化
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 400, 267, true );
//ウィジェット機能
register_sidebar(array(
'name' => 'sidebar1-サイド表示',
'id' => 'sidebar1'
));
//グローバルナビの追加
add_theme_support('menus');
//作成したメニューをヘッダーナビに使えるようにする
register_nav_menus( array(
'header-navigation' => 'Header Navigation',
) );
保存して、管理画面をリロードしてみてください。 左メニュー「外観」の項目、今までは表示されていなかった「メニュー」「ウィジェット」が表示されるようになっていれば設定成功です。 次のメニュー登録に進んでください。
３-2.管理画面からメニューを作成
WordPressを使ってメニューを設定しましょう。
①メニューを登録する
WordPressの管理画面から外観>メニューを選びます。
メニューが一つも設定されていない状態ですと「メニューを作成」しか選べません。 画面の指示通りに名前を付けて「メニューを作成」をクリックして下さい。 メニュー名はheader-navigationにしてください。
メニューを編集のタブがあらわれます。
●メニューが沢山ある場合
WordPressのバージョンによっては、最初からいくつものメニューバリエーションが登録されていることもあります。 この場合は「新しいメニューを作成」からメニューを作って下さい。
②メニューにリンク先を追加する
「メニューを編集」タブ画面から、リンクを加えていきましょう。 試作用に固定ページやカテゴリーを作ったり、カスタムリンクを使うなどして何個かお好きにリンクを作ってみてください。
いくつかメニュー項目を追加したら「メニューを保存」ボタンで保存します。
③位置を確認する
メニュー作成・編集画面の上にある「位置を管理」タブをクリックしてください。
作成した「header-navigation」が入っていることを確認してください。
ここまでで一旦、管理画面での操作は完了です。 後程再び使用するので、タブは閉じずにおいてください。
３-3.header.phpから呼び出す
header.phpに、WordPressで作成したメニューが出力されるよう書いていきましょう。
WordPressのメニューを呼び出すタグは<?php wp_nav_menu( ); ?>なのですが、今回のサイトはBootstrapのナビゲーションを使っていますよね。<nav>タグ箇所を全て消してWordPressタグに置き換えてしまうと、表示も動きもガタガタになってしまいます。
なので、レイアウトが保てるように<ul>～</ul>部分だけを置き換えます。
切り替え用に、下図のようにコメントアウトしてください。
<ul>の直前に、下記WordPressインクルードコードを書きます。
<?php wp_nav_menu(
array(
//登録したメニュー名使って、呼び出すメニューを指定する
'theme_location' => 'header-navigation',
'menu_class' => 'navbar-nav',
)
); ?>
保存して、ブラウザで確認してみましょう。 WordPressで先ほど登録したメニューの表示に切り替わっているはずです。
しかし、文字色が黒くなり li項目間がくっついていますよね。 これはWordPressで出力される部分にクラスが付いていないためです。 試しに検証ツールで見てみましょう。
私たちが設定したBootstrapのクラス「nav-item」「nav-link」は入っていませんね。 aタグに振られているクラスの設定は出来ませんが、liタグへのクラス追加は簡単に行うことが出来ます。
再び、管理画面のメニュー編集ページを開いてください。 登録したメニュー項目の右端にある▼をクリックします。
CSS classという入力欄がありますね。 ここにliタグに付けていた「nav-item pl-md-4」をそれぞれ入れていきましょう。 すべて入力したら、保存ボタンで保存してください。
※CSS classという入力欄が出ない場合
ページ最上部の表示オプションから設定してください。
メニューを保存したらブラウザをリロードしてみましょう。 文字色は黒いままですが「pl-md-4」が効いて、間隔が空いているはずです。
文字色の方はstye.cssを変更して直しましょう。 セレクタを「nav-link」から「nav-item」へ変更します。
ブラウザをリロードすると、文字色が白に変わりました。 ※変わらない方はページ下部「cssの変更が反映されないとき」をご確認下さい。
これでヘッダーナビゲーションの切り替えは完了です。
コメントアウトした<ul>～</ul>は消してしまってください。
あわせて「navbar-brand」クラスを適用しているaタグのリンク先を、ホーム（フロントページ）へのURLを出力するWordPressタグに変更しておきます。
<?php echo home_url() ?>
ここまででheader.phpの設定は終わりです。
★cssの変更が反映されないとき
WordPressではキャッシュの関係で、style.cssを上書き保存→ブラウザリロードを行っても変更が反映されない場合があります。
その時は「強制リロード(スーパーリロード)」と呼ばれる方法でリロードを行います。
Chromeの場合だと以下のショートカットキーです。
- Mac：Cmd + Shift + R
- Windows：Ctrl + Shift + R
スーパーリロードの方法はos/ブラウザごとに違うので、他のブラウザを使用されている方は調べてみて下さい。