WordPressの

オリジナルテーマを作る！

WordPressの仕組みを理解することによってオリジナルテーマ作成をもっと身近に

テーマを作成する上での最小構成

WordPressのテーマを作るうえでの最小構成は、テーマディレクトリを作成してstyle.css、index.php

下記に任意の名前のディレクトリとファイルを設置

​

wp-content/themes/任意のディレクトリ名

wp-content/themes/任意のディレクトリ名/index.php

wp-content/themes/任意のディレクトリ名/style.css

​

※当然ですが、任意のディレクトリ名は半角英数字

​

この二つをまずは設置。

style.cssに必要なテーマの情報を記入してアップすれば

管理画面の外観メニューに反映される。

​

テーマを作成する上での最小構成

style.cssに記述する情報

/*

Theme Name: SampleTheme

Author: SampleUser

Author URI: http://●●●.com

Description: サンプルのテーマ

*/

Theme Name：　テーマの名称（必須です）

Author：　テーマの作成者（任意）

Author URI：　ブログのURL（任意）

Description：　テーマの説明（任意）

​

上記の記述情報が、管理画面の「外観」メニューに反映される。

これで管理画面からテーマの選択が可能になります。

テーマ内のindex.phpの扱い

テーマ内のテンプレートは使用される状況に応じて優先順位が決まっている。

index.phpは一番優先順位が低く、必要に応じたテンプレートが無い場合最終的にはindex.phpが表示される

​

つまり、意図せずindex.phpが表示されるときは「テンプレートが不足している時」となる。

しかしながら表面上使用されているテンプレートが分からない。なのでindex.phpに

自分で分かるようにあたりさわりのない表示にしておく方法もある。

（使用しているテンプレートを表示するプラグインもあります。）

​

例えば、「<?php echo ‘index’;」と入れておけば、

ページが表示されているときに「index」とだけ表示さたら、

テンプレートが不足している事がすぐに分かる。

テーマ内のindex.phpの扱い

トップページ用のテンプレートは

​

index.php

優先順位一番低い

​

home.php

管理画面の表示設定の「フロントページ」で選択されている固定ページが優先的に表示される

​

front-page.php

管理者画面の表示設定の「フロントページ」で何を選択していても影響を受けない

​

全て存在するときの優先順位は下記

index.php < home.php < front-page.php

​

※納品後の運用ポリシーなどによって使い分ける。

今一度テンプレートの優先順位について

たとえば、固定ページを表示させるときに、一般的にはpage.phpというテンプレートを使いますが、管理画面でスラッグが登録してあったら、「page-slug.php」というテンプレートを優先して表示させます。

​

つまり、WordPressはスラッグ登録してある固定ページを表示させる際、まず、「page-slug.php」を探しにいき、それが見つからなかったら「page.php」を探しにいき、それが見つからなかったら「index.php」を探しに行って表示させるという事を内部的にしているのです。

​

・固定ページ表示時のテンプレート優先順位

page-slug.php　>　page.php　>　index.php

​

もしindex.phpが表示されていたら、それはその状況に必要なテンプレートが不足しているという事です。

テーマでよく使うテンプレート、他ファイル

front-page.php //トップページ

page.php //固定ページのベーステンプレート

archive.php //投稿記事アーカイブ一覧ページ用

category.php //投稿記事カテゴリー一覧ページ用

search.php //検索結果を表示するテンプレート

single.php //投稿記事の詳細用ベーステンプレート

404.php //404エラー時に使用

index.php //基本テンプレート

​

header.php //ヘッダー用

sidebar.php //サイドバー用

footer.php //フッター用

style.css //テーマの基本情報とスタイル記述に使う（スタイルは別でも可）

screenshot.jpg //管理画面「外観」のテーマ一覧でテーマのサムネイルに使用

functions.php //独自に機能追加したり、設定を追加するためのファイル

ページ用テンプレート

パーツ用テンプレート

breadcrumb.php //パンクズ用

​

任意パーツ用テンプレート

その他ファイル

上記以外にも多数テンプレートがあるので、サイトの構造に応じて追加や削除をして必要最小限のテンプレートを使用する。※不要なテンプレートがあるとメンテナンス時に支障をきたす。

テーマでよく使うテンプレート、他ファイル

各テンプレートに情報を落とし込んでいく

<?php get_header(); ?>

<?php get_footer(); ?>

header.php

footer.php

<?php get_sidebar(); ?>

ヘッダー用

フッター用

ページ用のテンプレート

sidebar.php

サイドバー用

共通で使うソースはパーツごとにテンプレートに記述して必要に応じて読み込む。

パーツ用のテンプレート（共通部分）

ページ用のテンプレートにパーツのテンプレートをテンプレートタグ（get_header()など）で読み込む。（テンプレートタグ＝WordPress独自の関数）

コンテンツ

コンテンツ

各テンプレートに情報を落とし込んでいく

<?php get_template_part('〇〇〇'); ?>

〇〇〇.php

任意のパーツ

ページ用のテンプレート

パーツの専用テンプレートがWordPressに無い場合は、任意でテンプレートを作成して読み込む。

WordPressには様々なテンプレートがあらかじめ用意されていますが、制作者が必要と思ったテンプレートが必ずしもあるわけではありません。もし、必要なテンプレートがWordPressに用意されてなかったら自身で任意の名前を付けて作成して使用することもできます。

​

パーツ用のテンプレート

多用するWordPress内の分岐

上記はテンプレートがトップページなのかそうでないのかの分岐を表しています。

