ファイルパス修正と、WordPressメニューの作成

style.cssと画像のパスを修正する

現状確認

これから作成していく、自作テーマの現状を確認してみましょう。

WordPress管理画面、左上に表示されているサイト名にカーソルを重ねます。
サイトを表示 というメニューが表示されるので、選択してください。

WordPressサイト、サイトを訪れた人に公開されるページが開きます。
現状は、下図のようにCSSと画像が全て抜けたような表示になっているはずです。

style.cssのパスを直す

現状で読み込めていない、style.cssを読み込めるようにファイルパスを直します。

今、index.phpでは<link rel="stylesheet" href="style.css">と、同階層にあるstyle.cssを読み込むように指示しています。
ですが、WordPressサイトでは、表示されるページのURLとテーマフォルダでは階層が違います。

WordPressでは有効化したテーマフォルダの中にある style.cssファイルを出力できるよう、テンプレートタグというものが用意されています。

このテンプレートタグを使って、index.phpにあるスタイルシートへのリンクを書き換えてみましょう。
以下のように書きます。

index.php

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

※urlではなくuri と書く点に注意してください。

index.phpを上書き保存。
ブラウザをリロードして、レイアウトや背景色が元に戻っていたら成功です。

◆ bloginfo( 'stylesheet_url' )について

テーマスタイルシートのパスは「<?php bloginfo('stylesheet_url' ) ?> では？」と思われた方もいらっしゃると思います。
この書き方でもstyle.cssのパスの出力はできますが、WordPressのバージョンアップに伴い、推奨テンプレートタグが変更されました。

WordPress公式のドキュメントでも、「get_stylesheet_uri()」を使用することが提案されています。
後に廃止される可能性もありますので、これから作るサイトはbloginfo('stylesheet_url' )以外の書き方を使うほうが確実です。

bloginfo() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/bloginfo/

なお、get_から始まる“取得”のテンプレートタグは「〇〇を取得せよ」という命令です。
今回のget_stylesheet_uri()なら「スタイルシートのパスを取得せよ」で、取得した情報を書き出してはくれません。
ですので、出力せよという命令「echo」をセットで使います。

画像のパスを直す

style.cssのパスと同じく、画像パスもWordPressに合わせて修正が必要です。

画像部分には有効化しているWordPressテーマディレクトリ（フォルダ）までのパスを取得してくれるWordPressテンプレートタグecho get_template_directory_uri();を使うと便利です。

上図の例でも書いている、ページ最上部にあるロゴの画像パスを変更してみましょう。
?>の後に、スラッシュを忘れないようにだけ注意すれば大丈夫です。

index.php

<img src="<?php echo get_template_directory_uri();?>/images/logo.png" width="168" height="32" alt="ズーロッパ東京">

index.phpを上書き保存して、ブラウザをリロードしてみましょう。
ロゴ画像が表示されたら、上手くテンプレートタグが書けている証です。

同様に、以下２つの画像も表示されるように修正してください。

• 区切り線のように使っている5色のライン（images/line.png）
• michanの写真（images/michan.png）

カード内の画像は、投稿・固定ページのアイキャッチを使うので、そのままで良いです。

【補足】

WordPressテンプレートタグget_template_directory_uri();は、有効化しているWordPressテーマフォルダの場所（URL）を取得してくれます。
ですので、style.cssの読み込みは以下のように書くこともできます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/style.css">

どちらの書き方でも、間違いではありません。
お好きな方を使ってください。

WordPressのメニューに置き換える

下図赤線で囲ったヘッダーナビゲーション部分を、WordPressで出力するメニューに置き換えます。

1.WordPressでメニューを作る

WordPress管理画面から、外観 > メニュー を開きます。

メニューを1つも登録していない状態だと「最初のメニューを以下で作成しましょう」という画面が開きます。
メニュー名をheader-navと入力して、メニューを作成してください。

左側にあるメニュー項目を追加できるようになります。

固定ページ > ズーロッパとは にチェックを入れて、メニューに追加。

次に、カテゴリーからイベントとお知らせにチェックを入れ、メニューに追加。

お問い合わせは、ページも作っていませんのでダミーリンクを作ります。
カスタムリンクのパネルを開いて、以下のように設定してメニューに追加してください。

• URL：#
• リンク文字列：お問い合わせ

