WordPress用のTCDテーマ「Muum」は、ブログ用として扱いやすく優れたテーマです。ただ、私の経験上、多言語化プラグイン「Bogo」との相性はいまひとつで、手を加えないと不自然さが残る箇所が出てきます。
今回は、Muumを自然な多言語サイトとして利用するための方法を検討してみました。主な改善点は、以下の2点です。
- 日本語でしか表示されない箇所を、英語等で強制的に差し替える（ただし、TCD基本設定のカスタムCSSによる対処を基本として、翻訳ファイル等には触らない）
- 言語切り替えボタン（スイッチャー）を、ヘッダーに表示させる
はじめに
本記事は、サイトにプラグイン「Bogo」がインストールされ、適切な初期設定と、複数の言語でのページ作成が済んでいることを前提として執筆されていることにご注意ください。「Bogo」の設定方法については、すでに優れた記事がネット上で多数公開されています。
また、ウィジェットを言語ごとに切り替えるためには、プラグイン「Classic Widgets」のインストールが必須です。このプラグインの導入後、表示中の言語に応じて表示されるウィジェットを変更することができます。この作業も、いったんご自身で終えていることが前提となります。
投稿用カテゴリーやサイトのタイトル・キャッチフレーズの自動翻訳については、WordPressダッシュボードの「言語」にある「テキストの翻訳」で設定が可能です。この項目で設定された単語は、言語切り替え時に自動で翻訳されます。
これらを全て完了させた上で、なお「Muum」によって多言語化サイトを構築する際の壁になる部分だけをご説明しているのが本記事となります。
なお、掲載内容は全て、初期設定の言語が日本語、追加言語が英語として執筆されています。また、翻訳ファイル等のフォローが大変になりそうな箇所には手をつけず、簡単に確認・修正が行えるカスタムCSSの範囲で対処することを主眼に置いていますのでご了承ください。
全工程が完了した後の見本は、学而図書が運営しているコラム「From Whole Earth to the Universe」となります。
ヘッダーのキャッチフレーズを英語に差し替える
まず、トップページのヘッダーにキャッチフレーズを表示している場合は、以下のCSSをサイト全体に追加します。見本の「差し替え後の文字列を入力する」の部分に、英語に翻訳したキャッチフレーズを入力してください。
動作としては、英語版で表示されていることを条件に、キャッチフレーズの箇所の文字列を消去し、新しい文字列を強制的に差し込んでいます。
/* ヘッダーのキャッチフレーズを英文に変更（英語版のみ） */
html[lang^="en"] #site_description {
font-family: "Noto Serif JP", "Times New Roman", serif !important;
} /* 書体の設定例（お好みやサイトへの導入状況次第で） */
html[lang^="en"] #site_description span {
font-size: 0;
}
html[lang^="en"] #site_description span::before {
content: "差し替え後の文字列を入力する";
font-size: 14px; /* 文字サイズを設定する（とりあえず14pxくらいか？） */
font-weight: 400; /* 文字のウェイトを設定する（お好みで） */
}
/* モバイル表示 */
@media screen and (max-width: 767px) {
html[lang^="en"] #site_description span::before {
font-size: 9px; /* 文字サイズを設定する（キャッチフレーズの長さにより調整） */
}
}タブ記事一覧の名前を英語に差し替える
トップページに「タブ記事一覧」を表示している場合、英語版で表示されていることを条件に、該当するIDの文字列を消去し、新しい文字列を強制的に差し込みます。
以下のCSSをサイト全体に加えますが、こちらはサンプルです。実際のID（#post_list_id0、#post_list_id1 の部分）については、ブラウザのF12キー等から「検証」機能を使って確認してください。
/* タブ記事一覧の名前を変更（英語版のみ） */
html[lang^="en"] a[data-post-list-id="#post_list_id0"] {
font-size: 0;
position: relative;
}
html[lang^="en"] a[data-post-list-id="#post_list_id0"]::before {
content: "差し替え後の文字列を入力する";
font-size: 14px; /* 文字サイズを設定する（とりあえず14pxくらいで） */
position: relative;
z-index: 10;
}
html[lang^="en"] a[data-post-list-id="#post_list_id1"] {
font-size: 0;
position: relative;
}
html[lang^="en"] a[data-post-list-id="#post_list_id1"]::before {
content: "差し替え後の文字列を入力する";
font-size: 14px; /* 文字サイズを設定する */
position: relative;
z-index: 10;
}
/* 選択中のタブを白文字に変更（英語版のみ） */
html[lang^="en"] #index_tab li.active a[data-post-list-id="#post_list_id0"]::before,
html[lang^="en"] #index_tab li.active a[data-post-list-id="#post_list_id1"]::before {
color: #fff;
}
/* （任意）モバイル表示時のみタブ記事のタイトルを短縮（英語版のみ） */
@media screen and (max-width: 767px) {
html[lang^="en"] a[data-post-list-id="#post_list_id1"]::before {
content: "差し替え後の文字列を入力する"; /* 特集など、タイトルが長くて欠けるときの対策 */
}
}
「おすすめ記事」などの追加コンテンツ表記を英語に差し替える
トップページや投稿記事の下部にコンテンツを追加（「おすすめ記事」など）している場合、以下のCSSをサイト全体に加えます。
Muumは追加コンテンツを細かく設定できますので、以下のCSSで不測する分は、ご自身の環境に合わせて書き足してください。
/* 「おすすめ記事」などの追加コンテンツを英語に変更（トップページ／英語版のみ） */
html[lang^="en"] #index_bottom_post_list h2.design_headline1 {
font-size: 0;
}
html[lang^="en"] #index_bottom_post_list h2.design_headline1::before {
content: "差し替え後の文字列を入力する（「Featured Posts」等）";
font-size: 20px; /* 文字サイズを設定する */
}
/* 「おすすめ記事」などの追加コンテンツを英語に差し替える（投稿ページ／英語版のみ） */
html[lang^="en"] #bottom_post_list h2.design_headline1 {
font-size: 0;
}
html[lang^="en"] #bottom_post_list h2.design_headline1::before {
content: "差し替え後の文字列を入力する（「Featured Posts」等）";
font-size: 20px; /* 文字サイズを設定する */
}アーカイブページの表記を英語に差し替える
WordPressダッシュボードの「TCDテーマ＞投稿＞アーカイブページ」で指定されているタイトルは、そのままでは英語化されません。以下のCSSをサイト全体（該当する固定ページでも可）に加えて、タイトルを英語化しておきます。
/* アーカイブページの表記を英語に変更（ブログ一覧ページ／英語版のみ） */
html[lang^="en"] body.blog #page_header .title {
font-size: 0 !important;
}
html[lang^="en"] body.blog #page_header .title::before {
content: "差し替え後の文字列を入力する（「Archives」等）";
font-size: 20px !important; /* 文字サイズを設定する */
}メガメニューのタイトルを英語に差し替える
こちらは、メガメニューの表示を他言語でも使いたいときにだけ変更が必要になります。
「新着情報」「記事一覧」などにメガメニューを割り当てると見栄えがするのですが、英語版では自動翻訳の対象外となります。メガメニューが不要であれば、英語版では、通常のカテゴリーページやカスタムリンク等をメニューに配置するだけでも十分です。
もし、メガメニューを他言語でも維持したいなら、まず、以下のカスタムCSSをサイト全体に追記します。
CSSのリンク入力箇所には、変更後の値を記入する必要があります。ご自身のグローバルメニューでリンクさせているパーマリンク等に応じて内容を修正してください。ただ、このCSSは、単体で設定しただけでは機能しません。CSSに加えて、後述するカスタムスクリプトの追加が必要です。
/* メガメニュー対応「記事一覧」を英語に変更（英語版のみ・リンク先はカスタムスクリプトで変更） */
html[lang^="en"] a.megamenu_button[href="変更後のURLを入力（例：https://universe.gakuji-tosho.jp/en/archives）"] {
font-size: 0 !important;
}
/* モバイル版ドロワーメニューの旧文字列を消去 */
html[lang^="en"] a.megamenu_button[href="変更後のURLを入力（例：https://universe.gakuji-tosho.jp/en/archives）"] span {
font-size: 0 !important;
}
html[lang^="en"] a.megamenu_button[href="変更後のURLを入力（例：https://universe.gakuji-tosho.jp/en/archives）"]::before {
content: "All Articles";
font-size: 14px !important;
}次に、ダッシュボードの「TCDテーマ＞基本徹底＞カスタムCSS・スクリプト」を開き、「ヘッダー用カスタムスクリプト」に、以下の内容を入力してください。初期設定のリンクが設定されているボタンを指定し、そのリンク先を書き換えます。
<!-- メガメニュー（英語版）リンク先変更 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
if (document.documentElement.lang.startsWith('en')) {
document.querySelectorAll(
'a.megamenu_button[href="初期設定されたURLを入力（例：https://universe.gakuji-tosho.jp/archives）"]'
).forEach(function(link) {
link.href = '変更後のURLを入力（例：https://universe.gakuji-tosho.jp/en/archives）';
});
}
});
</script>ロード画面のキャッチフレーズを英語に差し替える
ロード画面のキャッチフレーズを英語に差し替えたいという場合、以下のCSSをサイト全体に加えます。
/* ロード画面のキャッチフレーズを英文に変更（英語版のみ） */
html[lang^="en"] .message_inner .text {
font-size: 0;
font-family: "Noto Serif JP", "Times New Roman", serif !important;
} /* 書体の設定例（お好みやサイトへの導入状況次第で） */
html[lang^="en"] .message_inner .text::before {
content: "差し替え後の文字列を入力する";
font-size: 14px; /* 文字サイズを設定する */
}ウィジェット「【TCD】プロフィール」の著者名を英語にしたいときは
ウィジェット「【TCD】プロフィール」は、日本語の著者名を英語に差し替えにくい構造です。
この項目については、無理に文字を差し替えるのではなく、
①英語版のためにユーザー（英語名）を新規作成し、
②英語版記事の投稿者をこの新規ユーザーに変更して（ウィジェットが投稿者の記事一覧ページにリンクしているため）、
③【TCD】プロフィールで、このユーザーを指定する
としておいたほうが無難ではないかと思います。
ヘッダーに言語切り替えボタン（スイッチャー）を割り当てる
この変更を行うと、PC表示ではヘッダーの右端に、モバイル表示ではドロワーに、それぞれ言語切り替えボタンが表示されるようになります。
ブラウザによって国旗もしくは国名コードのどちらかが自動的に入るのですが、今回の作業内容では、国旗やコードの削除は行いません。
なお、本項目の作業のみ、子テーマ導入とfunctions.phpファイルの編集作業が含まれます。
このPHPファイルの記述内容に誤りがあると、いわゆる「死の真っ白画面（WSOD、ホワイトスクリーン・オブ・デス）」やFatal error表示でサイト全体が停止し、管理画面にすらアクセスできない致命的な状態に陥る場合があります。復旧には、FTPソフト経由でのファイル修正や、リカバリーモードでのテーマ変更などが必要です。
WordPressのダッシュボードだけで処理・修正できる他の項目と異なり、本作業にはリスクを伴います。ウィジェットだけで十分に目的を達成できている場合は、無理にこのカスタマイズを行う必要はありません。
さて、Bogoには、もともとショートコード（[bogo]）が用意されており、これを適切な箇所に記述することで、かなり幅広い箇所に言語切り替えボタンを作成できます。しかし、Muumの標準機能では、ヘッダー内にウィジェット等からショートコードを割り当てることができません。
また、グローバルメニュー等にショートコードを利用できるプラグインとしては「Shortcode in Menus」がありますが、Muum側のメニュー表示処理で打ち消されてしまい、正しく表示されないようです。
よって、現状の私の結論としては、サイトの最上部にスイッチャーを設置したいなら、
①子テーマを導入し（子テーマ用ファイルはTCDのマイページからダウンロード可）、
②ショートコード[bogo]を挿入するコードを子テーマのfunctions.phpに記述する
という方法が最も安全ではないかと考えています。
まず、①の子テーマですが、TCDのマイページにあるメニュー「ダウンロードと帳票」に進み、Muumの「詳細」ボタン（ダウンロード用ボタンではありません）を押した先に、「子テーマ」のダウンロード用ボタンがあります。
子テーマ導入の基本知識については、他の情報サイトをご参照ください。TCDテーマの子テーマは仕様が独特なので、ダウンロードした専用ファイル内のfunctions.phpファイルを使う必要があります。
次に、ダウンロードしたZIPファイルを解凍したら、functions.phpに編集を加えます。以下のコードを、子テーマのfunctions.phpに書き加えてから、FTPソフト等で適切なディレクトリに保存してください（前述の通り保証は一切ありませんので、くれぐれも自己責任でお願いいたします）。
TCD公式の子テーマなら、「/* ここから下に実行したいPHPを追記してください。 */」というコメントが入っています。その下に書き加えましょう。
※以下のコードは、思いのほかうまくいかない過程を経た結果、安定動作を最優先して作成されています。少々不合理な箇所があってもお目こぼしください。
/* ヘッダー及びモバイル用ドロワーにBogoの言語切り替えボタンを挿入する */
add_action('wp_footer', function() {
/* Bogoのショートコードが利用できない場合は処理しない */
if ( ! shortcode_exists( 'bogo' ) ) {
return;
}
/* Bogoの言語切り替えHTMLを取得 */
$bogo_html = do_shortcode( '[bogo]' );
?>
<style>
/* 1. PC版ヘッダー用設定 */
.header-bogo-wrap {
display: inline-flex !important;
vertical-align: middle !important;
margin-left: 15px !important; /* 左側アイコンとのマージンを15pxに調整 */
align-items: center !important;
position: relative;
z-index: 99;
}
.header-bogo-wrap ul.bogo-language-switcher {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 15px !important;
list-style: none !important;
width: auto !important;
}
.header-bogo-wrap ul.bogo-language-switcher li {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
/* spanを縦に落とすCSSを無効化し、国旗・国名コードと言語名を横並びにする */
.header-bogo-wrap ul.bogo-language-switcher li a,
.header-bogo-wrap ul.bogo-language-switcher li span {
font-size: 14px !important; /* 文字サイズを14pxに調整 */
text-decoration: none !important;
display: inline-flex !important; /* ブロック要素化を強制解除 */
flex-direction: row !important; /* 横並びを強制 */
flex-wrap: nowrap !important; /* 折り返しを禁止 */
align-items: center !important;
gap: 5px !important;
cursor: pointer;
white-space: nowrap !important;
line-height: normal !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.header-bogo-wrap ul.bogo-language-switcher li a:hover {
opacity: 0.7;
}
/* 2. モバイル版ドロワー用設定 */
.drawer-bogo-wrap {
padding: 15px 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.drawer-bogo-wrap ul.bogo-language-switcher {
margin: 0;
padding: 0;
display: flex;
justify-content: center !important;
gap: 20px;
list-style: none;
}
/* モバイル版のspanにも横並びを強制 */
.drawer-bogo-wrap ul.bogo-language-switcher li a,
.drawer-bogo-wrap ul.bogo-language-switcher li span {
font-size: 14px !important; /* モバイル版も文字サイズを14pxに調整 */
text-decoration: none !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
color: #ffffff !important;
line-height: normal !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. レスポンシブ制御（モバイル表示用） */
@media screen and (max-width: 1199px) {
.header-bogo-wrap {
display: none !important;
}
}
</style>
<!-- BogoのHTMLを一時的に保持する非表示コンテナ -->
<div id="bogo-temp-container" style="display:none;">
<?php echo wp_kses_post( $bogo_html ); ?>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (typeof jQuery !== 'undefined') {
jQuery(function($) {
/* 一時コンテナからBogoのHTMLを取得 */
var bogoHtml = $('#bogo-temp-container').html();
/* PC版ヘッダーへの追加 */
var pcWrap = $('<div class="header-bogo-wrap"></div>').html(bogoHtml);
var pcTarget = $('.header_icon_list, #header_sns').first();
if (pcTarget.length) {
pcTarget.after(pcWrap);
} else {
$('#header .inner, #header').first().append(pcWrap);
}
/* モバイル版ドロワー（#drawer_sns）への追加 */
var drawerWrap = $('<div class="drawer-bogo-wrap"></div>').html(bogoHtml);
var drawerTarget = $('#drawer_sns');
if (drawerTarget.length) {
drawerTarget.after(drawerWrap);
}
/* 不要になった一時コンテナを削除 */
$('#bogo-temp-container').remove();
});
}
});
</script>
<?php
});その後、WordPressダッシュボードの「外観＞テーマ」から、アップロードした子テーマを有効化すれば完了です。
ここまでの作業を終えれば、Bogoとの相性がいまひとつという印象のあったMuumも、十分に見栄えのする多言語サイトになっているのではないでしょうか。初めからLightningやSWELLで作った方が楽なのでは……という気もしなくはありませんが、TCDテーマの完成度の高さは、やはり魅力です。
どうしてもご自分では難しい、という場合は、スポットでお仕事もお引き受けしておりますので、お気軽にご相談ください。
好評受付中
ホームページ制作
運用代行
未来に受け継がれる、知の資産をつくる。
学而図書 ウェブデザイン室
LPから企業・学校法人サイトまで
幅広いHPの制作・運用を承ります
詳しいご案内はこちらから
