WordPressオリジナルテーマ制作手順-②トップページ制作を解説-

2022-07-262022-07-29

前回の記事では、Wordpressオリジナルテーマ制作に必要なファイルを解説しました。
今回はWebサイトの「顔」でもあるトップページの制作手順を解説します。

▶︎前回の記事

トップページ制作に必要なファイル

トップページ制作に必要なファイルはこちらです。

header.php
footer.php
index.php◎
style.css◎
functions.php◎
JSファイルや画像

◎マークがついているファイルはアップロード必須です。アップロードしないとテーマとして認識されません。上記のファイル以外にもWordPressで使用するphpファイルは多くあります。

Webサイトページは、ヘッダー・メインコンテンツ・フッターなどそれぞれのパーツでphpファイルの用意が必要です。
簡単にまとめると以下のようになります。

header.php：ヘッダー
index.php：メインコンテンツ
footer.php：フッター

画像にすると以下のようになります。

ブログなどでサイドバーを挿入する時は、横に「sidebar.php」も追加されます。
これらのファイル以外に用意が必要なファイルは以下の2つです。

style.css：テーマのスタイル
functions.php：テーマに関する関数などを記述

ただ、トップページはheader.php・index.php・footer.phpで完成します。
不足しているファイルがある場合は、手順を確認して作業漏れが無いかを確認しましょう。

補足として、トップページ制作時に意識したい5つのこともまとめておきます。

どんなWebサイトなのか？
何を提供しているのか？
Webサイトにはどんな情報が記載されているのか？
Webサイトにはどんな特徴があるのか？
次のページへの導線はスムーズ？

トップページにはWebサイト訪問者が「知りたい情報」が記載されていないと意味がありません。
Webサイト訪問者が価値を感じてくれないと、Webサイトは再び見てもらえる可能性は非常に低くなります。

離脱されず再度訪問してくれるWebサイトは、Webサイト訪問者の立場も考えて制作する必要があるのです。

トップページ制作の流れ

今回解説するトップページは以下の流れで進めていきます。

phpファイルの準備
index.htmlをfront-page.phpへ貼り付け
ヘッダー・メインコンテンツ・フッターをPHPで分割
style.cssへの追記
functions.phpの作成※詳細は次回の記事

以下より順番に解説していきます。

phpファイルの準備

ローカル環境で設定したフォルダに、ヘッダー・メイン部分・フッターに該当する以下のphpファイルを準備します。

header.php
index.php
footer.php

画像は順不同ですが問題ありません。
併せて、トップページテンプレートのfront-page.phpも準備しておきます。

全てのphpファイルが準備できたら次の手順に進みます。

index.htmlをfront-page.phpへ貼り付け

ここでは、静的ページのindex.htmlのコードをfront-page.phpにそのまま貼り付けましょう。
index.htmlのコードはこちらです。

<!DOCTYPE html>
<html lang=”ja”>
  <head>
    <meta charset=”UTF-8″ />
    <title>タイトル</title>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <meta name=”format-detection” content=”telephone=no” />
    <link href=”style.css” rel=”stylesheet” />
  </head>
  <body>
    <header>ヘッダー</header>
    <main>
      <h1>大見出し</h1>
      <section>
        <h2>コンセプト</h2>
        <div>
          <img src=”画像パス” alt=”” />
        </div>
        <p>文章が入ります</p>
      </section>
    </main>
    <footer>フッター</footer>
  </body>
</html>

index.htmlファイル内コードを全てコピーした上で、ファイル名を「front-page.php」と拡張子もセットで変更しても問題ありません。

front-page.phpにコードを全てコピーした状態がこちらです。

条件分岐タグやテンプレートタグを理解する

「条件分岐」や「テンプレートタグ」を理解しておくと、Wordpressのカスタマイズ性がさらに向上します。

phpファイルの作成前に、条件分岐とテンプレートタグの基礎知識も押さえておきましょう。

条件分岐タグ

条件分岐は基本的に下記のような書き方です。

<?php if(条件1):?>
    条件1に当てはまる場合
<?php elseif(条件2):?>
    条件2に当てはまる場合
<?php else:?>
    条件1にも条件2にも当てはまらない場合
<?php endif;?>

条件が1つだけなら「elseif」「else」は省略して問題ありません。
条件を複数にしたいなら「elseif」で増やせます。

テンプレートタグ

テンプレートタグは記事のタイトルやリンク、記事一覧やカテゴリー一覧などを表示させるWordPress専用タグです。

