WordPressのテーマにscreenshot(スクリーンショット)を設定する

WordPressでテーマに画像をscreenshotで作成してるテーマ画像はscreenshotを使用してない真っ白(格子模様？)なテーマ画像よりサムネイル画像でテーマの印象が伝わりやすいし、ついテーマ詳細が気になります。

私はテーマを探して使う側ですが、テーマ探しするときにテーマ画像で目をひくテーマがあると必ずテーマ詳細を見てプレビューもするので、WordPressのテーマの画像をscreenshotして設定するのは大切なんだと思ってます。

WordPressでテーマのscreenshotとは？

WordPressのテーマのscreenshot(スクリーンショット)とは、WordPressの管理画面のテーマで見ることができるテーマの画像のことです。

WordPressのテーマをscreenshotした画像はサムネイル画像で表示されていて、既存のWordPressテーマには、ほとんどテーマのサムネイル画像が設定してあります。

ですが既存のテーマを使用しないでWordPressを自作テーマで使用する場合には、自作したテーマ画像をscreenshotして自分でテーマ画像も自作する必要があります。

そして自作テーマだけではなくWordPressの既存テーマでもテーマ画像をオリジナルの画像をscreenshotして変更することができるし、子テーマがない場合は子テーマを作成して親テーマと子テーマでスクリーンショットの画像で区別がしやすいように子テーマを作成することもできます。

私は難しく考えずに、WordPressのテーマのサムネイル画像を作るときにスクショして分かりやすくする。のような覚え方をしてます。

screenshotをテーマの画像にする設定方法

テーマ画像をscreenshotしてサムネイル画像にする設定は簡単なので、やり方を先に説明します。

• テーマ画像に使う画像のスクリーンショットを撮る

Macならshift＋command＋4でscreenshotができます。

• screenshotしたらテーマ画像のサイズは880×660にします。

• 次に名前と拡張子を「screenshot.png」にします。
• そして「screenshot.png」で完成したテーマ画像をテーマディレクトリに配置します。

設定はこれだけです。

気をつけたい事は、screenshotにするテーマの画像サイズとファイル形式にする拡張子です。

テーマ画像のサムネイルに使うscreenshotサイズ

screenshotの画像のサイズは「880×660」が推奨のようですが実際のWordPressのテーマ画像に表示されてるscreenshotサイズは「387×290」でサムネイル表示されます。

テーマ画像のサイズは2倍にしてるようで、2倍にすると画面解像度の高いHiDPIディスプレイにも対応できるからということです。

ちなみにWordPressテーマ「Twenty」シリーズのテーマ画像をscreenshotしたサイズを確認すると「1200×900」が多めです。

WordPressの公式テーマからもテーマ画像のscreenshotしたサイズを何個か確認したみました。

画像サイズを確認したテーマはランダムです。

• 880×660
• 1200×900

推奨サイズの880×660より1200×900の画像サイズが多い感じでした。あまり大きな違いはなさそうなので800×660か1200×900から選んで決めたらscreenshotしてテーマ画像にするのがテーマ画像サイズの選び方になります。

screenshotに使える拡張子を全部テーマ画像にしてみる

WordPressのテーマ画像をscreenshotしてテーマディレクトリに配置するときの拡張子は.pngが推奨になってます。

ですが「場合により .jpg  .jpeg  .gif も有効な拡張子です」という説明がWordPress Codexにあります。ですが「場合により」って、どんなときか分かりませんでした…

私自身の理解不足の「場合により」WordPressのテーマの画像に使えるファイル拡張子を全部使ってテーマ画像にしてみることにします。

オリジナルテーマを作成する場合はテーマ画像がない状態なので冒頭の設定方法のように拡張子を.png形式にする設定方法で問題ないので、ここではWordPressの既存のテーマ画像を変更すると表示できるか試してみたいと思います。

.png形式以外は推奨の拡張子ではないようなので参考程度に読んでみてください。

まずは、テーマ画像にする画像をscreenshotしてファイル形式を「.png」にしてテーマフォルダに配置します。

さっそくテーマ画像が表示されません。

なんでだ…これが「場合により」なのでしょうか…

screenshot.pngはコピーしておいてテーマフォルダから削除してから今度はファイル拡張子を.jpegにした「screenshot.jpeg」をテーマに配置します。

無事にテーマ画像が表示されて変更できました。

ファイル形式を変えないといけないのかな…

同じやり方で.jpegはコピーしておき、そのあとに拡張子を.gifにして「screenshot.gif」をテーマフォルダに配置します。

問題なく.gif形式もテーマ画像として表示できます。

さらに残った拡張子の.jpgを「screenshot.jpg」にしてテーマディレクトリにぶち込みます。

テーマの画像は表示できました。

そして最後になんでやろうと思ったのか忘れましたが.jpegとpng形式の拡張子を同時にテーマディレクトリに配置しました。

既存テーマのscreenshot.pngの勝利です。

よく理解できていないのですがWordPressの既存のテーマのテーマ画像を設定する場合は、もともとの既存のscreenshotの拡張子が.pngなので、既存と違う拡張子に変更してWordPressのテーマの画像を設定する場合もあるという事だけは分かりました。