WordPressの企業サイト用に。固定ページのタイトルに「スラッグ」の英語を利用してカッコよくする。

WordPressの固定ページでは、単純にh1を利用するから、page.phpに、

<h1><?php the_title();?></h1>

とすれば、固定ページに入力しているタイトル文章がそのままh1のタイトルになって、これはこれでSEO的にもいいのですが、日本語のタイトルをそのまま固定ページのタイトルにすると、ページのデザイン的に、特に企業サイトなんかでカッコがあまりよくない場合なんかがある。

かといって固定ページのタイトルをすべて英語にするのは現実的でない。せっかくのh1やメニューなどの扱いとか、SEO的にもよくない。

そこで、「スラッグ」を利用して、英語のタイトルを大きめに表示しつつ、日本語のh1タイトルは小さめに表示してデザイン的によくしようという案です。

page.phpに以下を入力。ページの「スラッグ」を取得してpタグに「enTitle」というクラスを付けて出力します。h1は通常の固定ページのタイトルをh1タグにクラスjpTitleを付けて出力します。

<p class="enTitle">
<?php
$post = get_page($page_id);
echo $post->post_name;?>
</p>

<h1 class="jpTitle"><?php the_title();?></h1>

CSSは以下のように。
ちょっとかっこよくするために、英語タイトルの書体をGoogle webフォントの「Roboto」の一番細いの「100」にしました。

ここで一つポイントですが、「スラッグ」は固定ページの編集で大文字にしても小文字に変換されてしまうので、CSSに「text-transform:capitalize;」を追加します。こうすることで、タイトルの先頭のみ大文字になり、よりかっこよくなる。

p.enTitle{
	text-transform:capitalize;
	margin-bottom:10px;
	font-family:'Roboto', sans-serif;
	font-weight:100;
	font-size:80px;
	line-height:80px;
	color:#ccc;
	}

日本語h1は英語タイトルにかかる補足みたいなデザインにたいので、FontAwesomeを使って矢印アイコンを追加します。

h1.jpTitle{
	font-size:20px;
	color:#000;
	}

h1.jpTitle:before {
	color:red;
	margin-right:5px;
	font-family:FontAwesome;
	content:'\f0a9';
	}

そして、ページタイトルが下記のように出力されます。

product

製品案内

「スラッグ」の自動で付加される「ハイフン」を「半角スペース」に置換する。

「About Us」とか、スペースを入れた「スラッグ」を利用しようとしても、スペースは自動的に「ハイフン」に置き換わってしまう。せっかくの英語タイトルが「About-Us」と、タイトルなのにハイフン付になってしまうので、この「ハイフン」をJqueryで「半角スペース」に置換します。

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
$('.enTitle').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/-/g,' '));
});
});
</script>

下記に「当社について」ページとして、「about-us」を出力したタイトルを表示します。

About-us