[WordPress] TwentyTwelveとSEO関係のプラグインを併用するとタイトルがおかしくなる

3月にWordBench京都でお話ししたんですが、この件で困っておられる方が結構おられるみたいでしたので、個別に記事にしたいと思います。

ちなみにスライドはこちらです。

タイトルがどうおかしくなるの?

WordPress3.5 のデフォルトテーマ「TwentyTwelve」を使用しているとき、SEO関係のプラグイン(All in one SEO Pack、Headspace2 など)を有効にすると、タイトルがおかしなことになります。

たとえば、

  • ブログ名:テストブログ
  • 投稿名:テストの投稿

となっていたとして、All in one SEO Pack で、投稿のタイトルの設定を

%post_title% | %blog_title%

とすると、投稿のタイトル(titleタグ)が

<title>テストの投稿テストブログ | テストブログ</title>

となってしまうのです。

原因は、TwentyTwelve

なぜこうなるかというと、TwentyTwelveの「functions.php」に下記のような記述があって、wp_title( ) の出力値にブログ名が追加されているからです。

function twentytwelve_wp_title( $title, $sep ) {
  global $paged, $page;
  if ( is_feed() )
    return $title;
  // Add the site name.
  $title .= get_bloginfo( 'name' );
  // Add the site description for the home/front page.
  $site_description = get_bloginfo( 'description', 'display' );
  if ( $site_description && ( is_home() || is_front_page() ) )
    $title = "$title $sep $site_description";
  // Add a page number if necessary.
  if ( $paged >= 2 || $page >= 2 )
    $title = "$title $sep " . sprintf( __( 'Page %s', 'twentytwelve' ), max( $paged, $page ) );
  return $title;
}
add_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 );

実は以前のテーマ「TwentyEleven」でも、デフォルトでは同様に投稿名にブログ名が追加されます。
しかし、TwentyElevenではテンプレート「header.php」にこの記述があったので、比較的気づきやすかったし、カスタマイズ時に対処するのも容易でした。

TwentyTwelveでの対処方法としては、functions.php からこの記述を削除すればいいのでは・・・と考えてしまいますが、テーマをアップデートすると復活してしまいます。
それに、他人が作成したテーマを変更するというのはリスクが高い方法です。
こういう場合は、子テーマを作ってカスタマイズしましょう。

子テーマでカスタマイズ

子テーマの作り方は簡単です。

1.themesディレクトリの下に、新規ディレクトリを作ります。
  名前は何でもいいです。(ここでは、「mytheme」にします)

wp
└ wp-content
    └ themes
        └ twentytwelve
        └ mytheme

2.mythemeディレクトリに、新規に、style.css と functions.php を作ります。
  style.css の内容はこんな感じです。私の名前が入っているところなどは適宜修正してください。
  他人に公開しないなら、Theme Name と Template だけ書いてあれば、とりあえず動作します。

/*
Theme Name: MyTheme
Theme URI: https://www.cherrypieweb.com/
Description: TwentyTwelveの子テーマ
Author: さくらぎけい
Author URI: https://www.cherrypieweb.com/
Template: twentytwelve
Version: 1.0
*/

  functions.php の内容はこんな感じにします。丸ごとコピペで行けると思います。

<?php
function my_scripts_styles() {
  global $wp_styles;
  wp_enqueue_style( 'twentytwelve-style', get_template_directory_uri().'/style.css', array() ); // twenty-twelve
  wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
  $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );
function my_theme_setup () {
  remove_filter( 'wp_title', 'twentytwelve_wp_title');
}
add_action( 'after_setup_theme', 'my_theme_setup' );

上の方は、TwentyTwelveのスタイルシートを子テーマで継承する記述です。

下の方が、wp_title( ) にブログ名を追加するのをキャンセルする記述です。
functions.php は子テーマのあとで親テーマのものが読み込まれるので、通常の記述では子テーマで親テーマの記述を変更できません。
子テーマで親テーマの記述を変更するためには「after_setup_theme」というアクションフックを使います。

子テーマができたら、WordPressの管理画面を開きます。

「外観ーテーマ」を開くと、先ほど作った子テーマが表示されていると思いますので、有効化します。
これで、TwentyTwelve のままで、タイトルだけプラグインで設定できるようになります。

そのうちプラグイン側で対応してくれるかもしれませんが、「デフォルトテーマで、あんまりおせっかいなことをやらないでほしいなぁ」と思いますよねー

[WordPress] TwentyTwelveとSEO関係のプラグインを併用するとタイトルがおかしくなる” に対して 2 件のコメントがあります

  1. hamaboy より:

    こちらの記事で救われました。
    ずっとタイトルのところで悩んでいました。
    子テーマという方法には気付きませんでした。
    ありがとうございます。

  2. さくらぎけい より:

    >hamaboyさん
    お役にたてて良かったです。
    デフォルトテーマは意外にやっかいで困りますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です