今月納品した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ボタンがある構成は多いのでこの形はよく使っています。
投稿者プロフィール
最新の投稿
WordPressのランディングページ（LP）制作を依頼してみませんか？
もちろん通常のHTMLのLP制作の対応も可能です。
WordPressのランディングページ（LP）はワードやパワポ感覚で編集が簡単に行えるためお客様ご自身で修正や更新が行えます。
