WordPress テーマ作成入門

WordPress テーマ作成入門

こんにちは!
今日も頑張ろう

Lesson-2
テーマ作成基本事項

目次

L2.1 はじめに

L2.1.1 WordPress テーマファイル

  • WordPress のテーマは、WordPress サイトの表示型式(デザイン)を決定するものでありテーマ作成者がテーマファイルを作成して提供しています。
  • テーマファイルは誰でも作成することができ、テーマファイルには各ページの表示型式を決定するためのテンプレートファイルが含まれます。
  • WordPress のテーマは、PHP 言語を使用して作成します。PHP の言語仕様や使用方法については、関連図書や関連サイトを参照してください。
  • 本ページに記載されていない WordPress の仕様は、関連図書や関連サイトを参照してください。
  • WordPress に関する公式オンラインマニュアルは、以下になります。不明点がある時は以下を参照してください。

参考サイト

L2.2 動作環境

L2.2.1 WordPress 動作の流れ

WordPress の動作環境について説明します。

WordPress 動作環境

(1) ファイル管理保存データ

テーマ
表示する画面のデザインを決定するテンプレートです。ダッシュボードの「外観→テーマ」メニューを使用してテーマの追加・削除を行うことができます。
プラグイン
WordPress に機能を追加する拡張コンポーネントです。ダッシュボードの「プラグイン」メニューを使用してプラグインの追加・削除を行うことができます。
メディア
WordPress で使用する画像や文書データです。ダッシュボードの「メディア」メニューを使用してメディアの追加・削除を行うことができます。

(2) データベース管理保存データ

管理情報
WordPress の管理情報です。ダッシュボードの各メニューを使用して設定・変更を行うことができます。
ページデータ
参照者に表示させるページデータです。投稿・固定ページなどのデータがあります。ダッシュボードの「投稿」、「固定ページ」メニューを使用して入力・変更・削除などを行うことができます。

(3) 処理コンポーネント

ダッシュボード
各種設定を行ったりコンテンツの管理を行います。操作員の権限により操作できる機能範囲が異なります。
ブロックエディタ
Gutenberg と呼ばれているエディタで WordPress 5.0 以降のバージョンで導入されました。投稿や固定ページの入力や編集を行います。プラグインでの導入を行うことで旧バージョンのエディタ(クラシックエディタ)を使用することもできます。
テーマ
表示する画面のデザインを決定するテンプレートです。テーマを切り替えることでコンテンツ(ページデータ)の変更を行うことなくデザインの変更を行うことができます。
プラグイン
WordPress に機能を追加する拡張コンポーネントです。プラグインを使用することで WordPress に機能を追加することができます。

L2.3 WordPress テーマファイル

L2.3.1 WordPress テーマファイルの構成

WordPress のテーマファイルは zip 型式の圧縮ファイルになっています。
WordPress にテーマファイルのアップロードを行う時は、zip 型式のままでアップロードします。

フォルダ/ファイル構成


📁 テーマ名.zip
└─📁 テーマ名
  ├─📁 css							// スタイルシートサブフォルダ
  ├─📁 images						// 画像サブフォルダ
  ├─ 制御ファイル群
  └─ テンプレートファイル群

フォルダ/ファイル構成(例)


📁 theme-sample.zip 					// テーマファイル(圧縮 zip ファイル)
└─📁 theme-sample 					// テーマフォルダ
  ├─📁 css							// スタイルシートサブフォルダ
  │ └─ style.css					// スタイルシートファイル
  ├─📁 images						// 画像サブフォルダ
  │ ├─favicon.ico 				// アイコンファイル
  │ ├─jirou.png					// 山田次郎の似顔絵ファイル
  │ └─yamada.png					// 山田太郎の似顔絵ファイル
  ├─ footer.php 					// ページ共通フッターテンプレート
  ├─ functions.php					// テーマ機能ファイル
  ├─ header.php 					// ページ共通ヘッダーファイル
  ├─ index.php						// 山田太郎 自己紹介(トップページテンプレート)
  ├─ page-jirou.php 				// 山田次郎 自己紹介(固定ページテンプレート)
  ├─ screenshot.png 				// サムネイル画像ファイル
  └─ style.css						// テーマ情報ファイル

(1) テーマファイルに格納される主要ファイル

テーマファイルに格納される主要なファイルは、以下の通りです。(必要に応じて格納するファイルが選択されます)
制御ファイルやテンプレートファイルを作成する場合は、必ず UTF-8(BOM なし)の型式で保存してください。
制御ファイルやテンプレートファイルを作成で使用する関数などは、「Appendix-2 主要関数・変数」で説明してありますので参照しながら進めてください。

(a) 制御ファイル
style.css
テーマ情報を記述
functions.php
テーマの機能やショートコードを記述
screenshot.png
テーマ選択画面で使用するサムネイル画像
(b) ページ共通のテンプレートファイル(各ページで共通に使用される部品)
header.php
ヘッダーテンプレート
footer.php
フッターテンプレート
sidebar.php
サイドバーテンプレート
searchform.php
検索フォームテンプレート
comments.php
コメントテンプレート

ページ個別テンプレートファイルにページ共通テンプレートファイルを読み込ませる方法に関しては「L2.3.5 共通テンプレートファイルの読み込み」を参照してください。

