WordPress自作テーマ制作③│メニューとウィジェットの作成

2021.02.232024.03.04

WordPressの自作テーマをスターターテーマを使わずにフルスクラッチで作成してみています。

ということで、今回はメニューとウィジェットを表示させてみます。

スターターテーマを使わずに
WordPress自作テーマを制作する

WordPressのメニューを表示する

外観のメニューからグローバルメニュー・フッターメニューを作成して表示させてみます。

管理画面にメニューを表示する

以下のコードをfunctions.phpに入れると、外観からメニューへアクセスできるようになります。

// 外観のメニュー表示
add_theme_support('menus');

メニュー設定

以下のコードをfunctions.phpに入れると、メニュー設定の項目にメニュー位置のオプションが設定できます。

function setup_nav_menu() {
    register_nav_menu('global_menu', 'グローバルメニュー');
    register_nav_menu('footer_menu', 'フッターメニュー');
}
add_action('after_setup_theme', 'setup_nav_menu');

メニューの表示

header.phpのメニューを表示させたい場所に、下記のコードを挿入します。

    <nav class=" global-menu-nav">
        <ul class="global-menu-list">
            <?php
            wp_nav_menu([
                'container' => '',
                'theme_location' => 'global_menu',
                'items_wrap'      => '%3$s',
                'link_before'     => '<span >',
                'link_after'      => '</span>',
            ]);
            ?>
        </ul>
    </nav>

またfooterphpのメニューを表示させたい場所に、下記のコードを挿入します。

<ul class="footer-menu-list">
    <?php
    wp_nav_menu([
        'container'       => '',
        'theme_location'  => 'footer_menu',
        'items_wrap'      => '%3$s',
        'link_before'     => '<span >',
        'link_after'      => '</span>',
    ]);
    ?>
</ul>

項目	備考
container	ulを囲う要素を指定（div, nav, false）※空白はfalseと同じ。
theme_location	登録した位置設定（ロケーション名）を指定

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

メニューの表示確認

以上の設定をしたうえで、状態の確認をしてみます。

ちゃんとメニューの表示が反映されました。

※グローバルメニューとフッターメニューにそれぞれカスタムリンクを3つ入れた状態です。

メニューに生成されるclassを除去する

ソースコードを見ると、メニューのliで生成されるidやclassがやたら長いので取り除きます。

<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">

下記のコードをfunctions.phpに挿入

