テーマの基本設定を行い機能を実装します。add_theme_support()

テーマで使う機能を宣言し実装します。
Content Width / Widget / CSS&JS に並ぶfunctions.php4大設定の一つです。
習得必須のはずですが、たまに間違った使い方をしてるのをみかけます。

ブロックエディターの項目に追加しました。（2019/8/21）
*印は、近日追加エントリーを書きます

基本形

if ( ! function_exists( 'wpqw_setup' ) ):
	function wpqw_setup() {
		// ここに書いていきます
		// add_theme_support();
	}
endif;
add_action( 'after_setup_theme', 'wpqw_setup' );

追加できる機能

WP5.2を前提に書いています。
今回設定方法のみで、使い方などの説明しきれない部分は別エントリーで補足します。

Titleタグ

トップページの場合、設定＞一般で設定した「サイトのタイトル – キャッチフレーズ」
その他のページでは、「ページ名 – サイトのタイトル」の形式でタイトルタグに表示されます。
テーマチェックで必須になります。

add_theme_support( 'title-tag' );

フィードリンク

投稿とコメントのRSSフィードのリンクが有効になります。
automatic_feed_links() 関数を使ってる場合、切り替えが必要です。
テーマチェックで必須になります。

add_theme_support( 'automatic-feed-links' );

<head>にこんなタグが追加されます。

<link rel="alternate" type="application/rss+xml" title="サイトのタイトル » フィード" href="https://example.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="サイトのタイトル » コメントフィード" href="https://example.com/comments/feed/" />

カスタム背景

カスタム背景の詳しい使い方はこちら

add_theme_support( 'custom-background' );

カスタムヘッダー

カスタムヘッダーの詳しい使い方はこちら

add_theme_support( 'custom-header' );

カスタムロゴ

カスタムロゴの詳しい使い方はこちら

add_theme_support( 'custom-logo' );

テーマカスタマイザーでのウィジェット再読み込み

テーマカスタマイザーでウィジェットを変更した際に、ページ遷移なしでそのまま反映された様子を確認できる。

add_theme_support( 'customize-selective-refresh-widgets' )

投稿サムネイル（アイキャッチ）*

サムネイルを使う設置と、サムネイルのサイズ設定。
2行目のサイズ設定は書かずに、管理画面＞設定＞メディアで行っても大丈夫です。
※使い方について後日、記事を書きます

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 200, true );

投稿タイプを選択して有効にすることもできます。

// 投稿のみ
add_theme_support( 'post-thumbnails', array( 'post' ) );   
// 固定ページのみ      
add_theme_support( 'post-thumbnails', array( 'page' ) );

投稿フォーマット

全9種類あります。
投稿画面の公開日時の下で投稿フォーマットが選択できるようになります。
公開画面のCSSや条件分岐が複雑になります。
クライアントワークでこれを書いたことは、ほぼありませんが、いつかフルに使ったテーマを作ってみたいものですね・・・

add_theme_support( 'post-formats', array(
	'aside',
	'image',
	'video',
	'quote',
	'link',
	'gallery',
	'status',
	'audio',
	'chat',
) );

HTML5サポート

html5による出力をしたい場合、設定する。

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

ブロックエディターサポート WP5.0〜

ブロックエディターで更新した内容を古いテーマで表示する際に、いい感じに表示してくれるCSSを読み込みます。

add_theme_support( 'wp-block-styles' );

ブロックエディターの画像投稿で、幅広/全幅が使えるようになります。

add_theme_support( 'align-wide' );

投稿画面に、オリジナルCSSを適用します。
この場合は投稿画面に、テーマフォルダー/css/editor.css を読み込みます。
2行目でエディター画面がダークモードになります。
※ダークモードは、WP5.2の私の環境では動作確認ができていません。
※CSSの書き方について後日、記事を書きます

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

ブロックのカスタム文字サイズを使えなくする。

add_theme_support( 'disable-custom-font-sizes' );

ブロックの文字サイズの選択肢を使えなくする。
参考：ブロックエディターのテキスト設定パネルを設定する

add_theme_support( 'editor-font-sizes' );

ブロックの色設定のカスタムカラーを選ばせないようにする。

add_theme_support( 'disable-custom-colors' );

ブロックの色設定のカラーパレットを使わないようにする。
参考：ブロックエディターの色設定パネルを設定する

add_theme_support( 'editor-color-palette' );

レスポンシブ対応埋め込みタグ WP5.0〜

YouTubeなどの埋め込みコンテンツをレスポンシブ対応します。

add_theme_support( 'responsive-embeds' );

メニュー

管理画面＞外観＞メニューでメニューの設定を出来るようにします。
必要な分だけ増やすことができます。
より詳しい使い方は、カスタムメニューのキホン〜作り方と表示設定〜をご覧ください。

register_nav_menus( array(
	'nav' => 'Navi',
	'nav-footer' => 'Footer Navi',
) );

カスタムメニューのキホン〜作り方と表示設定〜 wp_nav_menu()

翻訳ファイルの場所を指定

翻訳ファイルの場所を指定します。
※だいぶ先になりそうですが、いつか翻訳ファイルの作り方に関する記事を書きます

load_theme_textdomain( 'textdomain', get_template_directory() . '/language' );

色々書いた結果

if ( ! function_exists( 'wpqw_setup' ) ):
	function wpqw_setup() {
		add_theme_support( 'title-tag' );
		add_theme_support( 'automatic-feed-links' );
		add_theme_support( 'custom-background' );
		add_theme_support( 'custom-header' );
		add_theme_support( 'custom-logo' );
		add_theme_support( 'customize-selective-refresh-widgets' )
		add_theme_support( 'post-thumbnails' );
		add_theme_support( 'post-formats', array(
			'aside',
			'image',
			'video',
			'quote',
			'link',
			'gallery',
			'status',
			'audio',
			'chat',
		) );
		add_theme_support( 'html5', array(
			'comment-list',
			'comment-form',
			'search-form',
			'gallery',
			'caption',
		) );
		add_theme_support( 'wp-block-styles' );
		add_theme_support( 'align-wide' );
		add_theme_support( 'editor-styles' );
		// add_theme_support( 'dark-editor-style' );
		add_editor_style( 'css/editor.css' );
		add_theme_support( 'disable-custom-font-sizes' );
		add_theme_support( 'editor-font-sizes' );
		add_theme_support( 'disable-custom-colors' );
		add_theme_support( 'editor-color-palette' );
		add_theme_support( 'responsive-embeds' );
		register_nav_menus( array(
			'nav' => 'Navi',
			'nav-footer' => 'Footer Navi',
		) );
		load_theme_textdomain( 'textdomain', get_template_directory() . '/language' );
	}
endif;
add_action( 'after_setup_theme', 'wpqw_setup' );

今回取り上げませんでしたが、他にもstarter_contentというのもあります。

ジェネレーター

テーマサポートジェネレーター。
まだカスタムロゴなどに対応してないようですが、メチャ簡単に作れる！

WordPress Theme Support Generator

Codex

まとめ

コーポレートサイト用やオウンドメディア用など、自分なりのパターンを作りファイルを持っておくと便利です。
カスタム背景 / カスタムヘッダー / カスタムロゴ / ウィジェット再読み込み / 投稿フォーマット
これらは、コーポレートサイトでは、ほぼ使わないです。
オウンドメディア構築などで使うこともあるので、一応こんな事もできると覚えておくと提案しやすくなります。

基本形