WordPress（ワードプレス）のテーマ―自作や切り替え方法など。

WordPress（ワードプレス）のテーマはwp-content/themesのディレクトリ（フォルダ）のパスの下に置かれ、インストール直後はデフォルトのテーマが有効なります。簡単なテーマの自作方法やデフォルトのテーマから自作したテーマに切り替える方法などの情報をまとめています。

▲記事トップへ

1. WordPressのテーマとは

WordPressで作成するホームページのデザインはテーマというテンプレートで作られます。初心者向けのテーマはワードプレスをインストールした際に初めから入っているテーマが好ましいと思います。

WordPressは十分にセキュリティ対策を考慮する必要があり、WordPressが提供するテーマが無難です。バージョンUP時に使えなくなるトラブルの心配も減ります。

2. WordPressのファイル構成とテーマの場所

WordPressのファイル構成とテーマの場所は以下です。

ファイル・ディレクトリ	説明
/index.php	通常アクセスの開始部分
/.htaccess	パーマネントリンク設定時に使用
/wp-config.php	設定ファイル
/wp-login.php	ログイン画面
/wp-admin/	管理画面用のファイル群
/wp-content/	サイトのデータ格納場所
/wp-content/languages/	言語ファイル
/wp-content/themes/	テーマ格納場所
/wp-content/plugins/	プラグイン格納場所
/wp-content/uploads/	アップロードしたファイル格納場所
/wp-includes/	WordPressのコアファイル

3. WordPressのテーマの切り替え方法

作成したテーマを切り替えるにはダッシュボードにログインして、「外観」からテーマの「有効化」ボタンを押下することで切り替えられます。

4. WordPressのテーマの自作方法

テーマはwp-content/themesの下におかれます。インストール直後はデフォルトのテーマが有効になって使用されます。

簡単なテーマの自作方法とデフォルトのテーマから作成したテーマに切り替える方法を見ていきます。

簡単なテーマの自作方法

以下は簡単なテーマの自作方法です。

構成

構成は以下です。テーマディレクトリにmy-themeディレクトリを作成して、index.phpとstyle.cssを置くだけの構成です。

＜WordPressルートディレクトリ＞/wp-content/themes/my-theme
index.php
style.css

index.php

簡単なテーマのデモが目的ですので、テキストだけ表示するものにします。ここではindex.phpに以下だけ記述することにします。

テーマの表示です。

style.css

style.cssの例です。

/*
Theme Name: 一番簡単なテーマ
Author: ZealSeeds
Author URI: https://www.zealseeds.com/
Description: 一番簡単なテーマです。
Version: 1.0
License: GUN General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

表示

作成したテーマを有効にすると以下のように表示されます。

テンプレート階層と選択のされ方

WordPressではテーマにある決められた形式のテンプレートファイルが選択されて読み込まれます。ここではテンプレート階層と選択のされ方について簡単に触れていきます。

トップページ

トップページは、home.phpがある場合はhome.phpが適用され、無い場合はindex.phpがテンプレートとして利用されます。

投稿ページ

投稿ページは、single-post.phpがある場合はsingle-post.phpが適用され、無い場合はsingle.php、single.phpもない場合はindex.phpがテンプレートとして利用されます。

固定ページ

固定ページは、page-{$id}.phpがある場合はpage-{$id}.phpが適用され、無い場合はpagee.php、page.phpもない場合はindex.phpがテンプレートとして利用されます。

投稿データの表示

投稿データの表示方法は以下のようにループを記述します。

<?php
while ( have_posts() ) :
	the_post();
	：
endwhile;
?>

リクエストパラメータの状態によって、WordPressで自動的にデータが設定されます。例えば、「?p=＜ID＞」のような1記事を指定するパラメータの場合はその記事のデータ、パラメータなしの場合は全部みたいな挙動になります。

1つの投稿ページの表示

single.phpに以下のように記述するとリクエストパラメータに指定された投稿の情報が表示されます。

<?php
while ( have_posts() ) :
	the_post();
	the_title(); // タイトル表示
	the_content(); // コンテンツ内容表示
endwhile;
?>

複数の投稿ページの表示

home.phpなどで以下のように記述すると複数のデータが表示されます。

<?php
while ( have_posts() ) :
	the_post();
	the_title(); // タイトル表示
	the_content(); // コンテンツ内容表示
endwhile;
?>

投稿データの取得と表示を分ける方法

上述の表示方法は取得と同時に表示を行います。取得だけ行いたい場合など不都合ですね。グローバル変数を使用しないで投稿データを表示を行うと取得と表示の処理が分けられるようになります。

<?php
$args = array('post_type'=>array('post'), 'post_status'=>array('publish'));
$the_query = new WP_Query();
$the_query->query($args);

if ($the_query->have_posts()) {
	while ($the_query->have_posts()) {
		echo '<h2>' . $post->post_title . '</h2>';
		echo '<p>' . $post->post_content . '</p>';
	}
}
?>

知識を深めるための参考

WordPressのカスタマイズ
WordPress（ワードプレス）をインストールしましたら、管理画面（ダッシュボード）の設定やテーマやプラグイン、PHP、CSSの実装、.htaccessの設定、セキュリティ対策の方法などさまざまなカスタマイズができます。 WordPressのカスタマイズをテーマにWordPressのカスタマイズ方法について解説していきます。
WordPress（ワードプレス）
WordPress（ワードプレス）の手動インストール手順やルートディレクトリと表示URLの設定や関連知識についてまとめています。