add_filter('nav_menu_css_class', 'wp_navtag_remove', 100, 1);
add_filter('nav_menu_item_id', 'wp_navtag_remove', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function wp_navtag_remove($var) {
    return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

挿入後、すっきりしました。

<li class="current-menu-item">

WordPressのメニューを表示する

次にウィジェットを設置してみます。

管理画面にメニューを表示する

以下のコードをfunctions.phpに入れると、外観からウィジェットへアクセスできるようになります。

// 外観のウィジェット表示
add_theme_support('widgets');

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

以下のコードをfunctions.phpに入れると、ウィジェットの項目に登録ができます。

function register_area() {
    register_sidebar([
        'name' => 'サイドバー',
        'id' => 'sidebar',
        'description' => 'サイドバーに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
    register_sidebar([
        'name' => 'フッター',
        'id' => 'footer',
        'description' => 'フッターに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
}
add_action('widgets_init', 'register_area');

参考

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/register_sidebar

＋ボタンを押して、適当にテキストのブロックを追記しました。

ウィジェットの表示

footerphpのウィジェットを表示させたい場所に下記のコードを挿入します。

サイドバー

<?php if (is_active_sidebar('sidebar')) : ?>
    <div id="sidebar_widget">
        <?php dynamic_sidebar('sidebar'); ?>
    </div>
<?php endif; ?>

フッター

    <?php if (is_active_sidebar('footer')) : ?>
        <div id="footer_widget">
            <?php dynamic_sidebar('footer'); ?>
        </div>
    <?php endif; ?>

ウィジェットの確認

ウィジェットエリアに入れたテキストブロックが表示されています。

この時点でのコードまとめ

index.php → 前回から変更なし
sidebar.php →空の状態

header.php

<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <?php wp_head(); ?>
</head>

<body>

    <nav class=" global-menu-nav">
        <ul class="global-menu-list">
            <?php
            wp_nav_menu([
                'container' => '',
                'theme_location' => 'global_menu',
                'items_wrap'      => '%3$s',
                'link_before'     => '<span >',
                'link_after'      => '</span>',
            ]);
            ?>
        </ul>
    </nav>

footer.php

<?php get_sidebar(); ?>

<?php if (is_active_sidebar('sidebar')) : ?>
    <div id="sidebar_widget">
        <?php dynamic_sidebar('sidebar'); ?>
    </div>
<?php endif; ?>

<ul class="footer-menu-list">
    <?php
    wp_nav_menu([
        'container'       => '',
        'theme_location'  => 'footer_menu',
        'items_wrap'      => '%3$s',
        'link_before'     => '<span >',
        'link_after'      => '</span>',
    ]);
    ?>
</ul>
<footer id="footer">
    <?php if (is_active_sidebar('footer')) : ?>
        <div id="footer_widget">
            <?php dynamic_sidebar('footer'); ?>
        </div>
    <?php endif; ?>
</footer>
<?php wp_footer(); ?>
</body>

</html>

functions.php

<?php

// 外観のメニュー表示
add_theme_support('menus');

// 外観のウィジェット表示
add_theme_support('widgets');

// タイトルタグの表示
add_theme_support('title-tag');

// アイキャッチの表示
add_theme_support('post-thumbnails');

// WordPressのバージョン情報
remove_action('wp_head', 'wp_generator');

// 絵文字
add_filter('emoji_svg_url', '__return_false');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// Windows Live Writeの停止
remove_action('wp_head', 'wlwmanifest_link');

// EditURI(RSD Link)の停止
remove_action('wp_head', 'rsd_link');

// 記号の自動変換停止(wptexturize無効化)
add_filter('run_wptexturize', '__return_false');

// https://api.w.org/の停止
remove_action('wp_head', 'rest_output_link_wp_head');

// global-styles-inline-cssの停止
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
remove_action('wp_footer', 'wp_enqueue_global_styles', 1);
remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');

// classic-theme-stylesの停止
add_action('wp_enqueue_scripts', function () {
    wp_dequeue_style('classic-theme-styles');
}, 20);

// wp-block-libraryの停止
add_action('wp_enqueue_scripts', function () {
    wp_dequeue_style('wp-block-library');
}, 20);

// メニューのliのid,classを削除
add_filter('nav_menu_css_class', 'wp_navtag_remove', 100, 1);
add_filter('nav_menu_item_id', 'wp_navtag_remove', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function wp_navtag_remove($var) {
    return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

// メニュー位置の設定
function setup_nav_menu() {
    register_nav_menu('global_menu', 'グローバルメニュー');
    register_nav_menu('footer_menu', 'フッターメニュー');
}
add_action('after_setup_theme', 'setup_nav_menu');

// ウィジェットエリアの登録
function register_area() {
    register_sidebar([
        'name' => 'サイドバー',
        'id' => 'sidebar',
        'description' => 'サイドバーに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
    register_sidebar([
        'name' => 'フッター',
        'id' => 'footer',
        'description' => 'フッターに表示されます。',
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
    ]);
}
add_action('widgets_init', 'register_area');

まとめ

今まで気になっていたメニューとウィジェット。

どちらともに似たような設定から表示することができました。

応用すれば好きな場所に表示ができるということで、既存のテーマでも応用できると思います。

URLをコピーしました！

WAZAの有料記事のサブスクリプションも開始しました。

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る

全サービス一覧

WordPress自作テーマ制作③│メニューとウィジェットの作成

WordPressのメニューを表示する

管理画面にメニューを表示する

メニュー設定

メニューの表示

メニューの表示確認

メニューに生成されるclassを除去する

WordPressのメニューを表示する

管理画面にメニューを表示する

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

ウィジェットの表示

ウィジェットの確認

この時点でのコードまとめ

まとめ

Service

関連記事