WordPress

【WordPress】テーマのスクリーンショット(サムネイル画像)の設定方法

WordPressのオリジナルテーマでテーマのサムネイルって設定出来る?

WordPressのオリジナルテーマを作ったとき、何も設定しないと以下のような寂しい表示になります。

WordPress管理画面:テーマのスクリーンショット未設定

WordPress管理画面:テーマのスクリーンショット未設定

有料テーマや無料テーマであれば右の『Twenty Twenty-Two』のようにサムネイル画像は表示されますが、オリジナルテーマの場合は設定しないと何も表示されません。

特に運用に支障があるわけではありませんが、見栄えがちょっと・・・という方はここに画像を設定してみましょう。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


WordPressテーマのスクリーンショット(サムネイル画像)を設定する方法

まずはテーマのサムネイルにしたい画像のファイル名をscreenshot.pngにします(screenshot.jpgでも可)

あとはファイルを置く場所ですが、

『wp-content → themes → テーマフォルダ(今回はsample)の中』

となります。

screenshot.pngを置く場所

screenshot.pngを置く場所

FTPツールなどを使ってファイルをアップロードする場合は以下の記事を参照下さい。

参考記事
無料で使えるFTPソフト『FileZilla』の使い方を解説【WindowsとMac両方OK】
無料で使えるFTPソフト『FileZilla』の使い方を解説【WindowsとMac両方OK】

続きを見る

そしてもう一度テーマ一覧を見ると、画像が反映されているのが分かります。

WordPress管理画面:テーマのスクリーンショット設定

WordPress管理画面:テーマのスクリーンショット設定

しかしよく見ると右のテーマと比べて画像の下に隙間があるのが分かります。

これは画角が最適では無いからで、ピッタリ合わせるのであれば1200×900pxにすればOKです(画角が同じならサイズは違ってもOK)

WordPress管理画面:テーマのスクリーンショット(画角1200×900px)

WordPress管理画面:テーマのスクリーンショット(画角1200×900px)

また、有料テーマや無料テーマで既にサムネイルがある場合でも、画像を差し替えれば変更可能です。

WordPress管理画面:テーマのスクリーンショット(既存テーマ変更)

WordPress管理画面:テーマのスクリーンショット(既存テーマ変更)

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-WordPress