Web Design Leaves

セットアップウィザード実行後

セットアップウィザードが完了すると、追加の言語（この例の場合は英語）の入力用のオプションが追加され、ウィザード開始前と後では表示が変わります。

投稿一覧

以下は投稿一覧のウィザード実行前の例です。

ウィザード実行後は、英語の入力用のオプションが追加されます。

カテゴリー

以下はウィザード実行前のカテゴリーの例です。

この例の場合、日本語の「未分類」は「blog」というスラッグのカテゴリーに最初に変更してあります。

ウィザード実行後は、英語の入力用のオプションが追加され、デフォルトの英語のカテゴリー「未分類-en」が追加されています。

固定ページ

以下は固定ページ一覧のウィザード実行前の例です。

ウィザード実行後は、英語の入力用のオプションが追加されます。また、固定ページに「フロントページ」を作成してある場合は、英語の「フロントページ」が追加されています。

メディアライブラリ

以下はメディアライブラリのウィザード実行前の例です。

ウィザード実行後は、セットアップウィザードで「メディアの翻訳を許可する」にしたので、英語の入力用のオプションが追加されます（設定のメディアから変更可能です）。

ナビゲーションメニュー（カスタムメニュー）

ナビゲーションメニューを設定してある場合は、メニューの位置に英語用が追加されています（メニュー自体は作成されていません）。

言語

「言語」の設定画面では、言語を追加したり、追加した言語を編集することができます。

初期状態ではセットアップウィザードで追加した言語が「名称」に表示されています。必要に応じて言語をクリックして編集することができます。

★はデフォルトの言語を表します。

以下は「日本語」をクリックした際に表示される編集画面です。

URL の修正

設定をクリックします。

デフォルトでは以下が選択されています。

• 言語はプリティーパーマリンク内のディレクトリ名から設定される
• URL にデフォルトの言語の言語情報を表示しない（チェックが入っている）
• プリティーパーマリンクの /language/ を削除する

また、固定ページに「フロントページ」を作成してある場合は、「フロントページの URL にページ名またはページ ID の代わりに言語コードが含まれています」という項目が追加されますが、デフォルトではチェックが入っていません。

デフォルトのチェックの入っていない状態では、この例の場合、英語のトップページ（フロントページ）は「http://localhost/polylang/en/トップ-english/」のようになります

チェックを入れると英語の場合「http://localhost/polylang/en/」のようになり、フロントページのパーマリンクにスラッグが表示されないようになります。

以下は http://localhost/polylang/ に WordPress をインストールしている例です。

ブラウザーの言語の検出

ブラウザーの言語の検出のデフォルトは「有効」になっていて、（フロントページへの）アクセスがあったときに、ユーザーのブラウザーの環境設定（言語設定の優先順位）を検出してその設定に応じて言語を設定するようになっています。

何らかの理由で言語の検出をしたくない場合は「無効化」をクリックして「無効」にすることができます。

メディア

メディアのデフォルトは「有効」になっていて、画像などのメディアも言語ごとに alt 属性（代替テキスト）やキャプションの設定（翻訳）を行うことができるようになっています。

画像などのメディアを言語ごとに設定したくない場合は、「無効化」をクリックして「無効」にします。

カスタム投稿タイプとタクソノミー

カスタム投稿タイプを設定している場合は、カスタム投稿タイプとカスタムタクソノミーの翻訳をする（有効にする）かどうかを設定できます。

設定してあるカスタム投稿タイプとカスタムタクソノミー（この例ではレンタル、レンタルカテゴリーが設定してあります）が表示されます。

デフォルトでは有効になっていないので、必要に応じてチェックを入れて有効にします。

同期

「同期」は、デフォルトの言語と他の言語のページ（記事）で情報を同期することができます。

同期すればその情報をデフォルトの言語で管理でき、言語ことに設定する必要はなくなりますが、言語のページ（記事）ごとに情報を入力した方がよいものは同期しないようにします。

例えば、カスタムフィールドに入力する値が言語ごとに異なる場合などは同期しないようにするなど、サイトにより異なると思います。

アイキャッチ画像は少し特別なようです（？）。

Polylang: Synchronize metadatas between translations

文字列翻訳

文字列翻訳の画面ではサイトのタイトルやキャッチフレーズ、日付フォーマットなどの文字列を翻訳できます。セットアップウィザードを完了した状態では以下のような項目が登録されていて、翻訳することができます。

以下はサイトのタイトルやキャッチフレーズ、日付フォーマットの翻訳（英語）を設定する例です。これにより、英語ページではサイトのタイトルやキャッチフレーズ、日付が設定した翻訳で表示されるようになります。

関連ページ：日付と時刻の書式

