HTML-CSS 入門講座

HTML-CSS 入門講座

Appendix-4
WordPress テーマ作成入門

目次

A4.1 はじめに

A4.1.1 概要

  • 本ページは、WordPress のオリジナルテーマの作成や子テーマの作成時の基本事項について記述しています。
  • WordPress のテーマは、PHP 言語を使用して作成します。PHP の言語仕様や使用方法については、関連図書や関連サイトを参照してください。
  • 本ページに記載されていない WordPress の仕様は、関連図書や関連サイトを参照してください。
  • WordPress のオリジナルテーマ作成時の公式オンラインマニュアルは、以下になります。不明点がある時は以下を参照してください。

参考サイト

(1) WordPress のテーマとは?

  • WordPress のテーマは、WordPress サイトの表示型式(デザイン)を決定するものでありテーマ作成者がテーマファイルを作成して提供しています。
  • テーマファイルは誰でも作成することができ、テーマファイルには各ページの表示型式を決定するためのテンプレートファイルが含まれます。

A4.1.2 WordPress テーマファイル

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

(1) ファイル配置

  • テーマ名.zip
    • テーマ名
      • images や css などのフォルダ群
      • 制御ファイル群
      • テンプレートファイル群

(2) ファイル配置(例)

  • theme-sample.zip
    • theme-sample
      • css
        • style.css
      • images
        • favicon.ico
        • jirou.png
        • yamada.png
      • footer.php
      • functions.php
      • header.php
      • index.php
      • page-jirou.php
      • style.css

