Gifu WordPress Meetup #14で「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました

2019年9月7日（土）、みんなの森 ぎふメディアコスモス おどるスタジオにて開催されましたGifu WordPress Meetup #14に参加し、「公式テーマTwentyNineteenから読み解くテーマ制作のお作法」という内容で登壇してきました。

photo by Keita Yoshikawa
photo by Keita Yoshikawa
photo by Keita Yoshikawa

スライド

登壇内容概要

アジェンダは以下の通りです。

  • テーマ開発の環境について
  • 今日の話の理解・活用に必要な知識
  • TwentyNineteenの内部ファイル
  • functions.phpを読み解く
  • body_class()
  • post_class()
  • テーマを作るにあたっての理想的な考え方

テーマ開発の環境について

テーマを作る際にあると便利な情報を紹介しました。といっても、言い出すとキリがないので初歩的ではありますが、

必要な知識

まぁ、あえて言うのもあれなんですが、WordPressテーマ開発にはこのような知識があると捗ります。

  • HTML
  • CSS
  • JavaScript
  • PHP

ただし、全てを完璧にしておく必要など毛頭なく、わからないことをちゃんと調べるというアクションがとても大事です。

ググると色々な情報に遭遇するとは思いますが、基本的なスタイルとしては「公式（もしくはそれに近い）リファレンスを参照する」ということを意識すると良いです。

確かに公式に近いリファレンスやドキュメントの言い回しって堅苦しいので、わかりにくさ倍増なのは気持ちわかります。

しかし、そこに少しでも慣れ、調べた結果、誰かに質問するのとそうでないのとでは、全く理解度が違ってきます。

ですので、以下のドキュメントをそれぞれ紹介します。

HTML: ハイパーテキストマークアップ言語 | MDN
HTML (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するも…
developer.mozilla.org
CSS: カスケーディングスタイルシート | MDN
カスケーディングスタイルシート (Cascading Style Sheets、CSS) はスタイルシート言語であり、HTML や XML (方言である SVG、MathML、XHTML などを含む) で記述された文…
developer.mozilla.org
JavaScript | MDN
JavaScript (JS) は軽量で、インタープリター型、あるいは実行時コンパイルされる、第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト…
developer.mozilla.org
PHP: PHP マニュアル – Manual
www.php.net
WordPress Codex 日本語版
wpdocs.osdn.jp

TwentyNineteenの内部ファイル一覧

まぁ、こんなにファイルがあるんですよーってことで紹介しました。僕も全部読んだ訳ではありません。

├ classes/
├ fonts/
├ inc/
├ js/
├ sass/
├ template-parts/
├ 404.php
├ archive.php
├ comments.php
├ footer.php
├ functions.php ##これこれ
├ header.php
├ image.php
├ index.php
├ package.json
├ package-lock.json
├ page.php
├ postcss.config.js
├ print.scss
├ print.css
├ readme.txt
├ screenshot.png
├ search.php
├ single.php
├ style.scss
├ style.css
├ style-editor.scss
├ style-editor.css
├ style-editor-customizer.scss
├ style-editor-customizer.css
├ style-rtl.css

functions.php

この一覧の中から主にfunctions.php を掘り下げていきます。

twentynineteen/functions.php at master · WordPress/twentynineteen
Twenty Nineteen is a theme now included in all WordPress installs. To report any issues please go here: https://core.trac.wordpress.org/newticket – twentyninet…
github.com

以下、ざっとお話した項目を紹介します。

if ( ! function_exists() )

とりあえずこの関数の説明をしました。受託制作などではそのテーマだけで完結することしか想定されないことがほとんどですが、子テーマでカスタマイズされる可能性があるばいには、こちらの関数の利用方法は知っておく必要があります。

自動フィードリンク

add_theme_support( 'automatic-feed-links' );

タイトルタグ設定

add_theme_support( 'title-tag' );

サムネイル設定

add_theme_support( 'post-thumbnails' );

カスタムメニュー設定

register_nav_menus(
	array(
		'menu-1' => __( 'Primary', 'twentynineteen' ),
		'footer' => __( 'Footer Menu', 'twentynineteen' ),
		'social' => __( 'Social Links Menu', 'twentynineteen' ),
	)
);

HTML5使用許可設定

add_theme_support(
	'html5',
	array(
		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
	)
);

Gutenbergデフォルトスタイル適応設定

add_theme_support( 'wp-block-styles' );

Gutenberg幅広・全幅ボタン表示設定

add_theme_support( 'align-wide' );

エディタースタイル設定・読み込み

add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );

Gutenbergフォントサイズ設定

add_theme_support(
	'editor-font-sizes',
	array(
		array(
			'name'      => __( 'Small', 'twentynineteen' ),
			'shortName' => __( 'S', 'twentynineteen' ),
			'size'      => 19.5,
			'slug'      => 'small',
		),
		...
	)
);

Gutenbergカラーパレット設定

add_theme_support(
	'editor-color-palette',
	array(
		array(
			'name'  => __( 'Dark Gray', 'twentynineteen' ),
			'slug'  => 'dark-gray',
			'color' => '#111',
		),
		...
	)
);

iframeレスポンシブ対応設定

add_theme_support( 'responsive-embeds' );

コンテンツ幅設定

$GLOBALS['content_width'] = apply_filters(
	'twentynineteen_content_width',
	640
);

スクリプト読み込み設定

function twentynineteen_scripts() {
	wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

	wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' );

	if ( has_nav_menu( 'menu-1' ) ) {
		wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '1.1', true );
		wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.1', true );
	}

	wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );

body_class()

<body <?php body_class(); ?>>
body_class() | Function | WordPress Developer Resources
Displays the class names for the body element.
developer.wordpress.org

post_class()

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
post_class() | Function | WordPress Developer Resources
Displays the classes for the post container element.
developer.wordpress.org

テーマを作るにあたっての理想的な考え方

受託でWPテーマを作る際の流れ

個人的なテーマ開発の大まかな流れを紹介しました。

    null
  1. GitHubリポジトリ作成（受託はprivate）
  2. テストサーバーで環境を用意
    （利用するとわかっているものは全て設定して、All in one WP Migrationでローカルへ）
  3. ローカル開発環境用意
    • local by flywheel
    • 常用アセット準備（常用mixinなど）
    • 各コンパイル設定（prepros/npm）
  4. 構築開始（モバイルファースト/FLOCSS）

責任を持った制作

WordPressをWordPressとして利用するためには、責任を持った設計が必要

  • テーマテリトリーとプラグインテリトリーへの理解
  • フルマークアップ（前述）でページを構築してしまうことのリスク
  • クライアントが末長くWordPressを利用できる環境をできる限り用意する責任

まとめ

このような流れのお話を1時間ほどでさせていただきました。参加者のみなさんからは、基本的なテーマの作り方が知れてよかったという感想もいただき、頑張って資料を作って良かったです。

次回以降も登壇頑張っていこうと思います。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。