(c) ページ個別のテンプレートファイル(ページの種別によって命名ルール有り)
index.php
汎用(メイン)テンプレート
home.php
サイトフロントページ(プライマリィ)テンプレート
front-page.php
サイトフロントページ(セカンダリィ)テンプレート
single.php
記事(投稿)ページテンプレート
page.php
固定ページテンプレート
archive.php
カスタム投稿タイプ一覧(アーカイブ)テンプレート
author.php
投稿者一覧(アーカイブ)テンプレート
category.php
カテゴリー一覧(アーカイブ)テンプレート
tag.php
タグ一覧(アーカイブ)テンプレート
taxonomy.php
カスタム分類一覧(アーカイブ)テンプレート
date.php
日付一覧(アーカイブ)テンプレート
search.php
検索結果テンプレート
404.php
404 エラー(ページが存在しない)テンプレート

(2) テーマ情報ファイル(style.css)

テーマ情報を style.css にコメントとして記載します。


/*
Theme Name: テーマ名(必須)
Description: テーマの説明
Author: テーマ作成者の名前
Version: テーマのバージョン
*/
Theme Name
テーマ名を記述します。(必須)英数半角で途中に空白を空けない名称を指定してください。
Description
テーマの説明としてテーマの概要を説明する文章を記述します。
Author
テーマを作成した作者の名前を指定します。
Version
テーマの改版履歴を確認できる版数を指定します。

(3) テーマ機能ファイル(functions.php)

テーマが提供する機能を記載します。主要な機能は、以下の通りです。

  • 標準機能
  • CSS/JavaScript
  • メニュー
  • ウィジェット
  • 画像サイズ

テーマ機能ファイルの具体的な記述内容に関しては「L2.3.2 テーマの機能設定(functions.php)」を参照してください。

(4) サムネイル画像ファイル(screenshot.png)

テーマ選択画面で使用するサムネイル画像です。サムネイル画像の下部に WordPress がテーマの状態を示す情報をオーバレイしますので隙間を空けるなどの考慮をしてください。

ファイル名
screenshot.png
ファイル形式
PNG
サイズ
横 880px x 縦 660px

(5) ページ共通テンプレートファイル

表示するページで共通に使用されるテンプレートファイルで一般的に以下の種類があります。

header.php
ページ共通のヘッダーを生成するテンプレートです。
footer.php
ページ共通のフッターを生成するテンプレートです。
sidebar.php
ページ共通のサイドバーを生成するテンプレートです。

(6) ページ個別テンプレートファイル

各ページを表示するテンプレートでありページの種別によってファイル名が決定されます。各ページには、複数の選択肢があり優先度に従ってファイルが検索されます。具体的なファイル名については「L2.3.3 ページ個別テンプレートファイル名」を参照してください。

L2.3.2 テーマの機能設定(functions.php)

functions.php(テーマの機能設定)には、テーマの機能に関する様々なことが記述できます。ここでは、一般的に使用される記述例を元に説明します。

(1) 標準機能

WordPress は、多くの機能を持っていますが、それらの機能が使用できるかは、テーマの作成方法に依存する部分が多々あります。 テーマがサポートしていない機能をダッシュボードのメニューに表示させることは混乱の元になりますのでテーマが保有している機能のメニューが表示されるように調整されます。 このためテーマは、サポートしている機能を WordPress に知らせる必要があります。

テーマがサポートしている機能を WordPress に知らせるためには、add_theme_support 関数を使用して、以下の機能名を使用した記述を行ってください。

post-thumbnails
アイキャッチ画像(投稿サムネール)をサポートします。第 2 引数は、ありません。
automatic-feed-link
header での、投稿とコメントの RSS フィードのリンクを有効にします。第 2 引数は、ありません。
post-formats
投稿フォーマットをサポートします。第 2 引数でサポートする要素を指定します。
html5
HTML5 形式のタグを出力します。第 2 引数で出力するページ種別を指定します。
custom-header
カスタムヘッダーを指定します。第 2 引数でヘッダーの内容を指定します。
custom-background
カスタムバックグラウンド(背景)を指定します。第 2 引数でバックグラウンドの内容を指定します。
custom-logo
カスタムロゴを指定します。第 2 引数でロゴの内容を指定します。
title-tag
<title> タグの出力を有効にします。第 2 引数は、ありません。
customize-selective-refresh-widgets
テーマカスタマイザーでウィジェット設置時に自動で再読み込みを実行します。第 2 引数は、ありません。
starter-content
テーマ表示の初期状態を指定します。第 2 引数でウィジェット、投稿(固定ページ)、アタッチメントファイル、カスタムメニュー、そのほかのテーマオプションを指定します。

標準機能の設定を行う時は、以下の記述を参考にしてください。


