【WordPress】 TwentyTwelveのアイキャッチの位置を移動する

TwentyTwelveは記事タイトルに上にアイキャッチ画像がでるというちょっと使いにくい配置なのでこれを修正します。

以前検討したように、アイキャッチは記事本文の先頭に置きたいと思います。

スポンサーリンク

1.まずやりたいことをまとめると

この邪魔なアイキャッチを、

eye_catch_21b

この位置に移動したい。

eye_catch_08b

アイキャッチのサイズは固定で、記事本文が回り込むようにしたい。

トップページの記事一覧、個別記事さらに各アーカイブでも同じ構成にしたい。

2.やってみましょう

まずはバックアップ。

記事を生成している「content.php」とその装飾をしている「style.css」をいじります。
これらのファイルは既にカスタマイズ用として子テーマで運用していますので、今回も子テーマ内で作業を行います。

まずはタイトルの上で表示をさせているコードを削除します。

eye_catch_22b

次にこの間にコードを追加します。

eye_catch_23b

追加するコードはこちら

 <div class=”eyecatch”>
<?php the_post_thumbnail( ‘thumbnail’ ); ?>
</div>

説明をすると、

the_post_thumbnail( ‘thumbnail’ );

でサムネイルサイズのアイキャッチを表示します。
サイズは以下のように指定できます。

thumbnail : サムネイルサイズ
medium : 中サイズ
large : 大サイズ
full : フルサイズ
array(120,120) : 指定サイズ

サムネイルなどのサイズはダッシュボードの【設定】-【メディア】で設定しています。

eye_catch_24

次に

<div class=”eyecatch”>
・・・
</div>

の部分はCSSで本文の回りこみなど行うためのものです。

CSSを設定する前の表示はこのようになっています。

eye_catch_25

子テーマのstuyle.cssに以下のコードを追加します。

.eyecatch{
float: left;
margin-right: 15px;
margin-bottom: 10px;
}

float: left;は本文の回りこみを、marginは文字と画像の隙間を作っています。

eye_catch_27

これで完成です。

3.まとめ

表示される位置はcontent.php、装飾はstyle.cssで対応する。
content.phpなどモジュールテンプレートは個別記事だけでなくアーカイブなど複数のページで共用しているため、どのページに影響が出るのかをよく調べておく必要がある。

今回の場合は検索結果のみアイキャッチ画像がでません。
これは条件分岐の「検索結果のページではない時は・・・」という箇所にコードを入れたからです。

逆に条件分岐を活用することで個別記事のみフルサイズにするなどいろいろなことが出来そうです。

アイキャッチ画像の影が邪魔とかいろいろと気になる箇所はありますが、まあおいおいってことで。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

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

CAPTCHA