自作テーマをぐっと便利に！functions.phpで最初に設定したい8つの魔法✨

ねぇねぇ、みんな！ブログテーマを自作してる人いるかな？私、最近WordPressのテーマを色々いじってるんだけど、実はWordPressって初期設定だと「なんでこの機能使えないの〜？」ってことが結構あるんだよね😅

でも大丈夫！functions.phpにちょっとしたおまじない（設定コード）を書いてあげるだけで、テーマがびっくりするくらい使いやすくなるんだよ✨

今回は、私が「これないと困る！」って思う機能や、これから絶対使いたい機能を8つ厳選してまとめてみたよ！しかも、最新のWordPressバージョン6.6でちゃんと動くか確認済みだから、安心して試してみてね！

準備はOK？設定の基本をチェック！

この設定たちは、基本的に自作テーマのfunctions.phpの中に書くんだ📝 大事なのは、テーマが読み込まれた直後に実行されるようにafter_setup_themeっていうアクションフックを使うこと！これを守れば、テーマの初期化がスムーズに進むよ👍

functions.php

/**
 * fc_after_setup_theme
 * テーマ読み込み直後に実行される「after_setup_theme」フックの処理を定義する関数
 */
function fc_after_setup_theme(){
  // ここに書きます
  add_theme_support( 'xxxxxxxxxx' );
}
add_action( 'after_setup_theme', 'fc_after_setup_theme' );

ただ、一部の設定はheader.phpとか、実際に表示するテンプレートファイルにも追加でコードを書く必要があるから、そこだけは忘れずにチェックしてね😉！あとは、デザインを整えるためのスタイルシートへの追記も大切だよ〜！

1. 今どき必須！HTML5に準拠したマークアップにする

せっかくブログを作るなら、最新のWeb規格に対応したいよね！この設定をすると、WordPressが出力する検索フォームとかコメント欄なんかのHTMLをHTML5に準拠したものにしてくれるんだ✨

余計な属性が出力されなくなって、コードがスッキリするから、モバイル対応なんかもやりやすくなるよ！

functions.php

add_theme_support( 'html5', array( // HTML5に準拠したマークアップ
	'search-form',
	'comment-form',
	'comment-list',
	'gallery',
	'caption',
	'style',
	'script',
));

2. 読者にも優しい！RSSフィードのリンクを有効化する

RSSフィードって、読者が新しい記事をチェックするのに便利な機能だよね！投稿やコメントのフィードリンクを使いたい場合は、これを有効化しておけばOK！

functions.php

add_theme_support( 'automatic-feed-links' ); // 投稿とコメントのRSSフィードのリンクを有効化

3. テーマを格上げ！タイトルタグを有効化する

これ、超大事！<title>タグをheader.phpに直接書くんじゃなくて、この設定でWordPressに任せるのが今の主流なんだよ！

これを有効化すると、WordPressが自動的にページのタイトルを判断して、<head>内に正しい<title>タグを出力してくれるようになるの。テーマがもっときれいに整うから、絶対入れておきたい設定だよ！

functions.php

add_theme_support( 'title-tag' ); // タイトルタグの有効化

有効化すると、<head>内に<title>タグが出力されるんですよ✨<title>タグはheader.phpに直接書かずに、こうやってadd_theme_supportで有効化するのが推奨されているんです！これで、テーマがもっときれいに整いますね！

✨おまけ１：タイトルの区切り文字（セパレーター）を変えたい！

標準の区切り文字（-）じゃなくて、「|」みたいに好きな記号に変えたいときは、このフィルターを使うよ！カスタマイズ好きにはたまらない機能だよね！

functions.php

function fn_title_separator( $sep ){
  $sep = ' | ';
  return $sep;
}
add_filter( 'document_title_separator', 'fn_title_separator' );

✨おまけ２：タイトルの中身をもっと細かくコントロールしたい！

例えば、「トップページではキャッチフレーズを非表示にしたい」とか、「個別の記事ページではサイト名を入れなくていいかな」っていうときがあるよね？そんなときは、document_title_partsフィルターを使えば、タイトルを構成する要素を自由にいじれるよ！

functions.php

function fn_document_title_parts ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] ); // フロントページでキャッチフレーズを非表示
  }
  if(is_single()){
	  unset($title['site']); // 投稿ページでサイト名を非表示
	}
  return $title;
}
add_filter( 'document_title_parts', 'fn_document_title_parts');
要素内容
$title[‘title’]記事のタイトル
$title[‘page’]記事が複数ページにまたがったときのページ番号
$title[‘tagline’]管理ページの [一般設定] で設定したキャッチフレーズ
$title[‘site’]管理ページの [一般設定] で設定したサイトのタイトル

