Lightningのメニュー右にウィジェットでボタンを追加するカスタマイズ

今月納品したLP案件でLightningテーマの標準メニューから右にボタン2個をウィジェット追加というカスタマイズをしました。

その方法を健忘録も兼ねて書きます。

function.phpに追記するコード

function.phpに以下のコードを追記してください。

/* ヘッダー右ウィジェットの表示 */
function my_lightning_site_header_logo_after() {
    if ( is_active_sidebar( 'header-right-widget' ) ) {
        echo '<div class="site-header-sub">';
            dynamic_sidebar( 'header-right-widget' );
        echo '</div>';
    }
}
add_action( 'lightning_site_header_logo_after', 'my_lightning_site_header_logo_after' );
 
/* ヘッダーのクラス名を変更 */
function my_lightning_get_class_names( $class ) {
    $class['site-header'][1] = 'site-header--layout--sub-active';
    $class['global-nav'][1]  = 'global-nav--layout--penetration';
    return $class;
}
add_filter( 'lightning_get_class_names', 'my_lightning_get_class_names' );

_g3フォルダにあるtemplate-partsファイルのsite-header.phpの以下の「lightning_site_header_logo_after」のコードを「wp_nav_menu」のPHPコードの後ろへ配置します。

これをLightningテーマの初期の状態にしておくと右ウィジェットがメニューの左にきてしまうので注意です。

<?php do_action( 'lightning_site_header_logo_after' ); ?>

変更後のsite-header.php

<?php
　　　if ( class_exists( 'VK_Description_Walker' ) ) {
			wp_nav_menu(
				array(
					'theme_location'  => 'global-nav',
					'container'       => 'nav',
					'container_class' => lightning_get_the_class_name( 'global-nav' ),
					'container_id'    => 'global-nav',
					'items_wrap'      => '<ul id="%1$s" class="%2$s vk-menu-acc global-nav-list nav">%3$s</ul>',
					'fallback_cb'     => '',
					'echo'            => true,
					'walker'          => new VK_Description_Walker(),
				)
			);
		}
		?>
		
<?php do_action( 'lightning_site_header_logo_after' ); ?>

完成図

右ウィジェットでボタンを2列に表示できました。

真ん中にグローバルナビを設置して右にウィジェットでボタンを表示させるヘッダーの完成です。

こんな風に右に電話番号とお問い合わせボタンを設置することも可能です。

LPサイトだと電話番号と右にお問い合わせCVボタンがある構成は多いのでこの形はよく使っています。

投稿者プロフィール

MikaLP専門Webデザイナー（フリーランス協会会員・インボイス登録済）

地元商社ECサイト・楽天ショップのサイト更新担当、web制作会社のwebデザイナー経験を経てフリーランスLP専門Webデザイナーとして独立。
健康食品・化粧品などの通販業界から、不動産・住宅・士業など多業種なLPデザイン制作に対応。
WordPress（X-T9/Lightning）への実装からHTML制作まで、目的に応じて柔軟に対応。
納品後の修正・運用を見据えたLP制作で企業のWeb集客をサポートしています。
👉LP制作のご相談はこちら

最新の投稿

• 2026年8月6日LPノウハウ記事保守費を0円に！WordPressのLP制作をフリーランスに頼むべき理由
• 2026年8月5日LPノウハウ記事自社で即時修正！LPデザイン依頼で月々の保守費用を浮かせる裏技（WordPress ）
• 2026年8月4日LPノウハウ記事制作会社 vs フリーランス！LP制作の外注で後悔しない選び方
• 2026年7月29日LPノウハウ記事スムーズなLPデザイン依頼に必須！事前に準備しておくべきもの