STEP4：機能追加｜functions.phpでメニュー・ウィジェット等を実装 - WordPress総合ポータル

WordPress総合ポータル

← STEP3：デザイン実装 STEP5：カスタムテンプレート →

テーマサポート機能の有効化

アイキャッチ画像やタイトルタグの自動出力など、WordPressの標準機能をテーマで使えるようにするには、functions.phpで明示的に「サポート」を宣言する必要があります。

<?php
function my_theme_setup() {
    add_theme_support('title-tag');           // タイトルタグの自動出力
    add_theme_support('post-thumbnails');      // アイキャッチ画像
    add_theme_support('html5', array('search-form', 'comment-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

ナビゲーションメニューの登録

<?php
function my_theme_menus() {
    register_nav_menus(array(
        'primary' => 'メインメニュー',
        'footer'  => 'フッターメニュー',
    ));
}
add_action('after_setup_theme', 'my_theme_menus');

登録後、テンプレート側でwp_nav_menu(array('theme_location' => 'primary'))のように呼び出すことで、管理画面「外観」→「メニュー」で設定した内容が表示されます。

ウィジェットエリアの登録

<?php
function my_theme_widgets() {
    register_sidebar(array(
        'name'          => 'サイドバー',
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
    ));
}
add_action('widgets_init', 'my_theme_widgets');

CSS・JavaScriptの正しい読み込み方

<head>に直接<link>を書かないCSS/JSはwp_enqueue_script()・wp_enqueue_style()関数を使って読み込むのが正しい方法です。直接HTMLタグを書くと、他のプラグインとの読み込み順序の競合が起きやすくなります。

<?php
function my_theme_scripts() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

関連コンテンツ

↑