wordpress自作テーマ作成【パート4】

Tweet

Pocket

最小構成でwordpressのテーマを作成します。

パート4では以下の行程を進めます。

7. その他の設定とまとめ

〇最終的なディレクトリ構成

themes
|
|______original
       |______inde.php
       |______single.php
       |______page.php
       |______page-contact.php
       |______archive.php
       |______archive-news.php
       |______archive-other.php
       |______functions.php
       |
       |______css
       |      |______index.css
       |      |______common.css
       |      |______normalize.css
       |      |______sanitize.css
       |      |______page.css
       |      |______contact.css
       |      |______single.css
       |      |______archive.css
       |
       |______js
       |      |______jquery-2.0.0.min.js
       |      |______common.js
       |
       |______images
       |      |______main.png
       |
       |______style.css

〇headerのリンク

・home_url( ” )というwordpressの関数を使用することで、リンクを設定することができます。

<header>
  <div class="headerWrap">
    <div class="centerBox">
      <p>ここからheader</p>
      <h1>wordpress自作テーマ概略</h1>
      <div class="menuBtn">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <nav class="headerMenu">
        <ul>
          <li>
            <a href="<?php echo esc_url( home_url( '' ) ); ?>">トップページ</a>
          </li>
          <li>
            <a href="<?php echo esc_url( home_url( '/category/news' ) ); ?>">記事一覧へのリンク</a>
          </li>
          <li>
            <a href="<?php echo esc_url( home_url( '/contact' ) ); ?>">固定ページへのリンク</a>
          </li>
        </ul>
      </nav>
      <p>ここまでheader</p>
    </div>
  </div>
</header>

〇headerやfooterの共通化について

・headerとfooterは共通化し、functions.php等で読み込むcssやjsファイルを設定する方法があります。今回はfunctions.phpの記述を減らすために共通化は行いませんでした。

〇titleタグやdiscriptionタグの設定

・wp_headerやwp_footerタグを追加しているのでwordpressのプラグインを活用し簡単に設定することができます。また今回はheaderとfooterを共通化していないので、各ページごとに直接titleタグやdiscritpionタグを設定することも可能です。

本テーマではall in one seo packというプラグインを導入し、titleやdiscriptionタグの設定を行い完成とします。