A4.1.2.1 テーマファイルに格納される主要ファイル

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

  • 制御ファイル
    style.css
    テーマ情報を記述
    functions.php
    テーマの機能やショートコードを記述
    screenshot.png
    テーマ選択画面で使用するサムネイル画像
  • ページ共通のテンプレートファイル(各ページで共通に使用される部品)
    header.php
    ページ共通のヘッダーテンプレート
    footer.php
    ページ共通のフッターテンプレート
    sidebar.php
    ページ共通のサイドバーテンプレート
  • ページ個別のテンプレートファイル(ページの種別によって命名ルール有り)
    front-page.php
    トップページ用テンプレート
    page.php
    固定ページ用テンプレート
    single.php
    記事用テンプレート
    category.php
    カテゴリーの一覧(アーカイブ)表示用テンプレート
    author.php
    投稿者ごとの一覧(アーカイブ)表示用テンプレート
    index.php
    ブログ記事の一覧(アーカイブ)表示用テンプレート
    date.php
    年間、月間の記事一覧(アーカイブ表示用テンプレート
    tag.php
    タグの記事一覧(アーカイブ)表示用テンプレート
    404.php
    404(ページが存在しない)テンプレート
    search.php
    検索結果表示用テンプレート

A4.1.2.2 テーマ情報(style.css)

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


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

A4.1.2.3 テーマ機能(functions.php)

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

  • 標準機能(add_theme_support)
  • CSS / JavaScript(wp_enqueue_style / wp_enqueue_script)
  • メニュー(register_nav_menus)
  • ウィジェット(register_sidebar)
  • 画像サイズ(add_image_size)
参考サイト

A4.1.2.4 サムネイル画像(screenshot.png)

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

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

A4.1.2.5 ページ個別テンプレート

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

  • サイトフロントページ(トップページを表示)
    サイトのトップページに固定ページ表示を設定している場合のテンプレートファイル検索順序は、下記の通りです。
    1. front-page.php
    2. (固定ページ表示ルールを適用)
  • サイトフロントページ(投稿を表示)
    サイトのトップページに投稿一覧ページ表示を設定している場合のテンプレートファイル検索順序は、以下の通りです。
    1. front-page.php
    2. home.php
    3. index.php
  • 投稿ページ
    投稿ページのテンプレートファイル検索順序は、以下の通りです。
    1. single-投稿タイプ.php
    2. single.php
    3. singular.php
    4. index.php
  • 固定ページ
    固定ページのテンプレートファイル検索順序は、以下の通りです。
    1. カスタムテンプレートファイル名.php(ページ作成時の指定名称)
    2. page-スラッグ名.php
    3. page-固定ページID.php
    4. page.php
    5. singular.php
    6. index.php
  • カテゴリーアーカイブインデックスページ
    カテゴリーアーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. category-スラッグ名.php
    2. category-カテゴリID.php
    3. category.php
    4. archive.php
    5. index.php
  • タグアーカイブインデックスページ
    タグアーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. tag-スラッグ名.php
    2. tag-タグID.php
    3. tag.php
    4. archive.php
    5. index.php
  • カスタム分類アーカイブインデックスページ
    カスタム分類アーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. taxonomy-分類名-項目名.php
    2. taxonomy-分類名.php
    3. taxonomy.php
    4. archive.php
    5. index.php
  • カスタム投稿タイプ アーカイブインデックスページ
    カスタム投稿対応 アーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. archive-投稿タイプ.php
    2. archive.php
    3. index.php
  • 作成者別アーカイブインデックスページ
    作成者別アーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. author-作成者名.php
    2. author-作成者ID.php
    3. author.php
    4. archive.php
    5. index.php
  • 日付別アーカイブインデックスページ
    日付別アーカイブインデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. date.php
    2. archive.php
    3. index.php
  • 検索結果インデックスページ
    検索結果インデックスページのテンプレートファイル検索順序は、以下の通りです。
    1. search.php
    2. index.php
  • サーバーエラー 404 ページ
    サーバーエラー 404 ページのテンプレートファイル検索順序は、以下の通りです。
    1. 404.php
    2. index.php

A4.2 静的ページオリジナルテーマ作成

A4.2.1 事前準備

HTMLで作成した静的ページをオリジナルテーマ化する場合の作成手順例を示します。 静的ページをテーマ化することでヘッダーやフッダー部を共通部品として作成することができますので保守性を向上させることができます。 こでの作成例は、テーマ作成の基本事項を理解するための最小手順を示しています。

オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ/ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。 theme-sample フォルダと theme-sample.zip ファイルは、下記の手順で作成した時に出来るファイル(完成版)なので、作成がうまくいかない場合に参照してください。

  • wp-theme-sample
    • html(作成するページの HTML ベースファイル群)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • images(画像ファイル格納フォルダ)
        • favicon.ico(ファビコンファイル)
        • jirou.png(山田次郎の似顔絵ファイル)
        • yamada.png(山田太郎の似顔絵ファイル)
      • index.html(山田太郎の自己紹介 HTML ファイル/トップページ)
      • jirou.html(山田次郎の自己紹介 HTML ファイル)
    • theme-sample(テーマファイルの完成版)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • images(画像ファイル格納フォルダ)
        • favicon.ico(ファビコンファイル)
        • jirou.png(山田次郎の似顔絵ファイル)
        • yamada.png(山田太郎の似顔絵ファイル)
      • footer.php(ページ共通フッターテンプレートファイル)
      • functions.php(テーマ機能ファイルファイル)
      • header.php(ページ共通ヘッダーテンプレートファイル)
      • index.php(トップページテンプレートファイル)
      • page-jirou.php(固定ページテンプレートファイル)
      • screenshot.png(サムネイル画像ファイル)
      • style.css(テーマ情報ファイル)
    • screenshot.png(サムネイル画像ファイル)
    • theme-sample.zip(テーマファイル)

オリジナルテーマ作成の手順は、次の通りです。

  1. テーマ作成の原型となる HTML / CSS などのファイルを作成します。
  2. サムネイル画像(screenshot.png)ファイルを作成します。
  3. テーマ用フォルダ(theme-sample)を作成し必要ファイルをコピーします。
  4. テーマ情報(style.css)ファイルを作成します。
  5. テーマの機能(functions.php)ファイルを作成します。
  6. ページ共通ヘッダーテンプレート(header.php)ファイルを作成します。
  7. ページ共通フッターテンプレート(footer.php)ファイルを作成します。
  8. トップページテンプレート(index.php)ファイルを作成します。
  9. 固定ページテンプレート(page-jirou.php)ファイルを作成します。
  10. テーマファイル(theme-sample.zip)を作成します。
  11. WordPress ダッシュボードでテーマのインストールと有効化を行います。
  12. 固定ページ(山田次郎の自己紹介)を表示させるための固定ページを定義します。
  13. サイトの表示確認を行います。

A4.2.2 テーマ作成

(1) テーマ作成の原型となる HTML / CSS の作成

テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。今回の作成例では、html フォルダに格納されている内容になります。

  • html
    • css
      • style.css
    • images
      • favicon.ico
      • jirou.png
      • yamada.png
    • index.html
    • jirou.html
HTML コード表示

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>山田太郎 自己紹介</title>
</head>
<body>

	<header>
		<h1>自己紹介</h1>
	</header>

	<nav>
		<ul>
			<li><a href="index.html">トップ</a></li>
			<li><a href="#hometown">故郷</a></li>
			<li><a href="#hobby">趣味</a></li>
			<li><a href="jirou.html">次郎</a></li>
		</ul>
	</nav>

	<main>
		<h2>氏名</h2>
		<p><span>山田 太郎</span></p>
		<h2>イラスト</h2>
		<div><img src="images/yamada.png" alt="山田太郎"></div>
		<h2>生年月日</h2>
		<p>1959年2月17日</p>
		<h2 id="hometown">出身地</h2>
		<p>北海道</p>
		<h2>性格</h2>
		<p>普段は温厚ですがお腹がすくと怒り出します。<br>お酒が好きで毎日、晩酌をしています。</p>
		<h2 id="hobby">趣味</h2>
		<ul>
			<li>写真撮影</li>
			<li>散歩</li>
			<li>Webサイト作成</li>
		</ul>
		<h2 id="foods">好きな食べ物トップ3</h2>
		<ol>
			<li>お寿司</li>
			<li>焼肉</li>
			<li>ラーメン</li>
		</ol>
	</main>

	<footer>
		<p><small>&copy; 2022 山田太郎</small></p>
	</footer>

</body>
</html>

HTML(jirou.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>山田次郎 自己紹介</title>
</head>
<body>

	<header>
		<h1>自己紹介</h1>
	</header>

	<nav>
		<ul>
			<li><a href="index.html">トップ</a></li>
			<li><a href="#hometown">故郷</a></li>
			<li><a href="#hobby">趣味</a></li>
			<li><a href="jirou.html">次郎</a></li>
		</ul>
	</nav>

	<main>
		<h2>氏名</h2>
		<p><span>山田 次郎</span></p>
		<h2>イラスト</h2>
		<div><img src="images/jirou.png" alt="山田二郎"></div>
		<h2>生年月日</h2>
		<p>1959年2月17日</p>
		<h2 id="hometown">出身地</h2>
		<p>北海道</p>
		<h2>性格</h2>
		<p>体を動かすのが好きでサッカーをしています。<br>ドライブとキャンプが好きなアウトドア派です。</p>
		<h2 id="hobby">趣味</h2>
		<ul>
			<li>キャンプ</li>
			<li>ドライブ</li>
			<li>サッカー</li>
		</ul>
		<h2 id="foods">好きな食べ物トップ3</h2>
		<ol>
			<li>ステーキ</li>
			<li>パスタ</li>
			<li>ハンバーグ</li>
		</ol>
	</main>

	<footer>
		<p><small>&copy; 2022 山田次郎</small></p>
	</footer>

</body>
</html>

画面表示形式

別画面で表示

(2) サムネイル画像(screenshot.png)の作成

テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。

ファイル名
screenshot.png
ファイル形式
PNG
サイズ
横 880px x 縦 660px
テーマ用サムネール画像

(3) テーマ用フォルダの作成と必要ファイルのコピー

テーマ用のフォルダ(theme-sample)を作成し必要ファイルを元フォルダ(html)などからコピーします。

  • theme-sample
    • css
      • style.css
    • images
      • favicon.ico
      • jirou.png
      • yamada.png
    • screenshot.png

(4) テーマ情報(style.css)の作成

テーマ情報ファイル(style.css)を作成します。

CSS(style.css)


/*
Theme Name: theme-sample
Description: 山田太郎の自己紹介テーマです。
Author: 山田太郎
Version: 1.0.0
*/

(5) テーマ機能(functions.php)の作成

テーマの機能(functions.php)を作成します。 今回は、空ファイルで(内容はなくても)大丈夫です。

(6) ページ共通ヘッダーテンプレート(header.php)の作成

元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。

PHP(header.php)


<?php /* ページ共通ヘッダーテンプレート */ ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="icon">
<title>山田太郎 自己紹介</title>
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>
<body>

	<header>
		<h1>自己紹介</h1>
	</header>

	<nav>
		<ul>
<?php /* リンク指定を行う場合は、echo home_url() を使用してサイト URL を生成します。 */ ?>
			<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
			<li><a href="#hometown">故郷</a></li>
			<li><a href="#hobby">趣味</a></li>
			<li><a href="<?php echo home_url( '/jirou/' ); ?>">次郎</a></li>
		</ul>
	</nav>

(7) ページ共通フッターテンプレート(footer.php)の作成

元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。

PHP(footer.php)


<?php /* ページ共通フッターテンプレート */ ?>

	<footer>
		<p><small>&copy; 2021 山田太郎</small></p>
	</footer>

<?php /* /body タグの直前に wp_footer() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>

(8) トップページテンプレート(index.php)の作成

元となる HTML ファイル(index.html)からヘッダー部とフッダー部を削除し index.php を作成します。

PHP(index.php)


<?php /* トップページテンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

	<main>
		<h2>氏名</h2>
		<p><span>山田 太郎</span></p>
		<h2>イメージ絵</h2>
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
		<div><img src="<?php echo get_template_directory_uri(); ?>/images/yamada.png" alt="山田太郎"></div>
		<h2>生年月日</h2>
		<p>1959年2月17日</p>
		<h2 id="hometown">出身地</h2>
		<p>北海道</p>
		<h2>性格</h2>
		<p>普段は温厚ですがお腹がすくと怒り出します。<br>お酒が好きで毎日、晩酌をしています。</p>
		<h2 id="hobby">趣味</h2>
		<ul>
			<li>写真撮影</li>
			<li>散歩</li>
			<li>Webサイト作成</li>
		</ul>
		<h2>好きな食べ物トップ3</h2>
		<ol>
			<li>お寿司</li>
			<li>焼肉</li>
			<li>ラーメン</li>
		</ol>
	</main>

<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(9) 固定ページテンプレート(page-jirou.php)の作成

元となる HTML ファイル(jirou.html)からヘッダー部とフッダー部を削除し page-jirou.php を作成します。

PHP(index.php)


<?php /* 固定ページ(スラッグ名:jirou)テンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

	<main>
		<h2>氏名</h2>
		<p><span>山田 次郎</span></p>
		<h2>イメージ絵</h2>
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
		<div><img src="<?php echo get_template_directory_uri(); ?>/images/jirou.png" alt="山田次郎"></div>
		<h2>生年月日</h2>
		<p>1959年2月17日</p>
		<h2 id="hometown">出身地</h2>
		<p>北海道</p>
		<h2>性格</h2>
		<p>体を動かすのが好きでサッカーをしています。<br>ドライブとキャンプが好きなアウトドア派です。</p>
		<h2 id="hobby">趣味</h2>
		<ul>
			<li>キャンプ</li>
			<li>ドライブ</li>
			<li>サッカー</li>
		</ul>
		<h2>好きな食べ物トップ3</h2>
		<ol>
			<li>ステーキ</li>
			<li>パスタ</li>
			<li>ハンバーグ</li>
		</ol>
	</main>

<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(10) テーマファイル(zip ファイル)の作成

作成したファイル群を使用してテーマファイル(theme-sample.zip)を作成します。

  • theme-sample.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
      • sytle.css

(11) WordPress ダッシュボードでテーマのインストールと有効化

WordPress のダッシュボードにログインして作成したテーマ(theme-sample.zip)のインストールと有効化を行います。

(12) WordPress ダッシュボードで固定ページの定義

固定ページ(山田次郎の自己紹介)を表示させるために WordPress のダッシュボードで固定ページの作成を行います。 ページの内容は、記入不要ですがスラッグは、jirou と設定します。

(13) サイトの表示確認

WordPress サイトを表示して表示内容を確認します。

A4.3 シンプルオリジナルテーマ作成

A4.3.1 事前準備

WordPress のダッシュボードで入力した投稿ページや固定ページの表示が可能なオリジナルテーマの作成手順例を示します。 ここでの作成例は、テーマ作成の基本事項を理解するための最小限の機能にしてありますがメニューやページネーションなどの機能実装も実施していますので参考にしてください。

オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ/ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。 theme-simple フォルダと theme-simple.zip ファイルは、下記の手順で作成した時に出来るファイル(完成版)なので、作成がうまくいかない場合に参照してください。

  • wp-theme-simple
    • html(作成するページの HTML ベースファイル群)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • images(画像ファイル格納フォルダ)
        • noimage.png(アイコン代替画像ファイル)
      • index.html(トップページ HTML ファイル)
      • page.html(投稿・固定ページ HTML ファイル)
    • theme-simple(テーマファイルの完成版)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • images(画像ファイル格納フォルダ)
        • noimage.png(アイコン代替画像ファイル)
      • footer.php(ページ共通フッターテンプレートファイル)
      • functions.php(テーマ機能ファイルファイル)
      • header.php(ページ共通ヘッダーテンプレートファイル)
      • index.php(トップページテンプレートファイル)
      • screenshot.png(サムネイル画像ファイル)
      • style.css(テーマ情報ファイル)
    • screenshot.png(サムネイル画像ファイル)
    • theme-simple.zip(テーマファイル)

オリジナルテーマ作成の手順は、次の通りです。

  1. テーマ作成の原型となる HTML / CSS などのファイルを作成します。
  2. サムネイル画像(screenshot.png)ファイルを作成します。
  3. テーマ用フォルダ(theme-simple)を作成し必要ファイルをコピーします。
  4. テーマ情報(style.css)ファイルを作成します。
  5. テーマの機能(functions.php)ファイルを作成します。
  6. ページ共通ヘッダーテンプレート(header.php)ファイルを作成します。
  7. ページ共通フッターテンプレート(footer.php)ファイルを作成します。
  8. トップページテンプレート(index.php)ファイルを作成します。
  9. テーマファイル(theme-simple.zip)を作成します。
  10. WordPress ダッシュボードでテーマのインストールと有効化を行います。
  11. 表示確認を行うための投稿ページ、固定ページを作成します。
  12. サイトの表示確認を行います。

A4.3.2 テーマ作成

(1) テーマ作成の原型となる HTML / CSS の作成

テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、html フォルダに格納されている内容になります。

  • html
    • css
      • style.css
    • images
      • noimage.png
    • index.html
HTML コード表示

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>シンプルテーマ</title>
</head>

<body>

<div class="header">
	<header class="container">
		<h1><a href="index.html">シンプルテーマ</a></h1>
		<nav>
			<ul>
				<li><a href="index.html">トップ</a></li><li><a href="page.html">固定ページ1</a></li><li><a href="page.html">固定ページ2</a></li>
			</ul>
		</nav>
	</header>
</div>

<div class="main">
	<main class="container">
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ10</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:02:03</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ10</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ9</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:01:37</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ9</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ8</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:57</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ8</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ7</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:31</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ7</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ6</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ6</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ5</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ5</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ4</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ4</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ3</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ3</p>
					</div>
				</div>
			</a>
		</article>
		<article class="blog-list__list-item">
			<a href="page.html" class="blog-item">
				<div class="blog-item__content">
					<div class="blog-item__thumbnail">
						<img src="images/noimage.png" alt="イメージなし">
					</div>
					<div class="blog-item__detail">
						<div class="blog-item__element">
							<h2 class="blog-item__title">投稿ページ2</h2>
							<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
							<p class="blog-item__author">test</p>
						</div>
						<p class="blog-item__read">投稿ページ2</p>
					</div>
				</div>
			</a>
		</article>
		<nav class="navigation pagination" aria-label="投稿">
			<h2 class="screen-reader-text">投稿ナビゲーション</h2>
			<div class="nav-links">
				<span aria-current="page" class="page-numbers current">1</span>
				<a class="page-numbers" href="index.html">2</a>
				<a class="next page-numbers" href="index.html">次</a>
			</div>
		</nav>
	</main>
</div>

<div class="footer">
	<footer class="container">
		<p><small>&copy; 2022 シンプルテーマ.</small></p>
	</footer>
</div>

</body>
</html>

HTML(page.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>シンプルテーマ</title>
</head>

<body class="single">

<div class="header">
	<header class="container">
		<h1><a href="index.html">シンプルテーマ</a></h1>
		<nav>
			<ul>
				<li><a href="index.html">トップ</a></li><li><a href="page.html">固定ページ1</a></li><li><a href="page.html">固定ページ2</a></li>
			</ul>
		</nav>
	</header>
</div>

<div class="main">
	<main class="container">
		<h1>投稿ページ1</h1>
		<p>段落(投稿ページ1)</p>
		<hr class="wp-block-separator">
		<h1>H1見出し</h1>
		<hr class="wp-block-separator">
		<h2>H2見出し</h2>
		<hr class="wp-block-separator"/>
		<h3>H3見出し</h3>
		<hr class="wp-block-separator aligncenter">
		<h4>H4見出し</h4>
		<hr class="wp-block-separator">
		<h5>H5見出し</h5>
		<hr class="wp-block-separator">
		<h6>H6見出し</h6>
		<hr class="wp-block-separator">
		<h1>H1見出し</h1>
		<h2>H2見出し</h2>
		<h3>H3見出し</h3>
		<h4>H4見出し</h4>
		<h5>H5見出し</h5>
		<h6>H6見出し</h6>
		<h3>表題1</h3>
		<ul>
			<li>ああああ</li>
			<li>いいいいい
				<ol>
					<li>ううううう</li>
					<li>ええええええええ</li>
					<li>おおおおおおおおおおおお</li>
				</ol>
			</li>
			<li>かかかかか</li>
			<li>きききき</li>
		</ul>

		<div class="blog-pages-pagination">
			<span class="post-page-numbers current" aria-current="page">ページ 1</span>
			<a href="page.html" class="post-page-numbers">ページ 2</a>
			<a href="page.html" class="post-page-numbers">ページ 3</a>
		</div>
		<div class="blog-single_pagination">
			<p>&laquo; <a href="page.html" rel="prev">投稿ページ0</a></p>
			<p><a href="page.html" rel="next">投稿ページ2</a> &raquo;</p>
		</div>
	</main>
</div>

<div class="footer">
	<footer class="container">
		<p><small>&copy; 2022 シンプルテーマ.</small></p>
	</footer>
</div>

</body>
</html>

画面表示形式

別画面で表示

(2) サムネイル画像(screenshot.png)の作成

テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。

ファイル名
screenshot.png
ファイル形式
PNG
サイズ
横 880px x 縦 660px
テーマ用サムネール画像

(3) テーマ用フォルダの作成と必要ファイルのコピー

テーマ用のフォルダ(theme-simple)を作成し必要ファイルを元フォルダ(html)などからコピーします。

  • theme-simple
    • css
      • style.css
    • images
      • noimage.png
    • screenshot.png

(4) テーマ情報(style.css)の作成

テーマ情報ファイル(style.css)を作成します。

CSS(style.css)


/*
Theme Name: theme-simple
Description: WordPressのシンプルテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/

(5) テーマ機能(functions.php)の作成

テーマの機能(functions.php)を作成します。 テーマがの機能を定義する theme_simple_setup 関数を定義します。 また、この関数を有効化するために add_action('after_setup_theme', 'theme_simple_setup'); を使用してセットアップ時の呼び出し登録を行います。

PHP(functions.php)


<?php

/* テーマ機能設定 */
function theme_simple_setup() {
	// title タグの自動出力指定
	add_theme_support('title-tag');
	// 対応している投稿フォーマット指定
	add_theme_support(
		'post-formats',
		array(
			'link',
			'aside',
			'gallery',
			'image',
			'quote',
			'status',
		)
	);
	// アイキャッチ(投稿サムネール)指定
	add_theme_support('post-thumbnails');
	set_post_thumbnail_size(128, 128);
	// メニュー作成指定
	register_nav_menus(
		array(
			'primary' => __( 'Primary menu' ),
		)
	);
	// HTML5のマークアップ指定
	add_theme_support(
		'html5',
		array(
			'gallery',
			'caption',
		)
	);
	// カスタムロゴ指定
	$logo_width  = 256;
	$logo_height = 256;
	add_theme_support(
		'custom-logo',
		array(
			'height'               => $logo_height,
			'width'                => $logo_width,
			'flex-width'           => true,
			'flex-height'          => true,
			'unlink-homepage-logo' => true,
		)
	);
	// エディタのスタイル設定
	add_editor_style( 'css/style.css' );
}
// セットアップ関数の呼び出しを指定
add_action( 'after_setup_theme', 'theme_simple_setup' );

(6) ページ共通ヘッダーテンプレート(header.php)の作成

元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。

PHP(header.php)


<?php /* ページ共通ヘッダーテンプレート */ ?>
<!doctype html>
<?php /* language_attributes() を使用して言語属性を取得します。 */ ?>
<html <?php language_attributes(); ?>>
<head>
<?php /* bloginfo( 'charset' ) を使用して使用する文字コードを取得します。 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php /* ファイルを指定する場合は、site_icon_url() を使用してサイトアイコンの URL を取得します。 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>

<?php /* body_class() を使用してテンプレート種類を示すクラス名を取得します。 */ ?>
<body <?php body_class(); ?>>

<div class="header">
	<header class="container">
<?php /* is_singular() を使用して個別の投稿ページ(投稿や固定ページなど)かどうかをチェックします。 */ ?>
<?php /* home_url( '/' ) を使用して本サイトのホーム URL を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) を使用してサイトタイトルを取得します。 */ ?>
<?php if (is_singular()) { ?>
		<p class="h1"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></p>
<?php } else { ?>
		<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></h1>
<?php } ?>
<?php /* has_nav_menu( 'primary' ) を使用して指定したメニューが割り当てられているかチェックします。 */ ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
		<nav>
<?php /* wp_nav_menu( ・・・ ) を使用してメニュー情報を取得(展開)します。 */ ?>
		<?php
		wp_nav_menu(
			array(
				'theme_location'  => 'primary',				// メニューの位置(初期値:なし)
				'menu_class'      => 'menu-wrapper',		// ul要素のクラス名(初期値:menu)
				'container'       => false,					// ul要素のラップ要素(初期値:div)
				'items_wrap'      => '<ul>%3$s</ul>',		// 編集型式(%1$s:menu_id、%2$s:menu_class、%3$s:リスト項目)
				'fallback_cb'     => false,					// メニューが存在しない場合のコールバック関数(初期値:wp_page_menu)
			)
		);
		?>
		</nav>
<?php } ?>
	</header>
</div>

(7) ページ共通フッターテンプレート(footer.php)の作成

元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。

PHP(footer.php)


<?php /* ページ共通フッターテンプレート */ ?>

<div class="footer">
	<footer class="container">
<?php /* date( 'Y' ) を使用して現在の年を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) ) を使用してサイトタイトルを取得します。 */ ?>
		<p><?php echo sprintf( '<small>&copy; %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
	</footer>
</div>

<?php /* /body タグの直前に wp_footer(); を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>

(8) ページテンプレート(index.php)の作成

元となる HTML ファイル(index.html)からヘッダー部とフッダー部を削除し index.php を作成します。 本ページテンプレートは、投稿一覧ページ、投稿ページ、固定ページなどをすべて表示可能なように作成してあります。

PHP(index.php)


<?php /* ページ用テンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

<div class="main">
	<main class="container">
<?php /*
	have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
	WordPress クエリループを処理する一般形は、以下の通りです。

	if ( have_posts() ) {				// 処理するクエリがあるかのチェック
		while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
			the_post();					// 処理するクエリ情報の設定
			・・・						// 個別クエリの処理
		}
	}

	個別クエリの処理で使用している関数は、以下の通りです。

	get_permalink()						// 投稿のパーマリンクを取得
	get_template_directory_uri()		// 投稿のディレクトリィ URI を取得
	get_the_author()					// 投稿の投稿者名を取得
	get_the_date()						// 投稿の日付を取得
	get_the_excerpt()					// 投稿の投稿概要を取得
	get_the_ID()						// 投稿の投稿 ID を取得
	get_the_post_thumbnail_url()		// 投稿のアイキャッチ画像 URL を取得
	get_the_title()						// 投稿のタイトルを取得
	has_post_thumbnail()				// 投稿にアイキャッチ画像が登録されているかのチェック
	is_single()							// 固定ページ以外の個別の投稿ページが表示中かのチェック
	is_singular()						// 個別の投稿ページ(一覧以外)が表示中かのチェック
	next_post_link()					// 日付順でひとつ次の投稿のリンクを表示
	previous_post_link()				// 日付順でひとつ前の投稿のリンクを表示
	the_content()						// 投稿の本文を表示
	the_title()							// 投稿のタイトルを表示
	the_posts_pagination()				// 投稿の前と次のページ番号セットを表示
	wp_link_pages()						// ページ分割された投稿ページリンクを表示

*/ ?>
<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		if ( is_singular() ) {							// ページ(投稿、固定など)表示
			the_title( '<h1>', '</h1>' );				// タイトル
			the_content();								// ページコンテンツ
		}
		else {											// 投稿一覧表示
			$permalink = esc_url( get_permalink() );	// URL
			$title = get_the_title();					// タイトル
			if ( has_post_thumbnail() ) {				// アイキャッチ画像URL(サムネイルURL)
				// アイキャッチ画像のURL取得(引数1:サイズ:'thumbnail'、'medium'、'large'、'full'
				$thumbnail = 'src="' . get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ) . '" alt="アイキャッチ"';
			}
			else {
				// アイキャッチ画像が未登録時は、テーマフォルダの「images/noimage.pmg」を使用
				$thumbnail = 'src="' . get_template_directory_uri() . '/images/noimage.png' . '" alt="イメージなし"';
			}
			$excerpt = get_the_excerpt();				// 抜粋
			$date = get_the_date( 'Y-m-d' );			// 投稿日付
			$time = get_the_date( 'H:i:s' );			// 投稿時間
			$author = get_the_author();					// 投稿者
?>
			<article class="blog-list__list-item">
				<a href="<?php echo $permalink; ?>" class="blog-item">
					<div class="blog-item__content">
						<div class="blog-item__thumbnail">
							<img <?php echo $thumbnail; ?>>
						</div>
						<div class="blog-item__detail">
							<div class="blog-item__element">
								<h2 class="blog-item__title"><?php echo $title; ?></h2>
								<p class="blog-item__datetime"><?php echo $date . '<br>' . $time; ?></p>
								<p class="blog-item__author"><?php echo $author; ?></p>
							</div>
							<p class="blog-item__read"><?php echo $excerpt; ?></p>
						</div>
					</div>
				</a>
			</article>
<?php
		}
	}
	if ( is_singular() ) {								// ページ(投稿、固定など)表示
		wp_link_pages( array(							// 改ページ(複数ページ)処理
			'before'           => '<div class="blog-pages-pagination">',
			'after'            => '</div>' . PHP_EOL,	// before/afterは、前後に付加する文字
			'link_before'      => '',					// リンクテキストの前に負荷する文字
			'link_after'       => '',					// リンクテキストの後ろに負荷する文字
			'next_or_number'   => 'number',				// 'number':ページ番号、'next':前/次ページ
			'separator'        => ' ',					// ページ番号間の文字
			'nextpagelink'     => __( 'Next page' ),	// 次のページのリンクテキスト
			'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
			'pagelink'         => 'ページ %',			// ページ番号のフォーマット(%はページ番号)
			'echo'             => true,					// true:表示、false:返却
		) );
		if ( is_single() ) {							// 投稿ページ
?>
			<div class="blog-single_pagination">
				<p><?php previous_post_link(); ?></p>
				<p><?php next_post_link(); ?></p>
			</div>
<?php
		}
	}
	else {												// 投稿一覧表示
		the_posts_pagination( array(					// ページネーションを表示
			'mid_size'  => 2,							// 現在のページの左右に表示するページ番号の数
			'prev_text' => __('Previous'),				// 前のセットへのリンクテキスト
			'next_text' => __('Next')					// 次のセットへのリンクテキスト
		) );
	}
}
?>
	</main>
