WordPress多言語化プラグイン「Bogo」の切り替えボタン（スイッチャー）をヘッダーに配置する方法

PHPファイルを編集する際には、誤操作による不具合を防ぐため、事前にWordPress全体のバックアップを取得してください。​プラグインやレンタルサーバーのバックアップ機能を利用すると安全です。

<!-- ヘッダーへ　--> 
<div class="bogo-header"> 
<?php echo do_shortcode('[bogo]'); ?> 
</div> 
<!--  -->

テーマのPHPファイルに上記のコードを追加し、言語切り替えスイッチをヘッダーに表示させます。このコードを適切な位置に挿入する必要があります。​以下に、代表的な無料テーマでの挿入位置を説明します。

<?php //ヘッダーエリア /** * Cocoon WordPress Theme * @author: yhira * @link: https://wp-cocoon.com/ * @license: 
省略
       
<?php //キャッチフレーズがヘッダー下部のとき        if (is_tagline_position_header_bottom()) {           get_template_part('tmp/header-tagline');        } ?>      
</div>
</header> 
<!-- ヘッダーへ　-->
<div class="bogo-header">
<?php echo do_shortcode('[bogo]'); ?>
</div>
<!--  -->
<?php get_template_part('tmp/navi'); ?>  
</div>
<!-- /.header-container-in --> 
</div>
<!-- /.header-container -->

temp / header-container.phpファイル内の適切な位置に、上記のコードを挿入します。​具体的な挿入場所は、テーマの構造によって異なるため、事前に確認が必要です。

<header id="site-header" class="<?php lightning_the_class_name( 'site-header' ); ?>">
    <?php do_action( 'lightning_site_header_prepend' ); ?>

    <div id="site-header-container" class="<?php lightning_the_class_name( 'site-header-container' ); ?> container">

★★★★　中略　★★★★

        <<?php echo $title_tag; ?> class="<?php lightning_the_class_name( 'site-header-logo' ); ?>">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <span><?php lightning_print_headlogo(); ?></span>
            </a>
        </<?php echo $title_tag; ?>>

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

        <!-- ヘッダーへ -->
        <div class="bogo-header">
            <?php echo do_shortcode('[bogo]'); ?>
        </div>
        <!--  -->

        <?php if ( class_exists( 'VK_Description_Walker' ) ) { 
            wp_nav_menu( array( 

★★★★　中略　★★★★

        } ?>
    </div>

    <?php do_action( 'lightning_site_header_append' ); ?>
</header>

_g3/template-parts/site-header.phpファイル内の適切な位置に、上記のコードを挿入します。​こちらも、テーマの構造によって挿入場所が異なるため、注意が必要です。

ul.bogo-language-switcher { 
    /* 翻訳ボタンを横並びに */ 
    display: flex; 
}

.bogo-header {    
    position: absolute;    
    right: 2%;    
    transform: translateY(-30%);    
    z-index: 10; 
    /* Bogoを他の要素の上に表示するためのz-index */ 
}

言語切り替えスイッチを適切に表示するために、上記のCSSコードを追加します。

CSSコードの追加手順

1. WordPress管理画面の「外観」→「カスタマイズ」をクリックします。
2. 「追加CSS」を選択し、上記のコードを貼り付けます。
3. 「公開」ボタンを押して変更を保存します。

これにより、言語切り替えボタン（スイッチャー）がヘッダーの右側に横並びで表示されます。