HCDコンサルティング

ブログ

  • フォントの調整～WordPress Twenty Twelveカスタマイズ

    ある程度カスタマイズが進んできたので、全体のバランスを考えて、フォントサイズを調整してみました。 (さらに…)

  • 余白の微調整～WordPress Twenty Twelveカスタマイズ

    以前から、ページ上部のグレー部分を削除やページの余白を削るなど余白調整関係の記事は以前にも書きました。
    しかし、再調整することになったのでメモ。なお、上記2記事を踏まえたうえでないとよくわからん内容になっている可能性が高いのでご注意を。 (さらに…)

  • ヘッダーもレスポンシブにカスタマイズ～WordPress Twenty Twelve

    header structureTwenty Twelveのカスタマイズを始めてから、ヘッダーは色々といじくってきました。今回は、デバイスの幅が広がるにつれて1カラム→2カラム→3カラムとレスポンシブな表示をするヘッダーにしてみました。 (さらに…)

  • PC閲覧時のメニューバーに色をつけました-WordPress Twenty Twelveカスタマイズ

    スマホ閲覧時のmenuは色が付いてカラフルになっているのに、PC閲覧時のメニューバーはデフォルトのままにしていたウェブシュフです。スマホでもPCでも同様の色彩が再現されるよう、CSSをいじってみました。 (さらに…)

  • WordPressでfeedのテンプレートをカスタマイズする手順まとめ

    ワードプレスのfeedでは、デフォルトでは、各記事のtitle要素に記事タイトルしか含まれません。しかしそれだと情報不足になる場合もあるので、feedのテンプレートをカスタマイズする方法を調べてまとめてみました。 (さらに…)

  • rel nextとrel prevは設定しましたか？WordPressでSEO friendlyなpagingを実現するのに必須！

    WordPressなどのCMSでサイトを作ると、TOPページやカテゴリーアーカイブはページネーション（ページ送り）を使って表示されることになります。これらのページをSEO friendlyにするために、rel nextとrel prevを設定します。 (さらに…)

  • canonical urlは完璧ですか？SEO friendlyなWordPressサイトには絶対必要です。

    WordPressで作ったサイトをSEO friendlyにするには、canonical urlの設定は必須です。今回、Twenty Twelveのheader.phpをゴリゴリカスタマイズして導入しましたのでメモ。 (さらに…)

  • WordPressのheader.phpをカスタマイズしてSEO friendlyなtitle要素を実現する

    ワードプレスのtitle要素は検索エンジンやソーシャルプラットホームに情報を発信する上でとても重要な部分です。キーワードが程よく盛り込まれ、ページの内容がわかりやすく伝わるような構成を目指すべきです。 (さらに…)

  • WordPress Twenty Twelveでwp_titleを使うとブログ名やページ数が自動出力される

    wp_titleは<head>～</head>を記述する際にとても便利な関数です。しかし、Twenty Twelveでは、wp_titleに自動的にブログ名が出力されるアクションがつけられているので、ちょっと注意が必要です。

    wp_titleとは

    wp_titleはそのページのタイトル名を返す関数です。普通はheader.phpで大活躍します。
    [img-link url=”https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_title” title=”テンプレートタグ/wp title – WordPress Codex 日本語版”]
    でも、ここに書かれている通りデフォルトではブログ名は出力されません。

    ですので、ページのタイトルの後にブログ名をくっつけたものをtitle要素としたければ、以下のようなphpを書きます。

    <title><? php
$title=wp_title( '|', false, 'right' ).get_bloginfo('name');
echo $title;
?></title

    当ブログ「ウェブシュフ」の「CSSカテゴリーのアーカイブページ」の場合、上のphpの実行結果はこうなるはずです。

    <title>CSS｜ウェブシュフ</title>

    Twenty Twelveではブログ名を自動出力

    でも、Twenty Twelveでは、

    <title>CSS｜ウェブシュフウェブシュフ</title>

    となってしまうんです。

    .get_bloginfo(‘name’)を削除して

    <title><? php
$title=wp_title( '|', false, 'right' );
echo $title;
?></title>

    のようにすると、以下のようにきちんと表示されます。

    <title>CSS｜ウェブシュフ</title>

    Twenty Twelveでは、wp_titleがページタイトルの後ろに自動的にブログ名をつけてくれるんですね。

    区切り線を左側にしているとおかしなことに

    そういうわけで、以下のように区切り線が左側に来る使い方をしている場合はおかしな表示になるので注意が必要です。

    <title><? php
$title=wp_title( '|', false);
echo $title;
?></title>

    出力はこうなってしまいます。

    <title>｜CSSウェブシュフ</title>

    区切り線が左側にあるときは、ページタイトルの前にブログ名を付けてもらえると便利なんですが…。

    Twenty Twelveではページ数まで自動出力

    さらに、ホームやアーカイブでページ送りを利用している場合、末尾にページ数までつけてくれます。

    <title><? php
$title=wp_title( '|', false, 'right' );
echo $title;
?></title>

    上記のphpによって、CSSカテゴリーのアーカイブページの2ページ目にでは、以下のように出力されます。

    <title>CSS｜ウェブシュフ｜Page 2</title>

    wp_titleからブログ名やページ数を取り除く

    wp_titleが自動的にブログ名やページ数を自動的につけてくれるのは、たいていの場合便利だと思います。

    しかし、状況によっては「余計なこと」になってしまうかもしれません。

    そんな場合は、wp_titleがブログ名やページ数を自動的に出力しないようにすることもできます。

    function.php（注意：子テーマを使ってTwenty Twelveをカスタマイズしている方は親テーマのfunction.phpです）の

    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 );

    の直後に

    remove_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 );

    を挿入するとwp_titleがブログ名やページ数を自動的に出力することはなくなります。

  • WordPress Twenty Twelveをsidebarの幅を固定したliquidレイアウトに改造

    sidebarの幅を固定しないとバナーがはみ出すTwenty Twelveは、サイドバーの幅が画面の大きさに比例して変わるので、広告バナーなどを貼っていると表示が崩れてしまいます。そこで、サイドバーを固定幅に変えてみました。 (さらに…)