【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法|Knowledge Base

公開日：2019(令和元)年8月5日／最終更新日： 2019(令和元)年8月5日

WordPressでトラブルやカスタマイズヒントを検索するときどうしてますか？通常は「WordPress 日本語の単語」で検索されてると思いますが、特にトラブル対処などはなかなか有用な情報がありませんよね？そんな時には「WordPress 英語の単語」で検索すると結構簡単に解決できる方法がヒットすることが多いです。なんといっても日本は狭い、WordPressはワールドワイド？なサイト作成ツールですから当たり前といえば当たり前かも知れません。

しかも最近のブラウザは同時翻訳なんて便利な機能がついてますから、英語のサイトへたどり着いても自動翻訳され、理解できるレベルの日本語にしてくれますから「英語なんてわかんなーーい」という方でも十分参考になると思います。

それでは逆に日本語のタイトルや本文で書いているサイトは英語圏の方にヒットしないのでは？という素朴な疑問が湧き、ページのどこかに英語で何かを表記できないか？で思いついたのが、「日本語タイトルを英訳したものを別に表示してはどうか？」という発想。本文まで英語のものを付ければなお・・・な感じもしますが、和英翻訳に長けた方ならいざ知らず、グーグル翻訳などに頼って本文を英訳するのはどう？ということで、それならタイトルだけでも英語で・・というのが本記事の内容になります。

完成イメージはページ上部にあるタイトル上の英語部分（読まれたタイミングによっては外してしまっているかもしれませんので、↓画像赤枠内の表示のこと）です。

【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法|Knowledge Base

興味のある方はやってみてくださいね。

この方法は前述した通り

英語のタイトルを入れることで海外からの検索にヒットしたらいいなーーー
何となく英語のタイトルが表示されているのがかっこいい！！

で行うものですので、必ずしもSEO対策に有効とは限りませんから承知の上で行ってください

【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法

独自のカスタムフィールドを入力欄付きで表示・更新できるようにするには

カスタムフィールドの追加枠を作る
カスタムフィールドの有無を調べて更新・作成する

というコードをテーマのfunctions.phpへ書いてやればざっくりとOKなのですが、今後カスタムフィールドの追加などがある可能性があるので、管理画面からカスタムフィールドの追加・編集などができるプラグインを使用します。有名なものに「ACF(Advanced Custom Fields)」がありますが、データ格納の仕方が独特なので、通常のカスタムフィールドの形態を保ったままGUI管理できる

カスタムフィールドの追加と管理・グループの管理ができるプラグイン「Custom Field Suite」

を使用します。

なお、カスタムフィールド名は「cf_en_title」として設定方法を紹介していきますので別のフィールド名を使いたいときはコードや設定上の「cf_en_title」を書き換えてください。

カスタムフィールドを作る

「Custom Field Suite」プラグインをインストールしたら、早速カスタムフィールドを作っていきましょう。

管理画面から「フィールドグループ」→「フィールドのすべてのグループ」をクリックし、画面上の「新規追加」をクリックします。

グループ名（投稿編集画面の枠名になります）と英語タイトルフィールドを追加して「公開」をクリックします（↓のようにすればOKです）。

この画面には表示する場所などいろいろな設定ができるようになっていますが、今回の場合は特にそれらを変更したりする必要はありません。

終わったら既に公開されている投稿の編集画面を開くか、新規追加をして、本文の下に「英語タイトル」という入力欄があればこの作業は完了です。

後々の管理を楽にするためのワンポイント

ちょっと脱線しますが、普通なら英語タイトルなんだから「en_title」でよさそうなのに、なぜカスタムフィールド名（key）を「cf_en_title」にしたのかを書いておきます。

目的は

投稿編集画面でカスタムフィールド欄を表示したときに見やすくすること
「Custom Field Suite」プラグインを使って追加したカスタムフィールドだと一目で分かるようにすること

です。カスタムフィールド欄は基本的にA to Zで表示されますから、何がどのカスタムフィールドなのか？何で追加されたカスタムフィールドなのかが簡単に分かるようにするために先頭へ「cf_」を追加しているのです。恐らくサイト作りを進めていくとごちゃごちゃしていくところだと思いますので初めからこのようにしておくことをおすすめします。

single.phpへカスタムフィールドを出力するタグを入れる

テーマエディタから「single.php」を開き、15行目付近にある

<!--タイトル-->
<h1><?php the_title(); ?></h1>

を

<!--タイトル-->
<span class="english-title"><?php echo get_post_meta($post->ID , 'cf_en_title' ,true); ?></span>
<h1><?php the_title(); ?></h1>

に書き換えます。

※固定ページでも表示する場合には「page.php」でも同様の作業を行ってください

「Custom Field Suite」プラグインには独自の表示タグがあるのですが、上のように通常のWordPressのタグも使えるので使い勝手がいいですね。

CSSで体裁を整える

テーマ編集から「a-insert-css.css」を開き、以下のコードを末尾へ追加します。

/************* 英語タイトルの表示 ***************/
span.english-title {
font-family: 'Verdana';
font-size: 0.7em;
color: #999;
font-style: oblique;
display: block;
text-align: right;

}

上の4行で「文字種と形」「文字サイズ」「文字の色」を決めています（英語なのでVerdanaがいいかなぁ・・にしてます）

下2行で文字を右寄せにしてます
※spanタグの場合位置が固定されていないタグなので、一旦「display: block;」で「この場所を1つのエリア（ブロック）として設定しますよ！」と宣言してから「text-align: right;」で右に寄せます。結構右寄せにならなーーーい！と煙を出している方がいらっしゃるので覚えておくといいと思いますよ。spanの代わりにdivタグやpタグを使ってもいいと思いますが、これらのタグは通常上下左右の隙間（マージンやパディング）が設定されていますから、本文中に使うspanタグを使った方がCSSの設定が完結に済みます。

いかがでしたか？今回は【ha-Basic】テーマで英語タイトルを投稿タイトル上に表示する方法を紹介しましたが、多少カスタマイズのできる方ならご自身のテーマでも流用可能かと思いますのでチャレンジしてみてください。

また今回は「英語のタイトルを」ということで紹介しましたが、この方法を応用すればテーマ内のいろいろな場所にカスタムフィールドの値が表示できるようになりますから覚えておいて損はないと思います。