テンプレートタグを使えばPHPでプログラムを書くべきことが、タグを書くだけで簡単にできます。
ただ、数がかなりあるので初めのころは必要に応じて調べて貼り付ける形で問題ありません。

ここでは基本的なタグや便利なタグを幾つかピックアップして解説します。

プラグイン動作用タグ
※ヘッダー用：必須

<?php wp_head(); ?>

プラグイン動作用タグ
※フッター用：必須

<?php wp_footer(); ?>

ヘッダーテンプレート

<?php get_header(); ?>

サイドバーテンプレート

<?php get_sidebar(); ?>

フッターテンプレート

<?php get_footer(); ?>

コメントテンプレート

?php comments_template(); ?>

検索フォームのテンプレート

<?php get_search_form(); ?>

スマートフォンとパソコンのコンテンツ表示の有無

ists('wp_is_mobile') && wp_is_mobile() ) :?>

スマートフォン用コンテンツを配置

<?php else: ?>

パソコン用コンテンツを配置

<?php endif; ?>

条件分岐タグやテンプレートタグはこの他も多くありますが、また別の機会に解説できればと思います。併せて、headタグ内で頻繫に使うmetaタグも解説しておきます。

<"format-detection" content="telephone=no">

HTML内に記載されている電話番号を自動リンク設定させないタグです。

実はスマートフォンではある番号が電話番号と判断されてしまうと、自動リンク設定によりタップすると電話が掛かってしまうためです。

FAX番号なども電話番号と判断されて自動リンク設定されるので、忘れずに設定しましょう。

<"viewport" content="width=device-width, initial-scale=1.0" />

ページの表示領域指定タグです。

このタグを記述することでPCやタブレット、スマートフォンなどのさまざまなデバイスでWebサイトを閲覧しても、画面のはみ出しや小さく表示されることが無くなります。

<meta charset="UTF-8">

「文字コードをUTF-8に指定」するタグで、「メタ　キャラセット」と呼びます。

他にも「EUC-JP」「Shift-JIS」などのタグもありますが、HTMLではUTF-8推奨です。

パスの書き換え(画像ファイルやリンクなど)

htmlファイル内の「href」「src」の中身を一部phpに書き換えます。

①リンクパス

・絶対パス

<a href=”https://○○○.co.jp/news/”>インフォ</a>
//「https://○○○.co.jp」の部分を書き換える

・相対パス

<a href=”../news/index.html”>お知らせ</a>
//「../」の部分を書き換える

これらを以下のように書き換えましょう。

<a href="<?php echo esc_url( get_home_url() ); ?>/news/">お知らせ</a>

このように記述すると、コード内「<?php echo esc_url( get_home_url() ); ?>」が、トップページのURLに置換されます。

②画像パス

・画像ファイル(サーバーアップの想定)

<img src="../images/top/img_01.jpg" alt="">
//「../」の部分を書き換える

このコードを以下のように書き換えましょう。

<img src="<?php get_template_directory_uri() ?>/images/top/img_01.jpg" alt=""/>

コード内の「<?php get_template_directory_uri() ?>」が、サーバーにアップロードしたテーマのディレクトリ階層を取得します。具体的には以下のパスと置換されます。

「https://〇〇〇.co.jp/wp-content/themes/（テーマ名）/assets/」

ヘッダー・メインコンテンツ・フッターをPHPで分割

ここでは、htmlファイルをヘッダー・メインコンテンツ・フッターをPHPで分割します。

この分割作業を行わないと、トップページや会社概要、お問い合わせなどそれぞれのページのヘッダー修正作業が発生してとても手間がかかります。

そのために、この段階で分割作業を完了させておきましょう。

header.php

<!DOCTYPE html>
<html lang=”ja”>
  <head>
    <meta charset=”UTF-8″>それぞれのmetaタグ
    <script></script>それぞれのscriptタグ
  </head>
  <body>
    <div class=”wrapper”>
      <header class=”header”>
　　　　ここにヘッダーの中身を記述
　    </header>
//ここまで

index.php

<?php get_header(); ?>
  <main>
　　ここにメイン部分のコードを記述
  </main>
<?php get_footer(); ?>

ここではヘッダーから下⇒フッターの手前まで記述します。
下記2行の最上部と最下部への追加も忘れないようにしましょう。

ヘッダーを読み込ませるコード(最上部)：<?php get_header(); ?>
フッターを読み込ませるコード(最下部)：<?php get_footer(); ?>