登録されている文字列は「設定」→「一般」で設定されている値です。

文字列翻訳に独自の文字列を追加

functions.php で Polylang の関数（テンプレートタグ） pll_register_string を使って「文字列翻訳」に独自の文字列を追加することもできます。

以下は「文字列翻訳」に 日時、住所、電話番号、詳細 という文字列を追加する例です。

使用する場合は、最初に関数 pll_register_string が存在するかを確認し、after_setup_theme フックで初期化すると良いようです。

function pll_prefix_after_setup_theme() {
  if ( function_exists( 'pll_register_string' ) ) {
    pll_register_string( 'date_time', '日時' );
    pll_register_string( 'address', '住所' );
    pll_register_string( 'tel', '電話番号' );
    pll_register_string( 'details', '詳細' );
    }
  }
add_action( 'after_setup_theme', 'pll_prefix_after_setup_theme' );

以下が書式とパラメータです（第3、第4パラメータはオプション）。

pll_register_string($name, $string, $group, $multiline);

上記を functions.php 記述することにより、以下のように「文字列翻訳」に 日時、住所、電話番号、詳細 という文字列が追加されるので、それぞれの英語（翻訳）を設定します。

独自に追加した文字列翻訳の出力

最初から登録されているサイトのタイトルなどの文字列は自動的に翻訳されますが、独自に追加した文字列は Polylang の関数（テンプレートタグ） pll_e() や pll__() を使って出力することができます。

この例の場合、pll_register_string で「日時」という文字列を登録し、翻訳に「Date / Time」を設定してあるので、テンプレートに以下を記述すると日本語ページでは「日時」、英語ページでは「Date / Time」と出力されます。

<?php pll_e("日時"); ?>
//以下でも同じこと
<?php echo pll__("日時"); ?>

//登録した翻訳を echo で出力（最初に関数 pll_e が存在するかを確認）
function pl_e( $string = '' ) {
  if ( function_exists( 'pll_e' ) ) {
    pll_e( $string );
  } else {
    echo $string;
  }
}
//登録した翻訳を return （最初に関数 pll__ が存在するかを確認）
function pl__( $string = '' ) {
  if ( function_exists( 'pll__' ) ) {
    return pll__( $string );
  }
  return $string;
}

<?php pl_e("日時"); ?>
//以下でも同じこと
<?php echo pl__("日時"); ?>

出力

※ ドロップダウンオプションを使用しない（dropdown に 1 を設定しない）場合は、ul タグは出力されないので、必要に応じて ul タグを自分で出力（記述）する必要があります。

以下は記述例です。

<!-- 言語のリストを表示（デフォルト） -->
<ul>
<?php pll_the_languages(); ?>
</ul>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<!-- 現在のページの言語を非表示 -->
<?php pll_the_languages( array( 'hide_current' => 1 ) );  ?>
</ul>
 
<!-- 国旗を表示 (言語名は非表示) -->
<ul>
<?php pll_the_languages( array( 'show_flags' => 1,'show_names' => 0 ) ); ?>
</ul>
 
<!-- ドロップダウンで表示 -->
<?php pll_the_languages( array( 'dropdown' => 1 ) ); ?>

以下は上記を記述した場合の日本語ページでの出力例です。

ドロップダウンでの表示では、パラメータに指定した値を使って id を生成しているので（例：lang_choice_1）、複数配置する場合は、指定する値をそれぞれで異なる整数を指定する必要があります。

<!-- 言語のリストを表示（デフォルト） -->
<ul>
  <li class="lang-item lang-item-7 lang-item-ja current-lang lang-item-first"><a lang="ja" hreflang="ja" href="http://localhost/polylang/">日本語</a></li>
  <li class="lang-item lang-item-10 lang-item-en"><a lang="en-US" hreflang="en-US" href="http://localhost/polylang/en/">English</a></li>
</ul>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <!-- 現在のページの言語を非表示 -->
  <li class="lang-item lang-item-10 lang-item-en lang-item-first"><a lang="en-US" hreflang="en-US" href="http://localhost/polylang/en/">English</a></li>
</ul>

<!-- 国旗を表示 (言語名は非表示) -->
<ul>
  <li class="lang-item lang-item-7 lang-item-ja current-lang lang-item-first"><a lang="ja" hreflang="ja" href="http://localhost/polylang/"><img src="data:image/png;base64,iVBORw0KGgoAAAA...SuQmCC" alt="日本語" width="16" height="11" style="width: 16px; height: 11px;"></a></li>
  <li class="lang-item lang-item-10 lang-item-en"><a lang="en-US" hreflang="en-US" href="http://localhost/polylang/en/"><img src="data:image/png;base64,iVBORw0KGgoAAA...kSuQmCC" alt="English" width="16" height="11" style="width: 16px; height: 11px;"></a></li>
