|

Theme functions

WordPress のテーマを構築するための基本的な設定をします。

ご自由にご利用ください。

Definitions

WordPress のテーマを構築するための基本的な設定をするには、functions.php ファイルに必要な関数を定義します。

functions.php ファイルは、WordPressのテーマを構成するファイルです。

ファイルを修正する前にバックアップの作成を推薦します。

Action hooks

アクションフックを定義します。通常、テーマの設定、オプションを初期化するために使用されます。これはテーマで使用できる最初のアクションフックです。

if ( ! function_exists( 'mytheme_setup' ) ) :

/**
 * Sets up theme defaults and registers support for various
 * WordPress features.
 * 
 * Note that this function is hooked into the after_setup_theme
 * hook, which runs before the init hook. The init hook is too late
 * for some features, such as indicating support post thumbnails.
 * 
 * @since Themes 1.0
 * 
 * @return void
 * 
 */

function mytheme_setup() {

	/* - add theme support - */

	add_theme_support( string $feature, mixed $args ); 

}

endif; // mytheme_setup

add_action( 'after_setup_theme', 'mytheme_setup' );

Default block styles

フロントエンドに拡張したブロックエディターのスタイルを適用します。

add_theme_support( 'wp-block-styles' );

Wide alignment

画像ブロックなどの一部のブロックに幅広や全幅を定義する機能を追加します。

add_theme_support( 'align-wide' );

Supporting custom line heights

段落や見出しなどの一部のブロックの行の高さのカスタマイズをサポートする機能を有効化します。

add_theme_support( 'custom-line-height' );

Editor styles

エディタースタイルをサポートする機能を有効化します。

add_theme_support( 'editor-styles' );

Editor style enqueue

ブロックエディターにスタイルを適用します。

add_editor_style( 'style-editor.css' );

Responsive embedded content

埋め込みコンテンツをレスポンシブ化する機能を有効にします。

add_theme_support( 'responsive-embeds' );

Spacing control

一部のブロックではパディングの制御を持つことができます。この機能は標準で無効のため、サポートを宣言して有効にする必要があります。

add_theme_support( 'custom-spacing' );

Border

すべての枠線の設定を有効化します。

add_theme_support( 'border' );

Link colors

リンク色の設定を有効化します。

add_theme_support( 'link-color' );

Appearance tools

この設定を使用すると、以下のグローバルスタイル設定が有効になります。

border: color, radius, style, width

color: link

spacing: blockGap, margin, padding

typography: lineHeight

dimensions: aspectRatio, minHeight

position: sticky

add_theme_support( 'appearance-tools' );

Block based template parts

ブロックベースのテンプレートパーツにより管理者はブロックを使用してサイトの一部を編集できます。この設定は標準で無効のため、サポートを宣言して有効にする必要があります。

add_theme_support( 'block-template-parts' );

Feed links

この機能により、head 内の投稿とコメントの自動フィードリンクが有効になります。

add_theme_support( 'automatic-feed-links' );

Title tag

この機能により、プラグインとテーマでドキュメントのタイトルタグを管理できるようになります。

add_theme_support( 'title-tag' );

HTML5

この機能により、HTML5 マークアップを使用できるようになります。

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

Post formats

この機能により、テーマの投稿フォーマットのサポートが有効になります。

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

Customize selective refresh widgets

この機能により、カスタマイザー内で管理されているウィジェットの選択的更新が可能になります。

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

Post thumbnails

この機能により、テーマのポストサムネイルのサポートが有効になります。

add_theme_support( 'post-thumbnails' );

Custom headers

この機能により、テーマの Custom headers サポートが有効になります。

add_theme_support( 'custom-header' );
$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 );

Custom backgrounds

この機能により、テーマの Custom backgrounds サポートが有効になります。

add_theme_support( 'custom-background' );
$defaults = array(
	'default-image' => '',
	'default-preset' => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
	'default-position-x' => 'left', // 'left', 'center', 'right'
	'default-position-y' => 'top', // 'top', 'center', 'bottom'
	'default-size' => 'auto', // 'auto', 'contain', 'cover'
	'default-repeat' => 'repeat', // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
	'default-attachment' => 'scroll', // 'scroll', 'fixed'
	'default-color' => '',
	'wp-head-callback' => '_custom_background_cb',
	'admin-head-callback' => '',
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-background', $defaults );

Custom logo

この機能により、テーマの Theme logo サポートが有効になります。

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

Examples functions

if ( ! function_exists( 'mytheme_setup' ) ) :

/**
 * Sets up theme defaults and registers support for various
 * WordPress features.
 * 
 * Note that this function is hooked into the after_setup_theme
 * hook, which runs before the init hook. The init hook is too late
 * for some features, such as indicating support post thumbnails.
 * 
 * @since Themes 1.0
 * 
 * @return void
 * 
 */

function mytheme_setup() {

	/* - default block styles - */

	add_theme_support( 'wp-block-styles' );

	/* - wide alignment - */

	add_theme_support( 'align-wide' );

	/* - supporting custom line heights - */

	add_theme_support( 'custom-line-height' );

	/* - editor styles - */

	add_theme_support( 'editor-styles' );

	/* - editor style enqueue - */

	add_editor_style( 'style-editor.css' );

	/* - responsive embedded content - */

	add_theme_support( 'responsive-embeds' );

	/* - spacing control - */

	add_theme_support( 'custom-spacing' );

	/* - border - */

	add_theme_support( 'border' );

	/* - link colors - */

	add_theme_support( 'link-color' );

	/* - appearance tools - */

	add_theme_support( 'appearance-tools' );

	/* - block based template parts - */

	add_theme_support( 'block-template-parts' );

	/* - feed links - */

	add_theme_support( 'automatic-feed-links' );

	/* - title tag - */

	add_theme_support( 'title-tag' );

	/* - html5 - */

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

	/* - post formats - */

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

	/* - customize selective refresh widgets - */

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

	/* - post thumbnails - */

	add_theme_support( 'post-thumbnails' );

	/* - custom headers - */

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

	/* - custom backgrounds - */

	$defaults = array(
		'default-image' => '',
		'default-preset' => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
		'default-position-x' => 'left', // 'left', 'center', 'right'
		'default-position-y' => 'top', // 'top', 'center', 'bottom'
		'default-size' => 'auto', // 'auto', 'contain', 'cover'
		'default-repeat' => 'repeat', // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
		'default-attachment' => 'scroll', // 'scroll', 'fixed'
		'default-color' => '',
		'wp-head-callback' => '_custom_background_cb',
		'admin-head-callback' => '',
		'admin-preview-callback' => '',
	);
	add_theme_support( 'custom-background', $defaults );

	/* - custom logo - */

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

}

endif; // mytheme_setup

add_action( 'after_setup_theme', 'mytheme_setup' );

Summary

最後までご高覧いただきましてありがとうございました。

WordPress のテーマを構築するための基本的な設定をご紹介させていただきました。

必要に応じて各コードを変更してご自由にご利用ください。

現場からは以上でした。