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 のテーマを構築するための基本的な設定をご紹介させていただきました。
必要に応じて各コードを変更してご自由にご利用ください。
現場からは以上でした。