プログラミングの勉強

HTMLファイルをWordPress化してオリジナルテーマを作成する際に便利な「アンダースコア(_s underscores)」

HTMLでコーディングしたファイルをWordPress化する(オリジナル・テーマを制作する)際にスターター・テーマ(別称:ブランクテーマ)である「アンダースコア(_s underscores)」を使っていくと、WordPressサイト制作案件に取り組んでいく際にゼロからPHPファイルを自前で制作するよりもかなりの時間短縮できるので、とても作業がしやすいです。

まずは「アンダースコア(_s underscores)」のダウンロード!

まず下記サイトにアクセスし、Theme Name(テーマの名前)を決めます。
https://underscores.me/

次に下記赤枠のAdvanced Optionsをクリックします。

そうすると下記のような画面が表示されますので、こちらも入力していきます。

  • Theme Name : テーマの名前
  • Theme Slug : テーマのフォルダの名前
  • Author : テーマを作る人の名前
  • Author URI : テーマを作る人のURL
  • Description : テーマの説明

一番下の_sassifyですが、Sassを使って制作していく場合、チェックを入れましょう。
そうすると、Sass用のファイルを自動生成してくれます。


ちなみに上記のように今回は入力しました。必要事項を入力したら、GENERATEをクリックしてunderscores starter theme テーマをダウンロードをします。

ダウンロードしたテーマをWordPressに反映させる

次にWordPressの管理画面から先程ダウンロードしたテーマを反映させます。
WordPressの管理画面の「外観」「テーマ」を選択して、「新規追加」をクリックする


そうすると、下記の画面が表示されますので、選択をクリックして、
先程  https://underscores.me/
のページでダウンロードした.zipファイルを選択します。

今回の場合だと、下記のようにkfa.zipという圧縮ファイルを選択してインストールします。

「今すぐインストール」をクリックすると、インストールが開始されます。
インストールが完了したら、有効化をクリックしましょう。

そうするとこれでスターター・テーマがインストールされます。

これでスターター・テーマ「アンダースコア(_s underscores)」がWordPressのテーマとしての反映が完了しました!中身は下のような感じ。


次にscreenshot.pngという名前のファイルを「wp-content」→「themes」→「kfa(先程インストールしたスターター・テーマ)」の直下に置きます。



これは何をしているかというと、このscreenshot.pngをここに置くと
下記のように先程自分がインストールしたスターター・テーマに綺麗にサムネイル画像が表示されるようになります。