プログラム

WordPressの自作テーマを作りながら基本構造を理解しよう！

編集部
  /


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

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

https://k-1blog.com/development/program/post-13334/

今回はもっと奥まで掘り下げて、
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="#">記事のタイトル１</a></h2><!--記事のタイトル-->

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

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

</section>

<footer>
	© 2018 kosekin.
</footer>

</body>
</html>

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

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

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

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

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

WordPressテーマの基本ファイル
（１）style.css
（２）header.php
（３）footer.php
（４）index.php
（５）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="#">記事のタイトル１</a></h2><!--記事のタイトル-->

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

	<h2><a href="#">記事のタイトル３</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でデザインを整えて、
サイトが完成していくわけですね。

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

それでは、さようなら。

wordpress
RELATED POST