MENU
実務で知りたいワードプレスのあれこれ
  1. ホーム
  2. テーマ
  3. オリジナルテーマ
  4. 【WordPress】HTMLから基本的なパーツに分けてみよう

【WordPress】HTMLから基本的なパーツに分けてみよう

テーマ オリジナルテーマ

前回の記事でテンプレートパーツファイルについて説明しました。

本記事では前回の記事を踏まえて実際にhtmlファイルからパーツ分けしてみます。

あわせて読みたい
WordPressのテンプレートとは？ WordPressで作られたサイトはWordPressが定めたファイル群で、これらを組み合わせて1つのサイトを構成します。 WordPressが定めたファイルの代表例は、 index.phpsingle…
目次

目標

最初に準備するファイルはindex.htmlです。

このファイルをPHPファイルにし、

  • ヘッダー
  • サイドバー
  • フッター

をパーツとして分けていきます。

Sample Site

htmlファイル群の準備

sample
 |__ css
     - style.css
 |__img
     - dammy.png
 |__ index.html
 |__ style.css //テーマ登録用

練習用にhtmlファイルを載せておくので、コピーして使ってください。↓↓

phpファイルの作成

htmlファイルをphpファイルに変更します。

本体のファイル

index.html → index.php

さらに、パーツとして分けるファイルを新規作成します。

パーツファイル
  • header.php
  • footer.php
  • sidebar.php
sample
 |__ css
     - style.css
 |__img
     - dammy.png
 |__ index.php
 |__ header.php
 |__ footer.php
 |__ sidebar.php
 |__ style.css //テーマ登録用

パーツ分けはどこで区切るか？

ヘッダー、フッター、サイドバーをパーツ分けします。

ヘッダー

header.phpにヘッダーのコードを貼り付ける

index.phpのうち、header部分を切り取り、header.phpにそのまま貼り付けます。

index.php

<!-- ここから -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Site</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>WP</h1>
      <ul>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
      </ul>
    </div>
  </header>
<!-- ここまで切り取り -->

  <div class="content">
    <!-- 省略 -->
  ＜/div>

  <footer>
    <!-- 省略 -->
  </footer>
</body>
</html>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Site</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>WP</h1>
      <ul>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
      </ul>
    </div>
  </header>

コードを見てもわかるように、
ヘッダーは<header>から</header>ではなく<!DOCTYPE html>から</header>までパーツにしています。

ヘッダーとフッターとサイドバーに分けるというと<header>から</header>、<footer>から</footer>、<sidebar>から</sidebar>を切り取ると思いがちですが、実際にはどこからどこまで共通のコードなのかを意識して切り分けるので、一概に<header>から</header>….のように分けるわけではありません。

headerであれば、全ページで<!DOCTYPE html>から</header>まで共通して使用するためheader.phpとしてひとまとめにできます。sidebarやfooterにおいても考え方は同じです。

index.phpでheader.phpを読み込む

index.phpのheaderのコードがあった場所にheader.phpをパーツとして読み込みます。

header.phpを読み込むには<?php get_header(); ?>を使います。
関数リファレンス/get header | WordPress Codex 日本語版 (ja)

index.php

<?php get_header(); ?>

  <div class="content">
    <!-- 省略 -->
  </div>

  <footer>
    <!-- 省略 -->
  </footer>
</body>
</html>

フッター

index.phpのうち、footer部分を切り取り、footer.phpにそのまま貼り付けます。

index.php

<?php get_header(); ?>

  <div class="content">
   <!-- 省略 -->
  </div>
<!-- ここから -->
  <footer>
    <div class="container">
      <p>©©️2020 WPマニュアル</p>
    </div>
  </footer>
</body>
</html>
<!-- ここまで切り取り -->

footer.php

  <footer>
    <div class="container">
      <p>©©️2020 WPマニュアル</p>
    </div>
  </footer>
</body>
</html>

index.phpでfooter.phpを読み込む

footerのコードがあった場所にfooter.phpをパーツとして読み込みます。

footer.phpを読み込むには<?php get_footer(); ?>を使います。
関数リファレンス/get footer | WordPress Codex 日本語版 (ja)