footer.php

<footer class=”footer”>
　　　ここにフッターの中身を記述
　　</footer>
　　<script src=”<?php echo get_template_directory_uri(); ?>/assets/js/〇〇.js”></script>　//JSファイルがあればここで読み込む
　　</div>
　　<?php wp_footer(); ?>
　</body>
</html>

sidebar.php

補足として、sidebar.phpの解説もしておきます。
ここでの作業は<div id=”sidebar” class=”col-md-3″>タグの中身を切り取り、sidebar.phpに貼り付けます。

<h1 class=”text-center”>Wordpress情報</h1>
<section id=”wordpress”>
  <h2>WordPress</h2>
  <p>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/wordpress.png” alt=”Wordpress画像”>
  </p>
</section>
<section id=”seo”>
  <h2>SEO</h2>
  <p>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/seo.png” alt=”SEO画像”>
  </p>
</section>

ここでは共通化したいところまでを貼り付ければ問題ありません。
また、カット部分は必ずしもこのコードと同じにする必要はないことも覚えておくと安心です。

ループの理解と貼り付け

各ファイルへの分割と併せて、ループの理解と貼り付けも解説しておきます。
ブログなどのWebサイトでのループの役割は記事表示。
この場合のループはブログ内に記事を探して、あれば記事を表示させて見つからない場合は「記事が見つかりません」と表示させます。

上記の条件を踏まえたコードはこちらです。

<!– Contents –>             
<div id=”contents”>
  <div id=”main”>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
          <div class=”post”>
              <h2 class=”title”>
                  <a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”>
                      <?php the_title(); ?>
                  </a>
              </h2>
              <div class=”blog_info”>
                  <ul>
                      <li class=”cal”><?php the_time(‘Y年m月j日’) ?></li>
                      <li class=”cat”><?php the_category(‘, ‘) ?></li>
                      <li class=”tag”><?php the_tags(”, ‘, ‘); ?></li>
                  </ul>
                  <br class=”clear” />
              </div>
              <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
                  <?php the_content(‘続きを読む’); ?>
              </div><!– /.post –>
          <?php endwhile; ?>
              <div class=”nav-below”>
                  <span class=”nav-previous”><?php next_posts_link(‘古い記事へ’) ?></span>
                  <span class=”nav-next”><?php previous_posts_link(‘新しい記事へ’) ?></span>
              </div><!– /.nav-below –>
          <?php else : ?>
              <h2 class=”title”>記事が見つかりませんでした。</h2>
              <p>検索で見つかるかもしれません。</p><br />
              <?php get_search_form(); ?>
          <?php endif; ?>
      </div><!– /#main –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> からループを始めて、スタティックテキストをWordpressテンプレートタグ(タイトル・リンク先・日時・カテゴリー・タグ・サムネイル画像・概要文・前後記事リンク・検索ボックス）と置き換えています。

style.cssへの追記

phpファイルが完成した後は、style.cssへの追記作業を行ないましょう。
WordPressでstyle.cssをテーマ認識してもらうために、追記事項を以下のように記述します。

/*
Theme Name: サイト名（必須）
Description: テーマについての説明
Author: 作者の名前
Version: テーマのバージョン（例：1.0）
*/

functions.phpの作成

続いてはfunctions.phpを作成します。
前回の記事でfunctions.phpを「WordPressサイトの動作制御や機能を追加できるファイル」と解説しました。

WordPressオリジナルテーマ制作において、言わば「心臓」のようなファイルでとても重要です。
functions.phpについては、次回の記事で詳しく解説します。

テーマのサムネイルを表示させる方法

こちらの作業は必須ではありませんが、WordPressのテーマフォルダ直下に「screenshot.png」画像ファイルを用意すると、管理画面でサムネイルが表示できる様になります。

screenshot.pngはjpg・png・gifいずれかの形式で作成しましょう。
併せて、画像は横880px・縦660pxなどの3:4比率で作成することをお勧めします。

まとめ

今回はWordpressオリジナルテーマのトップページを制作する手順を解説しました。

トップページ制作は、PHPファイルを準備した上でヘッダーとフッター、メインコンテンツをPHPで分割制作することが大きな特徴。投稿新着やカスタム投稿新着などの一覧表示などのカスタマイズは、別の機会に解説したいと思います。

次回はWordpressオリジナルテーマで使用するさまざまな機能定義ファイル「functions.php」の制作手順を解説します。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！