2. WordPress

【WordPress】add_theme_support関数の使い方と、サポートされる機能の一覧（引数一覧）・解説

Share

この記事では、add_theme_support関数の使い方と、サポートされる機能の解説をしていきます。

add_theme_supportを使えばテーマ側で色々な機能を簡単に実装できるので、使い方を覚えておきましょう。

add_theme_support関数の基本的な使い方

add_theme_support関数は以下のように使います。

functions.php
add_theme_support( 'post-thumbnails' );

この例では、投稿ページや固定ページにアイキャッチ（サムネイル）が追加する機能をサポートさせています。

実際に使う場合は、関数内に記述して、add_action( 'after_setup_theme', 関数名 );のようにして使います。

functions.php
function theme_setup(){
    add_theme_support( 'post-thumbnails' );
}
add_action('after_setup_theme','theme_setup');

after_setup_themeは親テーマのfunctions.phpが読み込まれた時点で行われる処理です。

add_theme_support関数には第二引数を入れることもできます。

functions.php
add_theme_support( 'post-thumbnails', array( 'post' ) );

この例では、第二引数に配列を入れて、投稿タイプを指定しています。

第一引数の一覧

第一引数には、以下のような文字列を指定することができます（2025年2月8日現在）。

  • ‘admin-bar’
  • ‘align-wide’
  • ‘appearance-tools’
  • ‘automatic-feed-links’
  • ‘block-templates’
  • ‘block-template-parts’
  • ‘border’
  • ‘core-block-patterns’
  • ‘custom-background’
  • ‘custom-header’
  • ‘custom-line-height’
  • ‘custom-logo’
  • ‘customize-selective-refresh-widgets’
  • ‘custom-spacing’
  • ‘custom-units’
  • ‘dark-editor-style’
  • ‘disable-custom-colors’
  • ‘disable-custom-font-sizes’
  • ‘disable-custom-gradients’
  • ‘disable-layout-styles’
  • ‘editor-color-palette’
  • ‘editor-gradient-presets’
  • ‘editor-font-sizes’
  • ‘editor-spacing-sizes’
  • ‘editor-styles’
  • ‘featured-content’
  • ‘html5’
  • ‘link-color’
  • ‘menus’
  • ‘post-formats’
  • ‘post-thumbnails’
  • ‘responsive-embeds’
  • ‘starter-content’
  • ‘title-tag’
  • ‘widgets’
  • ‘widgets-block-editor’
  • ‘wp-block-styles’

各引数でサポートできる機能と使い方の一例

各引数でサポートできる機能と使い方を一部紹介していきます。

align-wide

functions.php
add_theme_support( 'align-wide' );

'align-wide'を指定すると、画像などで「幅広」「全幅」を選択できるようになります。

「幅広」「全幅」を選択すると、ブロックのクラス名に「alignwide」「alignfull」が追加されるので、テーマ側のCSSで幅広、全幅になるように調整してください。

automatic-feed-links

functions.php
add_theme_support( 'automatic-feed-links' );

'automatic-feed-links'を指定すると、wp_head()内にデフォルトのフィード用リンクが出力されます。

フィードとは記事の更新があれば通知したり更新情報を取得するもので、'automatic-feed-links'でフィード用のリンクを表示させることができます。

custom-background

functions.php
add_theme_support( 'custom-background' );

'custom-background'で背景画像を設定できるようになります。

「カスタマイズ」→「背景画像」で設定ができます。

以下のように、第二引数でデフォルト値の設定ができます。

functions.php
$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 );

例えば、デフォルトの背景色や背景画像は以下のように使います。

functions.php
$args = array(
    'default-color' => '000000',
    'default-image' => '%1$s/images/background.jpg',
);
add_theme_support( 'custom-background', $args );

特に処理を行わなくても、自動的に背景画像や背景色を反映させるCSSがインラインで出力されます。

html5

functions.php
add_theme_support( 'html5' );

‘html5’を指定すると、自動で出力されるHTMLがHTML5の仕様に準拠したものになります。

WordPressがHTML5が標準ではなかった時代からあるため、元々あったコードではHTML5の仕様に準拠していませんでした。

例えば、検索フォームやコメントフォームなどのHTMLが、HTML5の仕様に準拠したものに変わって出力されます。

title-tag

functions.php
add_theme_support( 'title-tag' );

‘title-tag’を指定すると、wp_head関数のあるところにタイトルのHTML（<title>~</title>）が出力されます。

わざわざ自前でタイトルを取得しなくても、自動でタイトルが含まれたtitle要素が出力されて便利です。