Simplicityカスタマイズ。3行でトップページだけにメインビジュアルを表示させる

PHP

みんな大好き高機能無料テンプレートSimplicityに、トップページだけ画像を表示するエリアを追加するカスタマイズをしてみました。
画面上部に大きな画像を使える機能としては、ラージピクチャーヘッダーや、1.4.1開発版で追加された「投稿本文上」ウィジェットがあります。
が、このカスタマイズではナビゲーションの下、メインカラムとサイドバーの上にまたがる位置に画像を表示するので、企業のサイトのようなブログっぽくない見た目にすることができると思います。

用意するもの

  • 子テーマ
  • 画像 横1070px、縦300~400pxくらい(お好みで)
  • 書き換えるファイル
    • before-main.php
    • style.css

子テーマを用意したら、子テーマの中のimagesフォルダの中に、表示させたい画像を入れておいてください。
メディアライブラリの中の画像でも使えますが、とりあえずimagesフォルダの中の画像を表示させる方でやってみます。

style.cssはもともと子テーマのフォルダに入っていますので、それをつかいます。
before-main.phpを、元のSimplicityから、これも子テーマにコピーして持ってきておいてください。
これで準備完了です。

before-main.phpというのは、ファイル名の通り、メインカラムの前に何かを追加するときに使うファイルです。

      <!-- 本体部分 -->
      <div id="body">
        <div id="body-in">

          <?php get_template_part('before-main'); //メインカラーの手前に挿入するテンプレート(3カラム作成カスタマイズ時などに) ?>

          <!-- main -->
          <div id="main">

↑これは、header.phpの最後の8行です。
5行目の <?php get_template_part(‘before-main’);…の部分で、before-main.phpを呼び出しています。

before-main.phpはカスタマイズ用に用意されているファイルで、元のテーマでは中には何も書かれていません。
このファイルに、画像を表示させるコードを書けばいいってわけです!

テンプレートの構成に関しては、この記事を見ていただくとわかりやすいです。
http://zubora.main.jp/wordpress/simplicity-structure/

before-main.phpに、トップページのみ画像を表示させるコードを記入

<?php if(is_home()): ?>
<div id="main-visual"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/main-visual.jpg" /></div>
<?php endif; ?>

後でスタイルシートで上下の余白を変更したりするのに使うので、画像部分にはmain-visualというIDをつけました。
こんな感じになりました。

Simplicityプチ改造

<?php echo get_stylesheet_directory_uri(); ?>で、テーマのスタイルシートのあるフォルダのアドレスを引っ張ってきています。
似たようなテンプレートタグで、<?php bloginfo(‘template_url’); ?>というのがあるのですが、こっちを使うと親テーマのフォルダに行ってしまうので、ちょっと注意です…。
私はもちろん失敗しました。

メディアライブラリにアップした画像を使いたいときは、絶対パスで書けばいいだけです。

2ページ目以降では表示しないようにするとき

ここまででもう大体いい感じですが、固定ページをトップにしていない場合、ページ送りで2ページ目に移動することがあります。2ページ目では画像を表示したくない、って時は、
<?php if(is_home()): ?> を
<?php if(is_home() && !is_paged()): ??>
にします。

スタイルシートの調整

これでもう大体いいような感じですが、ナビゲーションと画像の間に空きがあり、画像と下のカラムはぴったり引っ付いてしまっています。

ナビゲーションと画像の間の空きは、IDのbodyについているmarginです。ですが、これを取ってしまうと画像が表示されないページでナビゲーションとカラムが引っ付いてしまうので、子テーマのスタイルシートに

#main-visual {
	margin:-15px auto 15px;
}

こんな感じで画像の余白を指定します。

Simplicityプチ改造

ナビゲーション下の余白が無くなって、画像とメインカラムの間に余白ができました。

以上です。

ちょー簡単ですね!
Simplicityはバージョンが上がるたび、ファイルの数が増えているので、とっつきずらいかもしれませんが、見ればわかるようなファイル名がついているので、むしろわかりやすいかと思います。
こんな素晴らしいテーマを作ってくださっているわいひらさんに感謝です!

コメント

  1. 高橋 より:

    初めまして、トップページだけ画像を表示するエリアを追加したくてこちらのサイトにたどり着きました。
    上記に書かれているように試してみたのですが、うまくいきません・・
    バージョンは1.8.4です。
    子テーマのbefore-main.php内に

    <img src="/images/main-visual.jpg” />
    に追加したのですが、変化無しです・・・
    ご教授ねがえませんでしょうか。
    宜しくお願い致します。

    • シマコ シマコ より:

      コメントの承認が大変遅くなりまして、申し訳ございませんでした。
      現在出産したばかりのため、パソコンを立ち上げることができず、コメントに気が付くことができませんでした。

      その後問題は解決されましたでしょうか。
      今後もしばらく何時ネットにつなげるかわからない状態のため、解決のためにご協力することが難しいです。
      重ね重ね申し訳ございません。

      問題が解決されていらっしゃる事をお祈りいたします。