HCDコンサルティング

カテゴリー: 未分類

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

  • WordPress Twenty Twelveのスマホ閲覧時のnavigation menuをカスタマイズ

    Twenty Twelveのスマホ閲覧時のnavigation menuTwenty Twelveをスマホから閲覧したときのナビゲーションメニューのデザインがあまりにも貧相なのでカスタマイズすることにしました。 (さらに…)

  • WordPress Twenty Twelveのmenuボタンを改造してみました

    デザイン的に少しあれなTwenty Twelveのmenuボタン

    Twenty Twelveは、スマートフォンなど幅の狭いデバイスで閲覧したときには、「menu」ボタンを押すとナビゲーションメニューが出現するつくりになっています。しかし、デザイン的に少しあれなので、リフォームしました。 (さらに…)

  • WordPress Twenty Twelveのヘッダーにgoogle検索窓とsocial buttonを設置


    Twenty Twelveのデフォルトの状態では、PCなどの幅の広いデバイスで閲覧したとき、ヘッダー右側には広大なスペースが生まれます。ここに、google検索窓とsocial buttonを設置しました。 (さらに…)

  • ページの余白を削る-WordPress Twenty Twelveカスタマイズ

    ページの余白を削る以前に、PC表示の際のページ上部のグレーの部分を削除しました。しかし、それ以外の白い余白も削りたくなったので、スタイルシートをいじってみました。 (さらに…)

  • CSSによるセンタリングのまとめ

    久しぶりにブロックレベル要素をセンタリングしようとして、10分間ほどググる羽目になりました。超初歩的なMY備忘録ですが、CSSで中央揃えをする際の記述をまとめてみました。 (さらに…)