【Xeoryカスタマイズ】サムネイルの大きさを変更する方法

bandicam 2015-06-07 09-09-11-963

こんにちは。今回はXeoryのサムネイルの大きさを変更する方法をご紹介します。

「Xeoryって何?」って方はこちらの記事をどうぞ

»最強の無料WordPressテーマXeoryを使おう!

 

さて、それでは説明していきます。

 

 

サムネイルの大きさを変更する

 

初めに

 

Xeoryは記事一覧でのサムネイルの大きさは304px * 214pxとなっています。

bandicam 2015-06-07 09-09-11-963

 

今回は、例にこのサムネイルの大きさを200px * 200pxにしたいと思います。

bandicam 2015-06-07 09-32-35-421

 

テーマのための関数 (functions.php) にコードを追加

外観 » テーマの編集 » テーマのための関数

 

functions.phpの一番下に以下のコードを追記してください。

add_image_size('好きな名前',横幅,縦幅,切り取りの可否);

今回は200px*200pxのサムネイルにするのでこのように追記しました。

add_image_size('200img',200,200,true);

ついでに切り取りをする場合切り取りしない場合について簡単に説明します。

 

切り取りをする場合だとはみ出た部分は切り取られて表示される形になります。

名称未設定 1切り取りをしない場合だと縮小されて表示されます。

名称未設定 12切り取りをするかしないかは完全に好みですが、私は切り取りをするほうが好きですね。

 

 

メインインデックスのテンプレート (index.php)を編集する

外観 » テーマの編集 » メインインデックスのテンプレート

 

functions.php に先ほどのコードを追記したら、次に index.php を編集します。

45行目あたりからサムネイルを出力するための以下のコードがあるので見つけてください。


      <?php if( get_the_post_thumbnail() ) { ?>
        <div class="post-thumbnail">
          <a href="<?php the_permalink(); ?>" rel="nofollow"><?php the_post_thumbnail(); ?></a>
        </div>
        <?php } ?>      

 

これを次のように変更してください。

 


      <?php if( get_the_post_thumbnail() ) { ?>
        <div class="post-thumbnail">
          <a href="<?php the_permalink(); ?>" rel="nofollow"><?php echo the_post_thumbnail('●●●'); ?></a>
        </div>
        <?php } ?>      

●●●にはfunctions.phpで追記した名前を入力してください。今回は200imgと入力しました。

 

 

スタイルシート (style.css)を編集する

外観 » テーマ編集

 

次にstyle.cssを編集します。

style.cssを編集する場合は子テーマを使用した方がいいですよー。

 

style.css1027行目あたりから記事一覧でのサムネイルに関する記述がされています。


.post-loop-wrap .post-thumbnail {
  width: 304px;
  height: 215px;
  margin-left: 20px;
  margin-bottom: 20px;
  float: right;
}

width と height を変更しましょう。今回は200px*200pxのサムネイルにするので最終的にこのようにしました。


.post-loop-wrap .post-thumbnail {
  width: 200px;
  height: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
  float: right;
}

はい、これで無事にサムネイルの大きさを変えることが出来たと思います!
bandicam 2015-06-07 09-32-35-421

ちなみに既存のサムネイルの大きさは自動で変更されないので、サムネイルサイズを変更した次の画像から変更したサイズになります。

 

 

まとめ

サムネイルの大きさを変更するのは簡単だということがお分かり頂けたら幸いです。
サムネイルの形を変えたりすると結構個性が出るのでサムネイルの形を変える方法もいつかご説明できたらなーと思っています。

 

 

おわり

expand_less