4. ブログの見栄えUP！アイキャッチ画像を有効化する

記事一覧とかで目を引くアイキャッチ画像を使わない手はないよね！これを有効化しておかないと、投稿画面でアイキャッチ画像の設定ができなくなっちゃうから要注意だよ⚠️

post（投稿）とpage（固定ページ）で使えるように設定しておくのがオススメ！

functions.php

add_theme_support('post-thumbnails', array( 'post', 'page' ) );  // アイキャッチ画像の有効化（投稿ページ・固定ページ）

5. デザインの自由度が広がる！カスタムヘッダーを有効化する

ブログの顔とも言えるヘッダー画像を、管理画面の[外観] -> [カスタマイズ]から簡単に変えられるようにする設定だよ！読者に合わせて気分でヘッダーを変えたりできるから、デザインの幅がぐっと広がるよね🎨

functions.php

add_theme_support( 'custom-header', array( // カスタムヘッダーの有効化
  'default-image'          => get_template_directory_uri() . '/images/default-image.png',
  'random-default'         => false,
  'width'                  => 1200,
  'height'                 => 630,
  'flex-height'            => true,
  'flex-width'             => true,
  'default-text-color'     => '#000000',
  'header-text'            => true,
  'uploads'                => true,
  'wp-head-callback'       => '',
  'admin-head-callback'    => '',
  'admin-preview-callback' => '',
  'video'                  => false,
  'video-active-callback'  => '',
));

💡ポイント！

有効化しただけじゃダメで、ヘッダーを表示したいテンプレートファイル（header.phpなど）に、このコードも追加してね！

header.phpなど

<?php if ( get_custom_header_markup() ) : ?>
	<?php the_custom_header_markup(); ?>
<?php endif; ?>

6. 個性を出すなら！カスタム背景を有効化する

ヘッダーと同じく、管理画面から背景の色や画像を簡単に変更できるようにする設定だよ！背景にこだわりたい人には必須だね！

functions.php

add_theme_support( 'custom-background', array( // カスタム背景の有効化
  'default-color'          => '000000',
  'default-image'          => get_template_directory_uri() . '/images/background-image.jpg',
	'default-repeat'         => 'repeat',
	'default-position-x'     => 'left',
	'default-position-y'     => 'top',
	'default-size'           => 'auto',
	'default-attachment'     => 'scroll',
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
));

💡ポイント！

この機能を使うには、header.phpの<head>と<body>タグに以下のコードが必要なんだ！

header.phpなど

<head>
  ・・・（省略）・・・
  <?php wp_head(); ?>
  ・・・（省略）・・・
</head>
<body <?php body_class(); ?>>

7. ブランド力を高める！カスタムロゴを有効化する

ブログにロゴを設定したいときに使うのがこれ！管理画面の[サイトの基本情報]から簡単にアップロードできるようになるんだ。ブログのブランドイメージをしっかり読者に伝えられるよね！

functions.php

add_theme_support( 'custom-logo' ); // カスタムロゴの有効化

💡ポイント！

ロゴを表示したいところに、このコードを追加するよ！ロゴがあるときだけ表示してくれるから便利だよ。

header.phpなど

<?php if ( has_custom_logo() ) : ?>
	<?php the_custom_logo(); ?>
<?php endif; ?>

8. 超重要！埋め込み要素のレスポンシブ対応を有効化する

最近のブログは、YouTubeとかの動画を埋め込むことが多いよね？この設定をしておけば、埋め込んだ要素が画面幅に合わせて自動で最適な表示になるんだ！

スマホで見たときに動画が画面からはみ出ちゃう…なんてことがなくなるから、これは絶対やっておきたい便利機能だよ！

functions.php

add_theme_support( 'responsive-embeds' ); // 埋め込み要素のレスポンシブ対応有効化

おわりに

どうだったかな？

functions.phpにこれらの設定を書いておくだけで、あなたのテーマが最新で使いやすいテーマに生まれ変わるよ✨！私が新しいガジェットを最初にセットアップする感覚と似てるかも！ワクワクするよね😍

私もまだまだテーマのカスタマイズは勉強中だから、また新しい便利な設定を見つけたらすぐにシェアするね！