32
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WordPressAdvent Calendar 2017

Day 14

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

Last updated at Posted at 2017-12-14

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〜

add_theme_support( 'post-thumbnails' );

スクリーンショット 2017-11-30 17.41.55.png

出力は the_post_thumbnail()get_the_post_thumbnail()

head タグ内のフィードのリンク

ver3.0〜

add_theme_support( 'automatic-feed-links' );

出力例

<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〜

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

スクリーンショット 2017-11-30 17.31.21.png

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

出力その2。
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レベルで見た目を変えるなら出力その1で示した通り post_class() で付与されるCSSクラスで対応でいるが、HTML(PHP)レベルで何かしたいときはこれを使おう。

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

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

HTML5

ver3.6〜(galleryとcaptionはver3.9〜)

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

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

カスタムヘッダー

ver3.4〜(動画はver4.7〜)

$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 );

Twenty Seventeen で実装(ビデオ含む)。
スクリーンショット 2017-12-04 13.09.11.png

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

カスタムバックグラウンド(背景)

ver3.4〜

$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 );

Twenty Fifteen での例。
スクリーンショット 2017-12-04 13.15.04.png

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

<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〜

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

Twenty Fifteen での例。
スクリーンショット 2017-12-04 13.29.10.png

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

タイトルタグ

ver4.1〜

add_theme_support( 'title-tag' );

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

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

ver4.5〜

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

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

スターターコンテンツ

ver4.7〜

$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 );

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


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

現場からは以上です。

32
42
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?