【WordPress】function.phpの基本設定

毎回なにを書くんだっけ…?となるので書いておきます。

だいたい書いとくもの

基本の設定

// 基本設定
function taco_setup() {

	// ページのタイトルを出力
	add_theme_support( 'title-tag' );

	// HTML5対応
	add_theme_support( 'html5', array( 'style', 'script' ) );	

	// アイキャッチ画像
	add_theme_support( 'post-thumbnails' );

	// ナビゲーションメニュー
	register_nav_menus( array(
		'primary' => 'メイン',
		'footer' => 'フッター',
	) );

	// グーテンベルクCSS(theme.min.css)
	add_theme_support('wp-block-styles');

	// 埋め込みコンテンツをレスポンシブに
	add_theme_support('responsive-embeds');

	// 編集画面CSS
	add_theme_support('editor-styles');
	add_editor_style('editor-style.css');

}
add_action( 'after_setup_theme', 'taco_setup' );

ウィジェットを有効化

//ウィジェット
function taco_widgets(){	
	register_sidebar(array(
		'id' => 'sidebar-1',
		'name' => 'サイドメニュー'
	));	
}
add_action( 'widgets_init' , 'taco_widgets' );

タイトルのセパレータを変更

デフォルトだと「ブログタイトル -サイト名」になるので「ブログタイトル |サイト名」にする

//タイトルセパレータ変更
function change_title_separator($sep)
{
	$sep = ' | ';
	return $sep;
}
add_filter('document_title_separator', 'change_title_separator');

CSS・JSの読み込み

<head>の中に直接記述もできますが、function.phpで読み込むのが推奨されているそう。
便利なのでとりあえずFont Awesomeも読み込んでおきます。

WordPressデフォルトのjQueryを使う場合「jQuery読み込み」は必要ありません。

function.php

// CSS・JS
function taco_enqueue()
{
	//Font Awesome
	wp_enqueue_style('taco-fontawesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css', array(), null);

	//jQuery読み込み
	if (is_admin()) return; //管理画面ではスクリプトは読み込まない
	wp_deregister_script('jquery'); //デフォルトの jQuery は読み込まない
	wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), '3.4.1', false);

	//CSS
	wp_enqueue_style('taco-style', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/style.css'));
	wp_enqueue_style('taco-common', get_template_directory_uri() . '/css/common.css', array(), filemtime(get_template_directory() . '/css/common.css'));

	// JS
	wp_enqueue_script('taco-common', get_template_directory_uri() . '/js/common.js', array(), filemtime(get_template_directory() . '/js/common.js'), true);
}
add_action('wp_enqueue_scripts', 'taco_enqueue');

ブロックスタイルをJSで追加

jsファイル「blocks.js」でブロックスタイルを追加する場合の読み込み。
「function.php」でも追加できますが、管理しづらいので別にしています。

// ブロックスタイル
function taco_guten_enqueue()
{
	wp_enqueue_script(
		'guten-style',
		get_template_directory_uri() . '/js/blocks.js',
		array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
		filemtime(get_template_directory() . '/js/blocks.js')
	);
}
add_action('enqueue_block_editor_assets', 'taco_guten_enqueue');

フロントとエディタの両方に適用するCSSの読み込み

上記で追加するスタイルのCSSはフロントとエディタで共通させたいので別で読み込ませます。

// フロントとエディタの両方に適用するCSS
function taco_style_both()
{
	wp_enqueue_style(
		'taco-block',
		get_template_directory_uri() . '/css/block.css',
		array(),
		filemtime(get_template_directory() . '/css/block.css')
	);
}
add_action('enqueue_block_assets', 'taco_style_both');

必要なときに記述

メニューの説明を表示

ナビゲーションメニューの「説明」を使いたいときに記述。
下記は<strong>メニュー名</strong><span class=”menu-item-description”>説明</span>で出力されます。

//メニューの説明を表示
function prefix_nav_description($item_output, $item, $depth, $args)
{
	if (!empty($item->description)) {
		$item_output = str_replace('">' . $args->link_before . $item->title, '">' . $args->link_before . '<strong>' . $item->title . '</strong><br>' . '<span class="menu-item-description">' . $item->description . '</span>', $item_output);
	}
	return $item_output;
}