左右で記述方法は異なりますが、どちらも意味合いは同じです。

左はシンプルですっきりしてますが、分岐内に大量のHTMLを記述するとなると中身に大量のechoを記述する必要があるので、その場合は左の記述の方が適しています。どちらかに統一したいところですが、どちらも利点があるので状況に応じて使い分けています。※メンテナンス性など考慮

<?php

if ( is_front_page() ) {

//トップページ用の記述

} else {

//トップページ以外の記述

｝

?>

<?php if(is_front_page()): //Top ?>

//トップページ用の記述

<?php else: //その他 ?>

//トップページ以外の記述

<?php endif; //end// ?>

もしくは

多用するWordPress内の分岐

その他、ページ判別するテンプレートタグを使って細かく情報を出し分けることが出来る

if(is_404()) { //404

echo '<li>ページが見つかりません</li>';

} elseif((is_page('news'))) {

echo '<li>お知らせ</li>';

} elseif((is_single())) {

echo '<li><a href="'.home_url('/').'news/">お知らせ</a></li><li>',the_title(),'</li>';

} else {

echo '<li>', get_the_title(), '</li>';

}

​

固定ページで管理画面からの情報を取得

管理画面＞固定ページからページを作成してエディタに入力した情報を固定ページ用のテンプレート（page.php）で取得する方法

page.phpには管理画面の入力情報がデフォルトで読み込まれ。

を各テンプレートによってデフォルトで読み込まれる情報が決まっておりそれを「メインループ」という。

※category.phpにはデフォルトでカテゴリ一覧の情報が読み込まれる。

​

メインループとは別に任意の情報を読み込んで表示させることを「サブループ」という

例）WP_Query()

​

サブループ、WP_Query()の例

WP_Query（$argsなど）で指定するパラメーターは多数ある。

少し複雑な読み込みになるとパラメーターを複数絡める必要が出てくる。

https://sole-color-blog.com/blog/265/

推奨、非推奨

WordPressで使用できる関数をテンプレートタグと呼ぶ

テンプレートタグには現在では使用を推奨できない、非推奨タグが存在する。

非推奨タグは開発サポートされないので、今は使えてもバージョンアップなどで将来的に使えなくなるなど不具合を起こす可能性がある

​

例）query_posts

​

WordPressの情報はネット上には膨大にあるが、情報が古いかもしれない。

記事作成者が誤った解釈をしているかもしれないという事も考慮する。

​

使用頻度の多いテンプレートタグ

<?php echo get_template_directory_uri(); ?> //テーマのルートパス

<?php echo home_url('/'); ?>"> //サイトのルートパス

<?php bloginfo('name'); ?> //ブログ名（サイト名）

<?php echo get_the_title(); ?> //記事タイトル

<?php the_title(); ?> //記事タイトル

<?php the_time('Y.m.d'); ?> //記事日付

​

※the_title()は呼び出された時点でechoまで行っているので注意。

※<?php echo the_title(); ?>などといった記述をすると不具合をおこします。

​

レスポンシブWebデザインで使える分岐

​

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>

スマートフォン用コンテンツを配置。

<?php else: ?>

パソコン用コンテンツを配置。

<?php endif; ?>

​

functions.phpで行う設定

■rssフィードの削除

■generatorを非表示にする

■EditURIを非表示にする

■wlwmanifestを非表示にする

■管理画面メニュー表示設定

■固定ページのビジュアル切り替えを非表示

■絵文字機能削除

■カスタム投稿タイプ・カスタム分類

■画像サイズの追加

etc...

管理画面のメニューの制御やカスタム投稿タイプの設定、その他独自の機能をfunctions.phpに記述する。

案件の仕様によって行う設定は変わる。不必要な機能は行わないように設定しコードの表示をスマートに。バージョンの非表示などは、セキュリティの観点から非表示にするなど。

カスタムフィールドを使う

通常テキスト

​

例）<?php echo $post->カスタムフィールド名; ?>

​

↓

​

さらに詳しく

<?php

if( $post->カスタムフィールド名 ) {

echo '<p>' . esc_html($post->カスタムフィールド名) . '</p>';

}

?>

​

もし値が無くてもエラーにならないように分岐をいれておく。

必要に応じてesc_htmlなどエスケープを使う。

パーマリンク設定

管理画面のパーマリンク設定はデフォルトでは「基本」となっている。固定ページなどページ各ページのURLは

​

http://example.jp/?p=123

​

と表示される。

​

URLにディレクトリ名を使用したように見せるためにはパーマリンク設定で「カスタム構造」を選択して入力欄に設定を入力

​

例）http://example.jp「/%category%/%post_id%/」

スラッグ名でディレクトリ構造のようなURLを作り、投稿記事のURLも記事IDを使う設定

​

※設定によっては投稿のカテゴリー名、スラッグをしっかり設定する

便利なプラグイン

オリジナルでテーマを作成するときに便利なプラグインの紹介

■Show Current Template

​

インストールして有効にするだけで、ログイン中は公開画面側の管理バーで使用しているテンプレートを表示してくれるので、作業するときにどのテンプレートを触ればいいのかすぐにわかる。

​

■Advanced Custom Fields

​

カスタムフィールドの設定が劇的に簡単になるカスタムフィールド設定の決定版プラグイン

​

■Custom Post Type Permalinks

​

カスタム投稿タイプを作成したときにカスタム投稿別にパーマリンクの設定が出来る。

ページごとのテンプレート設定（例）