静的サイトをWordPress化する手順②（テンプレートタグの入力）

今回は前回までで作ったファイルの中身に追記と変更をしていきます。

それでは早速やっていきましょう。

テンプレートタグで情報を動的に取得する

テンプレートタグで情報を動的に取得する

前回まではファイル名を変えただけなので、中身は自分でコーディングしたままになっていると思います。

そこにテンプレートタグと呼ばれる各種関数を追加していくことで、サイトの情報を動的に取得できるようになります。

✔テンプレートタグとは

WordPressサイト全体や各投稿の様々な情報を取得し、表示するために使われるPHP関数のこと。
各種情報を動的に（WordPress管理画面での変更を適用して）表示することができるようになる。
<?php 〇〇(); ?>の形で使われ、カッコの中には引数（ひきすう）を指定して特定の情報を取得する事もできる。
まずはテーマ作成によくに使われる関数という理解でOK

使用例を見ていきましょう。

例えば、公開後に「サイトの名前を変えたい」となったとします。

現状のままでは、HTMLファイルの中でサイト名が記述されている部分すべてを直接編集しなければいけませんが、

テンプレートタグを使って動的に取得するようにしておけば、管理画面からサイト名を変更するだけでOKというわけです。

こうすることがHTMLの知識がない人でも更新できるという最大のメリットに繋がります。

では実際に順番に見ていきましょう。

ヘッダーとフッターに専用のテンプレートタグを追加

まずは<?php wp_head(); ?>と<?php wp_footer(); ?>というテンプレートタグをそれぞれfront-page.phpのheader部分とfooter部分に追加していきます。

(※front-page.phpのヘッダー・フッター部分だけで大丈夫です。)

これらはWordPressが正しく機能するためのHTML, CSS, JavaScriptを自動的に出力してくれるので必須の記述です。

<?php wp_head(); ?>は</head>(headの終了タグ)の直前に

<?php wp_footer(); ?>は</body>(bodyの終了タグ)の直前に記述してください。

また読み込み位置も間違えやすいので注意しましょう。

これらを書き忘れるとWordPressのツールバーが表示されなくなったり、正常に機能しなくなるので必ず書くようにしましょう。

下記の様になっていればOKです。

(headタグ内の細かな記述は多少違っていても問題ありません。テンプレートタグの挿入位置を確認してください。)

front-page.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
  minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SAMPLE SITE</title>
  <link href="/css/style.css" rel="stylesheet">
  <?php wp_head(); ?>
</head>

 <footer class="footer" id="footer">
    <div class="inner">
      <p>Copyright © SAMPLE SITE All Rights Reserved.</p>
    </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="/js/script.js"></script>
  <?php wp_footer(); ?>
</body>
</html>

サイト基本情報を取得するテンプレートタグを追加

WordPressサイトの基本情報を取得するには<?php bloginfo(); ?>テンプレートタグで取得できます。

基本情報とはWordPress管理画面の左のサイドバーから　設定 > 一般　とたどることで確認できます。

下がこのブログの実際の管理画面です。

サイトのタイトル　→　<?php bloginfo( 'name' ); ?>
キャッチフレーズ　→　<?php bloginfo( 'description' ); ?>
管理者メールアドレス　→　<?php bloginfo( 'admin_email' ) ?>

このように引数を渡すことで様々な情報を取得することができます。

今回はよく使うものだけを紹介しましたが、他にもあるのでぜひご自身で調べてみてください。

✔<?php bloginfo( ); ?>について

<?php bloginfo(); ?>の引数には現在では廃止になっているものや、非推奨となっているものがあるので注意しましょう。

上記で紹介したものは使用しても問題ないです。（2020.2.14現在）

参考記事：https://whitebear-seo.com/wordpress-bloginfo-deprecation/

これを使ってfront-page.phpのfooter部分を少し変更してみましょう。

front-page.php

 <footer class="footer" id="footer">
    <div class="inner">
      <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>　//サイト名を文中に挿入
    </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

これで管理画面でのサイトのタイトルの変更が反映される様になりました。

外部ファイルのパス、サイト内リンクを出力するテンプレートタグを追加

通常コーディングする際は画像やCSSやjsファイルの読み込み（外部ファイルの読み込み）には相対パスを使って書くのが一般的です。

（例：src="./img/picture.jpg" や link="./css/style.css" など）

しかしWordPress上では絶対パスで記述する必要があるため、テンプレートタグを使って自動的にテーマファイルまでのパスを取得できるように変更します。

