ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

日本語と英語を使った見出しのコーディング 【WordPress対応】

日本語と英語を使った見出しのコーディング 【WordPress対応】

「日本語と英語を使った見出しのコーディングはどうすればいいの?」

「hタグとpタグだと違和感がある」

「hタグの中にspanタグでも違和感がある」

悩み

こんな悩みにお答えします。

じつは、データ属性、疑似要素を使ったコーディングをするとうまくいきます。

コーディングの考え方として、SEOで重要視したい日本語キーワードをテキストとし、英語はあくまでデザインという考え方をします。
もちろん、海外向けサイトであれば、逆にしたほうがいいです。

この記事では、以下のことがわかります。

  • データ属性と疑似要素を使ったコーディングのコツ
  • 応用としてWordPressのタイトルとスラッグをうまく使う方法

記事を読み終えると、日本語と英語の見出しコーディングに迷うことがなくなることにより作業効率がよくなります。
また、重要なキーワードを適切に見出し(hタグ)に設定することができるのでSEOにも好影響が期待できます。

目次
  1. 日本語と英語を使った見出しのコーディング方法
    1. HTMLの書き方
    2. CSSの書き方
  2. WordPressでのタイトルとスラッグを使った応用
    1. WordPressでタイトルとスラッグを取得する
      1. 固定ページ、投稿ページ
      2. 一覧ページ
    2. PHPで文字列を置換する
      1. -(ハイフン)を半角スペースに置換する
    3. PHPで文字列を変換する
      1. 大文字に変換する(strtoupper)
      2. 先頭だけ大文字に変換する(ucfirst)
      3. 各単語の先頭だけ大文字に変換する(ucwords)
    4. CSSで文字列を変換する(text-transform)
      1. 大文字に変換する(uppercase)
      2. 先頭だけ大文字に変換する(capitalize)
  3. まとめ

日本語と英語を使った見出しのコーディング方法

HTMLの書き方

基本的には、日本語をテキストとして入力し、英語をデータ属性として入力します。

// 例
<h1 data-title="Company">会社概要</h1>

例では「 data-title 」としましたが、「 data-●●● 」の●●●の部分は自由でかまいません。

データ属性については、こちらの記事で詳しく解説しています。

【HTML】data属性の取得方法(jQuery・JavaScript・CSS)

HTMLのdata属性の使い方を知りたいですか?この記事では、data属性の使い方、JavaScript、jQuery、CSSでのdata属性の取得方法を紹介しています。ぜひご覧ください。

英語はあくまでデザインという考え方をします。

「あまりピンとこない」という人は、「HTML5 Outliner」というツールを使ってみてください。

Googleに見出しとして「Company会社概要」と認識されているとしたら、「ちょっと違うな」だと思います。
spanを使った場合はこのように認識されてしまいます。

「HTML5 Outliner」や、見出しタグの使い方については、こちらの記事で詳しく解説しています。

見出しタグの使い方とHTML5 Outlinerで確認する方法

HTMLの見出しタグについて知りたいですか?この記事では、見出しタグの使い方と「HTML5 Outliner」を使ってアウトラインを確認する方法について解説しています。ぜひご覧ください。

CSSの書き方

HTMLで書いたデータ属性を、CSSで疑似要素として取得、表示させます。

// 例
h1:before{
  content: attr( data-title );
}

疑似要素(:before、:after)はどちらを使ってもいいです。
デザインで英語が上、左にある場合は:before、英語が下、右にある場合は:afterにすると位置調整がしやすいです。

疑似要素については、こちらの記事で詳しく解説しています。

【CSS】疑似要素(:before、:after)とは?よくあるミス、使い方

コーディングで使う疑似要素について知りたいですか?この記事では疑似要素についての解説、よくあるミスについて、おもな使い方(アイコン、図形、装飾、連番)について紹介しています。ぜひご覧ください。

WordPressでのタイトルとスラッグを使った応用

WordPressでは、投稿、固定ページごとにタイトルとスラッグを設定します。
このWordPressのルールを使い、データ属性にスラッグを設定します。

一般的に、以下のように設定します。

  • タイトル … 実際に表示される日本語、英語を含めてたテキスト
  • スラッグ … プログラムで使用するための小文字の英数字(単語のつなぎはハイフン)

スラッグをあまり意識せず、日本語のままにしているサイトもありますが、英数字で設定することが無難です。

また、設定するスラッグはURLになるで、アンダースコア(アンダーバー)ではなく、-(ハイフン)を使います。
Googleも-(ハイフン)を使うことを推奨しています。

POINT
WordPressのスラッグには、アンダースコア(アンダーバー)ではなく、-(ハイフン)を使う!

ただし、デザインによっては小文字英数字の変換が必要になります。

WordPressでタイトルとスラッグを取得する

