前回に引き続き、WordPressのお話をしようと思います。

↓↓↓↓↓前回の記事はこちら↓↓↓↓↓

企業HPやキャンペーンサイト制作に携わることが多いのですが、 もっぱらWordPressを使用することが多いです。 制作サイドのみなさまは「WordPress」とい

今回はもっと奥まで掘り下げて、
WordPressの基本構造の解説です。

構造を理解するために、
実際に自作テーマを作りながら説明していきます。

「phpとか絶対触りたくないよー」

というWebデザイナーの方でも
コピペで作成できるようにまとめてありますのでご安心ください。

また、テーマを作成する前に、
あらかじめ、デモ用のhtmlソースを用意しておきました。
こちらのソースを使って自作テーマを作成していきます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>sampleサイト</title><!--サイトのタイトル-->
</head>
<body>

<header>
	<h1>sampleサイト</h1><!--サイトのタイトル-->
</header>	

<section>

	<h2><a href="#">記事のタイトル1</a></h2><!--記事のタイトル-->

	<h2><a href="#">記事のタイトル2</a></h2><!--記事のタイトル-->

	<h2><a href="#">記事のタイトル3</a></h2><!--記事のタイトル-->

</section>

<footer>
	© 2018 kosekin.
</footer>

</body>
</html>

デモ用のhtmlは、ブラウザでは以下のように表示されます。
※構造をわかりやすくするために、テキストのみの簡易的なソースにしてあります。


それでは早速、WordPressの自作テーマを作成していきましょう。

テーマフォルダを作成する


まずはFTPソフトを起動して
/wp-content/themes/
のディレクトリ内に新しいフォルダを作成し、テーマ名(sample)を入力します。


このフォルダ内にテーマを構成するファイルを作成します。
まずは空のファイルでいいので、以下5つのファイルを用意します。

WordPressテーマの基本ファイル
(1)style.css
(2)header.php
(3)footer.php
(4)index.php
(5)single.php
(screenshot.png) ※この画像は後で追加します

style.css


style.cssにテーマの情報を入力します。

/*
Theme Name: テーマの名前(必須)
Theme URI: テーマのURI
Author: テーマの作者名
Author URI: テーマ作者のURI
Description: テーマの説明
Version: テーマのバージョン
License: テーマのライセンス
License URI: テーマライセンスのURI
Tags: テーマのタグ,テーマのタグ,テーマのタグ
*/

style.cssのコメントヘッダに入力した情報は、


このように「管理画面 > 外観 > テーマ」の画面に反映されます。

screenshot.png


先ほどの「管理画面 > 外観 > テーマ」の画面表示を確認すると、


テーマは認識されていますが、
テーマを表す画像が空になっているのがわかります。
ここに画像を表示させたい場合は、


screenshot.pngという画像ファイルをテーマフォルダ内へアップロードします。
※推奨サイズは横880px、縦660px


すると、このように画像が表示されるようになります。
※通常はTOPページデザインのキャプチャや、テーマの名前が入った画像を入れるのが一般的です。

header.php


あらかじめ用意したhtmlソースのheader以上の部分をコピぺします。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>sampleサイト</title><!--サイトのタイトル-->
</head>
<body>

<header>
	<h1>sampleサイト</h1><!--サイトのタイトル-->
</header>	

そこに、サイトのタイトルタグを以下のように挿入します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title><?php bloginfo('name'); ?></title><!--サイトのタイトル-->
</head>
<body>

<header>
	<h1><?php bloginfo('name'); ?></h1><!--サイトのタイトル-->
</header>	

※サイトのタイトルを生成するタグ
<?php bloginfo('name'); ?>

このファイルは、全ページの共通ヘッダーとして表示させることになります。

footer.php


あらかじめ用意したhtmlソースのfooter以下の部分をコピぺします。

<footer>
	© 2018 kosekin.
</footer>

</body>
</html>

このファイルは、全ページの共通フッターとして表示させることになります。

index.php


あらかじめ用意したhtmlソースのsection部分をコピぺします。

<section>

	<h2><a href="#">記事のタイトル1</a></h2><!--記事のタイトル-->

	<h2><a href="#">記事のタイトル2</a></h2><!--記事のタイトル-->

	<h2><a href="#">記事のタイトル3</a></h2><!--記事のタイトル-->

</section>

そこに、管理画面で投稿した内容を反映させるため、
ループの記述を追記し、パーマリンクタグタイトルタグを挿入していきます。

<section>

	<?php if ( have_posts() ) : ?><!--ループの記述-->
	<?php while( have_posts() ) : the_post(); ?><!--ループの記述-->

	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><!--記事のタイトル-->

	<?php endwhile;?><!--ループの記述-->
	<?php endif; ?><!--ループの記述-->

</section>

※記事のパーマリンクを生成するタグ
<?php the_permalink(); ?>

※記事のタイトルを生成するタグ
<?php the_title(); ?>

ここでサイトを表示させると、


このように、投稿した記事のタイトルと、それぞれの記事へのリンクが反映されます。

さらに、先ほど作成したheader.phpとfooter.phpを表示させるタグを追記します。

<?php get_header(); ?><!--header.phpの呼び出し-->

<section>

	<?php if ( have_posts() ) : ?><!--ループの記述-->
		<?php while( have_posts() ) : the_post(); ?><!--ループの記述-->

			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><!--記事のタイトル-->

		<?php endwhile;?><!--ループの記述-->
	<?php endif; ?><!--ループの記述-->

</section>

<?php get_footer(); ?><!--footer.phpの呼び出し-->

※共通ヘッダーを呼び出すタグ
<?php get_header(); ?>

※共通フッターを呼び出すタグ
<?php get_footer(); ?>

ここでサイトを表示させると、


このように、共通ヘッダーと共通フッターが表示されるようになります。

single.php


このファイルは、現在TOPページに表示されているタイトルをクリックした際に遷移する
記事詳細ページを表示させるファイルになります。

こちらのファイルでもTOPページと同様、
ループの記述と、共通ヘッダー、共通フッターを表示させるタグ、
さらに、記事の本文を表示させるタグを追記します。

<?php get_header(); ?><!--header.phpの呼び出し-->

<section>

	<?php if ( have_posts() ) : ?><!--ループの記述-->
		<?php while( have_posts() ) : the_post(); ?><!--ループの記述-->

			<h2><?php the_title(); ?></h2><!--記事のタイトル-->
			<p><?php the_content(); ?></p><!--記事の本文-->

		<?php endwhile;?><!--ループの記述-->
	<?php endif; ?><!--ループの記述-->

</section>

<?php get_footer(); ?><!--footer.phpの呼び出し-->

記事の本文を生成するタグ
<?php the_content(); ?>

ここでTOPページのタイトルリンクをクリックすると、


このように、記事の本文が追加された詳細ページが表示されるようになります。

まとめ


以上、WordPress自作テーマの基本的な構造をご紹介いたしました。

これをもとに肉付けしてcssでデザインを整えて、
サイトが完成していくわけですね。

次回以降は固定ページの作成やカテゴリーごとの表示など、
より細かい機能まで解説していきたいと思います。

それでは、さようなら。