WordPressテーマ「Cocoon」で関連記事のサムネイルサイズを変える方法

どうも、すぎもん(@suginomoto73)です。

今、ブログを作っているのだが、書籍サイトなのでサムネイル画像が縦長だ。

インデックスページのサムネイル画像は設定した画像の通りに表示されるのだが、関連記事などは横長に表示されてしまう

こんな感じ。

それを変更するカスタマイズだ。

因みにPHPあまり分かっていなくて、結構無理やりな変更かもしれないので、ご容赦。

スポンサーリンク

PHPファイルを変更していく

上記にも書いたが、このカスタマイズにはPHPファイルの修正が必要だ。

私も最初はCSSいじるだけでどうにかなると思っていた。

しかし、サムネイル画像の抽出はPHP側で行っていることが分かって軽く絶望した。

まあ、適当にいじったらなんかうまくいったので、PHPが分からない人も真似してみて欲しい。

PHPをいじるときには絶対にいじるファイルのバックアップ取ってね…!

function.phpをいじる

まずは嫌いなfunction.phpから。

子テーマのfunction.phpを開き、以下のコードを入れる。(適当な場所でOK)

カッコの中に、4つの要素があるが、最初の「thumb600」は画像サイズの名前みたいなものなので適当でOK。

次の「420」と「600」という数字は、設定したい画像サイズに合わせて設定しよう

function.phpはこれでOK。

related-entry-card.phpをいじる

次は関連記事のエントリーカードを設定しているPHPファイルをいじっていく。

子テーマには最初からは入っていないファイルなので、子テーマにrelated-entry-card.phpが無い人は、親テーマからコピーしてくるところから始めよう。

cocoon-mastertmpファイルの中に入っているrelated-entry-card.phpをコピーする。

cocoon-master-childの中に新たにtmpファイルを作成し、その中にコピーしたrelated-entry-card.phpファイルをそのまま入れる。

そして、子テーマに入れたrelated-entry-card.phpを開いて、編集していく。

ファイルの11~25行目にこんな感じの記述がある。

ここの

default:
$thumb_size = ‘thumb160’;
break;

の部分の「thumb160」を先程function.phpにて決めた名前に変更する。

さっき「thumb600」と変えたので、以下のように書く。

因みに多分この記述、あまり良くないと思うので、もっと良い方法があったら教えて欲しい。

まあ取りあえずこれで、縦長になったはずだ!

こんな感じ。

あとはCSSで微調整

これで、抽出サイズが変更になったはずだ。

あとは子テーマのstyle.cssとかをいじってお好みのデザインにするとよいだろう。

このブログの中の人

すぎもん
すぎもん
1991年神奈川生まれ。ばあちゃんが民宿をやっていて、旅行が大好き。学生時代は海外20ヵ国以上旅したり、カフェを運営。
「お酒×観光」Webマガジン「トラべろマガジン」も運営中。

本ブログでは、ニッチな観光情報や旅行会社を作るための様子を発信中。
SNSをフォローして頂けると最新情報をお知らせします。

SNSをフォローする