</ul>

<!-- ドロップダウンで表示 -->
<select name="lang_choice_1" id="lang_choice_1">
  <option value="ja" selected="selected">日本語</option>
  <option value="en">English</option>
</select>
<script type="text/javascript">
//<![CDATA[
var urls_1 = {"ja":"http:\/\/localhost\/polylang\/","en":"http:\/\/localhost\/polylang\/en\/"};
document.getElementById( "lang_choice_1" ).onchange = function() {
  location.href = urls_1[this.value];
}
//]]>
</script>
 

必要に応じて出力されるクラス名などを使ってスタイルを設定します（以下はデフォルトのまま）。

カテゴリーの翻訳

カテゴリーもデフォルトの言語（日本語）と追加言語（英語）で切り替えが可能になります。

この例では日本語で「ブログ」と「ニュース」というカテゴリーを前もって作成してありました。

「ブログ」カテゴリーは、デフォルトで用意されている「未分類」の名前を「ブログ」に、スラッグを「blog」に変更したものです。

Polylang をインストールすると以下のようにデフォルト言語の「未分類」に対応する、追加言語のカテゴリー「未分類」が作成されています。

基本的には既存カテゴリーと対になるように言語別カテゴリー（この例の場合は英語カテゴリー）を作成します。

この例では、英語のカテゴリー「未分類」を日本語のカテゴリー「ブログ」に対応するように、「Blog」に変更するため、英語のカテゴリー「未分類」をクリックして編集します。

この例では「未分類」を「Blog」に、スラッグの「未分類-en」を「blog-en」に変更します。

また、編集中のカテゴリーが「言語」から「English」であることが、「翻訳」から日本語「ブログ」の翻訳カテゴリーであることが確認できます。

カテゴリーの管理画面に戻ると、前もって作成してあったカテゴリー「ニュース」に「＋」印が表示されていて、翻訳がまだ作成されていないことがわかります。

「＋」をクリックすると、「新規カテゴリーを追加」の下にカテゴリー「ニュース」の翻訳の作成が表示されるので、翻訳を入力して「新規カテゴリーを追加」をクリックします。

必要に応じてデフォルト言語のカテゴリーを作成し、対応する言語別のカテゴリーを作成します。

上記のカテゴリーを新規作成すると一覧に追加されます。

作成したカテゴリー名をクリックすると編集画面になります。一覧から「＋」印をクリックして翻訳を作成することもできますが、編集画面から「翻訳」の「＋」印をクリックして翻訳を作成することもできます。

投稿の翻訳

投稿の一覧ページで、一覧に「＋」印があるものは翻訳が作成されていません。

「＋」印をクリックすると、翻訳を作成する画面が表示されます。

国旗をクリックすると、その言語の投稿の編集画面が表示されます。

翻訳の作成は、「＋」印をクリックするか、国旗をクリックして編集画面を開き右下の「言語」の翻訳言語の横の「＋」印をクリックします。

翻訳する投稿の新規作成画面が開くので、タイトルやコンテンツを翻訳します。

必要に応じてスラッグ（パーマリンク）なども編集します。

カテゴリーは自動的に対応するカテゴリーが選択されています（カテゴリーの翻訳ができている場合）。

以下はすべての投稿の翻訳を作成後の投稿一覧の例です。それぞれの投稿を編集するには、タイトルをクリックするか、国旗の下のペンのアイコンをクリックします。

この例の場合、同期で「公開日」を同期するようにしているのでそれぞれの投稿で公開日が同じになっています。

また、編集画面の右下の言語からも対応する翻訳ページの編集画面を開くことができます。

アイッキャッチ画像

以下は「Synchronize metadatas between translations」からの抜粋（意訳）です。

おそらく以下のようなことになるのかと思います。

「設定」でアイッキャッチ画像の同期が有効になっていて、メディア翻訳が有効になっている場合、

• あらかじめメディア・ライブラリーにアイキャッチ画像用の画像をアップロードしておく
• 更にそのアイキャッチ画像の翻訳を作成しておく

この場合、メディア・ライブラリーにアップロードした画像を投稿のアイキャッチ画像に設定すると、その投稿の翻訳を作成すると翻訳されたアイキャッチ画像が自動的に割り当てられます。

メディアが翻訳できない（されていない）場合は、通常のメディアと同様、翻訳を作成し、手動で翻訳した投稿に設定します（割り当てます）。

また、「設定」の「同期」でアイッキャッチ画像の同期が有効になっていない場合も、デフォルトの言語に設定したアイキャッチ画像は翻訳した投稿に割り当てられるので、通常のメディアと同様、翻訳を作成し、手動で翻訳した投稿に設定します。

