プラグインなしでメニュー・ウィジットを作成

wordpress
  1. 概要・まとめ
  2. メニューの作成
  3. サイドバーの作成
    1. functions.phpへのコード追加
    2. 表示したい箇所へのコード追加
  4. スクロール後固定されるサイドバーの作成
  5. 注意事項

概要・まとめ

WordPressでプラグインを使用せずにメニューやウィジェットを作成するには、PHPコードを編集し，register_nav_menus関数とregister_sidebar関数を使って表示させる．
メニューやウィジットの内容の編集はWordpressの管理画面から行える．
ただし，コードの変更はサイトの動作自体に影響を与える可能性があるため、必ずバックアップを取ってから行いたい．

メニューの作成

メニューの表示には，次の手順が必要．

  1. functions.phpに次のコードを追加する
    functions.phpに次のコードを追加する．以下では，register_nav_menus関数を使用して，ヘッダーとフッター用の2つのカスタムメニューを登録している．
register_nav_menus(
    array(
        'menu-header' => esc_html__( 'header', 'kennzo_blog' ),
        'menu-footer' => esc_html__( 'footer', 'kennzo_blog' ),
    )
);
  1. テーマファイルのメニューを表示したい箇所に，wp_nav_menu()関数を記述して，表示箇所を指定する
    idやクラスを付与しておき，CSSでスタイルを適用するのに使用する
wp_nav_menu(
    array(
        'theme_location' => 'menu-header',
        'menu_id'        => 'header-menu',
        'container_class' => 'menu-header-container',
    )
);
  1. 管理画面で対応付けを行う
    外観→メニューの「位置を管理」タブでメニューの内容と位置の対応付けができる

サイドバーの作成

サイトバーの表示には，functions.phpへのコード追加と，表示したい箇所へのコード追加の2つが必要．

functions.phpへのコード追加

次のコードをfunctions.phpに追加する．
下記では、register_sidebar関数を使用して2つのサイドバーを登録している．

function kennzo_blog_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'Sidebar', 'kennzo_blog' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Add widgets here.', 'kennzo_blog' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
    register_sidebar(
        array(
            'name'          => esc_html__( 'sticky-sidebar', 'kennzo_blog' ),
            'id'            => 'sticky-sidebar',
            'description'   => esc_html__( 'sticky-sidebar widgets here.', 'kennzo_blog' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'kennzo_blog_widgets_init' );

引数の説明

  • ‘name’: サイドバーの表示名
  • ‘id’: サイドバーの識別子で，表示箇所の指定に使う文字列
  • ‘description’: サイドバーの説明
  • ‘before_widget’: ウィジェットの直前に表示するHTML
  • ‘after_widget’: ウィジェットの直後に表示するHTML
  • ‘before_title’: ウィジェットタイトルの直前に表示するHTML
  • ‘after_title’: ウィジェットタイトルの直後に表示するHTML
  • %1$sと%2$sは、それぞれウィジェットのIDとクラス名に置き換えられる

表示したい箇所へのコード追加

表示したい箇所に，次のdynamic_sidebar関数を追加することで，ウィジットの表示箇所を指定する．
この時の引数に，register_sidebarで登録したときのidを指定する．

dynamic_sidebar( 'sidebar-1' );

例として，サイドバーのときのPHP例を示す．

<aside id="secondary" class="widget-sidebar">
    <div class="fixed-sidebar">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div>
    <div class="sticky-sidebar">
        <?php dynamic_sidebar( 'sticky-sidebar' ); ?>
    </div>    
</aside>

スクロール後固定されるサイドバーの作成

stickyなサイドバーを作成するには、CSSでposition: sticky;を設定する。

.sticky-sidebar {
    position: sticky;
    top: 0;
    height: fit-content;
}

注意事項

上記のコードは一例であり、実際のサイトに適用する際には、テーマの構造やカスタマイズの目的に合わせて適宜修正する必要がある．
コードの変更は、サイトの動作に影響を与える可能性があるため、必ずバックアップを取ってから行ってください．