ワードプレス

『AFFINGER5』でサムネイルの画像を調整する方法!

投稿日:




はじめに

サムネイル画像を全部表示したいのに、勝手に切り取られてしまって困っている人に向けた、ワードプレス初心者のための記事であり、phpをいじったので忘れないための備忘記録でもあります。

ステップ1

まずは、ダッシュボードの「外観」→「テーマの編集」を選択すると、子テーマを入れていれば『WING-AFFINGER5 Child』のスタイルシートが表示されるので、画面右の「編集するテーマを選択」を「WING-AFFINGER5」にして選択をクリックします。すると、先ほどクリックした選択の下に、「テーマファイル」がずらっと出てきます。

ステップ2

その「テーマファイル」の上から2つめに、「テーマのための関数(function.php)」があるのでそれをクリックします。すると、「選択したファイルの内容:」の下の画面が変わるので、スクロールしていき「add_image_size( 'st_thumb100', 100, 100, true );」と書かれた部分を探してください。上からゆっくり探していて時間かかったのですが、私のサイトでは「1412行目」にありました。スペースなしで、「add_image_size」というのが4行くらい並んでいるので、頑張ったら見つかります。

ステップ3

先ほどみつけた、「add_image_size」の既存の数字を変えても良いとは思いますが、私はあとで分かりやすいように、行を追加して入力しています。

add_image_size( 'st_thumb100', 100, 100, true );
add_image_size( 'st_thumb150', 150, 150, true );
add_image_size( '自分が分かりやすいように入力', 150, 150, false);
add_image_size( 'st_thumb300', 300, 300, true );
add_image_size( 'st_thumb400', 400, 400, true );

黄色くなっているところが今回追加した部分です。赤文字の所は、自分で管理しやすい名前に自由に変更してください。

(’名前’, 横のサイズ, 縦のサイズ,)の順番になっているので、横と縦のサイズ感は調整可能です。

かっこ内のtrueは、そのサイズになるようにサムネイル画像を切り取る指示で、私が使っているfalseが、そのサイズに合うように縮小してくれる指示になります。

ここまでが、下準備になります。まだこれだけでは変わらないので、画面下にある「ファイルを更新」を押して、次のステップへ。

ステップ4

次は、「テーマファイル」の「ititan-thumbnail-on.php」を探し(大体6回スクロールしたあたり?)クリックすると、「選択したファイルの内容:」が変わるので、次は行が少ないのですぐに見つかると思います。

<dl class="clearfix">
<dt><a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'tumbnail' ); ?>

これを探し、’tumbnail'の部分に先ほどステップ3で入力した’自分が分かりやすいように入力’を入力し、最後に「ファイルを更新」をクリックすれば、サムネイル画像が変わります。

おわりに

どうでしょう、お好みのサイズになりましたか?phpを編集するのってこわいですよね(笑)でも、「変にならんかな?」とか思いながらやって、ちゃんとできた時の達成感が堪りません!

-ワードプレス

Copyright© ハイソン , 2019 All Rights Reserved.