</div>

<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(9) テーマファイル(zip ファイル)の作成

作成したファイル群を使用してテーマファイル(theme-simple.zip)を作成します。

  • theme-simple.zip
    • theme-simple
      • css
        • style.css
      • images
        • noimage.png
      • footer.php
      • functions.php
      • header.php
      • index.php
      • screenshot.png
      • sytle.css

(10) WordPress ダッシュボードでテーマのインストールと有効化

WordPress のダッシュボードにログインして作成したテーマ(theme-simple.zip)のインストールと有効化を行います。

(11) 表示確認を行うための投稿ページ、固定ページ作成

表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。

(12) サイトの表示確認

WordPress サイトを表示して表示内容を確認します。

A4.4 ノート風オリジナルテーマ作成

A4.4.1 事前準備

大学ノート風のオリジナルテーマの作成手順例を示します。 トップページ(表紙)、投稿ノートページ、固定ノートページをそれぞれ生成するテンプレートを用意しています。 メニューを定義することで右部に付箋紙を表示しページ選択を行うことが可能になります。

オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。 解凍した状態でのフォルダ/ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。theme-note フォルダと theme-note.zip ファイルは、下記の手順で作成した時に出来るファイル(完成版)なので、作成がうまくいかない場合に参照してください。

  • wp-theme-note
    • html(作成するページの HTML ベースファイル群)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • fonts(フォント格納フォルダ)
        • KleeOne-Regular.otf(フォントファイル)
        • KleeOne-SemiBold.otf(フォントファイル)
      • index.html(トップ(表紙)ページ HTML ファイル)
      • jirou.html(ノートページ HTML ファイル)
    • theme-note(テーマファイルの完成版)
      • css(CSS ファイル格納フォルダ)
        • style.css(CSS ファイル)
      • fonts(フォント格納フォルダ)
        • KleeOne-Regular.otf(フォントファイル)
        • KleeOne-SemiBold.otf(フォントファイル)
      • footer.php(ページ共通フッターテンプレートファイル)
      • functions.php(テーマ機能ファイルファイル)
      • header.php(ページ共通ヘッダーテンプレートファイル)
      • index.php(トップページテンプレートファイル)
      • page.php(固定ページテンプレートファイル)
      • screenshot.png(サムネイル画像ファイル)
      • single.php(投稿ページテンプレートファイル)
      • style.css(テーマ情報ファイル)
    • screenshot.png(サムネイル画像ファイル)
    • theme-note.zip(テーマファイル)

オリジナルテーマ作成の手順は、次の通りです。

  1. テーマ作成の原型となる HTML / CSS などのファイルを作成します。
  2. サムネイル画像(screenshot.png)ファイルを作成します。
  3. テーマ用フォルダ(theme-note)を作成し必要ファイルをコピーします。
  4. テーマ情報(style.css)ファイルを作成します。
  5. テーマの機能(functions.php)ファイルを作成します。
  6. ページ共通ヘッダーテンプレート(header.php)ファイルを作成します。
  7. ページ共通フッターテンプレート(footer.php)ファイルを作成します。
  8. トップページテンプレート(index.php)ファイルを作成します。
  9. 固定ページテンプレート(page.php)ファイルを作成します。
  10. 投稿ページテンプレート(single.php)ファイルを作成します。
  11. テーマファイル(theme-note.zip)を作成します。
  12. WordPress ダッシュボードでテーマのインストールと有効化を行います。
  13. 表示確認を行うための投稿ページ、固定ページを作成します。
  14. サイトの表示確認を行います。

A4.4.2 テーマ作成

(1) テーマ作成の原型となる HTML / CSS の作成

テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、html フォルダに格納されている内容になります。

  • html
    • css
      • style.css
    • fonts
      • KleeOne-Regular.otf
      • KleeOne-SemiBold.otf
    • index.html
    • note.html
HTML コード表示

HTML(index.html)


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>ノート風サンプル</title>
</head>

<body>

<div class="container">
	<div class="top-wrapper">
		<div class="side">
			<div class="sticker">
				<div class="sticker-inner">
					<div class="sticker-inner2"></div>
				</div>
			</div>
		</div>
		<div class="note">
			<div class="inner">
				<div class="inner2">
					<div class="inner3">
						<p class="notebook"><span>NOTE BOOK</span></p>
						<h1 class="title"><span><a href="#">タイトル</a></span></h1>
						<p class="index"><span>目次</span></p>
						<ul class="list">
							<li><a href="#">投稿1<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿2<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿3<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿4<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿5<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿6<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿7<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿8<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿9<span>(2022.01.01/test)</span></a></li>
							<li><a href="#">投稿10ああああああああああああああああ<span>(2022.01.01/test)</span></a></li>
						</ul>
					</div>
					<nav class="navigation pagination" aria-label="投稿">
						<h2 class="screen-reader-text">投稿ナビゲーション</h2>
						<div class="nav-links">
							<span aria-current="page" class="page-numbers current">1</span>
							<a class="page-numbers" href="#">2</a>
							<a class="next page-numbers" href="#">次</a>
						</div>
					</nav>
					<footer>
						<p><small>&copy; 2022 xxxxxxxxxx.</small></p>
					</footer>
				</div>
			</div>
		</div>
		<aside>
			<ul>
				<li><a href="index.html">トップ</a></li>
				<li><a href="note.html">ノート</a></li>
				<li><a href="#">固定ページ1</a></li>
				<li><a href="#">固定ページ2</a></li>
			</ul>
		</aside>
	</div>
</div>

</body>
</html>

HTML(note.html)


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>ノート風サンプル</title>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<div class="note">
			<header>
				<p class="category">分類ABC</p>
				<p class="date"><span>Date.</span>2022.01.15</p>
				<h1>ノート風サンプル</h1>
			</header>
			<main>
				<h2>ノート風サンプル</h2>
				<p>ノート風の背景に文章を記述できます。<br>長い文章を書くとこうなります。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。</p>
				<ul>
					<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
					<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				</ul>
				<div>ボックスも作れます。</div>
				<ol>
					<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
					<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				</ol>
			</main>
			<div class="blog-single_pagination">
				<p>前の投稿ページ</p>
				<p>次の投稿ページ</p>
			</div>
			<footer>
				<p><small>&copy; 2022 xxxxxxxxxx.</small></p>
			</footer>
		</div>
		<aside>
			<ul>
				<li><a href="index.html">トップ</a></li>
				<li><a href="note.html">ノート</a></li>
				<li><a href="#">固定ページ1</a></li>
				<li><a href="#">固定ページ2</a></li>
			</ul>
		</aside>
	</div>
</div>

</body>
</html>

画面表示形式

別画面で表示

(2) サムネイル画像(screenshot.png)の作成

テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。

ファイル名
screenshot.png
ファイル形式
PNG
サイズ
横 880px x 縦 660px
テーマ用サムネール画像

(3) テーマ用フォルダの作成と必要ファイルのコピー

テーマ用のフォルダ(theme-note)を作成し必要ファイルを元フォルダ(html)などからコピーします。

  • theme-note
    • css
      • style.css
    • fonts
      • KleeOne-Regular.otf
      • KleeOne-SemiBold.otf
    • screenshot.png

(4) テーマ情報(style.css)の作成

テーマ情報ファイル(style.css)を作成します。

CSS(style.css)


/*
Theme Name: theme-note
Description: ノート風のテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/

(5) テーマ機能(functions.php)の作成

テーマの機能(functions.php)を作成します。

PHP(functions.php)


<?php

/* テーマ機能設定 */
function theme_note_setup() {
	// title タグの自動出力指定
	add_theme_support('title-tag');
	// 対応している投稿フォーマット指定
	add_theme_support(
		'post-formats',
		array(
			'link',
			'aside',
			'gallery',
			'image',
			'quote',
			'status',
		)
	);
	// アイキャッチ(投稿サムネール)指定
	add_theme_support('post-thumbnails');
	set_post_thumbnail_size(128, 128);
	// メニュー作成指定
	register_nav_menus(
		array(
			'primary' => __( 'Primary menu' ),
		)
	);
	// HTML5のマークアップ指定
	add_theme_support(
		'html5',
		array(
			'gallery',
			'caption',
		)
	);
	// カスタムロゴ指定
	$logo_width  = 256;
	$logo_height = 256;
	add_theme_support(
		'custom-logo',
		array(
			'height'               => $logo_height,
			'width'                => $logo_width,
			'flex-width'           => true,
			'flex-height'          => true,
			'unlink-homepage-logo' => true,
		)
	);
	// エディタのスタイル設定
	add_editor_style( 'css/style.css' );
}
// セットアップ関数の呼び出しを指定
add_action('after_setup_theme', 'theme_note_setup');

(6) ページ共通ヘッダーテンプレート(header.php)の作成

元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。

PHP(header.php)


<?php /* ページ共通ヘッダーテンプレート */ ?>
<!doctype html>
<?php /* language_attributes() を使用して言語属性を取得します。 */ ?>
<html <?php language_attributes(); ?>>
<head>
<?php /* bloginfo( 'charset' ) を使用して使用する文字コードを取得します。 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php /* ファイルを指定する場合は、site_icon_url() を使用してサイトアイコンの URL を取得します。 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>

<?php /* body_class() を使用してテンプレート種類を示すクラス名を取得します。 */ ?>
<body <?php body_class(); ?>>

<div class="container">

(7) ページ共通フッターテンプレート(footer.php)の作成

元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。

PHP(footer.php)


<?php
/* 共通フッターテンプレート */
?>

<?php /* has_nav_menu() を使用して指定したメニューが割り当てられているかチェックします。 */ ?>
<?php /* wp_nav_menu() を使用してメニュー情報を取得(展開)します。 */ ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
		<aside>
		<?php
		wp_nav_menu(
			array(
				'theme_location'  => 'primary',				// メニューの位置(初期値:なし)
				'menu_class'      => 'menu-wrapper',		// ul要素のクラス名(初期値:menu)
				'container'       => false,					// ul要素のラップ要素(初期値:div)
				'items_wrap'      => '<ul>%3$s</ul>',		// 編集型式(%1$s:menu_id、%2$s:menu_class、%3$s:リスト項目)
				'fallback_cb'     => false,					// メニューが存在しない場合のコールバック関数(初期値:wp_page_menu)
			)
		);
		?>
		</aside>
