【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;
}
関連記事
-
WordPress
【WordPress】記事一覧で年別タイトルをつける
-
WordPress プラグイン
【WordPress】フロントでIntuitive Custom Post Orderの並び替えが効かないとき
-
WordPress
静的サイトに一部WordPressを導入する
-
WordPress
【WordPress】タームIDからタクソノミーを取得する
-
WordPress プラグイン
【WordPressプラグイン】Advanced Custom Fieldsの出力
-
WordPress プラグイン
【WordPressプラグイン】Smart Custom Fieldsの出力
-
WordPress 設定 関数の使い方
【WordPress】ウィジェット機能の追加
-
WordPress
祖先ページのスラッグを取得してbody_classに追加する