WordPress add_theme_support() で実装される機能

# add_theme_support() とは

https://developer.wordpress.org/reference/functions/add_theme_support/

> Registers theme support for a given feature.

WordPressの特定の機能をテーマで使えるようにするための関数。
なお、一部の機能（設定）は公式テーマを作るなら必須。
テーマの `functions.php` に記述して、`after_setup_theme` フックで動作するようにします。

参照:https://github.com/Automattic/_s/blob/master/functions.php#L10-L84

以下で執筆時のWordPressバージョン（4.9）までで使える機能を紹介します。

# アイキャッチ画像
ver2.9〜

```php
add_theme_support( 'post-thumbnails' );
```
https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/

![スクリーンショット 2017-11-30 17.41.55.png](https://qiita-image-store.s3.amazonaws.com/0/18348/2fb687eb-698b-7e6b-e233-f907a3c057c9.png)

出力は `the_post_thumbnail()` や `get_the_post_thumbnail()` 。

* https://developer.wordpress.org/reference/functions/the_post_thumbnail/
* https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

# head タグ内のフィードのリンク
ver3.0〜

```php
add_theme_support( 'automatic-feed-links' );
```

出力例

```html
<link rel="alternate" type="application/rss+xml" title="サイトタイトル &raquo; フィード" href="http://example.com/feed" />
<link rel="alternate" type="application/rss+xml" title="サイトタイトル &raquo; コメントフィード" href="http://example.com/comments/feed" />
```

# 投稿フォーマット
ver3.1〜

```php
add_theme_support( 'post-formats', array(
	'aside',
	'image',
	'video',
	'quote',
	'link',
) );
```

https://developer.wordpress.org/themes/functionality/post-formats/

![スクリーンショット 2017-11-30 17.31.21.png](https://qiita-image-store.s3.amazonaws.com/0/18348/a772b035-f67a-096e-8e3b-8436f5293532.png)

出力その１。
`post_class()` で出力されるCSSクラスに `format-フォーマット名` が含まれる。
https://developer.wordpress.org/reference/functions/post_class/

出力その２。
`has_post_format()` で投稿フォーマットで条件分岐するためのテンプレートタグ。
https://developer.wordpress.org/reference/functions/has_post_format/
`get_post_format()` はその投稿にセットされてる投稿フォーマットを取得するテンプレートタグ。
https://developer.wordpress.org/reference/functions/get_post_format/

テーマ側でCSSレベルで見た目を変えるなら出力その１で示した通り `post_class()` で付与されるCSSクラスで対応でいるが、HTML（PHP）レベルで何かしたいときはこれを使おう。

例：https://github.com/Automattic/_s/blob/master/index.php#L39

出力その3。
投稿フォーマットは **カスタムタクソノミー** `post_format` として扱われている。
そのためカテゴリーやタグと同じくタクソノミー（ターム）に関するテンプレートタグや、「投稿フォーマットのアーカイブ」も利用できる。

* `get_post_format_link()` : https://developer.wordpress.org/reference/functions/get_post_format_link/

# HTML5
ver3.6〜（galleryとcaptionはver3.9〜）

```php
add_theme_support( 'html5', array(
	'search-form',
	'comment-form',
	'comment-list',
	'gallery',
	'caption',
) );
```
https://codex.wordpress.org/Theme_Markup

WordPressコアから出力されるHTMLタグをHTML5のフォーマットにする

# カスタムヘッダー
ver3.4〜（動画はver4.7〜）

```php
$defaults = array(
    'default-image' => '',
    'random-default' => false,
    'width' => 0,
    'height' => 0,
    'flex-height' => false,
    'flex-width' => false,
    'default-text-color' => '',
    'header-text' => true,
    'uploads' => true,
    'wp-head-callback' => '',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
    'video' => false,
    'video-active-callback' => 'is_front_page',
);
add_theme_support( 'custom-header', $defaults );
```
https://codex.wordpress.org/Custom_Headers

Twenty Seventeen で実装（ビデオ含む）。
![スクリーンショット 2017-12-04 13.09.11.png](https://qiita-image-store.s3.amazonaws.com/0/18348/61f85abb-6e5e-af88-7da5-ba2fcbe327af.png)

出力は `the_custom_header_markup()` テンプレートタグ。

* https://developer.wordpress.org/reference/functions/the_custom_header_markup/
* https://qiita.com/gatespace/items/760533f0c90095cc6571

# カスタムバックグラウンド（背景）

ver3.4〜

```php
$defaults = array(
    'default-image' => '',
    'default-preset' => 'default',
    'default-position-x' => 'left',
    'default-position-y' => 'top',
    'default-size' => 'auto',
    'default-repeat' => 'repeat',
    'default-attachment' => 'scroll',
    'default-color' => '',
    'wp-head-callback' => '_custom_background_cb',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
);
add_theme_support( 'custom-background', $defaults );
```

https://codex.wordpress.org/Custom_Backgrounds

Twenty Fifteen での例。
![スクリーンショット 2017-12-04 13.15.04.png](https://qiita-image-store.s3.amazonaws.com/0/18348/0eecdb05-b0c7-34f6-0ba8-44d42fc23284.png)

カスタムバックグラウンドが実装されていると、`<body>`タグにCSSクラスの `custom-background` が付与される。
設定したカスタム背景は `body.custom-background` に対する CSS として出力される。

```html
<style type="text/css" id="custom-background-css">
  body.custom-background {
    background-image: url("http://example.com/wp-content/uploads/2008/06/dsc04563.jpg");
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
  }
</style>
```

# カスタムロゴ

ver4.5〜

```php
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
) );
```

https://codex.wordpress.org/Theme_Logo

Twenty Fifteen での例。
![スクリーンショット 2017-12-04 13.29.10.png](https://qiita-image-store.s3.amazonaws.com/0/18348/5236a31b-b71b-442a-4643-6d400307313a.png)

出力は `the_custom_header_markup()` テンプレートタグ。https://developer.wordpress.org/reference/functions/the_custom_logo/

# タイトルタグ

ver4.1〜

```php
add_theme_support( 'title-tag' );
```

https://codex.wordpress.org/Title_Tag

`<title>` タグの中身をよしなにしてくれる。
出力は `wp_head()` で行われるので、`wp_title()` は不要。

# テーマカスタマイザーにおけるウィジェットの再読み込み

ver4.5〜

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

https://make.wordpress.org/core/2016/03/22/implementing-selective-refresh-support-for-widgets/

テーマカスタマイザーでウィジェットを設置した際に自動でリフレッシュ（見た目の更新）をしてくれる。
まぁ、これ入れておけばブラウザでの再読み込み不要なので入れておこう。

# スターターコンテンツ

ver4.7〜

```php
$starter_content = array(
	'widgets' => array(
		'sidebar-1' => array(
			'text_business_info',
			'search',
			'text_about',
		),
		'sidebar-2' => array(
			'text_business_info',
		),
		'sidebar-3' => array(
			'text_about',
			'search',
		),
	),

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

add_theme_support( 'starter-content', $starter_content );
```

https://make.wordpress.org/core/2016/11/30/starter-content-for-themes-in-4-7/

Twenty Seventeen で実装。
テーマの見た目を（作者の）意図した通りになるよう、テーマ側でウィジェット、投稿（固定ページ）、アタッチメントファイル、カスタムメニュー、そのほかのテーマオプションを指定し、WordPressで作成（取り込む）。

- - - - 

それまでテーマ内の `functions.php` にフィルターやアクションフックで書いたり独自関数で実装していた機能がこのように WordPress コアの機能として実装されることがあるので、公式テーマを作る・作らないに関わらず、テーマを作る際は最新の関数やドキュメントを調べましょう。

https://make.wordpress.org/

現場からは以上です。