<?php } ?>
	</div>
</div>

<?php /* /body タグの直前に wp_footer() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>

(8) トップページテンプレート(index.php)の作成

元となる HTML ファイル(index.html)からヘッダー部とフッダー部を削除し index.php を作成します。

PHP(index.php)


<?php /* 投稿一覧表示用テンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

<?php /*
	表示する投稿一覧の種類によって「目次」のサブタイトルを変更します。

	すべての投稿一覧					// 目次
	カテゴリー別の投稿一覧				// 目次(カテゴリー:カテゴリー名)
	タグ別の投稿一覧					// 目次(タグ:タグ名)
	日付別の投稿一覧					// 目次(年月:yy年mm月)

	目次のサブタイトルを変更するためのい処理で使用している関数は、以下の通りです。

	esc_html()							// HTML のエスケープ処理
	esc_url()							// URL の無害化処理
	get_bloginfo()						// サイト情報の取得
	get_the_date()						// 投稿の日付を取得
	home_url()							// 現在のホーム URL を取得
	is_category()						// カテゴリーアーカイブページ表示中かのチェック
	is_date()							// 日付関連アーカイブページ表示中かのチェック
	is_tag()							// 投稿タグアーカイブページ表示中かのチェック
	single_cat_title()					// ページタイトル(カテゴリー名またはタグ名)の取得
	single_tag_title()					// タグタイトルの取得

*/ ?>
<?php
	$page_title = "";
	if ( is_category() ) {
		$page_title = '<span>(カテゴリー:' . single_cat_title( '', false ) . ')</span>';
	}
	else if ( is_tag() ) {
		$page_title = '<span>(タグ:' . single_tag_title( '', false ) . ')</span>';
	}
	else if ( is_date() ) {
		$page_title = '<span>(年月:' . get_the_date( "Y年n月" ) . ')</span>';
	}
?>
	<div class="top-wrapper">
		<div class="side">
			<div class="sticker">
				<div class="sticker-inner">
					<div class="sticker-inner2"></div>
				</div>
			</div>
		</div>
		<div class="note">
			<div class="inner">
				<div class="inner2">
					<div class="inner3">
						<p class="notebook">NOTE BOOK</p>
						<h1 class="title"><span><a href="<?php echo esc_url(home_url('/')); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></span></h1>
						<p class="index">目次<?php echo $page_title; ?></p>
						<ul class="list">
<?php /*
	have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
	WordPress クエリループを処理する一般形は、以下の通りです。

	if ( have_posts() ) {				// 処理するクエリがあるかのチェック
		while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
			the_post();					// 処理するクエリ情報の設定
			・・・						// 個別クエリの処理
		}
	}

	個別クエリの処理で使用している関数は、以下の通りです。

	date()								// 日付時刻の取得
	get_bloginfo()						// サイト情報の取得
	get_permalink()						// 投稿のパーマリンクを取得
	get_the_title()						// 投稿のタイトルを取得
	get_the_date()						// 投稿の日付を取得
	get_the_author()					// 投稿の投稿者名を取得
	get_the_posts_pagination			// 投稿の前と次のページ番号セットを取得

*/ ?>
<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		$permalink = esc_url( get_permalink() );		// URL
		$title = get_the_title();						// タイトル
		$date = get_the_date( 'Y.m.d' );				// 投稿日付
		$author = get_the_author();						// 投稿者
?>
							<li><a href="<?php echo $permalink; ?>" class="blog-item"><?php echo $title; ?><span>(<?php echo $date; ?>/<?php echo $author; ?>)</span></a></li>
<?php
	}
?>
						</ul>
					</div>
<?php
		$pagination = get_the_posts_pagination( array(	// ページネーションを取得
			'mid_size'  => 2,							// 現在のページの左右に表示するページ番号の数
			'prev_text' => __('Previous'),				// 前のセットへのリンクテキスト
			'next_text' => __('Next')					// 次のセットへのリンクテキスト
		) );
		if ($pagination == '') {
			$pagination = '<nav class="navigation pagination" aria-label="投稿"><h2 class="screen-reader-text"></h2><div class="nav-links"><span aria-current="page" class="page-numbers current"> </span></div></nav>';
		}
		echo $pagination . PHP_EOL;
?>
					<footer>
						<p><?php echo sprintf( '<small>&copy; %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
					</footer>
				</div>
			</div>
		</div>
<?php
}
?>

<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(9) 固定ページテンプレート(page.php)の作成

元となる HTML ファイル(note.html)からヘッダー部とフッダー部を削除し page.php を作成します。

PHP(page.php)


<?php /* 固定ページ用テンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

<?php /*
	have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
	WordPress クエリループを処理する一般形は、以下の通りです。

	if ( have_posts() ) {				// 処理するクエリがあるかのチェック
		while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
			the_post();					// 処理するクエリ情報の設定
			・・・						// 個別クエリの処理
		}
	}

	個別クエリの処理で使用している関数は、以下の通りです。

	date()								// 現在の日付時刻を取得
	get_bloginfo()						// サイト情報を取得
	get_the_title()						// 投稿のタイトルを取得
	get_the_date()						// 投稿の日付を取得
	the_content()						// 投稿の本文を表示
	wp_link_pages()						// ページ分割された投稿ページリンクを表示

*/ ?>
<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		$title = get_the_title();						// タイトル
		$date = get_the_date( 'Y.m.d' );				// 投稿日付
?>
	<div class="wrapper">
		<div class="note">
			<header>
				<p class="category"></p>
				<p class="date"><span>Date.</span><?php echo $date; ?></p>
				<h1><?php echo $title; ?></h1>
			</header>
			<main>
				<?php the_content(); ?>
			</main>
<?php
		wp_link_pages( array(							// 改ページ(複数ページ)処理
			'before'           => '<div class="blog-pages-pagination">',
			'after'            => '</div>' . PHP_EOL,	// before/afterは、前後に付加する文字
			'link_before'      => '',					// リンクテキストの前に負荷する文字
			'link_after'       => '',					// リンクテキストの後ろに負荷する文字
			'next_or_number'   => 'number',				// 'number':ページ番号、'next':前/次ページ
			'separator'        => ' ',					// ページ番号間の文字
			'nextpagelink'     => __( 'Next page' ),	// 次のページのリンクテキスト
			'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
			'pagelink'         => 'ページ %',			// ページ番号のフォーマット(%はページ番号)
			'echo'             => true,					// true:表示、false:返却
		) );
?>
			<div class="blog-single_pagination">
				<p></p>
				<p></p>
			</div>
			<footer>
				<p><?php echo sprintf( '<small>&copy; %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
			</footer>
		</div>
<?php
	}
}
?>

<?php /* get_footer(); を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(10) 投稿ページテンプレート(single.php)の作成

元となる HTML ファイル(note.html)からヘッダー部とフッダー部を削除し single.php を作成します。

PHP(single.php)


<?php /* 投稿ページ用テンプレート */ ?>

<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>

<?php /*
	have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
	WordPress クエリループを処理する一般形は、以下の通りです。

	if ( have_posts() ) {				// 処理するクエリがあるかのチェック
		while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
			the_post();					// 処理するクエリ情報の設定
			・・・						// 個別クエリの処理
		}
	}

	個別クエリの処理で使用している関数は、以下の通りです。

	date()								// 現在の日付時刻を取得
	get_bloginfo()						// サイト情報を取得
	get_category_link()					// カテゴリー一覧ページの URL を取得
	get_the_category()					// 投稿のカテゴリオブジェクト配列を取得
	get_the_title()						// 投稿のタイトルを取得
	get_the_date()						// 投稿の日付を取得
	next_post_link()					// 日付順でひとつ次の投稿のリンクを表示
	previous_post_link()				// 日付順でひとつ前の投稿のリンクを表示
	the_content()						// 投稿の本文を表示
	wp_link_pages()						// ページ分割された投稿ページリンクを表示

*/ ?>
<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		$title = get_the_title();						// タイトル
		$date = get_the_date( 'Y.m.d' );				// 投稿日付
		$categories = get_the_category();				// カテゴリ
		$category = '';
		foreach( $categories as $item ) {
			$name = __($item->name);
			$link = esc_url( get_category_link( $item->term_id ) );
			if ( $category != '' ) {
				$category .= '/';
			}
			$category .= '<a href="' . $link . '">' . $name . '</a>';
		}
?>
	<div class="wrapper">
		<div class="note">
			<header>
				<p class="category"><?php echo $category; ?></p>
				<p class="date"><span>Date.</span><?php echo $date; ?></p>
				<h1><?php echo $title; ?></h1>
			</header>
			<main>
				<?php the_content(); ?>
			</main>
<?php
		wp_link_pages( array(							// 改ページ(複数ページ)処理
			'before'           => '<div class="blog-pages-pagination">',
			'after'            => '</div>' . PHP_EOL,	// before/afterは、前後に付加する文字
			'link_before'      => '',					// リンクテキストの前に負荷する文字
			'link_after'       => '',					// リンクテキストの後ろに負荷する文字
			'next_or_number'   => 'number',				// 'number':ページ番号、'next':前/次ページ
			'separator'        => ' ',					// ページ番号間の文字
			'nextpagelink'     => __( 'Next page' ),	// 次のページのリンクテキスト
			'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
			'pagelink'         => 'ページ %',			// ページ番号のフォーマット(%はページ番号)
			'echo'             => true,					// true:表示、false:返却
		) );
?>
			<div class="blog-single_pagination">
				<p><?php previous_post_link(); ?></p>
				<p><?php next_post_link(); ?></p>
			</div>
			<footer>
				<p><?php echo sprintf( '<small>&copy; %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
			</footer>
		</div>
<?php
	}
}
?>