index.php

<?php get_header(); ?>

  <div class="content">
   <!-- 省略 -->
  </div>

<?php get_footer(); ?>

サイドバー

index.php

<?php get_footer(); ?>

  <div class="content">
    <div class="content__container">
      <main id="main">
        <!-- 省略 -->
      </main>

      <!-- ここから -->
      <aside id="sidebar">
        <h2>Category</h2>
        <ul>
          <li><a href="">category1</a></li>
          <li><a href="">category2</a></li>
          <li><a href="">category3</a></li>
          <li><a href="">category4</a></li>
        </ul>

        <h2>Archive</h2>
        <ul>
          <li><a href="">archive1</a></li>
          <li><a href="">archive2</a></li>
          <li><a href="">archive3</a></li>
          <li><a href="">archive4</a></li>
        </ul>
      </aside>
      <!-- ここまで切り取り -->
    </div><!-- /content__inner -->
  </div>

<?php get_footer(); ?>

sidebar.php

<aside id="sidebar">
  <h2>Category</h2>
  <ul>
    <li><a href="">category1</a></li>
    <li><a href="">category2</a></li>
    <li><a href="">category3</a></li>
    <li><a href="">category4</a></li>
  </ul>

  <h2>Archive</h2>
  <ul>
    <li><a href="">archive1</a></li>
    <li><a href="">archive2</a></li>
    <li><a href="">archive3</a></li>
    <li><a href="">archive4</a></li>
  </ul>
</aside>

sidebarのコードがあった場所にsidebar.phpをパーツとして読み込みます。

sidebar.phpを読み込むには<?php get_sidebar(); ?>を使います。
関数リファレンス/get_sidebar | WordPress Codex 日本語版 (ja)

index.php

<?php get_footer(); ?>

  <div class="content">
    <div class="content__container">
      <main id="main" class="main">
        <!-- 省略 -->
      </main>
      
      <?php get_sidebar(); ?>
    </div><!-- /content__inner -->
  </div>

<?php get_footer(); ?>

パーツ分けした結果

ヘッダー、フッター、サイドバーをパーツ化した結果、最終的にindex.phpのコードは以下のようになります。

<?php get_header(); ?>

  <div class="content">
    <div class="content__container">
      <main id="main">
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
      </main>
      
      <?php get_sidebar(); ?>
    </div><!-- /content__inner -->
  </div>

<?php get_footer(); ?>

wp_head()とwp_footer()

header.phpにはwp_head、footer.phpにはwp_footerを追記していきます。

wp_head()・・・関数リファレンス/wp head | WordPress Codex 日本語版 (ja)
wp_footer()・・・関数リファレンス/wp footer | WordPress Codex 日本語版 (ja)

wp_head()の設置場所

</head>の直前に<?php wp_head(); ?>を記述します。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Site</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <?php wp_head(); ?><!-- ここに追加！！ -->
</head>
<body>
  <header>
    <div class="container">
      <h1>WP</h1>
      <ul>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
      </ul>
    </div>
  </header>

wp_footer()の設置場所

</footer>の直前に<?php wp_footer(); ?>を記述します。

footer.php

<footer>
    <div class="container">
      <p>©©️2020 WPマニュアル</p>
    </div>
  </footer>
  <?php wp_footer(); ?><!-- ここに追加！！ -->
</body>
</html>

本記事での最終的なコード

本記事での最終的なコードをファイルごとに掲載しています。確認のためにご覧ください。

<?php get_header(); ?>

  <div class="content">
    <div class="content__container">
      <main id="main">
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
        <article>
          <a href="">
            <h2>タイトル</h2>
            <time>2022.06.22</time>
            <img src="img/dammy.png" alt="">
          </a>
        </article>
      </main>
      
      <?php get_sidebar(); ?>
    </div><!-- /content__container -->
  </div>

<?php get_footer(); ?>
テーマ オリジナルテーマ
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

harukaのアバター haruka

スーパーうさぎアルバイター。
コーディングのお勉強してます。

関連記事

コメント

コメントする

目次