メニュー構造の方に追加されたメニュー項目は、ドラッグで順番を入れ替えられます。

また、展開すると表示されるナビゲーションラベルの欄を打ち替えると、リンクテキストの変更も可能。

並び順やナビゲーションラベルを調整できたら、右下の「メニューを保存」で変更を保存してください。

これで、WordPress管理画面でのメニュー作成は完了です。

2.index.phpからメニューを呼び出す

index.phpに、メニュを呼び出すWordPressテンプレートタグwp_nav_menu();を入れて表示を確認してみましょう。

とりあえず、navタグの下辺りに書いて様子を見てみましょう。

index.php

<nav class="header-nav">
  <?php wp_nav_menu(); ?>
  <ul class="flex-container flex-all-row">
    <li><a href="event.html">イベント</a></li>
    <li><a href="about.html">Zooloppaとは</a></li>
    <li><a href="info.html">お知らせ</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

ブラウザで表示を確認します。
HTMLと同じ様に、最初から横並びには表示してくれません。

WordPressが出力するメニューを、作りたい“見た目”にするための方法はいくつかあります。
今回は、WordPressが出力しているコードに合わせてスタイル指定（style.css）を書き直しましょう。

3.CSSを調整する

検証ツールで見てみると、WordPressから出力されているメニューは「menu-メニュー名」というidが付けられます。

解説ではメニュー名を「header-nav」と登録したので、下図ではulタグのidがmenu-header-nav になっています。

このidを使ってCSSを書く、もしくは既存のスタイル指定のセレクタを変更して対応させます。

今回のサイトはモバイルファースト式でコーディングしているので、まずはスマホ幅の表示ですね。
以下のように変更します。

style.css

#menu-header-nav {
  display: flex;
  flex-wrap: wrap;
}

#menu-header-nav li{
  width: 50%;
  margin-top: 0.5rem;
}

style.cssを上書き保存して、ブラウザで表示を確認。
下図のように、WordPressのメニューにCSSが効いていれば成功です。

◆ CSSの上書きが反映しない場合

WordPressの制作では、cssを上書きしてリロードしても、表示画面が変わらない…ということが起こります。

これは、ブラウザの“キャッシュ”という機能によるもの。 ブラウザはページを早く読み込むために、同じサイトで使われているjsやcssファイルの情報を一時的に保存しています。この一時保存している情報をブラウザが使ってしまうので、リロードしても更新が反映されない状況に陥ります。

Google Chromeにはキャッシュを更新して再読み込みをする“ハード再読み込み”（通称スーパーリロード）が用意されています。
下記のショートカットを使って、スーパーリロードを行ってください。

• Mac：Command + Shift + R
• Windows：CTRL + Shift + R

また、検証ツールを立ち上げている状態で、ブラウザのリロードアイコンを右クリックすると再読み込み方法が選べます。
一番下の“キャッシュの消去とハード再読み込み”が最も強いリロードです。
ショートカットキーを試したけど上手くいかない、なんて時は、こちらも試してみてください。

タブレット幅以上のCSSも修正する

タブレット幅以上の表示でも、CSSセレクタを変更してWordPressのメニューに対応させます。

style.css - @media (min-width: 600px) { } 内

  #menu-header-nav li{
    width: auto;
    margin-top: 0;
    margin-left: 2em;
  }

WordPressのメニュー表示が整ったら、元々書いてあったヘッダーナビゲーション部分を無くします。
<ul class="flex-container ...から、閉じタグ</ul>までを削除もしくはコメントアウト。

　　↓

これで、WordPressメニューへの置き換え完了です！

ちなみに、この時点でメニューのリンクをクリックしても、ページの見た目は変わりません。
これはページ表示に使うテーマテンプレートファイル（〇〇.php）が、まだ index.phpしか無いため。

URLが上図のように変わっていれば、メニューもテーマも正常に動いています。
レッスンを進めて、他のテンプレートファイルを作っていくと、それぞれ表示できるようになります。

titleタグを最適化する

head内にある<title>タグの中身をWordPressテンプレートタグに置き換えます。
使用するのは、サイトのタイトルを出力する<?php bloginfo('name'); ?>です。

index.php

<title><?php bloginfo('name'); ?></title>

ここまでで、index.phpのベース部分は整いました。
次回からはコンテンツ部分の調整を行っていきます。