WordPressで複数ヘッダー画像をcssスライドショーで動かす

2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご:TOPページに実装しました。
WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま(任意の画像に固定か、ランダムかを選択)です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。

画像をヘッダー画像としてアップ

Twenty Twelveはカスタムヘッダーに対応しているので、ダッシュボード/外観/ヘッダー で、複数のヘッダー画像を選んでおきます。今回は勉強会用にメンバー各自が「メディアライブラリー」に追加しておいてくれたものを選びました。
回したい画像をヘッダー画像として選ぶ
メディアライブラリーから一つずつ選択すると、それぞれのコピーが作成されました。ちょっと冗長な感じがしますが、

  • 元の画像とは違う形でトリミングも可能
  • 選択済みのヘッダー画像から削除しても、元のファイルは残る

という事を考慮した設計なのでしょう。

header.phpを編集

Twenty Twelveの場合、</header> の直前にhedear_imageを出力している箇所があるので、以下の様に書き換えました。

foreachで複数の画像を出力する前に、1つだけ別にアップロードした「top-img-back.gif”」を表示させています。これはフォールバック用の画像で、同時にスライドショーの描画領域を確保するのにも使います。cssは以下の通りです。

ポイントは、.top_slides img:nth-of-type(n+2)というセレクタにposition:absoluteの設定をしている部分です。
もし全てのimgをposition:absoluteにしてしまうと、親要素のdivの高さが0になってしまい、描画領域を確保できません。かといって、高さを確保する為に親要素のheightをpx指定してしまうと、せっかく画像幅を100%にして「フレキシブル・イメージ(Flexible Image)」にしているのに、親要素の下などに、不格好な隙間が生じてしまいます。
img:nth-of-type(n+2)は2つ目以降の画像をセレクトしますので、1つ目のimgは除外される訳です。
また、opacity:0やanimationも、img:nth-of-type(n+2)に指定して、1つ目のimgを除外しているので、animationに対応していないブラウザでは、1つ目のimgがフォールバックとして機能します。
cssのスライドショーについて、詳しくは「css3のanimationで作る永久ループのスライドショー」をご覧下さい。

WordPressで複数ヘッダー画像をcssスライドショーで動かす」への3件のフィードバック

  1. ランサーしょうじランサーしょうじ

    page.phpの方でなく、
    header.phpにif文で条件設定ですか。
    確かにそのほうが、元々あるheader.phpの画像ランダム表示の機能があるので、改造し易いですね。
    後はCSSで、微調整ですね。こりゃ参った。
    これでWordPressの企業サイトに活用できる。

    返信
  2. ピンバック: アイキャッチがある単独ページではヘッダー画像を表示しない | パソコン倶楽部りんご

コメントを残す

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

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.