WordPressの投稿フォーマットを使用すると、投稿毎に異なったスタイルを適用することができるので、超便利です。

しかし、この便利な投稿フォーマットはデフォルトでは固定ページで使用できません。

代わりに固定ページではページテンプレートというのが使用できますが、テンプレートファイルを作ったりCSSを書いたりするのが面倒だったので、固定ページで投稿フォーマットを有効にしてみました。

以下は、テーマファイルのfunctions.phpに記述して下さい。

ステップ１： 固定ページの投稿画面上で投稿フォーマットを有効にする。

管理画面側で投稿フォーマットを有効にするには以下の1行をfunctions.phpに記述するだけでオッケーです。

add_post_type_support('page', 'post-formats');

たったこれだけで以下のように投稿フォーマット選択用のメタボックスが追加されました。

固定ページの一覧画面でも以下のような感じで投稿フォーマットが表示されます。

ステップ２： 投稿フォーマットに応じたclass属性を出力する。

密かにステップ１の作業だけでclass属性が出力されることを期待したのですが、残念ながらこの部分はsingleページかどうかの条件分岐の中に入っていたので、フィルターフックでclass属性を追加する必要があります。

以下のソースをテーマのfunctions.phpにコピペして下さい。

add_filter("body_class", "my_body_class");
function my_body_class($classes) {
    if (is_page()) {
        global $post;
        $fmt = 'page-format-'.get_post_format($post->ID);
        $classes[] = $fmt;
    }
    return $classes;
}

ここまでの作業が完了したら、固定ページ上で任意の投稿フォーマットを選択して、実際のページ上のbody要素にpage-format-asideなどのclass属性が追加されたことを確認して下さい。

あとは、CSSをゴニョゴニョするだけです。

昨日の続きです。

WordPressにはカスタムヘッダーという機能があります。

この機能を使うと以下のようにヘッダーの画像をブラウザからアップロードしてトリミングしたりすることができます。

とても便利な機能ですよね。

ですが、今回制作したサイトでは、この部分は選択した記事の投稿サムネールをスライド表示しているため使いませんでした。

でも、こんな便利な機能をオフにしておくのは、もったいない。

というわけで、このカスタムヘッダー機能を利用して、サイト上部のロゴ画像を変更できるようにするためのテクニックをご紹介します。

このテクニックを使用すると、Googeのようにイベントなどに合わせてロゴを変更できますので、とっても便利です。

完成後のイメージ

カスタムヘッダーを使用したロゴの設置結果は以下のような感じです。

管理画面は以下のような感じ。

ロゴ画像を新規にアップロードできることに加えて、あらかじめ用意した画像の中から選択することもできます。
（この例ではクリスマスシーズン用のロゴをあらかじめ用意しています。）

テーマのfunctions.phpへの記述

カスタムヘッダーを使用するための要点は以下のとおりです。

• カスタムヘッダーを有効にする。
• カスタムヘッダー用の画像の幅と高さを設定する。
• デフォルトのロゴを設定する。
• その他のデフォルト画像を設定する。
• テキストを非表示にする。

これらを実現するためのfunctions.phpに記述するべきソースは以下のような感じです。

// デフォルトのロゴまでのURL
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory').'/img/logo.png');

ロゴ画像の幅と高さ
define('HEADER_IMAGE_WIDTH', 380);
define('HEADER_IMAGE_HEIGHT', 80);

// 今回は使用しないので''としておく
define('HEADER_TEXTCOLOR', '');

// カスタムヘッダーを有効にするための記述
add_custom_image_header('', 'my_admin_header_style');

// その他のロゴ画像を配列で指定する。
register_default_headers( array(
        'Merry Christmas' => array(
            'url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'thumbnail_url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'description' => 'クリスマス用ロゴ'
        ),
    )
);

// 管理画面用のスタイルの設定。多くの場合以下のままでいい。

function my_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
    background-repeat: no-repeat;
}
</style>
<?php
}

ここまでの作業で管理画面側の作業は終わりです。

テーマのheader.phpにロゴを設置する。

実際のサイトのほうにロゴを設置するには、テーマファイルの中のheader.phpを編集します。

今回制作したサイトでは以下のような感じです。

header_image()関数をコールすればカスタムヘッダーで指定された画像までのURLを取得できます。

<h1>
  <a style="background-image:url(<?php header_image(); ?>);" href="<?php echo home_url('/'); ?>">
    <?php bloginfo( 'name' ); ?>
  </a>
</h1>

あと、style.cssには以下のような感じ。

これはお好みでどうぞ。

#header h1 a
{
    width: 380px;
    height: 80px;
    display: block;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

以上でカスタムヘッダー機能を応用したロゴ画像の設置は終了です。

カスタムヘッダーもロゴ画像も両方とも使いたい！

ヘッダー画像もロゴも管理画面からアップロードしたい時は、@jim0912さんがいい方法をブログに書いてくれてます。

http://www.warna.info/archives/885/

ロゴ画像のリサイズが出来ないのですが、両方同時に使う場合にはおすすめです。