アイキャッチ(サムネイル)表示を変更する Twenty Twelve改造マニュアル

20121107184910
このエントリーをはてなブックマークに追加
PR

Twenty Twelve改造マニュアル
アイキャッチの表示を変更させる

 

 

通常のTwenty Twelveでアイキャッチを表示させるとこのようになります

20130203110240

 

少し変わったレイアウトで、アイキャッチが記事の上部に来てしまいます
またサイズもフルサイズで表示されてしまいます(写真のギャラリーサイトには良いかも)
通常のブログ形式では少し見辛いのでレイアウトを変更します

localhost_wordpress_te

アイキャッチをWordPressのメディア設定のサムネイルと同じ大きさに設定するように変更します
そして画像の右側にタイトルや抜粋が回りこむようにします

こちらの記事を参考にしました
http://shirose.jp/2013/01/wordpress-eyecatch/

 

作業工程 目次

  • 編集するファイル
  • バックアップをする
  • content.php を編集する
  • style.cssを編集する

 

1 Twenty Twelveの編集するファイル

まず編集するファイルですが
content.phpの中にアイキャッチに関する内容が記入されていますのこのファイルを編集します
style.cssには画像の回り込みを可能にするための設定をします

それぞれ
WordPressのインストール先 >> wp-content >> themes >> twentytwelve >> この位置にあります

 

2 Twenty Twelveのファイルをバックアップする

編集を行う前に編集するファイルをバックアップします
content.phpとstyle.cssをそれぞれ別目でバックアップしておきます
例)content_2.php style_2.css

Twenty Twelve自体をWordPressのテーマページからダウンロードして
保存しておいて、失敗したら入れ替えるとうやり方も有りです(テーマを全くいじってない場合)

 

3 content.phpを編集する

Twenty Twelveのフォルダ(ディレクトリ)内にある
content.phpを開きます

次の箇所がアイキャッチを表示することを指定している場所です
この箇所を削除し、変更したい場所に記述します

<header class="entry-header">
<?php the_post_thumbnail(); ?>

この場所に書き込みます

<?php else : ?>
この間に新たにコードを入れる
<div class="entry-content">

書き込むコードは
参考にしたサイトからそのままお借りしました

<div class="eyecatch">
<?php if ( is_single() ) : ?>
<?php the_post_thumbnail( 'full' ); ?>
<?php else : ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php endif; // is_single() ?>
</div>

意味はシングルのコンテンツだったら表示するサムネイルはフルサイズ
そうではない場合はサムネイルはWordPressで設定しているサムネイルサイズ

content.phpはこれで保存して完了です

4 Twenty Twelveのstyle.cssを編集する

同じく Twenty Twelveのフォルダ(ディレクトリ)内にある
style.cssを編集する

今回は3で書き込んだdivのclassの設定を書き加えるだけです
style.cssの一番下にでも書き込んでおけば分かりやすいと思います

 

.eyecatch{
float: left;
}

画像を右側にしたければ leftをrightに書き換えるだけで出来ます
また、画像に文字を回りこみさせたくない場合はこのCSSを書き加えなければ回りこみはしません

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)