WordPressの公式テーマ制作方法 -クラシックテーマ編-
独自テーマを制作する方法は過去の記事で掲載してます。
WordPressの自作テーマで簡単サイト制作
今回はWordPressの公式にも提出できる、正式な方法でのテーマ制作というものについて記載します。
WordPressのテーマには大きく2種類あり、クラシックテーマとブロックテーマがあります。
クラシックテーマは、主にPHPファイルを使用してサイトを構築し、ブロックテーマでは、HTMLファイルとJSONファイルでサイトを構築するという違いがあります。
最近では、ハイブリッドテーマという、ブロックスタイルサポートを使用できるクラシックテーマもあります。
この記事では、まずクラシックテーマの制作方法について書いていこうと思います。
（各テンプレートファイルの内容については過去記事に書いているので割愛します。）
テーマ名
公式に提出するレベルのテーマを作成するうえで一番肝心なのが、このテーマ名になります。
適当に好きな名前を付けて、いざ提出となったとき、テーマのアップロードで
「既に使われている名前です。アップロードできません」
って出たときの絶望感は半端ありません。
まずテーマの名前を付けるときは、とにかくググる。
- WordPress公式テーマで名前を検索する。
- googleで名前を検索する
これで同一名称のテーマが出なければほぼ大丈夫だと思います。
テーマ名のフォルダをWordPressのwp-content/themesの中に作成しましょう。
基本構造
基本的にクラシックテーマを構成するために最低限必要なファイルは、index.phpとstyle.cssだけです。
ただ、サイトの構成要素によって個別のテンプレートと呼ばれるファイルが必要になります。
- header.php (サイト共通ヘッダー)
- sidebar.php (サイト共通サイドバー)
- footer.php (サイト共通フッター)
- single.php (個別投稿ページ)
- page.php (固定ページ)
- comments.php (コメント表示)
- search.php (検索ページ)
- archive.php (カテゴリ・月別ページ)
- 404.php (404表示用ページ)
上記のファイルがテーマを構成するうえでのテンプレートファイルとなります。
独自テーマであればこれで良いのですが、公式提出用になると追加で以下のファイル/ディレクトリが必要です。
- readme.txt or README.md
- screenshot.jpg (1200px x 900px ※テーマ一覧に表示される)
- languages (翻訳用ディレクトリ ※任意)
任意で作る翻訳ディレクトリは翻訳したmoやpoのファイルを格納するフォルダになります。
日本語であれば、ja.moとなります。翻訳の必要性に応じて作ります。
WordPress管理画面の設定で日本語を選べば、このフォルダから日本語の翻訳が実行されます。
Styleに記載べき内容
Styleでは、独自テーマの時は任意だった内容が必須になります。
style.cssの先頭に記載すべき内容は以下の通りです。
/**
* Theme Name: テーマの一意の名前
* Theme URI: ユーザーがテーマに関する詳細情報を確認できるWebページのURL（任意）
* Description: テーマの説明
* Version: テーマのバージョン、記述方法X.X もしくは X.X.X
* Author: あなたの名前（WordPress.orgユーザーであればユーザー名）
* Author URI: テーマを作成した個人または組織のURL（任意）
* Tags: two-columns (テーマがサポートする機能のコンマ区切りリスト)
* Text Domain: 翻訳のテキストドメインに使用される一意の文字列
* Domain Path: /languages （テーマの翻訳が保存されている場所への相対パス）
* Tested up to: テーマがテストされた最後のWordPressバージョン
* Requires at least: テーマが動作する最も古いWordPressバージョン
* Requires PHP: テーマが動作する最も古いPHPバージョン
* License: テーマのライセンス
* License URI: テーマのライセンスのURL
*/
Tagsには何でも書けるわけではなく、指定されたタグを使用する必要があります。
この分類のこのタグはいくつまで。といった細かい指定もあります。
- 分類（Subject・Layout・Features・Editor）
まずは、自分が作りたいようなデザインの、公式のテーマをいくつかダウンロードしてstyle.cssを見ることをおすすめします。
クラシックテーマの構成
Style.cssを作成し、各ファイルを作成したらfunctions.phpを作成します。
このファイルは、テーマの動作をPHPプログラムで書くことができ、テーマを読み込むときに自動的にWordPressの独自機能を読み込みます。
以下が、テーマを作成した時のディレクトリ構成となります。
仮にテーマ名をoriginalとします。テキストドメインはoriginal。
original ディレクトリ
- assets
- images (画像ファイル)
- js (Javascriptファイル)
- css (テーマ独自のCSSファイル)
- includes
- original-functions.php (独自のプログラム)
- languages
- ja.mo (日本語翻訳ファイル)
- ja.po (日本語翻訳ファイル)
- parts
- content.php
- author.php
- functions.php
- index.php
- header.php
- footer.php
- sidebar.php
- page.php
- single.php
- archive.php
- comments.php
- search.php
- 404.php
- style.css
- readme.txt
- front-page.php or home.php (トップページのデザインだけ変えたいとき)
まずは上記のテンプレートで簡単なテーマは制作できるはずです。
functions.phpに記載するべき内容
自作テーマでは、functions.phpのafter_setup_themeでWordPressの機能を追加する必要があります。
テーマでは、WordPressの独自機能の前に、after_setup_themeで、まず翻訳の呼び出しをします。
load_theme_textdomain()関数を使い、テキストドメインと場所を指定します。
そのあと、テーマで使う独自機能を必要に応じてadd_theme_support()で追加します。
※基本的にfunction名の先頭にはテキストドメインを付けます。
そのほうがWordPressの関数と重複することを避けられるからです。
//テーマの初期設定
add_action( 'after_setup_theme', 'original_setup' );
function original_setup() {
//翻訳データの呼び出し(テキストドメインはoriginal)
load_theme_textdomain('original', get_template_directory() . '/languages');
//テーマで使いたいWordPressの独自機能
//カスタムロゴを使う
add_theme_support( 'custom-logo' );
//サムネイルを使う
add_theme_support('post-thumbnails');
}
テーマで使用できる独自機能は以下があります。
'admin-bar'
'align-wide'
'appearance-tools'
'automatic-feed-links'
'block-templates'
'block-template-parts'
'border'
'core-block-patterns'
'custom-background'
'custom-header'
'custom-line-height'
'custom-logo'
'customize-selective-refresh-widgets'
'custom-spacing'
'custom-units'
'dark-editor-style'
'disable-custom-colors'
'disable-custom-font-sizes'
'disable-custom-gradients'
'disable-layout-styles'
'editor-color-palette'
'editor-gradient-presets'
'editor-font-sizes'
'editor-spacing-sizes'
'editor-styles'
'featured-content'
'html5'
'link-color'
'menus'
'post-formats'
'post-thumbnails'
'responsive-embeds'
'starter-content'
'title-tag'
'widgets'
'widgets-block-editor'
'wp-block-styles'
よくheader.phpのheadタグに色々URLをかいてるものを見ますが、公式テーマとして提出する場合は、CDNを含むURLのなどのサービスは許可されません。
JSなどはダウンロードしてjsフォルダに入れ、リモートソースから呼び出すようにします。
wp_enqueue_styleとwp_enqueue_scriptを書いたfunctionを作り、wp_enqueue_scriptsに追加する形になります。
//書き方のフォーマット
//CSSを読み込む正式な形式はこうなります
wp_enqueue_style(
string $handle(unique name/ID),
string $src,
string[] $deps,
string|bool|null $ver //テーマのバージョン
string $media = 'all'
);
//JSを読み込む正式な形式
wp_enqueue_script(
string $handle(unique name/ID),
string $src
string[] $deps = array(),
string|bool|null $ver,
array|bool $in_footer = false
);
//CSSとjsの呼び出し
add_action( 'wp_enqueue_scripts', 'original_enqueue_styles' );
function original_enqueue_styles() {
//テーマ直下のstyle.css
wp_enqueue_style(
'original-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
//cssフォルダのカスタマイズcss
wp_enqueue_style(
'original-custom-style',
get_parent_theme_file_uri('assets/css/original.css'),
array('original-style'),//original-styleの後に読み込む
wp_get_theme()->get('Version')
);
//jsフォルダのjs
wp_enqueue_script(
'original-script',
get_parent_theme_file_uri('assets/js/original.js'),
array('jquery'),//jqueryの後に読み込むとき
wp_get_theme()->get('Version'),
true //Footerで読み込むか？
);
//コメント用のスクリプトを呼び出しておきましょう
if (is_singular() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
}
今回のようにincludesフォルダにあるphpファイルを読み込みたい場合は、別途functions.phpに記載します。
include get_parent_theme_file_path( 'includes/original-functions.php' );
あとは、サイドバーに使うナビゲーションメニューや、ウィジェットの追加もfunctions.phpで行います。
記載の'original'はテキストドメインです。
add_action('after_setup_theme', 'original_register_nav_menu');
//nav
function original_register_nav_menu() {
register_nav_menus(array(
'primary' => esc_html__('Primary Menu', 'original'),
'footer' => esc_html__('Footer Menu', 'original'),
));
}
// widget
function original_widgets_init() {
register_sidebar(array(
'name' => esc_html__('Sidebar', 'original'),
'id' => 'sidebar',
'description' => esc_html__('Add widgets here.', 'original'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'reborno_widgets_init');
アクセシビリティへの考慮
公式テーマに提出するときに一番大変なのがこれです。
テーマには視覚的なキーボード フォーカスの強調表示を提供する必要があります。
すべてのコントロールとリンクはキーボードを使用してアクセスできる必要があり、マウスで使用できるすべてのコントロールは、デバイスや画面サイズに関係なく、キーボードでも使用できる必要があります。
ナビゲーションメニューは、タブや矢印で移動出来て、ドロップダウンや、ボタンで開くメニューの場合は、フォーカスしたときにメニューが開かなければいけません。
スキップリンクの設置とキーボードナビゲーションの動作確認が何より大事です。
スキップリンクとは、ユーザーがページにアクセスしたときに、メインコンテンツやナビゲーションに直接移動できるものを指します。ページ内リンクです。
表示はされていなくても、スクリーンリーダーのユーザーが利用できたり、キーボードナビでフォーカスされたりする必要があります。
スキップリンクは検索すると色んなパターンがあると思います。
テーマに合ったものを設置してみてください。
<header>
<h1>見出し</h1>
<a href="#content">コンテンツまでスキップ</a>
</header>
<nav>
<!-- navigation stuff -->
</nav>
<section id="content">
<!--your content -->
</section>
ライセンスや画像やフォントの使用
公式テーマとして提出する場合、ライセンスと著作権について明記することが必須です。
とくにGNU General Public Licenseに準拠している必要があります。
そして、コード、データ、画像はGPLまたは互換ライセンスである必要があり、readme.txtやlicense.txtにおのおののライセンスと著作権を明記します。
以下はtwentytwentyのreadmeです。
style.cssに書く内容とほぼ同じですが、ここにはライセンスと著作権についても書く必要があります。
=== Twenty Twenty ===
Contributors: the WordPress team
Requires at least: 4.7
Tested up to: 6.7
Requires PHP: 5.2.4
Stable tag: 2.8
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Default theme for 2020.
== Description ==
Our default theme.....略
== Changelog ==
略
== Copyright ==
Twenty Twenty WordPress Theme, Copyright 2019-2024 WordPress.org and contributors.
Twenty Twenty is distributed under the terms of the GNU GPL.
書き方にフォーマットがあるので、色んなテーマのreadmeを参考に書くことをおすすめします。
翻訳対応の書き方をしよう
各PHPファイルで、表示用の文字を入力することもあると思います。
例えば簡単な例でいうと、前へとか次へなどのナビゲーションワード。
日本国内で使うから日本語でいいや。っていうのは、公式テーマではアウトです。どの国の人がダウンロードするかわからないので、誰が使ってもわかる言葉にしておく必要があります。
翻訳対象の文字を記載する方法は2通りあります。
__('read more', 'theme_domain');
_e('Open main menu', 'theme_domain');//echo出力処理付き
（）の文字をtheme_domainの翻訳ディレクトリのデータ（管理画面で設定した言語）から取得して返します。
上の関数はそのまま使うことは少なく、esc_attr_e()や、esc_html__()のように組み合わせて使うことが多いです。
翻訳データは、Poeditというアプリケーションを使用して作ります。
Poedit
無料でも十分に使用できますが、有料だともっと簡単に使用できるらしいです。
Theme check プラグインのインストール
ここまで作り上げれば、最後はTheme Check というWordPressのプラグインをインストールします。
インストールして有効化したあと、テーマメニューにtheme checkという項目が出てきますので、クリックしてチェックを実行します。
これで警告がなくなるまで修正します。
ここまで来たらほぼ提出の合格ラインです。
WordPress テーマ提出
提出してから先は、WordPress独自の基準がありますので、担当するレビューアとのやりとりになります。
長い道のりでしたが、ようやく公式テーマとして公開されました。
機会があれば使ってみてください。
WordPress管理画面のテーマの検索で「Movaone」と入力すれば表示されます。
色々調べながらやると自信にもなります。
いろんな方がWordPressに興味を持ってくださいますように。
Discussion