Bootstrap5でWordPressのテーマを作るーウィジェットの設定

2022年3月23日

Bootstrap5でWordPressのテーマを作るーウィジェットの設定

Bootstrap5

bootstrap5, foundation, foundation6, WordPress

前回は、固定ページと投稿ページを表示できるようにしました。今回は、ウィジェットの設定です。ヘッダーと、サイドバーにウィジェットを設定します。

ヘッダーのほうは、直接テンプレートに書いてもいいのですが、案外に転居があったり、使いまわしに便利だったりします。サイドバーは、ウィジェットを置いておくと、WordPressの機能でいろいろなものが表示できて便利です。

まず、「functions.php」に以下の内容を追記します。

functions.php

function theme_widgets_init () {
    register_sidebar ( array (
        'id' => 'sidebar',
        'name' => 'サイドバー',
        'description' => 'サイドバーに表示',
    ));
    register_sidebar ( array (
        'id' => 'header_right',
        'name' => 'ヘッダー右',
        'description' => 'ヘッダー右に表示',
    ));
}
add_action ( 'widgets_init', 'theme_widgets_init' );

続いて、「header.php」の「col-md-4」クラスのタグの間と、「sidebar.php」の「」のコメントの間を以下のように修正します。

header.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <?php wp_head(); ?>
</head>

<body>
    <!-- container -->
    <div class="container">
        <!-- header -->
        <header class="header">
            <div class="row">
                <div class="col-md-8">
                    <h1 class="header_title">
                        <a href="<?php echo esc_url( home_url('/') ); ?>" rel="home">
                            <?php bloginfo( 'name' ); ?></a>
                    </h1>
                    <p class="header_description">
                        <?php bloginfo( 'description' ); ?>
                    </p>
                </div>
                <!-- /col-md-8 -->
                <div class="col-md-4">
                    <address class="widget_area address" role="address" aria-label="ヘッダー右">
                        <div class="widget_cokumn header_right">
                            <?php dynamic_sidebar( 'header_right' ); ?>
                        </div>
                    </address>
                </div>
                <!-- /col-md-4 -->
            </div>
            <!-- /row -->
        </header>
        <!-- /header -->

sidebar.php

<div class="col-md-4">
    <!-- sidebar -->
    <div class="sidebar" role="sidebar">
        <?php if ( is_active_sidebar ( 'sidebar' )) : ?>
        <aside class="widget_area" role="complementary" aria-label="サイドバー">
            <div class="widget_column sidebar">
                <?php dynamic_sidebar( 'sidebar' ); ?>
            </div>
        </aside>
        <?php endif; ?>
    </div>
    <!-- sidebar -->
</div>
<!-- /col-md-4 -->
</div>
<!-- /row -->
</div>
<!-- /content -->

「functions.php」、「header.php」、「sidebar.php」を修正してアップロードすると、ウィジェットから以下のような入力ができるようになります。