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

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

テーマのPHPファイルに以下のコードを追加し、言語切り替えスイッチをヘッダーに表示させます。

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

このコードを適切な位置に挿入する必要があります。​以下に、代表的な無料テーマでの挿入位置を説明します。

WordPressテーマ　Cocoonの場合

<?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ファイル内の適切な位置に、上記のコードを挿入します。​具体的な挿入場所は、テーマの構造によって異なるため、事前に確認が必要です。

WordPressテーマ　Lightningの場合

<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 if ( is_front_page() ) { $title_tag = 'h1'; } else { $title_tag = 'div'; } ?> <<?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( '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(), ) ); } ?></div><?php do_action( 'lightning_site_header_append' ); ?></header>

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

言語切り替えスイッチを適切に表示するために、以下のCSSを追加します。​

ul.bogo-language-switcher { /* 翻訳ボタンを横並びに */ display: flex; } 
.bogo-header {    position: absolute;    right: 2%;    transform: translateY(-30%);    z-index: 10; /* Bogoを他の要素の上に表示するためのz-index */ }

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

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