まず、タイトルとスラッグを取得してHTMLに出力します。
英語部分が小文字でいい場合は、これだけでもOKです。

固定ページ、投稿ページ

// 例
<?php
  global $post;
?>
<h1 data-title="<?php echo esc_attr( $post->post_name ); ?>"><?php the_title(); ?></h1>

「$post->post_name」がスラッグになります。

一覧ページ

// 例
<?php
  $slug = get_query_var("post_type");
  $title = get_post_type_object( $slug )->labels->name;
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php esc_html( $title ); ?></h1>

「$post->post_name」がスラッグになります。

属性の出力には「esc_attr」でエスケープをします。

WordPressのエスケープ関数については、こちらの記事で解説しています。

【WordPress】エスケープ関数の使い方

WordPressのエスケープ関数の使い方について知りたいですか?この記事では、WordPressのエスケープ関数の使い方、エスケープがいる関数、エスケープがいらない関数についても紹介しています。ぜひご覧ください。

PHPで文字列を置換する

-(ハイフン)を半角スペースに置換する

スラッグは-(ハイフン)で英単語をつなげることが多いです。

PHPの「 str_replace 」を使って、-(ハイフン)を半角スペースに置換することで、単語ごとにスペースで区切られた一般的な英語の表記にすることができます。

// 例
str_replace("-", " ", "privacy-policy");

// 出力
privacy policy

これを実際のWordPressテンプレートの書き方にあてはめます。

// 例
<?php
  global $post;
  $slug = str_replace("-", " ", $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

スラッグに-(ハイフン)が含まれない場合でもエラーがでることがないので、とりあえず書いておいて大丈夫です。

PHPで文字列を変換する

Webデザインで英語部分を小文字だけで表示するデザインは少なく、大文字か先頭だけ大文字ということが多いです。

PHPではこれらを変換する関数が用意されているのでこれを使います。

大文字に変換する(strtoupper)

PHPの「 strtoupper 」を使って、英語を大文字に変換することができます。

// 例
strtoupper( "faq" );

// 出力
FAQ

これを実際のWordPressテンプレートの書き方にあてはめます。

// 例
<?php
  global $post;
  $slug = strtoupper( $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

先頭だけ大文字に変換する(ucfirst)

PHPの「 ucfirst 」を使って、英語の先頭文字だけを大文字に変換することができます。

// 例
ucfirst( "about" );

// 出力
About

これを実際のWordPressテンプレートの書き方にあてはめます。

// 例
<?php
  global $post;
  $slug = ucfirst( $post->post_name );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

各単語の先頭だけ大文字に変換する(ucwords)

PHPの「 ucwords 」を使って、英語の単語ごとの先頭文字だけを大文字に変換することができます。

// 例
ucwords( "privacy policy" );

// 出力
Privacy Policy

これを実際のWordPressテンプレートの書き方にあてはめます。

スラッグの-(ハイフン)を先に半角スペースに置換し、その後、それぞれの単語を大文字に変換します。

// 例
<?php
  global $post;
  $slug = ucwords( str_replace("-", " ", $post->post_name ) );
?>
<h1 data-title="<?php echo esc_attr( $slug ); ?>"><?php the_title(); ?></h1>

CSSで文字列を変換する(text-transform)

CSSの「 text-transform 」でも文字列の変換ができます。
WordPressにかぎったことではないので、知っているといろいろな応用に使うことができます。

「-(ハイフン)を半角スペースにする」などの文字列置換はできないようです。

// HTML
<h1 data-title="work">施工事例</h1>

大文字に変換する(uppercase)

上記のHTMLを「text-transform: uppercase;」で大文字に変換します。

h1:before{
  content: attr( data-title );
  text-transform: uppercase;
}

// 出力
WORK

先頭だけ大文字に変換する(capitalize)

上記のHTMLを「text-transform: capitalize;」で先頭だけ大文字に変換します。

h1:before{
  content: attr( data-title );
  text-transform: capitalize;
}

// 出力
Work
POINT
WordPressでWebサイトをつくるときには、タイトル、スラッグを想定して設計すると、解説したような方法で見出しをコーディングすることができます。

まとめ

日本語と英語を使った見出しのコーディングについて解説しました。

  • HTMLはテキストに日本語、データ属性に英語でコーディングする。
  • 英語のテキストは文字ではなく、デザイン(装飾)ということを意識する。
  • CSSは疑似要素を使ってデータ属性を取得、表示させる。
  • WordPressでは、タイトルを日本語、スラッグを英語として使う。
  • スラッグは半角英数字とハイフンで設定し、PHPで変換してデータ属性に設定する。

こうすることで、日本語と英語を使った見出しデザインを適切に設定し、SEOにも強いコーディングをすることができます。

見出し前提で解説しましたが、グローバルナビやサイドバーのデザインにも使うことができます。