抜粋の文末の […] を変更

以下は手動や自動生成された抜粋に付けられる文字を削除し、get_the_excerpt フィルタを使って両方の場合にリンクを付ける例です。関連：抜粋のデフォルトの変更

function my_excerpt_more($more) {
  return '';
}  
add_filter('excerpt_more', 'my_excerpt_more');
 
function my_add_link_excerpt($text) {
  $text .= '<a href="' . esc_url( get_permalink() ) . '">［続きを読む］</a>';
  return $text;
}
add_filter( 'get_the_excerpt', 'my_add_link_excerpt' );

以下は pll_current_language() を使って、言語を検出して言語により末尾の文字を変更する例です。

function my_excerpt_more($more) {
  return '';
}  
add_filter('excerpt_more', 'my_excerpt_more');
          
function my_add_link_excerpt($text) {
  //言語を検出して英語（en）の場合とそれ以外で出力を変更
  if( pll_current_language() === 'en' ) {
    $text .= '... <a href="' . esc_url( get_permalink() ) . '">[Read More]</a>';
  } else {
    $text .= '... <a href="' . esc_url( get_permalink() ) . '">［続きを読む］</a>';
  }
  return $text;
}
add_filter( 'get_the_excerpt', 'my_add_link_excerpt' );

上記の例の11行目は日本語をそのまま記述していますが、例えば「Read More」の文字列翻訳を設定してあれば、以下のように pll__() を使うこともできます。

$text.='... <a href="'.esc_url(get_permalink()).'">['.pll__('Read More').']</a>';

静的サイトで WordPress の投稿などを表示する場合、上記の方法では正しく言語が取得できない場合があります。その場合は次項の pll_get_post_language() を使います。

サイトアドレスを変更して静的ファイルでトップページ

以下は、静的サイトの一部として wp というフォルダに WordPress をインストールして、静的ファイルでトップページを表示し、Polylang で2ヶ国語サイトを作成した際の覚書です。かなり個人的な内容で、あまり参考にはならないと思います。

wp というフォルダに WordPress をインストールしていますが、サイトアドレスを変更してカスタム投稿タイプ（event）を表示するようにしています。

• 日本語：https://example.com/event/ （カスタム投稿タイプ）
• 英語　：https://example.com/en/event/（カスタム投稿タイプを Polylang で2ヶ国語化）

ドキュメントルート
├── about  
│   └── index.php
├── contact  
│   └── index.php
├── en  //英語ディレクトリ
│   ├── about
│   │   └── index.php
│   ├── contact
│   │   └── index.php
│   ├── rental
│   │   └── index.php
│   └── index.php
├── index.php //サイトアドレスの変更に伴い WordPress のインストールディレクトリの index.php をコピー
├── index.html //静的サイトのトップページ（日本語）
├── rental  
│   └── index.php
└── wp  //WordPress のインストールディレクトリ（URL は event で表示）

サイトアドレスを変更して静的ファイルでトップページを表示するようにする場合、色々とカスタマイズする必要がありますが、その一例です。

例えば、投稿を編集して公開前にプレビューしたり、検索結果を表示するには適切な URL にリダイレクトしないと、サイトのトップページが表示されてしまいます。

以下は event というカスタム投稿タイプの記事を公開前にプレビューするために日本語トップページ（index.html）に記述したリダイレクトと、検索結果を表示するためのリダイレクトの例です（但し、以下の場合、通常の投稿を公開前にプレビューするとトップページが表示されます）。

<?php
if (isset($_GET['preview']) && $_GET['preview']) {
  if (isset($_GET['post_type']) && $_GET['post_type']  === 'event') {
    header("Location: /event". $_SERVER["REQUEST_URI"]);
    exit;
  }
}else if(isset($_GET['s']) && $_GET['s']){
  header("Location: /event". $_SERVER["REQUEST_URI"]);
  exit;
}
?>

英語のトップページでは、以下のようになります。リダイレクト先は $_SERVER[ "REQUEST_URI" ] から en を削除した値を使います。

<?php
if ( isset( $_GET[ 'preview' ] ) && $_GET[ 'preview' ] ) {
  if ( isset( $_GET[ 'post_type' ] ) && $_GET[ 'post_type' ] === 'event' ) {
    $search_request_uri = str_replace( "/en", "", $_SERVER[ "REQUEST_URI" ] );
    header( "Location: /event" . $search_request_uri );
    exit;
  }
} else if ( isset( $_GET[ 's' ] ) && $_GET[ 's' ] ) {
  $search_request_uri = str_replace( "/en", "", $_SERVER[ "REQUEST_URI" ] );
  header( "Location: /en/event" . $search_request_uri );
  exit;
}
?>