WordPressでオリジナルテーマを作ったらやっておきたいことの一つにテーマのスクリーンショット設定があります。
必須なことではありませんが、設定しておくと「どのテーマか」ということが一目で分かって便利です。
WordPressテーマのスクリーンショットとは
WordPressテーマのスクリーンショットというのは、テーマのサムネイル画像のことです。
管理画面のメニュー【外観 > テーマ】で表示されます。
テーマを一般公開している場合、テーマ一覧にスクリーンショット画像が表示されます。
スクリーンショット設定は必要？
冒頭でもお伝えした通り、オリジナルテーマのスクリーンショットは必ず設定しなければいけないものではなく、なくても問題はありません。
一つしかテーマがなければ見分ける必要がないので、わざわざスクリーンショットを作成しなくてもいいと思います。
ただ、複数のテーマ（テストテーマや子テーマなど）を管理する場合は、設定しておくとテーマがすぐ認識できますし、選択間違いも防げるのであった方がいいです。
またテーマを一般公開するなら設定した方がいいでしょう。
テーマを使う側として、テーマ探しをしている時にテーマ画像（スクショ画像）が目を引くものだと、テーマ詳細まで見にいきやすいです。
どんな画像を作ればいいか
画像は自分やサイト運営者などがわかりやすければなんでもOK。
テーマを一般的に公開するとかクライアントワークで指定がある場合は、しっかり作った方がいいでしょう。
特に指定がなく、自分で分かればOKといった場合は、わざわざ手間をかけて作成するものではないと思います。サクッと終わらせちゃいましょう。
しっかり作るとはいっても、特に指定がなければロゴやトップページのスクリーンショットでOK。トップページに限らずわかりやすいコンテンツ部分を設定してもいいと思います。
公開されているテーマは大体TOPページのものが設定されています。
スクリーンショット撮影の方法
- 【Mac】「shift + command + 4」で範囲指定でスクショ撮影。
- 【Windows】「Print Screen」キーでスクショ撮影。
- Google Chromeで拡張機能を使用してスクショ撮影。
Chromeの拡張機能参考
もっと詳しくスクリーンショットの撮り方を知りたい方は下記リンクも参考になります。
スクリーンショットを撮ったら、推奨サイズに合わせて画像を加工します。
テーマのスクリーンショットでおさえておきたい設定ポイント
こうしなければならないということはないものの、きれいに表示させるためにおさえておきたいポイントがあります。
また、画像の拡張子には注意が必要。拡張子によってはうまく表示されないことがあります。
- サイズを「880px × 660px」（比率「4:3」）で作成する
- ファイル名を「screenshot.png（jpg）」にする
参考 : テーマの作成 #スクリーンショット – WordPress Codex 日本語版
画像サイズ
推奨サイズは「880px × 660px」、比率は「4:3」です。
このサイズにすると、余白やはみ出しがなくきれいに表示されます。枠にぴったりおさまらなくてもいい、多少ぼけても問題ない、ということであれば上記サイズにこだわる必要はありません。
テンプレートテーマ（Twenty Twenty-Oneとか）は「1200px × 900px」で作成しているようです。
サイズや比率を調節したい
比率はパソコンに入ってる画像編集ツールや画像編集ソフトで変更できます。
オンラインツールならAdobeの無料オンラインツールがあるのでこちらがおすすめです。Adobeに登録、ログインしていなくても使えます。
Adobe Photoshop Express
画像をアップロードしたら、「縦横比」の「4:3」にチェックするだけで簡単にトリミングできます。
推奨拡張子はpng
WordPressで推奨している拡張子はpngです。png以外でも表示されるものはありますが、もし表示されなければ拡張子を「png」にしてみてください。
注：場合により、 .jpg、.jpeg、.gif は 有効な拡張子 でスクリーンショットのファイル形式です。 (推奨ではありません)
テーマの作成 #スクリーンショット – WordPress Codex 日本語版
themeフォルダへアップロードして設定完了
画像を作成したら、screenshot.pngをthemeフォルダへ上げる。これだけで設定できます。
WordPressではthemeフォルダの直下の階層（index.phpやstyle.cssがあるところ）に「screenshot.png」という画像をテーマのサムネイルとして使う、という仕組みがあります。
なので画像名は「screenshot.png」にしてthemeフォルダにあげれば設定は完了です。
最後にちゃんと表示されるか【外観 > テーマ】から確認しましょう。アップロードした画像がちゃんと表示されれば設定完了です。
