Cherry Pie Web > ブログ > 技術記事 > [WordPress] TwentyTwelveとSEO関係のプラグインを併用するとタイトルがおかしくなる

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

2013年4月4日

—

in 技術記事

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

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

TwentyTwelveの子テーマつくったらハマった話 from Masahiko Kawai

1 タイトルがどうおかしくなるの？
2 原因は、TwentyTwelve
3 子テーマでカスタマイズ

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

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

子テーマでカスタマイズ

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

１．themesディレクトリの下に、新規ディレクトリを作ります。
　　名前は何でもいいです。（ここでは、「mytheme」にします）

wp
└ wp-content
    └ themes
        └ twentytwelve
        └ mytheme

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

/*
Theme Name: MyTheme
Theme URI: https://www.cherrypieweb.com/wp/
Description: TwentyTwelveの子テーマ
Author: さくらぎけい
Author URI: https://www.cherrypieweb.com/wp/
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 のままで、タイトルだけプラグインで設定できるようになります。

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

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

ご質問・ご相談などありましたら
お気軽にお問い合わせください

資料を請求する

お問い合わせはこちら

資料請求・お問い合わせにはメールアドレスが必要です

WordPress