【SWELL】ヘッダーロゴをメニューの中央に配置したい

※こちらの内容にはテーマファイルの編集が含まれます。もし参考にされる場合は、自己責任でお願いいたします。

編集するファイルを子テーマへコピーしておく

編集対象のファイルを子テーマにコピーしておくことで、親テーマの更新による上書きを防げます。

対象ファイルは以下です：

• parts/header/header_contents.php
• functions.php
• style.css

ヘッダー要素の並びを変更

子テーマの header_contents.php を編集します。
（ディレクトリ： parts/header/header_contents.php）

<header id="header" class="l-header <?=esc_attr( $header_class )?>" data-spfix="<?=$SETTING['fix_header_sp'] ? '1' : '0'?>">
	<?php if ( SWELL_Theme::is_use( 'head_bar' ) ) SWELL_Theme::get_parts( 'parts/header/head_bar' ); ?>
	<div class="l-header__inner l-container l-header--split">
		
		<!-- 左側メニュー -->
		<nav class="l-header__gnav -left">
			<?php
			wp_nav_menu([
				'theme_location' => 'header_left', 
				'menu_class'     => 'c-gnav -left',
				'container'      => false,
                'walker' => new SmallNavDesc_Walker_Nav_Menu(),
			]);
			?>
		</nav>

		<!-- ロゴ -->
		<div class="l-header__logo">
			<?php echo SWELL_PARTS::head_logo(); ?>
			<?php if ( $SETTING['phrase_pos'] === 'head_wrap' ) : ?>
				<div class="c-catchphrase u-thin"><?=esc_html( SWELL_Theme::site_data( 'catchphrase' ) )?></div>
			<?php endif; ?>
		</div>

		<!-- 右側メニュー -->
		<nav class="l-header__gnav -right">
			<?php
			wp_nav_menu([
				'theme_location' => 'header_right',
				'menu_class'     => 'c-gnav -right',
				'container'      => false,
                'walker' => new SmallNavDesc_Walker_Nav_Menu(),
			]);
			?>
		</nav>

		<!-- ウィジェットなど -->
		<?php
		\SWELL_Theme::outuput_widgets( 'head_box', [
			'before' => '<div class="w-header pc_"><div class="w-header__inner">',
			'after'  => '</div></div>',
		]);

		SWELL_Theme::get_parts( 'parts/header/sp_btns' );
		?>
	</div>

	<?php
	if ( SWELL_Theme::is_use( 'sp_head_nav' ) ) :
		SWELL_Theme::get_parts( 'parts/header/sp_head_nav' );
	endif;
	?>
</header>

CSSでスタイルを調整する

子テーマの style.css か追加CSSに以下を追記します。
これにより、ロゴが中央に配置され、子メニューの表示位置も調整されます。

@media (min-width: 960px) {
    .l-header__inner {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 200px;
        max-width: 1000px;
    }

    .l-header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        text-align: center;

    }

    .-series .c-headLogo {
        margin-right: 0;
    }

    /* 子メニューの表示位置を調整 */
    .l-header__gnav .menu-item-has-children {
        position: relative;
    }

    .l-header__gnav .sub-menu {
        position: absolute;
        top: 130px !important;
        left: 120px !important;
        z-index: 999;
        display: none;
    }

    /* 子メニューのサイズ調整 */
    .l-header__gnav .sub-menu li a {
        padding: 7px 20px;
        line-height: 1.4;
        font-size: 14px;
    }

    /* ホバーで表示 */
    .l-header__gnav .menu-item-has-children:hover>.sub-menu {
        display: block;
    }

    .l-header .sub-menu li a:hover {
        color: #333;
    }

    .l-header__gnav .sub-menu li a:hover {
        background: transparent !important;
    }

    .l-header__gnav .sub-menu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

}

カスタマイザーからメニューを管理できるようにする

子テーマの functions.php に以下を追記すると、管理画面からメニューを自由に変更できます。

// ロゴ左右メニューの登録
function my_register_custom_menus() {
	register_nav_menus([
		'header_left'  => 'ヘッダー左メニュー',
		'header_right' => 'ヘッダー右メニュー',
	]);
}
add_action( 'after_setup_theme', 'my_register_custom_menus' );

class SmallNavDesc_Walker_Nav_Menu extends Walker_Nav_Menu {
    
  // メニュー項目の開始タグと中身を出力
    public function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
    $classes = empty( $item->classes ) ? [] : (array) $item->classes;
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $output .= '<li' . $class_names . '>';

    $attributes  = '';
    ! empty( $item->url ) and $attributes .= ' href="' . esc_attr( $item->url ) . '"';

    $title = apply_filters( 'the_title', $item->title, $item->ID );
    $description = ! empty( $item->description ) ? $item->description : '';

    $output .= '<a' . $attributes . '>';
    $output .= '<span class="ttl">' . esc_html( $title ) . '</span>';
    if ( $description ) {
        $output .= '<span class="c-smallNavTitle desc">' . esc_html( $description ) . '</span>';
    }
    $output .= '</a>';
    }

    // メニュー項目の終了タグを出力
    public function end_el( &$output, $item, $depth = 0, $args = [] ) {
    $output .= "</li>\n";
    }
}