【WordPress】多言語対応が簡単にできる方法
目次
多言語対応とは
多言語対応とは、サイトを日本語と英語など、複数の言語でサイトを表示することを言います。
WordPressで多言語対応を無料で、簡単にできるプラグインがあるので設定方法をご紹介します。
プラグイン『Bogo』を追加して使用する言語を選択する
STEP
プラグインを追加 を選択
STEP
検索キーワードに『Bogo』と入力
STEP
今すぐインストールを選択
STEP
有効化を選択
インストールが終了したら、有効化をしましょう
STEP
『言語』というメニューが追加されます
有効化が終了すると、左のメニューに『言語』というメニューが表示されます
STEP
言語パックを選択
STEP
現在、使用している言語が表示されます
薄く水色になっているものが、現在使用中のものになります。追加したい場合は、追加したい言語名にカーソルをもっていくと、有効化するためのメニューをが表示されます。
第二言語のページを作成する方法
STEP
第二言語を設定したいページを表示します（固定でも投稿でも同様）
STEP
右側のメニューに、言語が追加されているので、選択し、『○○の翻訳を作成』を選択
STEP
下書き状態で、翻訳用のページが作成される
STEP
翻訳をして、公開する
言語によってメニューも変更する
ヘッダーやフッターなどのメニューについても、言語ごとに切替することができます。
日本語での表示時に、必要なメニューと、第二言語で必要なメニューを作成し、それぞれの言語でのラベルを設定します
言語をスイッチするためのメニューを作成
今のままだと、URLに追加した言語のURLを追加しなければ見ることができません。これは、サイトの訪問者にとっては、言語を切替れることすら知らないと思うので、切替ができるメニューを追加することで、分かりやすくしたいと思います。
ウィジット
STEP
外観のウィジットを選択
STEP
追加したい場所に、言語切り替えを配置する
STEP
完成
CSSを使ってカスタマイズする
STEP
外観のウィジットを選択
STEP
ヘッダー内部に言語切り替えを配置
STEP
ヘッダー内部に表示される
ちょっと見た目がよくないので追加CSSで整えたいと思います
STEP
外観のカスタマイズを選択
STEP
追加CSSを選択
STEP
言語切替というタイトルを非表示にする
.widget_bogo_language_switcher .w-header__title {
display: none;
}
STEP
横並びにして縦線で区切る
.bogo-language-switcher {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
.bogo-language-switcher li {
position: relative;
}
.bogo-language-switcher li:not(:last-child)::after {
content: "|";
position: absolute;
right: -8px;
}
STEP
us と jp を非表示
.bogo-language-switcher .bogoflags {
display: none;
}
STEP
それぞれの言語で表示している時は、文字色を通常にする
.bogo-language-switcher a {
color: blue; /* 通常のリンク色に */
text-decoration: underline;
}
.bogo-language-switcher a.current {
color: inherit; /* 通常の文字色に戻す */
text-decoration: none;
pointer-events: none; /* クリック無効にしたい場合は追加 */
}
サイドバーの最近の投稿などを多言語化する
それでは、次は、サイドバーに表示されている最近の投稿などのタイトルを多言語したいと思います。
STEP
外観のウィジットを選択
STEP
共通サイドバーを開き、現在設定されているものを日本語ページで表示に変更する
STEP
ブロックを追加して、ブロックHTMLをコピーして<h2>タグ内の、タイトルをRecent Postsに変更し、英語ページで表示で保存
STEP
これで、英語ページでは英語表記がされます
コメント