【 WordPress #2 】 「 自作テーマに必要なファイルとコード 」FirE♯533
今回は、
WordPressでWEBサイトを構築する際に、必要なファイルと、コードについて解説します。
前回の記事
【 WordPress 】
WordPressでのWEBサイトサイト制作には、ルールに沿ったファイル構成、ファイルの命名などが必要です。
■ テーマに必須のファイル
この2つのファイルがなければ、テーマとして認識されません。
ポイントはフォルダの一番上の階層に両方置くことです。
例えばCSSフォルダの中にstyle.cssが入っていても認識されません。
必ずindex.phpとstyle.cssは同じ階層の置きます。
この2つのファイルが配置してあれば、WordPressの管理画面から、テーマを選択する際に、自分のファイルがテーマとして選択できる状態になります。
▶ style.cssの中身
/*
Theme Name: テーマの名前を記入します
Theme URI: テーマのURLを記入します
Author: テーマの作者(組織名)を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/
style.cssには、このような内容を書くことで、テーマ選択画面で、書いた情報が表示されます。
■ ファイル名と、その役割
これらのファイルが一般的なWEBサイト設計には必要になってくるでしょう。
この他にも、機能に応じて、あらかじめページ名が決まっています。
これはテンプレート階層と呼ばれるものになります。
下記ページから詳細を見られますが、正直よくわからないと思います。
やりながら理解する方が良いでしょう。
■ ファイル構成
基本的なファイル構成です。(一例です。)
先ほど解説した
[ index.php ] [ style.css ]の配置はこの階層です。
[ page-スラッグ.php ]の形式に沿っているのが、
[ page-about.php ] [ page-contact.php ]などのファイルです。
【 必須のコード 】
WordPressには、その機能を使うために必要なコードがあります。
<?php wp_head(); ?>
<?php wp_footer(); ?>
この2つのコードがWordPressを機能させるための必須のコードです。
これを書くことで、WordPressの管理画面や、そのほかのプラグインが正常に動くようになります。
これらのコードを、[ header.php ]と、[ footer.php ]に書きます。
■ header.php
[ header.php ] の中身はこのようになります。
<!--header.php-->
<!DOCTYPE html>
<html lang="ja">
<head>
<!--ヘッドタグの中身ー-->
<?php wp_head(); ?>
</head>
<body>
<!--ヘッダー-->
<header>
<!--ヘッダーの中身ー-->
</header>
<!--/ヘッダー-->
</head>タグの上に、<?php wp_head(); ?>を書きます。
■ footer.php
[ 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のファイルと、コードについて書きました。
後半は少しややこしいところを書きましたが、現時点では理解できなくても大丈夫です。
使っていくうちに、分かっていきます。
次回へ続きます!!
この記事が気に入ったらサポートをしてみませんか?