こんにちは、中村です。WordPressでは色んなテーマが公開されていますね。公開されているお洒落なテーマを見てから自分のブログを見ると、「味気ないな〜」って軽く落ち込みますｗ「え、こんなにお洒落なのに無料なの？」と驚くほど高機能なテンプレートもたくさんありますが、勉強も兼ねてブログは更新しているのであまり公開されてるテーマにばかり頼りたくない、というなぞの感情を抱いております。
そこで、自作でトップページのデザインを最新の投稿だけ大きく表示されるように修正してみました！（このブログは、『Twenty Twelve』のcssを修正しただけの状態です！）他の修正は検索ウィジットの「検索」という文字を消したのと、右上のナビのボタンを音がなるようにしたくらい。
それではやっていきましょう♪注：ファイル転送用のアプリが必要です。
この記事の目次
修正が必要なファイル
- index.php
- content-index-bottom.php(追加)
修正・変更内容
content-index-bottom.php(追加)
最新の投稿だけを大きく見せるために、最新記事以外の投稿を小さめの画像で表示させるためのphpファイルを作成します。
作成方法なのですが、『content-index.php』の内容をコピーしてください。新しいphpファイル名に指定はありません。ちなみにコピー元の『content-index.php』は、『wp-content/themes/Twentytwelve/』に保存されています。
新しいファイルができたら、コピー元の『content-index.php』が保存されていたのと同じ『wp-content/themes/Twentytwelve/』のディレクトリに保存をしてください。また、コードを一部修正しますのでそのままファイルを開いてください。
content-index-bottom.php(修正前)
<a href="<?php the_permalink(); ?>" >
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>
</a>
『the_post_thumbnail();』を下記のように修正します。
content-index-bottom.php(修正後)
<a href="<?php the_permalink(); ?>" >
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail('thumbnail');
endif; ?>
</a>
上で修正した『the_post_thumbnail();』は引数を変えることで、吐き出す画像のサイズを変えることができます。詳細は下記の内容をご参照ください。
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max) the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max) the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max) the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
index.php
先ほど新しく作成した『content-index-bottom.php』をindex.phpで呼び出します。『index.php』は、『wp-content/themes/Twentytwelve/』に保存されているテーマのファイルを修正してください。
index.php
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content-index', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>
お気づきの方もいるかと思いますが、トップページに表示されている記事の一覧はこのindex.phpのwhile文で設定されています。今回は最新の記事だけを大きく表示させたいので下記の内容に修正しました。
index.php
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php $numnum1 = 1; /* wheelを指定回数で切り分けるための変数 */?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if($numnum1 <= 1){ /* 最初のみ画像を大きくする */
get_template_part( 'content-index', get_post_format() );
}else{
get_template_part( 'content-index-bottom', get_post_format() );
}
$numnum1++;
?>
<?php endwhile; ?>
変数を1つ作成して、最初の一度目のループだけ『content-index』を呼び出し、それ以降は先程作成した『content-index-bottom』を呼び出すようにしました。
おわりに
以外と、簡単な作業だけで変更することができました！
デザインに関しては、新しく作成した『content-index-bottom.php』にclassを付与するなりして、CSSで対応してもらえればと思います。