WordPressカスタマイズ「BirdTIPS」でアイキャッチ画像を記事上部に自動表示

ブログを始めるにあたり、WordPressで3カラムのテンプレートを使用したかったのですが、コレはというテンプレートになかなか出会えません。

有料テンプレートならいろいろとできそうなので何か買おうかと思ったのですが、節約出来るところは節約したいので無料のWordPressテンプレートで頑張ってみます。

無料のテンプレートの中からそれなりに使えそうな物を使用させてもらい、気に入らないところはカスタマイズしていこうと企んでいます。

私はこのテンプレートを選びました

そんな私が選んだWordpressテンプレートは「BirdTIPS」です。

3カラム出し、レスポンシブなのでスマホでアクセスしても問題ないところが決め手です。

かなり気に入っているのですが、アイキャッチ画像が記事上部に自動表示されないことと、トップページに表示されるアイキャッチ画像が大きすぎるので、この2点をカスタマイズしてみたいと思います。

アイキャッチ画像を自動的に記事タイトルの下に表示(BirdTIPS用)

テンプレートのカスタマイズは「テーマの編集」で行います。

WordPressの管理画面から「外観」>「テーマの編集」を開き「content.php」を開いてください。

アイキャッチ画像を自動的に記事タイトルの下に表示させたいので

記事にアイキャッチ画像が設定されているなら大きいサイズの画像を表示するというコードを追加します。

<?php the_content(); ?>

content.phpの中で上記コードを探して、上にコードを追加します。

<?php if(has_post_thumbnail()): ?>
    <?php the_post_thumbnail('large',array( 'class' => 'mySinglThumbnail' ) ); ?>
<?php endif; ?>

追加した結果はこんな感じです。

トップページのサムネイルサイズを変更する

<a href="<?php the_permalink(); ?>" class="thumbnail"><?php the_post_thumbnail('medium'); ?></a>

content.phpの中で上記コードを探して、
‘medium’ を array(150,150)に変えました。

150 X 150ピクセルのサイズにしてみました。

カスタマイズは自己責任で

今回のカスタマイズは貼り付けるだけなので簡単ですが、プログラムの経験がない方には難しいかもしれませんので、バックアップを取るなど、カスタマイズ前にもしもの備えをしておいてください。