CMS wordpress

WordPressのテーマについて

投稿日:2018年7月1日 更新日:

WordPressのテーマとは

WordPressでは、「テーマ」と呼ばれるファイル群を使ってWebサイトを表現しています。

テーマの中にhtmlやcss、JavaScriptなどのファイル群、そしてページを実際に表示するテンプレートファイルなどが一式まとまっています。

そういったファイルを適切に記述、配置することで自分だけのテーマを作成することができます。

 

WordPressのテーマ作成について

ファイル構成

 

ディレクトリ 内容
wp-admin/ 管理画面用ファイル
wp-content/ サイトのデータ
wp-includes/ コアファイル
wp-content/themes/ テーマ関係のファイル群
wp-contents/plugins/ プラグイン関係のファイル群
wp-contents/uploads/ アップロードされたファイル
index.php 通常アクセスのエントリポイント
wp-config.php 設定ファイル

 

テーマを作成する時はwp-content/themes/配下にディレクトリを作成します。

WordPressからインストールしたプラグインもここに格納されています。

テーマを作成するのに必要なファイルは以下の3つです。

style.css

style.cssはテーマのCSSを記述するとともに、作成したテーマをWordpressに認識してもらうという重要な役割があります。

以下をstyle.cssの冒頭に記述します。内容は適宜変更してください。

/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Description:テーマについての説明
Author: 作成者
Author URI: 作成者のURL
Version: テーマのバージョン
*/
あとは、htmlのタグに対して行いたい装飾を記述してあげればOKです。

index.php

index.phpはページを表示するためのテンプレートファイルです。

テンプレートファイルとは、Wordpressのルールに沿って作成されたPHPファイルの事です。

通常Webサイトはページによってデザインが異なる場合が多いと思います。

例えばトップページと投稿ページではデザインが異なるように、投稿ページはsingle.php、トップページはpage.php、といったようにページごとにPHPファイルを分けることができます。

そして各ページの読み込むファイル名とその優先度はWordpressのルールによって決められています。

主なテンプレートファイルは以下です。

テンプレートファイル 概要
front-page.php Webサイトのトップページを表示
single.php 投稿の記事ページを表示
page.php 固定ページを表示
category.php カテゴリページを表示
search.php 検索結果ページを表示
archive.php 記事一覧を表示
404.php 404エラー(ページが存在しない)を表示

また、テンプレートファイルにはテンプレート階層という優先順位が存在します。

テンプレート階層に詳しく記述されています。

このテンプレート階層の全てのページにindex.phpが含まれています。

したがって、index.phpがあれば、とりあえずは、それぞれのページを読み込むことができるということになります。

逆に、すべてのページのデザインが統一でいいというパターンは少ないと思うので、それぞれのページにそれぞれのデザインを当てたい場合は、

当てはまるテンプレートを作成する必要があるということになります。

functions.php

WordPressの挙動を変更したり、機能追加する際のコードをこのfunctions.phpに記述します。

それ以外のファイルの配置は自由

上記のルール以外は基本的に自由のようです。

新しくCSSファイルやJavaScriptを読み込んで使用することも、ほかのPHPファイルをfunctions.phpで読み込むことも可能なようです。

 

テーマのカスタマイズについて

 

上記の内容がテーマ作成における基礎知識です。

これに加えてページの共通部分であるヘッダーやサイドバーなどをPHPファイルとして分割し、それぞれをテンプレートファイルで読み込むことで管理しやすくします。

以上の作業でも結構大変です。

なので僕はとりあえずカスタマイズという形で既存のテーマを自分用にカスタマイズしようと思います。

WordPress自体はGPLという商用利用するにはちょっと面倒なライセンスですが、再頒布等しなければ自由に改変可能です(多分)。

そのカスタマイズのことに関してこのブログに記述していこうと思います。

 

 

 

-CMS, wordpress

関連記事

試験問題・クイズ出題WordPressプラグイン「Quiz And Survey Master」の使い方!

このサイトでFEの試験問題出題機能を作成しようと思い、 せっかくだからプラグインをフルスクラッチで作成してやろうと動き出したんですが、 何から手を付けていいか分からない … 実装したい機能を羅列すると …

【WordPress】プラグイン作成② ~管理画面にメニューを追加~

フックを使って管理画面にプラグインメニューを追加 前回、プラグインの入れ物を作成し、プラグインメニューに追加しました。 現在処理はなにも記述されていませんので、実施に機能を搭載していきたいと思います。 …

【WordPress】プラグイン作成③ ~管理画面の画面作成~

それではプラグインを作成していきます。 プラグインに最低限必要なのはプラグインファイルです。このあたりの作成方法は以下で解説しています。 参考記事 WordPress】プラグインの作成① プラグインフ …

【WordPress】プラグインの作成① ~作成の下準備~

いざ、プラグイン作成!! とりあえず材料は揃ったってことで、プラグインを作成したいと思います。 参考材料はプラグインの調査「試験問題・クイズ出題WordPressプラグイン「Quiz And Surv …

【WordPress】第一回STINGER8のカスタマイズ

今僕のブログで使用しているテーマを編集した記録を公開します。 正直まだ全然できてないので中途半端な記事になると思いますが、進展させるごとに追記をしていこうと思うので、暖かい目で見守っていただけたらあり …