Twenty Thirteenのブログタイトルのアンカーテキストが長すぎるためHTMLを調整

header.phpの標準状態

WordPressの公式テーマTwenty Thirteenなのだが、

ブログのタイトルとキャッチフレーズを設定した場合に、ブログタイトルのアンカーテキストが

タイトル + キャッチフレーズ

といった書式となり非常に長くなる。

この部分でタイトルのみをアンカーテキストにしたい場合は、

HTMLのカスタマイズ

が必要になる。

Twenty Thirteenのheader.phpを確認すると、アンカーテキスト部分は以下のHTMLで組んである。

<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
  <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
  <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>

タイトルとキャッチフレーズがhタグで組んであり、それらがアンカーテキストに設定されている。

SEO対策を意識してブログタイトルを設定している場合などは、SEOの観点から

ブログタイトルのみがアンカーテキストになるようにカスタマイズ

するのがおすすめ。

header.phpをカスタマイズ

純粋にブログタイトルのh1のみをアンカーテキストに設定して、h2をaタグの外に出せば希望するHTMLにすることが可能。

<div class="head">
  <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
  </a>
  <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

しかし、それだけだと見た目が崩れてしまうので、全体を新しいdivで囲んで、headというclass属性を追加した。

style.cssのカスタマイズ

Twenty Thirteenの標準のcssにはhome-linkとしてスタイルが設定されている。この部分をカスタマイズする。

.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 230px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

home-linkを新しく設定したheadに置き換えた上で不要になったスタイルを削除する。

.site-header .head {
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 230px;
	padding: 0 20px;
	width: 100%;
}

.site-header .head .home-link {
	color: #141412;
	text-decoration: none;
}

該当部分を上のcssに置き換えることで、見た目はデフォルトと同じまま、ブログタイトルのアンカーテキストをタイトルのみに設定することができる。