function my_setup() {
	add_theme_support( 'post-thumbnails' );			// アイキャッチ画像
	add_theme_support( 'automatic-feed-links' );	// RSS フィード
	add_theme_support( 'post-formats', array(		// 投稿フォーマット
		'aside',
		'image',
		'video',
		'quote',
		'link',
	) );
	add_theme_support( 'html5', array(				// HTML5
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );
	add_theme_support( 'custom-header', array(		// カスタムヘッダー
		'default-image' => '',
		'random-default' => false,
		'width' => 0,
		'height' => 0,
		'flex-height' => false,
		'flex-width' => false,
		'default-text-color' => '',
		'header-text' => true,
		'uploads' => true,
		'wp-head-callback' => '',
		'admin-head-callback' => '',
		'admin-preview-callback' => '',
		'video' => false,
		'video-active-callback' => 'is_front_page',
	) );
	add_theme_support( 'custom-background', array(	// カスタムバックグラウンド
		'default-image' => '',
		'default-preset' => 'default',
		'default-position-x' => 'left',
		'default-position-y' => 'top',
		'default-size' => 'auto',
		'default-repeat' => 'repeat',
		'default-attachment' => 'scroll',
		'default-color' => '',
		'wp-head-callback' => '_custom_background_cb',
		'admin-head-callback' => '',
		'admin-preview-callback' => '',
	) );
	add_theme_support( 'custom-logo', array(		// カスタムロゴ
		'height'      => 100,
		'width'       => 400,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	) );
	add_theme_support( 'title-tag' );				// タイトルタグ
	add_theme_support( 'customize-selective-refresh-widgets' )
													// テーマカスタマイザーウィジェット再読み込み
	add_theme_support( 'starter-content', array(	// スターターコンテンツ
		'widgets' => array(
			'sidebar-1' => array(
				'text_business_info',
				'search',
				'text_about',
			),
			'sidebar-2' => array(
				'text_business_info',
			),
			'sidebar-3' => array(
				'text_about',
				'search',
			),
		),

		'posts' => array(
			'home',
			'about' => array(
				'thumbnail' => '{{image-sandwich}}',
			),
			'contact' => array(
				'thumbnail' => '{{image-espresso}}',
			),
			'blog' => array(
				'thumbnail' => '{{image-coffee}}',
			),
			'homepage-section' => array(
				'thumbnail' => '{{image-espresso}}',
			),
		),
		'attachments' => array(
			'image-espresso' => array(
				'post_title' => _x( 'Espresso', 'Theme starter content', 'twentyseventeen' ),
				'file' => 'assets/images/espresso.jpg',
			),
			'image-sandwich' => array(
				'post_title' => _x( 'Sandwich', 'Theme starter content', 'twentyseventeen' ),
				'file' => 'assets/images/sandwich.jpg',
			),
			'image-coffee' => array(
				'post_title' => _x( 'Coffee', 'Theme starter content', 'twentyseventeen' ),
				'file' => 'assets/images/coffee.jpg',
			),
		),
		'options' => array(
			'show_on_front' => 'page',
			'page_on_front' => '{{home}}',
			'page_for_posts' => '{{blog}}',
		),
		'theme_mods' => array(
			'panel_1' => '{{homepage-section}}',
			'panel_2' => '{{about}}',
			'panel_3' => '{{blog}}',
			'panel_4' => '{{contact}}',
		),
		'nav_menus' => array(
			'top' => array(
				'name' => __( 'Top Menu', 'twentyseventeen' ),
				'items' => array(
					'link_home',
					'page_about',
					'page_blog',
					'page_contact',
				),
			),
		),
	) );
}
add_action( 'after_setup_theme', 'my_setup' );

(2) CSS/JavaScript

WordPress では、CSS や JavaScript は、functions.php から一括で読み込みます。 これは、WordPress で稼働するコンポーネント(プラグインなど)が、CSS や JavaScript などを重複して読み込みを行うことを避けるためです。

例えば、WordPress では、標準で jQuery を使用しますので、他のコンポーネントが jQuery の読み込みを行う二重読み込みでエラーが発生することになります。

CSS/JavaScript の設定を行う時は、以下の記述を参考にしてください。


function my_script_init() {
	wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all' );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );

(3) メニュー

メニュー定義(ダッシュボード→外観 → メニュー)を有効にします。 メニューは、複数登録することができ表示する場所によって使い分けることができます。

メニューの設定を行う時は、以下の記述を参考にしてください。 プログラム内で使用する名称(例:header)とダッシュボードのメニュー設定で使用する名称(例:ヘッダーメニュー)の組み合わせで指定します。


function my_menu_init() {
	register_nav_menus( array(
		'header'  => 'ヘッダーメニュー',
		'sidebar' => 'サイドバーメニュー',
		'footer'  => 'フッターメニュー',
	) );
}
add_action( 'init', 'my_menu_init' );

メニュー定義では、メニューの位置で表示位置を選択することができ、登録したメニューを表示する場合は、以下の通り wp_nav_menu 関数を使って theme_location で名称(例:header)を選択します。


wp_nav_menu( array(
	'theme_location' => 'header',
) );

(4) ウィジェット

ウィジェット設定(ダッシュボード→外観→ウィジェット)を有効にします。ウィジェットは、複数登録(register_sidebar 関数を複数回呼出し)することができます。

ウィジェットの設定を行う時は、以下の記述を参考にしてください。ウィジェットを複数登録する場合は、id の値がユニークになるように指定してください。


function my_widget_init() {
	register_sidebar( array(
		'name'          => 'サイドバー',
		'id'            => 'sidebar',
		'before_widget' => '
', 'after_widget' => '
', 'before_title' => '
', 'after_title' => '
', ) ); } add_action( 'widgets_init', 'my_widget_init' );

登録したウィジェットを表示する場合は、以下の通り dynamic_sidebar 関数に id の値を指定して表示します。


if ( is_active_sidebar( 'sidebar' ) ) {
	dynamic_sidebar( 'sidebar' );
}

(5) 画像サイズ

画像サイズを指定します。 画像のサイズは、メディア設定(ダッシュボード→設定→メディア)でも指定できますが、テーマが独自に使用する画像サイズは、ここで指定しておくことで使用者が意図しない値に変更してしまうことを防げます。

画像サイズの設定を行う時は、以下の記述を参考にしてください。 ここでの my_thumbnail は、プログラム内で使用する名称です。 この記述をしておくことで幅 420px、高さ 300px でトリミングした画像を作成します。


add_image_size( 'my_thumbnail', 420, 300, true );

登録したアイキャッチ画像を表示する場合は、以下の通り the_post_thumbnail 関数に指定した名称(例:my_thumbnail)を指定して表示します。


the_post_thumbnail( 'my_thumbnail' );

L2.3.3 ページ個別テンプレートファイル名

ページ個別テンプレートファイルは、各ページを表示する時に使用されるテンプレートです。 表示するページの種別によってテンプレートのファイル名の決定ルールが異なり以下の順序でファイルが検索されます。

WordPress テンプレート名ルール

(1) サイトフロントページ(固定ページを表示)

サイトのトップページに固定ページ表示を設定している場合のテンプレートファイル検索順序は、以下の通りです。

  1. front-page.php
  2. (固定ページ表示ルールを適用)

(2) サイトフロントページ(投稿一覧を表示)

サイトのトップページに投稿一覧ページ表示を設定している場合のテンプレートファイル検索順序は、以下の通りです。

  1. front-page.php
  2. home.php
  3. index.php

(3) 記事(投稿)ページ

記事(投稿)ページのテンプレートファイル検索順序は、以下の通りです。

  1. single-投稿タイプ.php
  2. single.php
  3. singular.php
  4. index.php

(4) 固定ページ

固定ページのテンプレートファイル検索順序は、以下の通りです。

  1. カスタムテンプレートファイル名.php(*1)
  2. page-スラッグ名.php
  3. page-固定ページID.php
  4. page.php
  5. singular.php
  6. index.php

*1 個別のカスタムテンプレートファイルの使用は「L2.3.4 ファイル名に依存しないテンプレートファイル」を参照してください。

(5) カスタム投稿タイプ一覧(アーカイブ)スページ

カスタム投稿タイプ一覧(アーカイブ)ページのテンプレートファイル検索順序は、以下の通りです。

  1. archive-投稿タイプ.php
  2. archive.php
  3. index.php

(6) 投稿者一覧(アーカイブ)ページ

投稿者一覧(アーカイブ)ページのテンプレートファイル検索順序は、以下の通りです。

  1. author-作成者名.php
  2. author-作成者ID.php
  3. author.php
  4. archive.php
  5. index.php

(7) カテゴリー一覧(アーカイブ)ページ

カテゴリー一覧(アーカイブ)のテンプレートファイル検索順序は、以下の通りです。

  1. category-スラッグ名.php
  2. category-カテゴリID.php
  3. category.php
  4. archive.php
  5. index.php

(8) タグ一覧(アーカイブ)ページ

タグ一覧(アーカイブ)ページのテンプレートファイル検索順序は、以下の通りです。

  1. tag-スラッグ名.php
  2. tag-タグID.php
  3. tag.php
  4. archive.php
  5. index.php

(9) カスタム分類一覧(アーカイブ)ページ

カスタム分類一覧(アーカイブ)ページのテンプレートファイル検索順序は、以下の通りです。

  1. taxonomy-分類名-項目名.php
  2. taxonomy-分類名.php
  3. taxonomy.php
  4. archive.php
  5. index.php

(10) 日付一覧(アーカイブ)スページ

日付一覧(アーカイブ)ページのテンプレートファイル検索順序は、以下の通りです。

  1. date.php
  2. archive.php
  3. index.php

(11) 検索結果ページ

検索結果ページのテンプレートファイル検索順序は、以下の通りです。

  1. search.php
  2. index.php

(12) 404 エラー(ページが存在しない)ページ

404 エラー(ページが存在しない)のテンプレートファイル検索順序は、以下の通りです。

  1. 404.php
  2. index.php

L2.3.4 ファイル名に依存しないテンプレートファイル

一般的には、表示するページの種類によってテンプレートファイル名が決まっています。 しかし、ファイル名に依存しないテンプレートを作成することも可能です。 以下にファイル名に依存しないテンプレートの作成方法を示します。

(1) 「Template Name」で指定

任意のファイル名の固定ページテンプレートの先頭に「Template Name」を使用してテンプレート名を指定することで固定ページの作成時にテンプレート選択を行うことが可能になります。

例えば、test.php というファイル名のテンプレートを作成して、ファイルの先頭に「Template Name」の記述例を行います。


<?php
/*
 * Template Name: test
 */
?>

固定ページの作成時に固定ページプロパティで使用するテンプレート名を指定します。

テンプレート指定
  1. 固定ページプロパティを開く
  2. 「テンプレート」をクリック
  3. 使用するテンプレート名(例:test)を選択

(2) 「functions.php(フィルターフック)」で指定

functions.php に add_filter 関数(フィルターフック)を記述することで適用するテンプレート名を指定することができます。
add_filter 関数で指定するフック名(引数 2)は、下記の通りで「標準テンプレート名-template」となります。

  • index_template
  • 404_template
  • archive_template
  • author_template
  • category_template
  • tag_template
  • taxonomy_template
  • date_template
  • home_template
  • front_page_template
  • page_template
  • paged_template
  • search_template
  • single_template
  • text_template, plain_template, text_plain_template (すべての MIME タイプ)
  • attachment_template
  • comments_popup

例:カスタム投稿タイプが item でカスタムタクソノミーが area のときのアーカイブページは、archive-item.php を使用


function custom_template($template){
	global $wp_query;
	if($wp_query->query_vars['post_type'] == 'item' && $wp_query->query_vars['taxonomy'] == 'area') {
		$template = dirname( __FILE__ ) . '/archive-item.php';
	}
	return $template;
}
add_filter( 'archive_template', 'custom_template' );

例:検索結果ページのテンプレートにアーカイブページのテンプレートを使用


function my_search_template($template) {
	if(is_search()) {
		$template = dirname( __FILE__ ) . '/archive.php';
	}
	return $template;
}
add_filter( 'search_template', 'my_search_template' );

L2.3.5 共通テンプレートファイルの読み込み

ページ個別テンプレートでは、ページ固有の情報を記述すると同時に共通テンプレートの読み込みを行うことで効率良くページテンプレートを作成できると同時にテンプレートのメンテナンス性を向上させることができます。

共通テンプレートの読み込み方法は、共通テンプレートの種類によって異なり、それぞれの共通テンプレートの読み込み用の関数が用意されています。

WordPress 共通テンプレートの読み込み

(1) ヘッダーテンプレート(get_header 関数)

$return = get_header( $name, $args )

ヘッダーテンプレートの読み込みを行います。 $name(接尾語)が指定されている場合の読み込みファイル名は、header-接尾語.php になります。 $name が指定されていない場合や対象のファイルが存在しない場合は、header.php が読み込まれます。 $args(変数配列)を使用してヘッダーテンプレートに引数を渡すことができます。 返却値($return)は、テンプレートが存在しない場合は false になり、成功した場合は void になります。

(a) ヘッダーテンプレート(header.php)読み込み例

get_header();							// header.php を読み込み
(b) ヘッダーテンプレート(接尾語付き)(header-接尾語.php)読み込み例

get_header('index');					// header-index.php を読み込み
(c) ヘッダーテンプレート(変数配列指定)(header.php)読み込み例

$args = [
	'name' => 'site-name',
];
get_header('', $args);					// args(変数配列)を指定して header.php を読み込み

/* header.php 内での $args(変数配列)の使用例 */
echo $args['name'];

(2) 任意のテンプレート(get_template_part 関数)

$return = get_template_part( $slug, $name, $args )

任意のテンプレートを読み込みます。 $slug(テンプレートのスラッグ名)でテンプレート名を指定します。 例えば、$slug に parts を指定すると parts.php というファイル名のテンプレートが読み込まれます。 また、parts.php というテンプレートが、template-parts というフォルダの配下にある場合には、$slug に template-parts/parts と指定します。

$name(接尾語)を指定してページに特化したテンプレートを作成することもできます。 例えば、$slug に parts を指定して $name に single を指定すると parts-single.php という名前のテンプレートが読み込まれます。 $args(変数配列)を使用してテンプレートに引数を渡すことも可能です。 返却値($return)は、テンプレートが存在しない場合は false になり、成功した場合は void になります。

(a) 任意のテンプレート(任意の名称.php)読み込み例

get_template_part('parts');				// parts.php を読み込み
(b) 任意のテンプレート(接尾語付き)(任意の名称-接尾語.php)読み込み例

get_template_part('parts', 'single');	// parts-single.php を読み込み
(c) 任意のテンプレート(フォルダ名・接尾語付き)(フォルダ名/任意の名称-接尾語.php)読み込み例

get_template_part('template-parts/parts', 'single');
										// template-parts/parts-single.php を読み込み

(3) サイドバーテンプレート(get_sidebar 関数)

$return = get_sidebar( $name, $args )

サイドバーテンプレートの読み込みを行います。 $name(接尾語)が指定されている場合の読み込みファイル名は、sideebar-接尾語.php になります。 $name が指定されていない場合や対象のファイルが存在しない場合は、sidebar.php が読み込まれます。 $args(変数配列)を使用してサイドバーテンプレートに引数を渡すことも可能です。 返却値($return)は、テンプレートが存在しない場合は false になり、成功した場合は void になります。

(a) サイドバーテンプレート(sidebar.php)読み込み例

get_sidebar();							// sidebar.php を読み込み
(b) サイドバーテンプレート(接尾語付き)(sidebar-接尾語.php)読み込み例

get_sidebar('index');					// sidebar-index.php を読み込み
(c) サイドバーテンプレート(変数配列指定)(sidebar.php)読み込み例

$args = [
	'name' => 'site-name',
];
get_sidebar('', $args);					// $args(変数配列)を指定して sidebar.php を読み込み

/* sidebar.php 内での $args(変数配列)の使用例 */
echo $args['name'];

(4) 検索フォームテンプレート(get_search_form 関数)

$text = get_search_form( $args )

検索フォームテンプレートである searchform.php の読み込みを行います。 searchform.php が存在しない場合は、WordPress が用意しているデフォルトの検索フォームが表示されます。 $args(パラメータ配列)では、以下の指示を行うことができます。 初期値は、array() です。

echo
検索フォームを表示するか返却するかを指定します。true(初期値)を指定すると表示され、false を指定すると返却されます。
aria_label
検索フォームの aria_label を指定します。同じページ上の複数の検索フォームを区別し、アクセシビリティを向上させるのに役立ちます。

返却値は、echo が true(初期値)では、void であり、false では、HTML コードが返却されます。

(a) 検索フォームテンプレート(searchform.php)読み込み例

get_search_form();						// searchform.php を読み込み
(b) 検索フォームテンプレート(HTML を返却)(searchform.php)読み込み例

$args = [
	'echo' => false,
];
$text = get_search_form($args);			// searchform.php を読み込み HTML を返却

(5) コメントテンプレート(comments_template 関数)

comments_template( $file, $separate_comments )

コメントテンプレートの読み込みを行います。 $file でコメントテンプレートファイルを指定します。 初期値は、/comments.php です。$separate_comments は、コメントをコメントとトラックバック分けるかどうかを指定します。 true を指定するとコメントとトラックバック分けることを指定し、false を指定するとコメントとトラックバックを分けないことを指定します。 初期値は、false です。 投稿にコメントがない場合は、コメントテンプレートは、表示されません。 返却値はありません。

(a) コメントテンプレート(comments.php)読み込み例

comments_template();					// /comments.php を読み込み
(b) コメントテンプレート(コメントとトラックバックを分離)(comments.php)読み込み例

comments_template('', false);			/* /comments.php を読み込みコメントとトラックバックを分離 */

(6) フッターテンプレート(get_footer 関数)

$return = get_footer( $name, $args )

フッターテンプレートの読み込みを行います。 $name(接尾語)が指定されている場合の読み込みファイル名は、footer-接尾語.php になります。 $name が指定されていない場合や対象のファイルが存在しない場合は、footer.php が読み込まれます。 $args(変数配列)を使用してフッターテンプレートに引数を渡すことも可能です。 返却値($return)は、テンプレートが存在しない場合は false になり、成功した場合は void になります。

(a) フッターテンプレート(footer.php)読み込み例

get_footer();							// footer.php を読み込み
(b) フッターテンプレート(接尾語付き)(footer-接尾語.php)読み込み例

get_footer('index');					// footer-index.php を読み込み
(c) フッターテンプレート(変数配列指定)(footer.php)読み込み例

$args = [
	'name' => 'site-name',
];
get_footer('', $args);					// $args(変数配列)を指定して footer.php を読み込み

/* footer.php 内での $args(変数配列)の使用例 */
echo $args['name'];

L2.3.6 ページコンテンツの表示方法

テンプレートファイル内で記事の表示する場合の表示方法について説明します。

(1) 標準的なコンテンツの表示方法

WordPress では、表示するページ種別により該当するページ個別テンプレートが呼び出され HTML の生成を行うことになります。ページ個別のテンプレートでは、表示する記事などのコンテンツを取得して HTML に埋め込む処理を行う必要があります。

コンテンツを所得する処理には、一般的な記述方法があります。一般的なコンテンツ取得処理は、以下のように記述します。この記述形式では、投稿一覧の表示などの場合は、コンテンツの処理が複数回実行されることになり、単独のページの表示などの場合は、コンテンツ表示処理が 1 回だけ実行されることになります。


if ( have_posts() ) {					// 処理するコンテンツがあるかのチェック
	while ( have_posts() ) {			// 処理するコンテンツが無くなるまでループ
		the_post();						// 処理するコンテンツ情報の設定
		/* コンテンツの処理 */
	}
}
else {
		/* 処理するコンテンツが無い時の処理 */
}

一般的にコンテンツの処理で使用する主要な関数は、以下の通りです。これらの関数を使用してコンテンツの取得・表示・チェックなどを行います。

get_the_author
投稿の投稿者名を取得
get_the_category
投稿のカテゴリィ(リンク付き)を取得
get_the_date
投稿の日付を取得
get_the_excerpt
投稿の抜粋を取得
get_the_ID
投稿の投稿 ID を取得
get_the_modified_date
投稿の更新日を取得
get_the_permalink
投稿のパーマリンクを取得
get_the_post_thumbnail_url
投稿のアイキャッチ画像 URL を取得
get_the_time
投稿の時刻を取得
get_the_title
投稿のタイトルを取得
has_post_thumbnail
投稿にアイキャッチ画像が登録されているかのチェック
is_404
404 ページが表示中かのチェック
is_archive
一覧(アーカイブ)ページが表示中かのチェック
is_author
著者一覧(アーカイブ)ページが表示中かのチェック
is_category
カテゴリー一覧(アーカイブ)ページが表示中かのチェック
is_date
日付に関連する一覧(アーカイブ)ページが表示中かのチェック
is_front_page
フロントページが表示中かのチェック
is_home
ホームページが表示中かのチェック
is_page
既存の単一ページが表示中かのチェック
is_paged
複数ページで 2 ページ目以降が表示中かのチェック
is_search
検索結果ページが表示中かのチェック
is_single
固定ページ以外の個別投稿ページが表示中かのチェック
is_singular
個別の投稿ページ(一覧以外)が表示中かのチェック
is_tag
タグ一覧(アーカイブ)ページが表示中かのチェック
the_category
投稿のカテゴリィ(リンク付き)を表示
the_content
投稿の本文を表示
the_date
投稿の日付を表示
the_excerpt
投稿の抜粋を表示
the_ID
投稿の投稿 ID を表示
the_modified_date
投稿の更新日を表示
the_permalink
投稿のパーマリンクを表示
the_post_thumbnail_url
投稿のアイキャッチ画像 URL を表示
the_time
投稿の時刻を表示
the_title
投稿のタイトルを表示

また、ページ間のリンクを作成する主要な関数は、以下の通りです。

get_the_posts_pagination
投稿の前と次のページ番号セットを取得
next_post_link
日付順でひとつ次の投稿のリンクを表示
previous_post_link
日付順でひとつ前の投稿のリンクを表示
the_posts_pagination
投稿の前と次のページ番号セットを表示
wp_link_pages
ページ分割された記事ページリンクを表示

(2) 検索したコンテンツの表示方法

テンプレートファイルで検索条件を付けて投稿を検索してコンテンツを表示する場合は、以下のように記述します。


$args = array(							// 検索条件を設定
  'post_type' => 'post',				// 投稿タイプ
  'posts_per_page' => 10,				// 表示する投稿数
);
$wp_query = new WP_Query($args);		// 条件で検索
$get_num = $wp_query->post_count;		// 検索結果からコンテンツの総数を取得(参考)
$all_num = $wp_query->found_posts;		// 検索結果から今表示するコンテンツ数を取得(参考)
if ( $wp_query->have_posts() ) {		// 処理するコンテンツがあるかのチェック
	while ( $wp_query->have_posts() ) {	// 処理するコンテンツが無くなるまでループ
		$wp_query->the_post();			// 処理するコンテンツ情報の設定
		/* コンテンツの処理 */
	}
}
else {
		/* 処理するコンテンツが無い時の処理 */
}
wp_reset_postdata();					// 投稿データのリセット

WP_Query で使用する検索条件には、色々な条件が設定可能です。下記の例を参考にしてください。


$args = array(
	// author(投稿者名)検索
	'author' => '1,2,3',				// 投稿者のユーザ ID を指定
	'author_name' => 'rishuntrading',	// user_nicenameを指定(ログイン名(user_login)ではありません)
	'author__in' => array( 2 , 6 ),		// 投稿者のユーザ ID を配列で指定(該当のユーザー ID が含む記事)
	'author__not_in' => array( 2 , 6 ),	// 投稿者のユーザ ID を配列で指定(該当のユーザー ID を含まない記事)

	// category(カテゴリ)検索
	'cat' => 3,							// カテゴリ ID を指定
	'category_name' => 'topics, news',	// カテゴリのスラッグで指定(複数の時は、カンマ(,)区切り)
	'category__and' => array( 2 , 5 ),	// カテゴリ ID を配列で指定(該当のカテゴリ ID が含む記事)
	'category__in' => array( 2 , 5 ),	// カテゴリ ID を配列で指定(該当のカテゴリ ID が含む記事で検索)
	'category__not_in' => 
		array( 2 , 6 ),					// カテゴリ ID を配列で指定(該当のカテゴリ ID を含まない記事で検索)

	// tag(タグ)検索
	'tag' => 'web_design',				// タグのスラッグを指定
	'tag_id' => 5,						// タグ ID を指定
	'tag__and' => array( 2 , 6 ),		// タグ ID を配列で指定(該当のタグ ID が含む記事で検索)
	'tag__in' => array( 2 , 6 ),		// タグ ID を配列で指定(該当のタグ ID が含む記事で検索)
	'tag__not_in' => array( 2 , 6 ),	// タグ ID を配列で指定(該当のタグ ID が含まない記事で検索)
	'tag_slug__and' => 
		array( 'web', 'import' ),		// タグスラッグを配列で指定(タグスラッグを含む記事を検索)
	'tag_slug__in' => 
		array( 'web', 'import' ),		// タグスラッグを配列で指定(タグスラッグを含む記事を検索)

	// taxonomy(タクソノミー)検索
	'tax_query' => array(				// タクソノミー条件は tax_query を指定
		'relation' => 'AND',			// タクソノミーの検索条件に AND か OR を指定
		array(
			'taxonomy' => 'prefecture',	// タクソノミーを指定
			'field' => 'slug',          // term_id(デフォルト)、name、slug で検索対象のタームのフィールド
			'terms' => array
				( 'saitama', 'tokyo' ),	// field に指定した検索対象フィールドの検索値を配列で指定
			'include_children' => true,	// 子孫タクソノミーを含めるかどうか
			'operator' => 'IN'			// 演算子 IN、NOT IN、AND、EXISTS
		),
		array(
			'taxonomy' => 'contry',
			'field' => 'id',
			'terms' => array( 122, 132, 141 ),
			'include_children' => false,
			'operator' => 'NOT IN'
		)
	),

	// 投稿・固定ページ検索
	'p' => 10,							// 投稿IDを指定
	'name' => 'wordpress_tech',			// 投稿スラッグを指定
	'page_id' => 10,					// 固定ページの ID を指定
	'pagename' => 'aboutus',			// ページスラッグを指定
	'pagename' => 
		'business/website_design',		// 子ページを表示する場合、スラッシュ区切りで親と子のスラッグを指定
	'post_parent' => 10,				// 指定したページ ID の子ページを検索
	'post_parent__in' => 
		array( 10, 11, 12 ),			// 親ページ ID を含む投稿を配列で指定
	'post_parent__not_in' => 
		array( 10, 11, 12 ),			// 親ページ ID を含まない投稿を配列で指定
	'post__in' => array( 10, 11, 12 ),	// 該当の投稿 ID の投稿配列で指定
	'post__not_in' => 
		array( 10, 11, 12 ),			// 該当の投稿 ID が含まない投稿を配列で指定
 
	// パスワード検索
	'has_password' => true,				// パスワード付きの投稿を検索(true or false)
	'post_password' => 'birthday1111',	// 該当のパスワードが付いた投稿を検索

	// post_type 検索
	'post_type' => array( 
		'post',							// 投稿
		'page',							// 固定ページ
		'revision',						// リビジョン
		'attachment',					// 添付ファイル
		'custom-post-type'				// カスタム投稿タイプ
	),
	'post_type' => 'any',				// 全ての post_typeを表示(revision と exclude_from_search が true にセットされたものを除く)

	// post_status(投稿の状態)検索
	'post_status' => array(				// 投稿の状態を指定(デフォルト publish)
		'publish',						// 公開状態
		'pending',						// レビュー待ち状態
		'draft',						// 下書き状態
		'auto-draft'					// コンテンツのない、新しく作成された投稿/ページを表示
		'future',						// 予約公開が設定された状態
		'private',						// ログインしたユーザーしか見れない状態
		'inherit',						// リビジョン
		'trash',						// ゴミ箱に入っている状態
	 ),
	'post_status' => 'any',				// すべての状態(post_status で exclude_from_search が true にセットされたものは除く)

	// page送り(pagination)指定
	'posts_per_page' => 10,				// 1 ページに表示できる最大投稿数(-1 は全て表示)
	'posts_per_archive_page' => 10,		// 1 ページに表示できる最大投稿数(アーカイブページのみ)
	'nopaging' => false,				// ページ送りの有効/無効(デフォルトは false でページ送りを使用)
	'paged' => 3,						// 例では、ページ番号 3 の記事一覧を表示
	'paged' => get_query_var('paged'),	// 現在のページから投稿を表示
	'offset' => 4,						// 設定した数だけ、ずらして表示(例では 5 番目の投稿から表示)
	'ignore_sticky_posts' => false,		// 先頭の固定表示投稿を無視するかどうか(デフォルトは false で先頭の固定表示投稿は無視しない)

	// ソート指定
	'order' => 'DESC',					// ソート順(ASC:昇順、DESC: 降順
	'orderby' => 'date',				// ソート項目(デフォルト:date)(複数オプションの指定が可能 例:'product_name title')
										// ソート項目のオプション ↓
										// none				:並び替えなし
										// ID				:投稿 ID でソート
										// author			:投稿者名でソート
										// title			:タイトルでソート
										// name				:post name(post slug)でソート
										// modified			:更新日でソート
										// parent			:親ページ ID でソート
										// rand				:ランダム順でソート
										// comment_count	:コメント数でソート
										// menu_order		:ページの表示順でソート
										// meta_value		:アルファベット順でソート
										// meta_value_num	:数値でソート
										// post__in			:post__in で配列で指定された投稿 ID の並び順を維持して表示

	// 日付や時間の期間で検索
	'year' => 2021,						// 年を指定(2021など)
	'monthnum' => 4,					// 月を指定(1~12)
	'w' =>  25,							// 年内の週を指定(0~53)
	'day' => 17,						// 月内の日を指定(1~31)
	'hour' => 13,						// 時間を指定(0~23)
	'minute' => 19,						// 分を指定(0~60)
	'second' => 30,						// 秒を指定(0~60)
	'm' => 201508,						// 年と月を指定(201508など)

	// 日付の範囲指定で検索
	'date_query' => array(
		array(
			'year' => 2021,				// 年を指定(2021など)
			'month' => 8,				// 月を指定(1~12)
			'week' => 31,				// 年内の週を指定(0~53)
			'day' => 5,					// 月内の日を指定(1~31)
			'hour' => 2,				// 時間を指定(0~23)
			'minute' => 3,				// 分を指定(0~60)
			'second' => 36,				// 秒を指定(0~60)
			'after' => 
				'February 1st, 2020',	// 指定した日付以降で投稿を取得('2020/02/01'も可(strtotimeと同じ))
			'before' => array(			// 指定した日付以前の投稿を取得('2020/02/01'も可(strtotimeと同じ))
				'year'  => 2013,		// 年を指定(2013など)( デフォルトは空)
				'month' => 2,			// 年内の月を指定(1~12)( デフォルトは12)
				'day' => 28,			// 月内の日を指定(1~31)(デフォルトは月内の末日)
			),
			'inclusive' => true,		// after or before で指定された値を含むかどうか
			'compare' => '=',			// =、!=、>、>=、<、<=、LIKE、NOT LIKE、IN、NOT IN、BETWEEN、NOT BETWEEN、EXISTS、NOT EXISTS
			'column' => 'post_date',	// 照会するカラムを指定(デフォルトは post_date)
			'relation' => 'AND',		// OR または AND(デフォルトは AND)
		),
	),

	// カスタムフィールドで検索
	'meta_key' => 'key',				// カスタムフィールドのキーを指定
	'meta_value' => 'value',			// カスタムフィールドの値を指定(文字列)
	'meta_value_num' => 10,				// カスタムフィールドの値を指定(数字)
	'meta_compare' => '=',				// meta_value をテストする演算子(!=、>、>=、<、=)(デフォルトは =)
	'meta_query' => array(				// カスタムフィールドのパラメーター
		'relation' => 'AND',			// AND または OR を指定(meta_query 内の配列が 2つ以上の場合)
		array(
			'key' => 'country',			// カスタムフィールドのキー。
			'value' => 'japan',			// カスタムフィールドの値(compare が IN、NOT IN、BETWEEN、NOT BETWEEN のみ配列をサポート)
			'type' => 'CHAR',			// カスタムフィールドの型(データ型は、meta_query で使えるデータ型)
			'compare' => '=',			// 演算子(デフォルトは =)(演算子の種類は、meta_query で指定できる演算子の種類)
		),
		array(
			'key' => 'stock',
			'value' => array( 1,20 ),
			'compare' => 'NOT LIKE',
		)
	),

	// 権限を持っているユーザーの記事で検索
	'perm' => 'readable',				// 権限(readable、editable)
 
	// キャッシュ系のパラメーター
	'cache_results' => true,			// 投稿情報のキャッシュの使用有無(デフォルトは true)
	'update_post_term_cache' => true,	// 投稿タームのキャッシュ更新の使用有無(デフォルトは true)
	'update_post_meta_cache' => true,	// 投稿メタのキャッシュ更新の使用有無(デフォルトは true)
	'no_found_rows' => false,			// falseは、行数をカウント処理が挿入(デフォルトはfalse)
 
	// 検索系のパラメーター
	's' => $s,							// 検索からクエリーストリング値を渡す 
	'exact' => true,					// タイトル・投稿の全体から正確なキーワードで検索(デフォルトは false)
	'sentence' => true,					//語句(フレーズ検索)で検索(デフォルトは false)
 
	// 投稿フィールドパラメーター
	'fields' => 'ids'					// 1 つのフィールドで返すか全てのフィールドで返すか(デフォルトでは全てのフィールドが返す)
										// ids			:投稿の ID の配列を返却
										// id=>parent	:連想配列を返却
);

ロケット本体
PAGE
TOP
ロケット炎