【 WordPress ＃2 】「自作テーマに必要なファイルとコード」FirE♯533

S.A.P.Studio

2022年9月22日 16:30

WordPressでのサイト構築をHTMLサイトからの移行ではなく、始めから WordPressで行うことを目的にした記事です。

今回は、
WordPressでWEBサイトを構築する際に、必要なファイルと、コードについて解説します。

前回の記事

【 WordPress 】

WordPressでのWEBサイトサイト制作には、ルールに沿ったファイル構成、ファイルの命名などが必要です。

■ テーマに必須のファイル

index.php
style.css

この２つのファイルがなければ、テーマとして認識されません。

ポイントはフォルダの一番上の階層に両方置くことです。

例えばCSSフォルダの中にstyle.cssが入っていても認識されません。

必ずindex.phpとstyle.cssは同じ階層の置きます。

この２つのファイルが配置してあれば、WordPressの管理画面から、テーマを選択する際に、自分のファイルがテーマとして選択できる状態になります。

▶ style.cssの中身

/*
Theme Name: テーマの名前を記入します
Theme URI: テーマのURLを記入します
Author: テーマの作者（組織名）を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/

style.cssには、このような内容を書くことで、テーマ選択画面で、書いた情報が表示されます。

■ ファイル名と、その役割

front-page.php：トップページ用
header.php：ヘッダー用
footer.php：フッター用
sidebar.php：サイドバー用（必要な場合）
single.php：記事ページ用
archive.php：記事一覧ページ用
page-スラッグ名.php：固定ページ用（階層ページ用）
functions.php：機能を追加するためのファイル

これらのファイルが一般的なWEBサイト設計には必要になってくるでしょう。

この他にも、機能に応じて、あらかじめページ名が決まっています。

これはテンプレート階層と呼ばれるものになります。
下記ページから詳細を見られますが、正直よくわからないと思います。
やりながら理解する方が良いでしょう。

■ ファイル構成

基本的なファイル構成です。（一例です。）

先ほど解説した
[ index.php ] [ style.css ]の配置はこの階層です。

[ page-スラッグ.php ]の形式に沿っているのが、
[ page-about.php ] [ page-contact.php ]などのファイルです。

【必須のコード】

WordPressには、その機能を使うために必要なコードがあります。

<?php wp_head(); ?>

<?php wp_footer(); ?>

この２つのコードがWordPressを機能させるための必須のコードです。

これを書くことで、WordPressの管理画面や、そのほかのプラグインが正常に動くようになります。

これらのコードを、[ header.php ]と、[ footer.php ]に書きます。

■ header.php

<?php wp_head(); ?>を </head>の上に書く

[ header.php ] の中身はこのようになります。

<!--header.php-->

<!DOCTYPE html>
<html lang="ja">

<head>

　　　　<!--ヘッドタグの中身ー-->

<?php wp_head(); ?>

</head>

<body>


<!--ヘッダー-->
<header>

　　　　<!--ヘッダーの中身ー-->

</header>
<!--/ヘッダー-->

＜/head＞タグの上に、<?php wp_head(); ?>を書きます。

■ footer.php

<? php wp_footer( ); ?>を </body>の上に書く

[ footer.php ] の中身はこのようになります。

<!--footer.php-->

 <!--フッター-->
 <footer>

   <!--フッターの中身ー-->

 </footer>


<?php wp_footer(); ?>

</body>

</html>

</body>タグの上に、<?php wp_footer(); ?>を書きます。

【ファイルの扱い】

WordPressでは、WEBサイトの各ページで、共通で使用する部分をパーツ分けして、ファイルを分けています。

その代表が、[ header.php ]と、[ footer.php ]です。

では、このパーツに分けたファイルをどのように使うのか解説します。

■ front-page.php

WEBサイトのトップページの役割を果たすファイルが、[ front-page.php ]でした。

この中身はこのようになります。

<!--front-page.php-->


<!--get header-->
<?php get_header(); ?>


<main>

<!-- コンテンツ -->

</main>


<!--get footer-->
<?php get_footer(); ?>

一番上の <?php get_header(); ?> は、header.phpをgetするためのコードです。
一番下の<?php get_footer(); ?>は、footer.phpをgetするためのコードです。

つまり、
header.phpのコードが<?php get_header(); ?>と書いた部分に読み込まれます。
footerも同じくです。

ちなみに、sidebar.phpを読み込む場合は、<?php get_sidebar(); ?>

profile.phpというファイルを読み込む場合は、
<?php include("profile.php"); ?>と書きます。

このように、パーツ分けしたファイルのコードを、PHPを使って、getして使います。

何かを呼び出して、ここに表示するといった処理をうまく使い、
HTMLだけでは、実現できない「動的サイト」を作っていきます。

【動的サイト】

さて、改めて考えてみると、動的サイトは何でしょう？

例えば、
ブログ記事を表示するページは、 WordPressの場合は、こうなります。

  <!--記事ー-->
  <?php
 if (have_posts()) :
    while (have_posts()) : the_post();
  ?>

      <article class="article">

        <div class="article-header">
          <h2 class="article-title"><?php the_title(); ?></h2>
        </div>

        <div class="article-info">
          <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
        </div>

        <div class="article-content">
          <?php the_content(); ?>
        </div>

      </article>

  <?php endwhile;
  endif;
  ?>

  <!--/記事ー-->

これだけで、記事がいくつあっても、同じレイアウトで表示してくれます。

もし、記事が10000万記事あったとしましょう。

HTMLで作ったサイトの場合、10000個分の記事ページをHTMLで書く必要があります。

WordPressは、PHPで組み立てられたCMSのため、プログラムを書くことで、一つのコードで、全ての記事を同じように表示させることができます。

■ コード解説

上記のコードは、現段階では意味がわからないかもしれません。

しかし、これを何となく理解すると、 WordPressでWEBサイトを作る意味がわかります。

コードを上から順に見ていきましょう。

解説①

  <!--記事ー-->
  <?php
 if (have_posts()) :
    while (have_posts()) : the_post();
  ?>

この部分のコードは、
「もしも( if )、投稿( posts )が、あったら( have )、ある間中( while ) 処理を繰り返す」

という意味です。

一番下のendwhile , endif　とセットで書くコードです。


  <?php endwhile;
  endif;
  ?>

  <!--/記事ー-->

このコードにより、 WordPress上で、投稿された記事がいくつあっても、それを表示することができます。

解説②

<article class="article">

  <div class="article-header">
    <h2 class="article-title"><?php the_title(); ?></h2>
  </div>

この部分は、ほぼ、HTMLのコードですね。しかし、一点だけPHPのコードがあります。
それが、<?php the_title(); ?>です。

このコードは、記事のタイトルを取得するコードです。

解説③

 　　　<div class="article-info">
 　　 　 <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
 　　　</div>

ここにもPHPのコードありますね。
<time>でマークアップされているので、時間に関わるコードです。

<?php the_time('Y-m-d'); ?>

これは、記事の投稿日時を取得するコードです。
Y=年
m=月
d=日
となります。

解説④

<div class="article-content">
  <?php the_content(); ?>
</div>

こちらのPHPコードは、<?php the_content(); ?>です。

これは、コンテンツ＝記事の本文を取得するコードです。

この場所に本文を表示します。

▶︎ WordPress化の意味

コードの解説を見て、 WordPressでサイト作る意味が少し分かったと思います。

<?php the_content(); ?>　などのコードを使うことで、必要な情報を取得して、表示することができるのが、 WordPressの強みです。

ファイルには、仕組みを書いておいて、表示させたい情報は、その時に開いているページによって、自動で置き換えられるようにしておくことができるのです。

【まとめ】

WordPressのファイルと、コードについて書きました。

後半は少しややこしいところを書きましたが、現時点では理解できなくても大丈夫です。

使っていくうちに、分かっていきます。

次回へ続きます！！

この記事が気に入ったらサポートをしてみませんか？

【 WordPress ＃2 】 「 自作テーマに必要なファイルとコード 」FirE♯533