お店のホームページなどでインバウンド対応や越境ECで日本語と英語併記が必要な場合があります。
WordPressの場合、無料の多言語化プラグインBogoで対応可能です。ですがそのままですとサイドナビにBogoの切り替えスイッチを配置になります。例えば見栄えのよいヘッダーに切り替えスイッチを配置するのはいかがでしょうか。
筆者の場合、サンプルのホームページ作成時にBogo替えスイッチが必要になりました。
多言語化プラグインBogoとは
Bogoは、WordPressサイトを多言語化するための無料プラグインです。シンプルで軽量な設計により、他のプラグインやテーマとの互換性が高く、トラブルが少ないとされています。
Bogoの主な特徴
- 言語ごとのユニークなURL生成: 各言語に対してサブディレクトリを作成し、例えば日本語のURLがhttps://example.com/、英語のURLがhttps://example.com/en/となります。これにより、多言語SEO効果が高まります。
- コンテンツの複製と翻訳: 既存の投稿や固定ページをワンクリックで別言語の記事として複製し、翻訳を行うことができます。
- メニューとウィジェットの多言語対応: ヘッダーやフッターのメニュー、サイドバーのウィジェットも言語ごとに設定可能で、ユーザーが言語を切り替える際に適切なコンテンツを表示できます。
- 言語スイッチャーの設置: ウィジェットやショートコードを使用して、サイト上に言語切替用のスイッチャーを簡単に追加できます。
注意点
- 自動翻訳機能はなし: Bogo自体には自動翻訳機能がないため、各言語のコンテンツは手動で翻訳する必要があります。
- カスタム投稿タイプへの対応: デフォルトではカスタム投稿タイプに対応していませんが、カスタマイズにより対応可能です。
Bogoは、シンプルで使いやすい多言語化プラグインを求めるユーザーに適しています。ただし、自動翻訳機能がないため、コンテンツの翻訳は手動で行う必要があります。DeepLやChat GPTでの翻訳をお勧めします。
多言語化プラグインBogoの切り替えスイッチ位置をヘッダーへ移動する
これはPHP変更とCSS追加で実現できます。
- 手順１バックアップ
PHPを変更するため間違うと不具合が発生します。万が一のためプラグインやレンタルサーバー側でWordpressのバックアップをしてください。
- 手順２PHP変更
<!-- ヘッダーへ --> <div class="bogo-header"> <?php echo do_shortcode('[bogo]'); ?> </div> <!-- -->上記コードを該当するPHPに挿入します。挿入位置はテーマによって異なります。人気で代表的なWordpress無料テーマでの挿入位置を説明します。
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 */ }「追加css」に上記をコピペで追加
まとめ
ホームページの見栄えをよくする一例として、Bogoの言語切り替えスイッチの位置をヘッダーに移動させる方法を紹介しました。参考になりましたら幸いです。
