トップ ライブラリ/Framework/CMS WordPress カスタマイズ テーマ

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

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

目次

この記事の目次です。

1. WordPressのテーマとは

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

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

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

もっと知識を広げるための参考

更新履歴

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>';
	}
}
?>

知識を深めるための参考

更新履歴

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Eclipse /gcc /gdb /Git /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /bootstrap /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

3.85.245.126

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク