人気テーマを題材にadd_theme_supportを再確認する

初めてWordPressテーマを作ってから3年経ちました。時間の経過とともに、ある程度自分の作り方みたいな物が固まってきて、悩むことが少なくなってきています。

しかし、これはインプットが足りないがゆえの、ともすれば老化とも言えるものなのではないか？とも思っています。確かに自分はおじさんだけど、姿勢までおじさんになるわけにはいかないんです。というわけで、とある大人気テーマを見ながら自分の中に無いコードを取り込んでいこうというのがこの連載（多分連載します）です。

add_theme_supportとは

まずはadd_theme_supportとはなにか。WordPressCodexで確認してみます。

テーマやプラグインが特定のテーマ機能をサポートすることを許可します。テーマから呼ばれる場合、動作させるためにはテーマのfunctions.phpファイルの中で指定されなければなりません。アクションフック/enにより、プラグインからも呼び出し可能です。

アクションフックによる場合は、after_setup_theme/enとなります。init/enアクションフックでは、機能によっては遅すぎることがあります。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support

WordPressコアの中に定義してある機能をテーマ側からON、OFFできる関数という理解でよさそうですね。

人気テーマに書かれていたadd_theme_support

さてここからは人気テーマに書かれているadd_theme_supportを見ていきます。ちなみに英語版のCodexをみると…

‘post-formats’, ‘post-thumbnails’, ‘custom-header’, ‘custom-background’, ‘custom-logo’, ‘menus’, ‘automatic-feed-links’, ‘html5’, ‘title-tag’, ‘customize-selective-refresh-widgets’, ‘starter-content’, ‘responsive-embeds’, ‘align-wide’, ‘dark-editor-style’, ‘disable-custom-colors’, ‘disable-custom-font-sizes’, ‘editor-color-palette’, ‘editor-font-sizes’, ‘editor-styles’, ‘wp-block-styles’, and ‘core-block-patterns’.

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

たくさんありますね。

add_theme_support( ‘title-tag’ );

投稿や固定ページで、タイトルを編集できるようにする。これは必須ですね。

add_theme_support( ‘editor-styles’ );

ページ編集画面に独自のCSSを適用できるようにする。これもよく使いますね。編集画面にCSSを適用する書き方としてはこんな書き方もあります。こちらのほうが簡単にパスが指定できますね。

add_editor_style( 'css/custom-editor-style.css' );

add_theme_support( ‘align-wide’ );

時折、サイトの途中で画面幅いっぱいの動画や画像が配置されていることがありますが、これを実現するために利用できます。ただし全てのブロックに使えるわけではないようです。

add_theme_support( ‘custom-background’ );

外観 > カスタマイズで背景メニューを利用できるようになります。

add_theme_support( ‘custom-line-height’ );

ブロック設定に「行の高さ」が追加されます。line-heightがインラインで追記されるようです。記述を消してみたら、やはり「行の高さ」がなくなりました。

add_theme_support( ‘custom-units’, ‘px’, ‘em’, ‘rem’, ‘vw’, ‘vh’ );

カバーブロックのサイズに、好みの単位を追加できます。

add_post_type_support( ‘page’, ‘excerpt’ );

これはadd_theme_supportではないのですね。add_theme_supportの投稿タイプ版といったところです。

add_theme_support( ‘post-thumbnails’ );

定番ですね。アイキャッチメニューが追加されます。

add_theme_support( ‘customize-selective-refresh-widgets’ );

外観 > カスタマイズでウィジェットを追加した時に、自動で更新してくれるようになります。

add_theme_support( ‘automatic-feed-links’ );

Feedのリンクをheadに挿入してくれます。

add_theme_support( ‘woocommerce’ );

woocommerceを利用する時に必要な宣言のようです。

このテーマには書かれていなかったけど、推しておきたいtheme_support

add_theme_support(‘html5’);

html5で不要になった属性を出力しないようになってくれます。type=text/javascriptとかですね。W3C Validatorなどでエラーや警告を一つも出したくない！となるとこれは必須ですね。

add_theme_support(‘editor-color-parret’);

ブロックエディタで使えるようになった色設定メニュー。これで利用できる色をテーマ側で指定できる。書き方はこんな感じ。

add_theme_support('editor-color-parret',array(
    array(
        'name' => 'エディタで表示される色名',
        'slug' => 'インラインスタイルで利用される色スラッグ',
        'color' => 'カラーコード',

    ),
))