テーマまでのパスを取得するためには<?php get_theme_file_uri(); ?>テンプレートタグを使います。

使い方は以下のとおりです。

(※front-page.phpだけでなくすべてのファイルでテンプレートタグでの書き換えを行ってください。)

（※下のコードは一例です。画像ファイルだけでなく、CSSやJSファイルの読み込み部分もテンプレートタグで変更しなければ適用されません。）

変更前（画像のパスや外部ファイルのパスが相対パスで記述されている）

 <header class="header" id="header">
    <div class="header-in">
      <h1 class="header-logo"><a href="./"><img src="./img/logo.png"></a></h1>
      <nav class="NavMenu">
        <ul>
          <li><a href="./about">ABOUT</a></li>
          <li><a href="./news">NEWS</a></li>
          <li class="header-btn"><a href="./entry">ENTRY</a></li>
        </ul>
      </nav>
    </div>
  </header>

変更後（画像のパスをテンプレートタグを使って記述）

 <header class="header" id="header">
    <div class="header-in">
      <h1 class="header-logo"><a href="./"><img src="<？php echo 
      get_theme_file_uri('img/logo.png'); ?>"></a></h1>
   //テンプレートタグでsrc=""内を書き換え
     <nav class="NavMenu">
        <ul>
          <li><a href="./about">ABOUT</a></li>
          <li><a href="./news">NEWS</a></li>
          <li class="header-btn"><a href="./entry">ENTRY</a></li>
        </ul>
      </nav>
    </div>
  </header>

✔<?php echo get_tmplate_directory_uri(); ?>について

今回はテーマまでのパスを出力するテンプレートタグとして<?php echo get_theme_file_uri(); ?>を紹介しました。

これはWordPress4.7以降で追加された関数で、以前からあるものとして<?php echo get_tmplate_directory_uri(); ?>という関数があります。

これは親テーマ、子テーマへのパスの使い分けのための関数なみたいです。

今回想定するサイトではどちらを使っても問題ありませんが、記事上では<?php echo get_theme_file_uri(); ?>で統一します。

参考記事：https://canonono.com/web/wp/wordpress-theme-uri

次にサイト内リンクをテンプレートタグで書き換えていきます。

サイト内リンクを出力するには<?php echo esc_url( home_url( '/' ) ); ?>を使います。

カッコの中のhome_url();は設定 > 一般のサイトアドレスの値を出力します。

そこに引数を指定することでサイト内リンクの各URLを出力することができます。

実際に変更してみましょう。

（※こちらもすべてのファイルで該当部分を変更しましょう。）

変更前（サイト内リンクが相対パス）

 <header class="header" id="header">
    <div class="header-in">
      <h1 class="header-logo"><a href="./"><img src="<？php echo get_theme_file_uri('img/logo.png'); ?>"></a></h1>
   //テンプレートタグでsrc=""内を書き換え
     <nav class="NavMenu">
        <ul>
          <li><a href="./about">ABOUT</a></li>
          <li><a href="./news">NEWS</a></li>
          <li class="header-btn"><a href="./entry">ENTRY</a></li>
        </ul>
      </nav>
    </div>
  </header>

変更後（サイト内リンクをテンプレートタグで記述）

 <header class="header" id="header">
    <div class="header-in">
      <h1 class="header-logo"><href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<？php 
      echo get_theme_file_uri('img/logo.png'); ?>"></a></h1>
   //テンプレートタグでsrc=""内を書き換え
     //各リンクをテンプレートタグで記述
     <nav class="NavMenu">
        <ul>
          <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>">ABOUT</a></li>
          <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>s">NEWS</a></li>
          <li class="header-btn"><a href="<?php echo esc_url( home_url( '/entry' ) ); ? 
          >">ENTRY</a></li>
        </ul>
      </nav>
    </div>
  </header>

これでテンプレートタグの記述は一旦終了です。

なおここまでのテンプレートタグでの書き換えはすべてのファイルのすべての該当箇所で行ってください。

✔エスケープ処理について

上で紹介した<?php echo esc_url( home_url( '/' ) ); ?>という記述は

単に<?php echo home_url('/'); ?>と書いてもURLは出力されます。

ただし、セキュリティの面から　esc_url()　で囲むことが推奨されています。

詳しくはこちら↓

参考記事：https://www.nishi2002.com/30429.html

続きは次の記事でやっていきましょう。