PR

英語記事の「目次タイトル」と「パンくずリスト」を完全英語化

日本語と英語の記事をカテゴリーに分けて記事群を作り、”bogo”「言語スイッチャー」のカスタマイズなど英語ページの完全英語化をしてきましたが、まだ「目次」タイトルや「パンくずリスト」の「ホーム」の文字などの一部で日本語が表示されています。

今回は、それらを英語表記にする計画でプラグインを検討しましたが、”cocoon”の目次機能とプラグインの相性もあり日本語ページも英語表記にすることで終わりました。

検討したプラグインは”Easy Table of Contents”と”Table of Contents Plus”です。検証結果をまとめてみましたので、同様の事をお考えの方の参考になれば幸いです。

“Cocoon”の目次機能とプラグインの検討

“Cocoon”の目次機能はタイトルが1つしか作れません。これは”bogo”で日本語と英語の記事を作ったとしても、目次に表示されるタイトルが日本語か英語に限定されてしまいます。

目次を表示させるプラグイン”Easy Table of Contents”と”Table of Contents Plus”を検討したのですがどれも目次のタイトルは1つしか作れません。

そこで思いついたのが“Cocoon”の目次機能とプラグインの併用、もしくは“Cocoon”の目次機能を使わずに2つのプラグインの併用です。

”bogo”がインストールされている環境では、ウィジェットを使うとページの言語によって「表示」「非表示」が選択できる機能が付加されているので、片方の目次タイトルを日本語、もう一方を英語にして表示を切り替える方法を検討しました。

【検討の手順と結果】

  1. “Cocoon”の目次機能(ウィジェット)を使い目次を表示
    Displayed in Cocoon
  2. プラグイン” Easy Table of Contents”と” Table of Contents Plus”をインストール(有効化はしません)
    Plugin
  3. “Cocoon”の目次機能(ウィジェット)を有効にした状態で”Easy Table of Contents”を有効化すると「このページは動作していません」のエラー表示
    Easy Table of Contents error
  4. “Cocoon”の目次機能(ウィジェット)を有効のまま”Easy Table of Contents”を無効化にして” Table of Contents Plus”を有効化にすると、ページは表示されたが”Cocoon”の目次が消える
    Table of contents disappears
  5. “Cocoon”の目次機能(ウィジェット)を削除し”Easy Table of Contents”を有効化すると目次が表示される
    Displaying Easy Table of Contents
  6. “Cocoon”の目次機能(ウィジェット)を使わない状態で、新たに追加された”Easy Table of Contents”のウィジェット(「目次」)を使って表示させた場合、ランダムに目次が表示されない状態やエラー表示になる
  7. ウィジェットの「カスタムHTML」にショートコードを記述して表示させると”Cocoon”の目次ではなく”Easy Table of Contents”の目次が表示される。ただし記事内、最初の見出しの上に設定するとエラー表示になる(「カスタムHTML」で表示した場合”Easy Table of Contents”標準の装飾はされない)
    Easy Table of Contents widget
  8. 全ての目次設定を非表示にして”Easy Table of Contents”と”Table of Contents Plus”を有効化しても問題は起こらない
  9. “Cocoon”の目次を非表示にして”Easy Table of Contents”と”Table of Contents Plus”を同じ位置に表示させると”Easy Table of Contents”の目次が表示される
  10. 2つのプラグインの設定で片方ずつ表示させてみると”Table of Contents Plus”が機能していないようである
【結論】
上記以外に色々と試してみましたが、プラグイン”Easy Table of Contents”と”Table of Contents Plus”は”Cocoon”の目次機能と相性が悪いと考えられます。ウィジェットでの表示が特に不安定なので”bogo”の機能が生かせなくなり多言語の使用には無理があります。
【検証結果】

  • 目次を表示させるショートコードは、その時々で呼び出す目次が違うようである
  • どちらのプラグインも標準の設定での表示には問題は無いようだが、ウィジェットを使用すると設置場所などの条件で「目次が表示されない」または「エラーでページそのものが表示されない」場合がある
  • “cocoon” “Easy Table of Contents” “Table of Contents Plus” のいずれかを単独で使用しても問題はないが、併用すると何らかの不具合が発生する
  • いずれを使っても目次タイトルは一つの文字列なので併用できない場合、”bogo”機能の言語による「表示」「非表示」が使えない

“Cocoon”の目次機能

検証の結果、プラグインの使用を使用しないことに決めました。しかし”Cocoon”の機能だけで目次のタイトルを日本語と英語に対応するにはプログラムに変更を加える方法しかありません。

以前「WordPress サイトタイトルとキャッチフレーズを英語にする方法」でPHPに変数を加えてカスタマズしましたが、今回は標準機能だけで対応しました。

【理由】

  • 日本語記事で目次のタイトルが「Contents」と表示されても気にならない
  • 日本語記事の目次タイトルを「目次」と日本語にしたい場合は、ウィジェットでタイトルのない目次を英語記事に設置することができる

“Cocoon”のウィジェットで目次を表示させる方法は「[c]目次」を設置する方法と「カスタムHTML」の設置する方法があります。

「[c]目次」の場合はタイトルが表示されず目次を折りたたむこともできませんが、「カスタムHTML」で表示させた場合、タイトルが表示され折りたたむこともできます。

Cocoon widget

「カスタムHTML」での表示方法は「内容」の部分にショートコードを書き込むだけです。表示されるタイトルは”Cocoon”設定の「目次」>「目次タイトル」に書きこんだ文字が反映されます。

Custom HTML

Table-of-contents-title-setting

目次をカスタマイズ

“Cocoon”の目次表示は、CSSを追加するだけで簡単にできます。カスタマイズの方法は以下の記事を参考にしてください。

パンくずリストの「ホーム」を「Home」に変える

「パンくずリスト」に表示される日本語の「ホーム」も目次タイトルと同じく、日本語ページに英語で「Home」と表示されても違和感がないのでCSSを追加して英語表記に変更します。

Breadcrumb trail

「ホーム」を「Home」に変えるには“Cocoon Child”のスタイルシートに以下のコードを追記します。

<CSS>

/* 「ホーム」を消す */
#breadcrumb.breadcrumb .breadcrumb-home a span{
   font-size: 0px;
}
/* 「Home」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
   font-size: 13px;
   content: "Home";
}

まとめ

日本語と英語、それぞれのページに対応する目次を使い分けしたかったのですが、試したプラグインは、目次機能が備わっている“Cocoon”との相性は良くないようです。

プログラムを追記すれば何とかなるのですが、目次タイトルだけの問題なので、無理な変更は行いませんでした。

「目次」のタイトルが日本語のページで「Contents」と英語表記にしても違和感はないと思います。どうしても日本語ページでタイトルを「目次」と表記したければウィジェットの「カスタムHTML」と「[c]目次」を併用すると、日本語だけタイトル付きの「目次」を設置することもできます。

ウィジェットの「[c]目次」を使うと、折りたたみはできませんが、タイトルが表示されないので多言語のページに使用できます。

今回の記事と以下の記事の記事で完全英語化は完了です。