<?php /* get_footer(); を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>

(10) テーマファイル(zip ファイル)の作成

作成したファイル群を使用してテーマファイル(theme-note.zip)を作成します。

  • theme-note.zip
    • theme-note
      • css
        • style.css
      • fonts
        • KleeOne-Regular.otf
        • KleeOne-SemiBold.otf
      • footer.php
      • functions.php
      • header.php
      • index.php
      • page.php
      • screenshot.png
      • single.php
      • sytle.css

(11) WordPress ダッシュボードでテーマのインストールと有効化

WordPress のダッシュボードにログインして作成したテーマ(theme-note.zip)のインストールと有効化を行います。

(12) 表示確認を行うための投稿ページ、固定ページ作成

表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 メニューは、ページの右部の付箋紙として表示されます。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。

(13) サイトの表示確認

WordPress サイトを表示して表示内容を確認します。

A4.5 テーマのカスタマイズ

A4.5.1 カスタマイズの種類

WordPress を使用してサイトを作成しているとテーマのカスタマイズを行いたくなることがあります。ここでは、テーマのカスタマイズ方法を説明します。 テーマのカスタマイズ方法は、複数ありますので以下の順でカスタマイズ可否を確認してください。

  1. テーマが提供するカスタマイズ機能でのカスタマイズ
  2. プラグインを利用したカスタマイズ
  3. 追加 CSS を利用したカスタマイズ
  4. 子テーマを利用したカスタマイズ
  5. カスタマイズをあきらめましょう!(他のテーマを探すかオリジナルテーマを作成することを検討しましょう)

(1) テーマが提供するカスタマイズ機能でのカスタマイズ

WordPress のテーマは、テーマによってカスタマイズできる範囲が大きく異なります。また、細かなカスタマイズをする場合は、有償テーマの購入が必要となる場合もあります。 テーマが提供するカスタマイズ機能のついては、テーマの提供サイトおよびテーマのカスタマイズ解説サイトなどを参照してください。

テーマが提供するカスタマイズ機能は、カスタマイズ画面(外観 → カスタマイズ)で実施しますが、テーマによっては個別のカスタマイズ画面が用意されている場合がありますので確認してください。

(2) プラグインを利用したカスタマイズ

WordPress には、標準で持っていない機能を拡張するためのプラグイン機能が用意されており多くの開発者がプラグインを開発して提供しています。 カスタマイズを考えた場合に誰かがプラグインとして提供してくれているかもしれませんのでカスタマイズ内容に適用できるプラグインがないかを探してみましょう。 プラグインを探す時は、検索サイトで「wordpress プラグイン <カスタマイズ内容>」などと検索してみてください。

(3) 追加 CSS を利用したカスタマイズ

追加 CSS を利用したカスタマイズを行う場合は、テーマが出力する HTML やテーマが提供する CSS を理解する必要があります。以下の手順で追加 CSS の作成および登録を行ってください。

(a) 既存のパーツのカスタマイズ(追加 CSS 設定)
  1. カスタマイズ対象ページを表示してます。
  2. Chrome の検証ツールを使ってカスタマイズ箇所の特定しプロパティの追加・変更を行います。
  3. 検証ツールでカスタマイズ内容が決定したら対象 CSS をクリップボードにコピーします。
  4. ダッシュボードにログインして追加 CSS 画面(外観 → カスタマイズ → 追加 CSS)を開きます。
  5. 追加 CSS 部分に対象 CSS をクリップボードからペーストして公開を行います。
  6. カスタマイズ対象ページを表示して追加 CSS が有効になっていることを確認します。
(b) 投稿、固定ページパーツのスタイル設定(追加 CSS 設定)
  1. ダッシュボードにいログインします。
  2. 投稿、固定ページ作成画面でスタイルを設定するパーツのブロックプロパティの下部にある追加 CSS クラス(ブロック → 高度な設定 → 追加 CSS クラス)にクラス名を設定して公開します。
  3. 追加 CSS 画面(外観 → カスタマイズ → 追加 CSS)を開きます。
  4. 追加 CSS 部分に投稿、固定ページ作成画面で設定したクラス名を使用して CSS を記述して公開を行います。
  5. 対象ページを表示して追加 CSS が有効になっていることを確認します。

(4) 子テーマを利用したカスタマイズ

WordPress のテーマは、ソースコードが提供されているので自由に修正することができますがテーマ自体のソースコードを修正してしまうとテーマのアップデートに対応できなくなります。 WordPress ではテーマの一部だけを修正する機能である子テーマ機能が提供されていますのでテーマのカスタマイズを行う場合は、子テーマの作成を行います。

子テーマ機能とは、親テーマ(カスタマイズを行う元のテーマを親テーマと呼びます)で修正が必要なファイルだけを取り出して修正を行い、それ以外のファイルは親テーマのファイルを使用するという機能です。 子テーマを使用する場合は、親テーマと子テーマの両方をインストールしておき子テーマを有効化して使用します。子テーマのテーマ情報には、親テーマのテーマ名が記載されていますので、子テーマ内に無いファイルは自動的に親テーマが参照されます。 子テーマを使用してカスタマイズする手順を下記に記述します。

なんらかの理由で子テーマでの対応ができない場合には、テーマ自体のソースコードを修正することになります。 保守性の面で推奨はできませんがソースコードを直接修正する場合は、以下の方法があります。

  • テーマファイルをダウンロードしてソースコードの修正を行い、新たなテーマを作成します。
  • ダッシュボードのテーマファイルエディター(外観 → テーマファイルエディター)でソースコードを修正します。

A4.6 子テーマの作成

A4.6.1 事前準備

子テーマの作成手順例を示します。 ここでの作成例は、子テーマ作成の基本事項を理解するための最小手順を示しています。

子テーマ作成の練習を行う場合は、下記のリンク先から子テーマ作成用のサンプルファイルをダウンロードしてください。

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。 解凍した状態でのフォルダ/ファイル内容は、以下の通りです。
子テーマ作成で使用するのは、images フォルダと screenshot.png ファイルです。 fukasawa.2.0.5.zip ファイルは、親テーマのテーマファイルです。 fukasawa-child フォルダと fukasawa-child.zip ファイルは、下記の手順で作成した時に出来るファイル(完成版)なので、作成がうまくいかない場合に参照してください。

  • wp-child-sample
    • fukasawa-child(子テーマファイルの完成版)
      • images(画像ファイル格納フォルダ)
        • yamada.png(山田太郎の似顔絵ファイル)
      • functions.php(テーマ機能ファイルファイル)
      • header.php(ページ共通ヘッダーテンプレートファイル)
      • screenshot.png(サムネイル画像ファイル)
      • style.css(テーマ情報ファイル)
    • images(画像ファイル格納フォルダ)
      • yamada.png(山田太郎の似顔絵ファイル)
    • fukasawa.2.0.5.zip(親テーマのダウンロードファイル)
    • fukasawa-child.zip(子テーマファイル)
    • screenshot.png(サムネイル画像ファイル)

子テーマ作成の手順は、次の通りです。

  1. 親テーマの提供サイトからテーマファイルをダウンロードします。
  2. カスタマイズ部分を特定します。
  3. サムネイル画像(screenshot.png)ファイルを作成します。
  4. 子テーマ用フォルダ(fukasawa-child)を作成し必要ファイルのコピーします。
  5. テーマ情報(style.css)ファイルを作成します。
  6. テーマ機能(functions.php)ファイルを作成します。
  7. 変更を行うテンプレートファイルを修正します。
  8. テーマファイル(fukasawa-child.zip)を作成します。
  9. WordPress ダッシュボードでテーマのインストールと有効化を行います。
  10. サイトの表示確認を行います。

A4.6.2 テーマ作成

(1) 親テーマの提供サイトからテーマファイルをダウンロード

親テーマの提供サイトからテーマファイルをダウンロードします。テーマファイルは、zip 型式で圧縮されていますので展開します。 ここの子テーマ作成例では、ポートフォリオ用のテーマである fukasawa を使用させて頂きます。

【謝辞】
WordPress のテーマである fukasawa は、シンプルなテーマで使いやすくコードも読みやいため色々と参考にさせて頂いています。 今回は、子テーマ作成の例で使用させて頂きました。 このようなテーマを提供して頂いている作者に感謝すると同時に、この場を借りてお礼申し上げます。

(2) カスタマイズ部分を特定

テーマファイル内のテンプレートファイルやスタイルシートを解析してカスタマイズする部分を特定します。 今回のカスタマイズ例では、fukasawqa の特徴的な表示である、左上のサイト名を画像に変更します。 (注:fukasawa には、この部分にイメージを設定する機能が用意されていますが、ここでは、子テーマを使用して実現します)

WordPressのカスタマイズ

(3) サムネイル画像(screenshot.png)を作成

テーマ用のサムネール画像を作成します。

ファイル名
screenshot.png
ファイル形式
PNG
サイズ
横 880px x 縦 660px
テーマ用サムネール画像

(4) 子テーマ用フォルダを作成と必要ファイルのコピー

子テーマ用のフォルダ(fukasawa-child)を作成し必要ファイルをコピーします。

  • fukasawa-child
    • images
      • yamada.png
    • screenshot.png(サムネイル画像ファイル)

(5) テーマ情報(style.css)の作成

テーマ情報ファイル(style.css)を作成します。必要に応じてテーマ情報の下に CSS を記述することも可能です。

CSS(sytyle.css)


/*
Theme Name: fukasawa-child
Description: Fukasawaの子テーマでロゴがイラスト表示になります
Author: 山田太郎
Version: 1
Template: fukasawa
*/

body {
	background: pink;
}

(6) テーマの機能(functions.php)の作成

テーマの機能(functions.php)を作成します。 下記の記述を行うことで親テーマの style.css を読み込み後に子テーマの style.css の読み込みが行われます。

PHP(functions.php)


<?php

// スタイルシートの組み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	// 生成するページにスタイルシート定義を追加
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

(7) 変更を行うテンプレートファイルの修正

変更を行うテンプレートファイルを親テーマから取得して必要部分を修正します。 今回のカスタマイズでは、テーマ共通ヘッダーテンプレート(header.php)を修正します。

PHP(header.php)


<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head profile="http://gmpg.org/xfn/11">
		
		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
		 
		<?php wp_head(); ?>
	
	</head>
	
	<body <?php body_class(); ?>>

		<?php 
		if ( function_exists( 'wp_body_open' ) ) {
			wp_body_open(); 
		}
		?>

		<a class="skip-link button" href="#site-content"><?php _e( 'Skip to the content', 'fukasawa' ); ?></a>
	
		<div class="mobile-navigation">
	
			<ul class="mobile-menu">
						
				<?php 
				if ( has_nav_menu( 'primary' ) ) {
																	
					$primary_nav = wp_nav_menu( array( 
						'container' 		=> '', 
						'echo'				=> false,
						'items_wrap' 		=> '%3$s',
						'theme_location' 	=> 'primary'
					) );

					echo $primary_nav;

				} else {

					$pages_list = wp_list_pages( array(
						'container' => '',
						'echo'		=> false,
						'title_li' 	=> ''
					) );

					echo $pages_list;
					
				} 
				?>
				
			 </ul>
		 
		</div><!-- .mobile-navigation -->
	
		<div class="sidebar">
		
			<?php 

			// Use a h1 element on the front page and/or the index of the blog, and a div elsewhere
			if ( is_front_page() || is_home() ) {
				$blog_title_elem = 'h1';
			} else {
				$blog_title_elem = 'div';
			}

			$custom_logo_id 	= get_theme_mod( 'custom_logo' );
			$legacy_logo_url 	= get_theme_mod( 'fukasawa_logo' );

			if ( $custom_logo_id || $legacy_logo_url ) : 

				$custom_logo_url = $custom_logo_id ? wp_get_attachment_image_url( $custom_logo_id, 'full' ) : $legacy_logo_url;
			
				?>
			
		        <<?php echo $blog_title_elem; ?> class="blog-logo">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
		        		<img src="<?php echo esc_url( $custom_logo_url ); ?>" />
					</a>
					<span class="screen-reader-text"><?php echo get_bloginfo( 'title' ); ?></span>
		        </<?php echo $blog_title_elem; ?>>
		
			<?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>
		
				<<?php echo $blog_title_elem; ?> class="blog-title">
<?php /* サイト情報を出力している部分を固定の画像を出力するように変更します。 */ ?>
<?php /* ファイルを指定する場合は、echo get_stylesheet_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<?php /* 通常のテーマでは、絶対パスにするために get_template_directory_uri() を使用しますが子テーマの場合は、get_stylesheet_directory_uri() を使用します。 */ ?>
<!--				<a href="<?php echo esc_url( home_url() ); ?>" rel="home"><?php echo get_bloginfo( 'title' ); ?></a>	-->
					<a href="<?php echo esc_url( home_url() ); ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/yamada.png" alt="山田太郎"></a>

				</<?php echo $blog_title_elem; ?>>
				
			<?php endif; ?>
			
			<button type="button" class="nav-toggle">
			
				<div class="bars">
					<div class="bar"></div>
					<div class="bar"></div>
					<div class="bar"></div>
				</div>
				
				<p>
					<span class="menu"><?php _e( 'Menu', 'fukasawa' ); ?></span>
					<span class="close"><?php _e( 'Close', 'fukasawa' ); ?></span>
				</p>
			
			</button>
			
			<ul class="main-menu">
				<?php echo isset( $primary_nav ) ? $primary_nav : $pages_list; ?>
			</ul><!-- .main-menu -->

			<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
				<div class="widgets">
					<?php dynamic_sidebar( 'sidebar' ); ?>
				</div><!-- .widgets -->
			<?php endif; ?>

			<div class="credits">
				<p>&copy; <?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>.</p>
				<p><?php _e( 'Powered by', 'fukasawa' ); ?> <a href="https://www.wordpress.org">WordPress</a>.</p>
				<p><?php _e( 'Theme by', 'fukasawa' ); ?> <a href="https://www.andersnoren.se">Anders Nor&eacute;n</a>.</p>
			</div><!-- .credits -->
							
		</div><!-- .sidebar -->
	
		<main class="wrapper" id="site-content">

(8) テーマファイル(zip ファイル)の作成

作成したファイル群を使用して子テーマファイル(fukasawa-child.zip)を作成します。

  • fukasawa-child.zip
    • fukasawa-child
      • images
        • yamada.png
      • functions.php
      • header.php
      • screenshot.png
      • style.css

(9) WordPress ダッシュボードでテーマのインストールと有効化

WordPress のダッシュボードにログインして親テーマ(fukasawa)と作成した子テーマ(fukasawa-child.zip)のインストールします。 テーマの有効化は、子テーマ(fukasawa-child)を有効化します。

(10) サイトの表示確認

WordPress サイトを表示して表示内容を確認します。

A4.7 テーマ作成で使用する部品

A4.7.1 テーマ作成で使用する部品一覧

