オリジナルテーマを作成したらサイトの機能が想定通りに動くのはもちろん、見た目の設定も行います。
見た目の一つとして設定しておきたいのは、テーマのプレビューの設定です。
テーマのイメージ画像になるスクリーンショットを設定します。
スクリーンショットを設定しないと、テーマ一覧の表示が空欄になるため、オリジナルテーマを使っていることをわかるように画像を設定します。
画像サイズ
- (推奨)1200×900px
- または 880×660px
ファイル名、ファイル形式
ファイル名は以下をコピーします。
小文字である必要があり、大文字が混ざると反映されません。
screenshotファイル形式は
- png(推奨)
- jpg
- webp(ver6.1~)
が対応しています。
目次
テーマ画像確認方法
WordPressのダッシュボードにログイン後、左のメニューから
外観→テーマ
と進みます。
名前や、テーマに関する情報は同階層のstyle.cssに設定します。
スクリーンショットを設定する意味
正直なところWordPressの機能としては意味をなしません。なくてもいいです。
ただ、複数のテーマを管理する、個人であれば自身のブランドであったり、納品したサイトテーマがわかる画像を設定すると見栄えが良くなります。
私の場合、特に指定がなければトップページのファーストビューを設定することが多いです。
設定サイズ
テーマのサムネイルに設定する画像サイズは3 :4の比率で1200×900pxを推奨されています。
screenshot.png: テーマの1200×900ピクセルのスクリーンショット画像。WordPress管理画面の「外観」>「テーマ」
.png、およびWordPressテーマディレクトリ（テーマディレクトリから送信した場合）でテーマを表示するために使用します。ファイル形式はどちらも.jpg使用できます。WordPress公式ハンドブック|テーマ構造
または、880×660px
とされています。
このサイズじゃないと表示されない、と言ったことはありませんが見栄えが悪くなります。
決まり事
テーマプレビューとして機能させるためのいくつかの決まり事があります。
- index.php、またはfunctions.phpと同じ階層に置きます。
- ファイル名を
screenshot - pngまたは.jpgとします。.webpはWordPress6.1以降に対応しています。
難しい決まり事はないですが、知っておくと設置するときに迷わないですみますね。
webpは古いWordPressには対応していないためpngの使用が推奨されています。
画像の作り方・便利ツール3選
画像サイズの比率を守らなくてもスクリーンショットを設定することはできます。
ただ、若干見た目が悪くなります。どうせならきれいに作りたいですね。
きれいに作るとクライアントの信頼につながる…ハズ？見る人は少ないかもしれません。
画像サイズを整えるのに便利なツール3選
画像がリンクになっています。
FIgma：
モードで作成します。
Canva：
手軽に画像編集が出来ます。
iLoveIMG：
任意のサイズに変換できます。
画像のファイルサイズを圧縮
画像を作って、そのまま設定するとファイルサイズが大きいかもしれません。
大きいファイルサイズはサイトにとってマイナスです。圧縮しましょう。
png画像はTinyPNG
jpg画像はiLoveIMG
こちらを使用して、ファイルサイズを小さくします。
反映されないときは？
screenshotを設置しても反映されないときは、以下の点を確認しましょう。
- 設置してるディレクトリは合っているか
- ファイル名のタイポ(タイピングミス)
- テーマフォルダの権限が書き込み禁止になっている
- 親、子テーマのフォルダが別
主にタイポか設置ディレクトリの間違いで反映されないことが多い(主観)です。
タイポ対策に以下をコピーしてください。
screenshotまとめ：WordPressテーマプレビュー設定
テーマ設定時の見た目を良くする、判別するために設定します。
機能的な面ではなくても問題はありません。
サイズは
1200×900 または 880×660
ファイル形式は
- .png
- .jpeg
- .webp
反映されないときは
- 設置する場所があってるか？
- wp-content/themes/my-theme/ここに設置
- タイポはないか？
- 小文字のみ
- フォルダの書き込み権限の確認
を行います。
最後までご覧頂きありがとうございました！
