はじめに
サムネイル画像を全部表示したいのに、勝手に切り取られてしまって困っている人に向けた、ワードプレス初心者のための記事であり、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を編集するのってこわいですよね(笑)でも、「変にならんかな?」とか思いながらやって、ちゃんとできた時の達成感が堪りません!