How to display an English title on the title with the 【Ha-Basic】theme

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

公開日: カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

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

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

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

完成イメージはページ上部にあるタイトル上の英語部分(読まれたタイミングによっては外してしまっているかもしれませんので、↓画像赤枠内の表示のこと)です。
【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法

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

この方法は前述した通り

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

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

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

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

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

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

を使用します。

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

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

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

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

グループ名(投稿編集画面の枠名になります)と英語タイトルフィールドを追加して公開をクリックします(↓のようにすればOKです)。
【ha-Basic】テーマでタイトル上に英語のタイトルを表示させる方法
この画面には表示する場所などいろいろな設定ができるようになっていますが、今回の場合は特にそれらを変更したりする必要はありません。

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

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

ちょっと脱線しますが、普通なら英語タイトルなんだから「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】テーマで英語タイトルを投稿タイトル上に表示する方法を紹介しましたが、多少カスタマイズのできる方ならご自身のテーマでも流用可能かと思いますのでチャレンジしてみてください。

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

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報