テーマ作成で使用する部品(関数など)について概略を記述します。 テーマ作成で使用する関数などは、多くのものが定義されていますが、ここでは本章で説明するサンプルテーマが使用しているものを中心に説明します。 これ以外にも多くの関数が定義されていますので関連図書や関連サイトを一読することをお薦めします。

  • $text = __( $text, $domain )(アンダースコアを 2 個)

    テキストを翻訳し結果を返却します。
    引数 1($text)に翻訳するテキストを指定します。
    引数 2($domain)に翻訳された文字列を取得するための一意の識別子を指定します。省略可能で初期値は 'default' です。
    返却値($text)は、翻訳済みのテキストが返却されます。

    使用例(PHP)

    
    $text = __( 'Some text to translate and display.' );
    
  • _e( $text, $domain )(アンダースコアを 1 個と 'e')

    テキストを翻訳し結果を表示します。
    引数 1($text)に翻訳するテキストを指定します。
    引数 2($domain)に翻訳された文字列を取得するための一意の識別子を指定します。省略可能で初期値は 'default' です。
    返却値は、ありません。

    使用例(PHP)

    
    _e( 'Some text to translate and display.' );
    
  • add_action( $hook, $function_to_add, $priority, $accepted_args )

    特定のアクションに関数をフックします。
    引数 1($hook)は、フックするアクション名を指定します。 色々なアクション名がありますが、本章で使用しているものは、以下の通りです。
    after_setup_theme
    テーマが使用する機能の初期設定をします。
    wp_enqueue_scripts
    スクリプトまたはスタイルの組み込みをします。
    引数 2($function_to_add)は、フックする関数名を指定します。
    引数 3($priority)は、フックする関数を実行する優先度を指定します。省略可能で初期値は、10 です。
    引数 4($accepted_args)は、フックする関数が受け入れられる引数の数を指定します。省略可能で初期値は、1 です。
    返却値は、ありません。

    使用例(PHP)

    
    function theme_simple_setup() {
    	// セットアップ時の処理
    }
    add_action( 'after_setup_theme', 'theme_simple_setup' );
    
  • add_editor_style( $stylesheet )

    自分のスタイルシートファイルを TinyMCE ビジュアルエディターへ関連付けます。
    引数 1($stylesheet)は、現在のテーマディレクトリから相対パスで指定されたスタイルシートファイルまたは複数のスタイルシートファイルへのリンクを含む配列を指定します。
    返却値は、ありません。

    使用例(PHP)

    
    add_editor_style( 'css/style.css' );
    
  • add_theme_support( $feature, $arguments )

    テーマやプラグインが特定のテーマ機能をサポートすることを許可します。
    引数 1($feature)は、追加する機能名を指定します。代表的な機能名は、以下の通りです。
    post-formats
    投稿フォーマットをサポートします。
    post-thumbnails
    投稿サムネイルをサポートします。
    custom-background
    カスタム背景をサポートします。
    custom-header
    カスタムヘッダーをサポートします。
    automatic-feed-links
    header での、投稿とコメントの RSS フィードのリンクを有効にします。
    html5
    HTML5マークアップの使用を許可します。
    title-tag
    ドキュメントのタイトルを管理するためのプラグインやテーマを可能にします。
    引数 2($arguments)は、オプション指定であり指定する機能名により異なります。
    post-formats
    'aside'、'gallery'、'image'、'link'、'quote'、'status'、'video'、'audio'、'chat'
    post-thumbnails
    'post'、'page'、'attachment'、'revision'、'nav_menu_item'
    custom-background
    'default-color'、'default-image'、'default-repeat'、'default-position-x'、'default-attachment'、'wp-head-callback'、'admin-head-callback'、'admin-preview-callback'
    custom-header
    'default-image'、'random-default'、'width''height'、'flex-height'、'flex-width'、'default-text-color'、'header-text'、'uploads'、'wp-head-callback'、'admin-head-callback'、'admin-preview-callback'
    automatic-feed-links
    (なし)
    html5
    'comment-list'、'comment-form'、'search-form'、'gallery'、'caption'
    title-tag
    (なし)
    返却値は、ありません。

    使用例(PHP)

    
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-formats',
    	array(
    		'link',
    		'aside',
    		'gallery',
    		'image',
    		'quote',
    		'status',
    	)
    );
    add_theme_support( 'post-thumbnails' );
    
  • bloginfo( $show )

    サイト情報を表示します。
    引数 1($show)は、表示するキーワード名を指定します。省略可能で初期値は 'name' です。代表的なキーワード名は、以下の通りです。
    name
    「サイトのタイトル」を表示します。
    description
    「キャッチフレーズ」を表示します。
    wpurl
    「WordPress アドレス(URL)」を表示します。
    url
    「サイトアドレス(URL)」を表示します。
    admin_email
    「管理者メールアドレス」を表示します。
    charset
    使用する文字コードを表示します。(現版では、常に 'UTF-8' が表示されます)
    version
    使用中の WordPress バージョンを表示します。
    html_type
    HTML ページの Content-Type(デフォルトは 'text/html')を表示します。
    language
    WordPress の言語を表示します。
    stylesheet_url
    プライマリーな CSS ファイルの URL を表示します。(get_stylesheet_uri() 関数の使用を推奨)
    stylesheet_directory
    アクティブなテーマディレクトリーの URL を表示します。(get_stylesheet_directory_uri() 関数の使用を推奨)
    返却値は、ありません。

    使用例(PHP)

    
    bloginfo( 'name' )
    
  • body_class( $class )

    body タグ用にテンプレート種類を示すクラス名を表示します。
    引数 1($class)は、標準値に追加したいクラス名を指定します。複数のクラスを指定する場合は、スペースで区切って指定します。省略可能で初期値は、null です。
    返却値は、ありません。

    使用例(PHP)

    
    body_class();
    
  • $text = date( $format, $timestamp )(PHP 関数)

    ローカル日付/時刻を指定フォーマットに書式化して返却します。
    引数 1($format)は、書式化するフォーマットを指定します。フォーマットに使用する主要な文字は、以下の通りです。
    返却値($text)は、整形済みテキストを返却します。
    Y
    年(4 桁)
    y
    年(2 桁)
    m
    月(先頭 0 あり)
    n
    月(先頭 0 なし)
    F
    月(フルスペル)
    M
    月(3 文字の省略形)
    d
    日(先頭 0 あり)
    j
    日(先頭 0 なし)
    s
    日(英語型式のサフィックス付き)
    l
    曜日(フルスペル)
    D
    曜日(3 文字の省略形)
    a
    'am' または 'pm'
    A
    'AM' または 'PM'
    g
    時(12時間単位/先頭 0 なし)
    h
    時(12時間単位/先頭 0 あり)
    G
    時(24時間単位/先頭 0 なし)
    H
    時(24時間単位/先頭 0 あり)
    i
    分(2 桁)
    s
    秒(2 桁)
    引数 2($timestamp)は、タイムスタンプを指定します。省略可能で初期値は、現在の日付/時刻になります。
    返却値($text)は、編集済みテキストを返却します。

    使用例(PHP)

    
    $text = date( 'Y年m月d日 G:i' );
    
  • esc_attr_e( $text, $textdomain )

    HTML 特殊文字をエンコードして表示します。
    引数 1($text)は、エンコードする文字列を指定します。
    引数 2($textdomain)は、翻訳テキストを読み込むドメインを指定します。省略可能で省略時は、default です。
    返却値は、ありません。

    使用例(PHP)

    
    esc_attr_e( '<h1>タイトル</h1>' );
    
  • $out_text = esc_html( $text )

    HTML のエスケープ処理して結果を返却します。
    引数 1($text)にエスケープするテキストを指定します。
    返却値($out_text)は、エスケープしたテキストを返却します。

    使用例(PHP)

    
    $out_text = esc_html( '<h1>title</h1>' );
    
  • $out_text = esc_html__( $text, $textdomain )

    HTML のエスケープ処理した翻訳テキストを返却します。
    引数 1($text)に翻訳するテキストを指定します。
    引数 2($textdomain)に翻訳された文字列を取得するための一意の識別子を指定します。省略可能で初期値は 'default' です。
    返却値($out_text)は、翻訳したテキストを返却します。

    使用例(PHP)

    
    $out_text = esc_html__( '<h1>title</h1>' );
    
  • esc_html_e( $text, $textdomain )

    HTML のエスケープ処理した翻訳テキストを表示します。
    引数 1($text)に翻訳するテキストを指定します。
    引数 2($textdomain)に翻訳された文字列を取得するための一意の識別子を指定します。省略可能で初期値は 'default' です。
    返却値は、ありません。

    使用例(PHP)

    
    esc_html_e( ''<h1>title</h1>'' );
    
  • $url = esc_url( $url, $protocols, $_context )

    テキストや属性などの URL を無害化し結果を返却します。無効プロトコルや無効なキャラクタ、有害なキャラクタを除外します。
    引数 1($url)は、無害化する URL を指定します。
    引数 2($protocols)は、受け入れ可能なプロトコル名の配列を指定します。省略可能で初期値は null です。
    引数 3($_context)は、URL をどのように使用するかを指定します。省略可能で初期値は 'display' です。
    返却値($url)は、編集済みの URL を返却します。

    使用例(PHP)

    
    $url = echo esc_url( home_url( '/' ) );
    
  • $bool = function_exists( $function )(php 関数)

    指定した関数が定義されているかを返却します。
    引数 1($function)検査する関数名を指定します。
    返却値($bool)は、指定した関数が定義されている場合は、true そうでない場合は、false を返却します。

    使用例(PHP)

    
    if ( function_exists( 'wp_xxx' ) ) {
    	wp_xxx();
    }
    
  • $bloginfo = get_bloginfo( $show, $filter )

    サイト情報を返却します。
    引数 1($show)は、取得するキーワード名を指定します。省略可能で初期値は 'name' です。キーワード名は、bloginfo を参照してください。
    引数 2($filter)は、適用するフィルターを指定します。'raw' を指定すると取得した値をそのまま返却し 'display' を指定すると wptexturize() 関数で処理後に返却します。省略可能で初期値は、'raw' です。
    返却値($bloginfo)は、指定したキーワード名のサイト情報を返却します。

    使用例(PHP)

    
    $bloginfo = get_bloginfo( 'name' );
    
  • $url = get_category_link( $category_id )

    指定したカテゴリー ID のアーカイブページへの URL を返却します。
    引数 1($category_id)は、カテゴリー ID を指定します。
    返却値($url)は、アーカイブページの URL を返却します。

    使用例(PHP)

    
    $url = get_category_link( get_cat_ID( 'カテゴリー名' ) );
    
  • get_footer( $name )

    フッダーテンプレート(footer.php)を読み込みます。
    引数 1 は($name)読み込むテンプレート名の選択文字を指定します。選択文字(name)を指定するとテンプレート 'footer-{name}.php' を読み込みます。省略可能で初期値は 'footer.php' です。
    返却値は、ありません。

    使用例(PHP)

    
    <?php get_footer(); ?>
    
  • get_header( $name )

    ヘッダーテンプレート(header.php)を読み込みます。
    引数 1($name)は、読み込むテンプレート名の選択文字を指定します。選択文字(name)を指定するとテンプレート 'header-{name}.php' を読み込みます。省略可能で初期値は 'header.php' です。
    返却値は、ありません。

    使用例(PHP)

    
    <?php get_header(); ?>
    
  • $permalink = get_permalink( $id, $leavename )

    投稿または固定ページのパーマリンクを返却します。
    引数 1($id)は、投稿または固定ページの ID あるいは、投稿オブジェクトを指定します。ループ内で使用する場合は省略可能で初期値は表示中の ID になります。
    引数 2($leavename)は、投稿名あるいは固定ページ名を保持するかどうかを指定します。true の場合は、実際の URI ではなく構造的なリンクを返却します。省略可能で初期値は、false です。実際の URL の例を「http://www.sample.com/post-sample/」だとすると構造的なリンクの例は「http://www.sample.com/%postname%」です。
    返却値($permalink)は、投稿または固定ページのパーマリンクを返却します。

    使用例(PHP)

    
    $permalink = esc_url( get_permalink() );
    
  • $format = get_post_format( $post_id )

    投稿記事の投稿フォーマットを返却します。 通常は、ループ内で呼び出されますが投稿 ID が指定されていればどこでも使用できます。
    引数 1($post_id)は、投稿 ID を指定します。省略時は、現在の投稿が使用されます。
    返却値($format)は、投稿フォーマットを返却します。

    使用例(PHP)

    
    $format = get_post_format();
    
  • $path = get_stylesheet_directory()

    現在のテーマまたは子テーマのスタイルシートディレクトリのパスを返却します。
    引数は、ありません。
    返却値($path)は、現在のテーマまたは子テーマのスタイルシートディレクトリのパスを返却します。最後にスラッシュは付きません。

    使用例(PHP)

    
    $path = get_stylesheet_directory();
    
  • $uri = get_stylesheet_directory_uri()

    現在のテーマまたは子テーマのスタイルシートディレクトリの URI を返却します。
    引数は、ありません。
    返却値($uri)は、現在のテーマまたは子テーマのスタイルシートディレクトリの URI を返却します。最後にスラッシュは付きません。

    使用例(PHP)

    
    $uri = get_stylesheet_directory_uri();
    
  • $path = get_template_directory()

    現在のテーマのディレクトリへの絶対パスを返却します。
    子テーマを使用している場合は、親テーマの絶対パスが返却されます。(functions.php 内で使用している場合を除く)
    子テーマの絶対パスを取得する場合は、get_stylesheet_directory を使用します。
    引数は、ありません。
    返却値($path)は、現在のテーマのディレクトリへの絶対パスを返却します。最後にスラッシュは付きません。

    使用例(PHP)

    
    $path = get_template_directory();
    
  • $uri = get_template_directory_uri()

    現在のテーマのディレクトリへの URI を返却します。
    子テーマを使用している場合は、親テーマの URI が返却されます。(functions.php 内で使用している場合を除く)
    子テーマの絶対パスを取得する場合は、get_stylesheet_directory_uri を使用します。
    引数は、ありません。
    返却値($uri)は、現在のテーマのディレクトリへの URI を返却します。最後にスラッシュは付きません。

    使用例(PHP)

    
    $uri = get_template_directory_uri();
    
  • $author = get_the_author()

    投稿の投稿者名を返却します。ループの中で使用します。
    引数は、ありません。
    返却値($author)は、投稿者名を返却します。

    使用例(PHP)

    
    $author = get_the_author();
    
  • $categories = get_the_category( $id )

    カテゴリーのオブジェクト配列を返却します。ループの中でも外でも使えますがループの外で使う場合、ID が必要になります。
    引数 1($id)は、カテゴリー ID を指定します。省略可能で初期値は、現在の投稿に付与されているカテゴリーです。
    返却値($categories)は、カテゴリーのオブジェクト配列を返却します。返却されるカテゴリーのオブジェクト配列の項目($item)には、以下の要素が格納されています。
    term_id
    カテゴリー ID が格納されます。
    cat_ID
    カテゴリー ID(term_id と同じ値)が格納されます。
    name
    カテゴリー名が格納されます。
    slug
    スラッグが格納されます。
    description
    カテゴリーの説明が格納されます。
    parent
    親のカテゴリー ID が格納されます。
    count
    同じカテゴリーが付いている投稿の数が格納されます。

    使用例(PHP)

    
    $categories = get_the_category();
    if ( $categories ) {
    	foreach ( $categories as $item ) {
    		// 項目($item)の処理
    		$name = $item->name;		// カテゴリー名の取得
    		$count = $item->count;		// 投稿数の取得
    	}
    }
    
  • $date = get_the_date( $format, $post_id )

    投稿 ID を元に、投稿の日付を返却します。ループの中でも外でも使えますがループの外で使う場合、ID が必要になります。
    引数 1($format)は、日付のフォーマットを指定します。省略可能で初期値は、日付フォーマットの設定値になります。
    日付フォーマットに使用する主要な文字は、date 関数を参照してください。
    引数 2($post_id)は、投稿の ID または、タイトルを特定するオブジェクトを指定します。省略可能で初期値は、null(現在の投稿)です。
    返却値($date)は、フォーマット済みの投稿の日付を返却します。

    使用例(PHP)

    
    $date = get_the_date( 'Y年m月d日 G:i' );
    
  • $excerpt = get_the_excerpt()

    現在の投稿の概要を返却します。ループのなかでのみ使用することができます。
    引数は、ありません。
    返却値($excerpt)は、投稿の概要に '[…]' を付けた文字列を返却します。

    使用例(PHP)

    
    $excerpt = get_the_excerpt();
    
  • $postid = get_the_ID()

    現在の投稿の ID(数値)を返却します。ループのなかでのみ使用することができます。
    引数は、ありません。
    返却値($postid)は、現在の投稿の ID(数値)を返却します。

    使用例(PHP)

    
    $postid = get_the_ID();
    
  • $url = get_the_post_thumbnail_url( $post_id, $image_size )

    投稿 ID を元に、アイキャッチ画像の URL を返却します。ループの中でも外でも使えますがループの外で使う場合、ID が必要になります。
    引数 1 は、投稿の ID または、タイトルを特定するオブジェクトを指定します。省略可能で初期値は、null(現在の投稿)です。
    引数 2 は、画像のサイズを示す文字列か高さと幅を格納した配列を指定します。'post-thumbnail'、'thumbnail'、'medium'、'large'、'full' を指定します。省略可能で初期値は、'post-thumbnail' です。
    返却値($url)は、アイキャッチ画像の URL を返却します。

    使用例(PHP)

    
    $url = get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' );
    
  • $pagination = get_the_posts_pagination( $args )

    投稿の前と次のページへリンクするページ番号のセット(HTML)を返却します。投稿リスト(index.php など)やアーカイブ(archive.php など)で使われます。
    引数 1($args)は、連想配列で表示形式のオプションを指定します。省略可能で初期値は、各オプションの初期値が使用されます。表示形式のオプションは、以下の値を指定します。
    返却値($pagination)は、投稿の前と次のページへリンクするページ番号のセット(HTML)を返却します。
    mid_size
    現在のページの左右に表示するページ番号の数を指定します。初期値は、1 です。
    prev_text
    投稿の前を示すリンクテキストを指定します。初期値は 'Previous' です。
    next_text
    投稿の次を示すリンクテキストを指定します。初期値は 'Next' です。
    screen_reader_text
    スクリーンリーダー用テキストを指定します。初期値は 'Posts navigation' です。

    使用例(PHP)

    
    $pagination = get_the_posts_pagination( array(
    	'mid_size'  => 2,					// 現在のページの左右に表示するページ番号の数
    	'prev_text' => __('Previous'),		// 前のセットへのリンクテキスト
    	'next_text' => __('Next')			// 次のセットへのリンクテキスト
    ) );
    

    作成例(HTML)

    
    <nav class="navigation pagination" aria-label="投稿">
    	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
    	<div class="nav-links"><a class="prev page-numbers" href="http://test.local/">前</a>
    		<a class="page-numbers" href="http://test.local/">1</a>
    		<span aria-current="page" class="page-numbers current">2</span>
    		<a class="page-numbers" href="http://test.local/page/3/">3</a>
    		<a class="page-numbers" href="http://test.local/page/4/">4</a>
    		<a class="next page-numbers" href="http://test.local/page/3/">次</a>
    	</div>
    </nav>
    
  • $time = get_the_time( $format, $post )

    投稿 ID を元に、投稿の時刻を PHP で使えるように返却します。ループの中でも外でも使えますがループの外で使う場合、ID が必要になります。
    引数 1($format)は、時刻のフォーマットを指定します。省略可能で初期値は、時刻フォーマットの設定値になります。
    時刻フォーマットに使用する主要な文字は、date 関数を参照してください。
    引数 2($post)は、投稿の ID または、タイトルを特定するオブジェクトを指定します。省略可能で初期値は、null(現在の投稿)です。
    返却値($time)は、投稿の時刻を PHP で使えるような値で返却します。

    使用例(PHP)

    
    $time = get_the_time( G:i' );
    
  • $title = get_the_title( $id )

    投稿 ID を元に、投稿のタイトルを返却します。ループの中でも外でも使えますがループの外で使う場合、ID が必要になります。
    引数 1($id)は、投稿の ID または、タイトルを特定するオブジェクトを指定します。省略可能で初期値は、null(現在の投稿)です。
    返却値($title)は、投稿のタイトルを返却します。

    使用例(PHP)

    
    $title = get_the_title();
    
  • $mod = get_theme_mod( $name, $default )

    テーマ設定値を返却します。
    引数 1($name)は、テーマ設定のキー名を指定します。省略できません。
    引数 2($default)は、キー名が存在しない場合に返却する値を指定します。省略可能で初期値は、false です。
    返却値($mod)は、テーマ設定値を返却します。

    使用例(PHP)

    
    $background_color = get_theme_mod( 'background_color' );
    
  • get_template_part( $slug, $name )

    テンプレートパーツを読み込みます。コードの再利用や子テーマでコードの置き換えが容易になります。
    引数1($slug)は、一般テンプレート(slug)のスラッグ名を指定し、一般テンプレート({slug}.php)を読み込みます。
    引数2($name)は、特定テンプレート(name)の名前を指定し、特定テンプレート({slug}-{name}.php)を読み込みます。省略可能です。
    返却値は、ありません。

    使用例(PHP)

    
    get_template_part( 'loop', 'index' );
    
  • $bool = has_custom_logo( $blog_id )

    カスタムロゴが設定されているか否かを返却します。 引数 1($blog_id)は、ブログ ID を指定します。省略可能で初期値は、0 です。
    返却値($bool)は、カスタムロゴが設定されていれば true そうでなければ false を返却します。

    使用例(PHP)

    
    $bool = has_custom_logo();
    
  • $bool = has_nav_menu( $location )

    指定位置にメニューが割り当てられているかを返却します。
    引数 1($location)は、位置名を指定します。
    返却値($bool)は、指定位置にメニューが割り当てられていれば true そうでなければ false を返却します。

    使用例(PHP)

    
    $bool = has_nav_menu( 'primary' );
    
  • $bool = has_post_thumbnail( $post_id )

    アイキャッチ画像が登録されているかをチェックし結果を返却します。
    引数 1($post_id)は、投稿 ID を指定します。省略可能で初期値は、現在の投稿です。
    返却値($bool)は、アイキャッチ画像が登録されていれば true そうでなければ false を返却します。

    使用例(PHP)

    
    $bool = has_post_thumbnail();
    
  • $bool = have_posts()

    現在の WordPress クエリにループできる結果があるかどうかをチェックします。 引数は、ありません。
    返却値($bool)は、ループできる結果がある場合は、true そうでなければ false を返却します。

    使用例(PHP)

    
    if ( have_posts() ) {				// 処理するクエリがあるかのチェック
    	while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
    		the_post();					// 処理するクエリ情報の設定
    		・・・						// 個別クエリの処理
    	}
    }
    
  • $url = home_url( $path, $scheme )

    現在のホーム URL を返却します。
    引数 1($path)は、ホーム URL からの相対パスを指定します。省略可能で初期値はありません。
    引数 2($scheme)は、ホーム URL に使うスキームを指定します。'http'、'https'、'relative'(相対パス)が指定可能です。省略可能で初期値は、null です。
    返却値($url)は、現在のホーム URL を返却します。

    使用例(PHP)

    
    $url = home_url( '/' );
    
  • $bool = is_category( $category )

    カテゴリーアーカイブページを表示中かどうかをチェックして結果を返却します。
    引数 1($category)は、カテゴリー ID、タイトル、スラッグ、またはそれらの配列を指定します。省略可能で初期値は、ありません
    。 返却値($bool)は、カテゴリーアーカイブページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_category();
    
  • $bool = is_date()

    日付に関連するアーカイブページを表示中かどうかをチェックして結果を返却します。
    引数は、ありません。
    返却値($bool)は、日付に関連するアーカイブページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_date();
    
  • $bool = is_front_page()

    フロントページを表示中かどうかをチェックして結果を返却します。
    引数は、ありません。
    返却値($bool)は、フロントページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_front_page();
    
  • $bool = is_page()

    固定ページを表示中かどうかをチェックして結果を返却します。
    引数 1 は、固定ページの ID、タイトル、スラッグ、またはそれらの配列を指定します。省略可能で初期値は、ありません。
    返却値($bool)は、固定ページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_page();
    
  • $bool = is_paged()

    表示中のページが複数ページにわたり、現在のページ番号が 1 より大きいかどうかを返却します。
    引数は、ありません。
    返却値($bool)は、現在のページ番号が 1 より大きい場合は、true を返却し、そうでなければ false を返却します。

    使用例(PHP)

    
    $bool = is_paged();
    
  • $bool = is_single( $post )

    固定ページを除く、個別の投稿ページを表示中かどうかをチェックして結果を返却します。 引数 1($post)は、投稿 ID を指定します。省略可能で初期値は、ありません。
    返却値($bool)は、固定ページを除く、個別の投稿ページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_single();
    
  • $bool = is_singular( $post_types )

    個別の投稿ページ(投稿または固定ページ)を表示中かどうかをチェックし結果を返却します。 投稿ページをチェックする場合は、is_single を使用し、固定ページをチェックする場合は、is_page を使用します。
    引数 1($post_types)は、投稿タイプを指定します。省略可能で初期値は、ありません。
    返却値($bool)は、個別の投稿ページ(投稿または固定ページ)が表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_singular();
    
  • $bool = is_tag( $tag )

    投稿タグアーカイブページを表示中かどうかをチェックして結果を返却します。
    引数 1 は、タグ ID、名前、スラッグ、またはそれらの配列を指定します。省略可能で初期値は、ありません。
    返却値($bool)は、投稿タグアーカイブページが表示中の場合は、true それ以外の場合は、false を返却します。

    使用例(PHP)

    
    $bool = is_tag();
    
  • language_attributes( $doctype )

    <html> タグ用に言語属性を表示します。
    引数 1($doctype)は、HTML ドキュメントの種類として 'xhtml' または 'html' を指定します。省略可能で初期値は、'html' です。
    返却値は、ありません。

    使用例(PHP)

    
    <html <?php language_attributes(); ?>>
    
  • $bool = load_theme_textdomain( $domain, $path )

    テーマ翻訳ファイルを読み込みます。
    引数 1($domain)は、テキストドメイン(翻訳ファイルを識別するために必要な個別識別子)を指定します。
    引数 2($path)は、翻訳ファイル(.mo)の存在するディレクトリを指定します。最後にスラッシュは必要ありません。省略可能で初期値は、false です。
    返却値($bool)は、読み込みが成功した時は、true を、失敗した時は、false を返却します。

    使用例(PHP)

    
    load_theme_textdomain('my_theme', get_template_directory() . '/languages');
    
  • next_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy )

    現在の投稿から見て日付順でひとつ次の投稿のリンクを表示します。必ずループの中で使用してください。
    引数 1($format)は、リンク文字列のフォーマットを指定します。文字列内に '%link' を指定するとアンカータグに置き換えられます。省略可能で初期値は、'&laquo; %link' です。
    引数 2($link)は、表示するリンク文字を指定します。省略可能で初期値は、'%title'(次の投稿タイトル)です。
    引数 3($in_same_term)は、現在の投稿と同じタクソノミー・ターム(例:カテゴリー)の投稿に限定するかどうかを指定します。 true を指定するとタクソノミー・タームがついた投稿だけを表示します。省略可能で初期値は、false です。
    引数 4($excluded_terms)は、表示させたくない投稿のターム ID(例:カテゴリー ID)を指定します。複数のタームを除外するには配列にするかカンマで区切って指定してください。省略可能で初期値はありません。
    引数 5($taxonomy)は、タクソノミーを指定します。引数 3 が true の場合に有効です。省略可能で初期値は 'category' です。
    返却値は、ありません。

    使用例(PHP)

    
    next_post_link();
    
  • PHP_EOL(PHP 定数)

    改行を示す定数です。
    "\n" と同じ意味ですが使用しているシステムに合わせた改行コードが定義されています。

    使用例(PHP)

    
    echo 'メッセージ' . PHP_EOL;
    
  • previous_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy )

    現在の投稿から見て日付順でひとつ前の投稿のリンクを表示します。必ずループの中で使用してください。
    引数 1($format)は、リンク文字列のフォーマットを指定します。文字列内に '%link' を指定するとアンカータグに置き換えられます。省略可能で初期値は、'&laquo; %link' です。
    引数 2($link)は、表示するリンク文字を指定します。省略可能で初期値は、'%title'(ひとつ前の投稿タイトル)です。
    引数 3($in_same_term)は、現在の投稿と同じタクソノミー・ターム(例:カテゴリー)の投稿に限定するかどうかを指定します。 true を指定するとタクソノミー・タームがついた投稿だけを表示します。省略可能で初期値は、false です。
    引数 4($excluded_terms)は、表示させたくない投稿のターム ID(例:カテゴリー ID)を指定します。複数のタームを除外するには配列にするかカンマで区切って指定してください。省略可能で初期値はありません。
    引数 5($taxonomy)は、タクソノミーを指定します。引数 3 が true の場合に有効です。省略可能で初期値は 'category' です。
    返却値は、ありません。

    使用例(PHP)

    
    previous_post_link();
    
  • register_nav_menu( $location, $description )

    カスタムメニューエディタへ登録します
    引数 1($location)は、メニュー位置の識別子を指定します。
    引数 2($description)は、メニューの説明(ダッシュボードでメニューを識別するのに使用)を指定します。
    返却値は、ありません。

    使用例(PHP)

    
    register_nav_menu( 'primary', __( 'Primary menu' ) );
    
  • register_nav_menus( $locations )

    複数のナビゲーションメニューを登録します。
    引数 1($locations)は、メニューの位置のスラッグ(キー)と、説明(一致している値)の連想配列を指定します。
    返却値は、ありません。

    使用例(PHP)

    
    register_nav_menus( array(
    	'primary' => __( 'Primary menu' ),
    	'footer_menu' => __( 'Custom Footer Menu' ),
    ) );
    
  • set_post_thumbnail_size( $width, $height, $crop )

    アイキャッチ画像(投稿サムネイル)のデフォルトの大きさを指定します。アイキャッチ画像の別のサイズを登録するには add_image_size を使ってください。
    引数 1($width)は、アイキャッチ画像の幅をピクセル数で指定します。省略可能で初期値は、0 です。
    引数 2($height)は、アイキャッチ画像の高さをピクセル数で指定します。省略可能で初期値は、0 です。
    引数 3($crop)は、画像の切り出しを指定します。false を指定すると縦横比を維持して縮小し true を指定すると左右両方向または上下両方向で切り出しを行い、切り出し位置を指定(例えば、'array( 'top', 'left' )' )すると指定場所からの切り出しを行います。
    返却値は、ありません。

    使用例(PHP)

    
    set_post_thumbnail_size( 128, 128, false );
    
  • $title = single_cat_title( $prefix, $display )

    カテゴリーまたはタグアーカイブが表示中に使用するとページタイトル(カテゴリー名またはタグ名)を表示または返却します。
    引数 1($prefix)は、タイトルの前に出力するテキストを指定します。省略可能で初期値は、ありません。
    引数 2($display)は、タイトルを表示するか返却するかを指定します。true を指定すると表示し false を指定すると返却します。省略可能で初期値は、true です。
    返却値($title)は、$display が false の場合は、ページタイトルを返却し、$display が true の場合は、返却値がありません。

    使用例(PHP)

    
    single_cat_title( '', true );
    
  • $title = single_tag_title( $prefix, $display )

    タグアーカイブが表示中に使用するとタグタイトルを表示または返却します。
    引数 1($prefix)は、タイトルの前に出力するテキストを指定します。省略可能で初期値は、ありません。
    引数 2($display)は、タイトルを表示するか返却するかを指定します。true を指定すると表示し false を指定すると返却します。省略可能で初期値は、true です。
    返却値($title)は、$display が false の場合は、タグタイトルを返却し、$display が true の場合は、返却値がありません。

    使用例(PHP)

    
    single_tag_title( '', true );
    
  • site_icon_url( $size, $url, $blog_id )

    サイトアイコンの URL を表示します。
    引数 1($size)は、アイコンのサイズ(ピクセル数)を指定します。省略可能で初期値は、512 です。
    引数 2($url)は、サイトアイコンが未登録時の URL を指定します。省略可能で初期値は、空文字です。
    引数 3($blog_id)は、マルチサイト時のブログ ID を指定します。省略可能で初期値は、0 です。
    返却値は、ありません。

    使用例(PHP)

    
    site_icon_url();
    
  • $text = sprintf( %format, $arg1, $arg2, ・・・ )(PHP 関数)

    文字列を整形して結果を返却します。
    引数 1 は、整形フォーマットを指定します。整形フォーマットには、複数の記述型式がありますが良く使用される '%s’ は、記述した位置に 引数 2 以降で指定した値が設定されます。'%n$s'(n は数値)と記述すると使用する引数の位置を指定できます。例えば、'%2$s' と指定すと 引数 3 が使用されます。
    引数 2 以降は、整形フォーマットに割り当てる値を指定します。
    返却値($text)は、整形済みテキストを返却します。

    使用例(PHP)

    
    $text = sprintf( 'arg1=%1$s, arg2=%2$s', 'value1', 'value2' );
    
  • the_archive_title( $before, $after )

    クエリの内容に基づいてアーカイブのタイトルを表示します。
    引数 1($before)は、タイトルの直前に出力する文字列を指定します。省略可能です。
    引数 2($after)は、タイトルの直後に出力する文字列を指定します。省略可能です。
    返却値は、ありません。

    使用例(PHP)

    
    the_archive_title();
    
  • the_content( $more_link_text, $stripteaser )

    現在の投稿の本文を表示します。ループの中でのみ使用できます。
    引数 1($more_link_text)は、<!--more--> 以降を読むためのリンクとして表示する文字列を指定します。省略可能で初期値は '(more...)' です。
    引数 2($stripteaser)は、<!--more--> 以前の内容を隠すかどうかを指定します。true を指定すると <!--more--> 以降のみを表示するとこを指示し、false を指定すると本文をすべて表示します。省略可能で初期値は、false です。
    返却値は、ありません。

    使用例(PHP)

    
    the_content();
    
  • the_custom_logo( $blog_id )

    カスタムロゴを表示します。
    引数 1($blog_id)は、ブログ ID を指定します。省略可能で初期値は、0 です。
    返却値は、ありません。

    使用例(PHP)

    
    the_custom_logo();
    
  • the_post()

    処理する投稿を次の投稿へ進めます。
    引数は、ありません。
    返却値は、ありません。

    使用例(PHP)

    
    if ( have_posts() ) {				// 処理するクエリがあるかのチェック
    	while ( have_posts() ) {		// 処理するクエリが無くなるまでループ
    		the_post();					// 処理するクエリ情報の設定
    		・・・						// 個別クエリの処理
    	}
    }
    
  • the_post_navigation( $args )

    投稿ページ向けのナビゲーションを表示します。
    引数 1($args)は、パラメータを連想配列で以下の値を指定します。
    返却値は、ありません。
    prev_text
    前ページリンクの表記を指定します。省略時は、'%title' です。
    next_text
    次ページリンクの表記を指定します。省略時は、'%title' です。
    screen_reader_text
    ナビゲーションの見出しを指定します。 省略時は、__( 'Post navigation'」です。

    使用例(PHP)

    
    the_post_navigation( array(
    		'prev_text' => '前へ',
    		'next_text' => '次へ',
    	)
    );
    
  • the_post_thumbnail_url( $size )

    アイキャッチ画像の URL を表示します。必ずループの中で使用してください。ループの外では、get_the_thumbnail_url を使用します。
    引数 1($size)は、画像のサイズを示す文字列か高さと幅を格納した配列を指定します。'post-thumbnail'、'thumbnail'、'medium'、'large'、'full' を指定します。省略可能で初期値は、'post-thumbnail' です。
    返却値は、ありません。

    使用例(PHP)

    
    the_post_thumbnail_url();
    
  • the_posts_pagination( $args )

    投稿の前と次のページへリンクするページ番号のセットを表示します。投稿リスト(index.php など)やアーカイブ(archive.php など)で使われます。
    引数 1($args)は、表示形式のオプションを指定します。省略可能で初期値は、各オプションの初期値が使用されます。
    表示形式のオプションは、以下の値を指定します。
    mid_size
    現在のページの左右に表示するページ番号の数を指定します。初期値は、1 です。
    prev_text
    投稿の前を示すリンクテキストを指定します。初期値は 'Previous' です。
    next_text
    投稿の次を示すリンクテキストを指定します。初期値は 'Next' です。
    screen_reader_text
    スクリーンリーダー用テキストを指定します。初期値は 'Posts navigation' です。
    返却値は、ありません。

    使用例(PHP)

    
    the_posts_pagination( array(			// ページネーションを表示
    	'mid_size'  => 2,					// 現在のページの左右に表示するページ番号の数
    	'prev_text' => __('Previous'),		// 前のセットへのリンクテキスト
    	'next_text' => __('Next')			// 次のセットへのリンクテキスト
    ) );
    

    作成例(HTML)

    
    <nav class="navigation pagination" aria-label="投稿">
    	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
    	<div class="nav-links"><a class="prev page-numbers" href="http://test.local/">前</a>
    		<a class="page-numbers" href="http://test.local/">1</a>
    		<span aria-current="page" class="page-numbers current">2</span>
    		<a class="page-numbers" href="http://test.local/page/3/">3</a>
    		<a class="page-numbers" href="http://test.local/page/4/">4</a>
    		<a class="next page-numbers" href="http://test.local/page/3/">次</a>
    	</div>
    </nav>
    
  • $title = the_title( $before, $after, $echo )

    現在の投稿のタイトルを表示あるいは返します。必ずループの中で使用してください。ループの外では、get_the_title を使用します。
    引数 1($before)は、タイトルの前に置くテキストを指定します。省略可能で初期値は、ありません。
    引数 2($after)は、タイトルの後ろに置くテキストを指定します。省略可能で初期値は、ありません。
    引数 3($echo)は、タイトルを表示する時は、true を指定し、返却する時は false を指定します。省略可能で初期値は、true です。
    返却値($title)は、$echo が false の場合は、編集済みの投稿タイトルを返却し、true の場合は、返却値がありません。

    使用例(PHP)

    
    the_title();
    
  • wp_body_open()

    'wp_body_open' アクションをスタートさせます。テーマテンプレートファイル内の <body> タグ直後で使用します。
    引数は、ありません。
    返却値は、ありません。

    使用例(PHP)

    
    wp_body_open();
    

    フック例(PHP)

    
    function body_hook(){
    	echo '<!--wp_body_open action hook-->';
    }
    add_action('wp_body_open','body_hook');
    
  • wp_enqueue_style( $handle, $src, $deps, $ver, $media )

    生成するページにスタイルシート定義を追加します。
    引数 1($handle)は、スタイルシートのハンドルとして使われる名前を指定します。
    引数 2($src)は、スタイルシートの URL を指定します。省略可能で初期値は、空文字列です。
    引数 3($deps)は、追加するスタイルシートが依存する他のスタイルシートのハンドル配列を指定します。依存関係がない場合は、省略可能で初期値は、空の配列です。
    引数 4($ver)は、追加するスタイルシートのバージョン番号を指定する文字列を指定します。省略可能で初期値は、false です。
    引数 5($media)は、追加するスタイルシートが定義されているメディアを指定する文字列を指定します。省略可能で初期値は、'all' です。
    返却値は、ありません。

    使用例(PHP)

    
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
  • wp_footer()

    'wp_footer' アクションをスタートさせます。テーマテンプレートファイル内の </body> タグ直前で使用します。
    引数は、ありません。
    返却値は、ありません。

    使用例(PHP)

    
    wp_footer();
    

    フック例(PHP)

    
    function footer_hook(){
    	echo '<!--wp_footer action hook-->';
    }
    add_action('wp_footer','footer_hook');
    
  • wp_head()

    'wp_head' アクションをスタートさせます。テーマテンプレートファイル内の </head> タグ直前で使用します。
    引数は、ありません。
    返却値は、ありません。

    使用例(PHP)

    
    wp_head();
    

    フック例(PHP)

    
    function head_hook(){
    	echo '<!--wp_head action hook-->';
    }
    add_action('wp_head','head_hook');
    
  • $content = wp_kses_post( $data )

    コンテンツをサニタイズ(無害化)します。
    引数 1($data)は、フィルターする投稿コンテンツを指定します。
    返却値($content)は、フィルターされたコンテンツが返却されます。

    使用例(PHP)

    
    $content = wp_kses_post( '<h1>タイトル</h1>' );
    
  • $text = wp_link_pages( $args )

    ページ分割された投稿のページリンクを表示します。必ずループの中で使用してください。
    引数 1($args)は、ページリンク表示時のパラメータを連想配列で指定します。パラメータの指定値は、以下の通りです。
    before
    リンクの前のテキストを指定します。省略時は、'<p>Pages:' です。
    after
    リンクの後のテキストを指定します。省略時は、'</p>' です。
    link_before
    リンクテキストの前のテキストを指定します。省略時は、空文字列です。
    link_after
    リンクテキストの後のテキストを指定します。省略時は、空文字列です。
    next_or_number
    ページ番号を使用するかどうかを指定します。'number' を指定するとページ番号を表示し、'next' を指定すると前のページ/次のページで表示します。省略時は、'number' です。
    separator
    ページ番号の間のテキストを指定します。省略時は、スペース 1 文字です。
    nextpagelink
    次のページへのリンクのテキストを指定します。省略時は、'Next page' です。
    previouspagelink
    前のページへのリンクのテキストを指定します。省略時は、'Previous page' です。
    pagelink
    ページ番号のフォーマットを指定します。フォーマット内の '%' がページ番号に置き換えられます。省略時は、'%' です。
    echo
    trueを指定すると HTML を表示し false を指定すると HTML を返却値で返却します。省略時は true です。
    返却値($text)は、$echo に false が指定されていると HTML フォーマットされた値が返却され、true が指定されていると null を返却します。

    使用例(PHP)

    
    wp_link_pages( array(								// 改ページ(複数ページ)処理
    	'before'           => '<div class="blog-pages-pagination">',
    	'after'            => '</div>' . PHP_EOL,		// before/afterは、前後に付加する文字
    	'link_before'      => '',						// リンクテキストの前に負荷する文字
    	'link_after'       => '',						// リンクテキストの後ろに負荷する文字
    	'next_or_number'   => 'number',					// 'number':ページ番号、'next':前/次ページ
    	'separator'        => ' ',						// ページ番号間の文字
    	'nextpagelink'     => __( 'Next page' ),		// 次のページのリンクテキスト
    	'previouspagelink' => __( 'Previous page' ),	// 前のページのリンクテキスト
    	'pagelink'         => 'ページ %',				// ページ番号のフォーマット(%はページ番号)
    	'echo'             => true,						// true:表示、false:返却
    ) );
    

    作成例(PHP)

    
    <div class="blog-pages-pagination">
    	<span class="post-page-numbers current" aria-current="page">ページ 1</span>
    	<a href="http://test.local/test-page-1/2/" class="post-page-numbers">ページ 2</a>
    	<a href="http://test.local/test-page-1/3/" class="post-page-numbers">ページ 3</a>
    </div>
    
  • wp_nav_menu( $args )

    ナビゲーションメニューを表示します。
    引数 1($args)は、パラメータを連想配列で指定します。代表的なオプションパラメータは、以下の通りです。
    theme_location
    表示位置名を指定します。
    menu_class
    メニュークラス名を指定します。
    items_wrap
    フォーマット文字(%1$s:menu_id 値、%2$s:menu_class、%3$s:リスト項目)を指定します。
    container
    ul のラップ有無('div'、'nav'、false:ラップなし)を指定します。
    container_class
    コンテナー(ラップ)クラス名を指定します。
    depth
    表示階層数を指定します。
    link_before
    リンク前テキストを指定します。
    link_after
    リンク後テキストを指定します。
    fallback_cb
    メニューが存在しない場合のコールバック関数を指定します。
    返却値は、ありません。

    使用例(PHP)

    
    wp_nav_menu( array(
    	'theme_location'  => 'primary',					// メニューの位置(初期値:なし)
    	'menu_class'      => 'menu-wrapper',			// ul要素のクラス名(初期値:menu)
    	'container'       => false,						// ul要素のラップ要素(初期値:div)
    	'items_wrap'      => '<ul>%3$s</ul>',			// 編集型式(%1$s:menu_id、%2$s:menu_class、%3$s:リスト項目)
    	'fallback_cb'     => false,						// メニューが存在しない場合のコールバック関数(初期値:wp_page_menu)
    ) );
    

    作成例(PHP)

    
    <ul>
    	<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1"><a href="http://test.local/" aria-current="page">ホーム</a></li>
    	<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="http://test.local/test-1/">固定ページ1</a></li>
    	<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="http://test.local/test-2/">固定ページ2</a></li>
    </ul>
    
  • $out_text = wptexturize( $text )

    指定されたテキスト中の特定の記号の並びをアポストロフィ、ダッシュ、省略符号(…)、商標記号、乗算記号などの変換を行い結果を返却します。
    但し、特定のタグ(pre、code、kbd、style、script、tt)で囲まれた範囲は、変換の対象外になります。
    引数 1($text)は、変換を行うテキストを指定します。
    返却値($out_text)は、整形済みのテキストが返却されます。

    使用例(PHP)

    
    $out_text = wptexturize( '<p>© タイトル</p>' );
    

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