WordPress_独自テーマ_ローカル環境

ゆうき( @BASEBALLY15 )です^^

HTML,CSS,PHPの勉強をしているのですが,そろそろWordPressで独自のテーマを作りたいです・・・

分かりました!
それでは『Visual Studio Code』というエディタを使って,独自テーマを作る方法をご紹介します^^
(※Windowsを使用)

お願いします^^

今回はローカル環境でWordPressを使うよ!

(画像をクリックすると,公式ページへ移動します.)

WordPressで独自テーマを作成する前に,あらかじめローカル環境を用意しておきます.

「ローカル環境」とは,個人のコンピュータ内に構築された環境のことです.個人のコンピュータでシステム開発を行う場合,開発できるようにローカル環境を整えておく必要があります.

引用元:TechMAGAZINE

みんな(=全世界・全国)に見てもらうためには,サーバーやドメインが必要になり,それなりの資金が必要になります.

ですので,今回はローカル環境で独自テーマを作ります.

以降の内容は「Local by Flywheel」をダウンロードした前提でご説明していきます.

WordPressで独自テーマを作る方法を紹介するよ!

1. 「Local by Flywheel」を使えるようにするよ!

まずは,「Local by Flywheel」を開きます.

そして,上の画像の流れに沿って作業を行います.

  1. Local Sitesを選択
  2. 『START SITE』をクリック
  3. 『ADMIN』をクリック

③の作業まで進めると,WordPressを編集するページに移動します.

2. 独自テーマ用のディレクトリを作るよ!

独自テーマを作るためには,PHPファイルやCSSファイルを編集する必要があります.

それらのファイルをまとめておくためのディレクトリを作ります.

まず,エクスプローラーを開きます.

そして,Cドライブからたどっていき,最終的に『themes』というディレクトリがあるので,その中に新しいディレクトリ(=PHPファイルとCSSファイルをまとめ目るために用意)を作ります.

今回は,『test』という名前にしました.(※この名前は何でもいいです.)

新しくディレクトリを作ったら,その中にPHPファイルとCSSファイルを入れます.

3. 実際にエディタでコードを書いてみるよ!

PHPファイルとCSSファイルを保存できたら,実際にエディタ(Visual Studio Code)を使って,コードを書いていきます.

上の画像の様に,それぞれのファイルにコードを書いて『Ctrl + S』を押します.

そして,WordPressのテーマエディターを開いて,『Ctrl + R』を押すと,テーマエディター内に反映させることが出来ます.

以降も,この流れでエディタ(Visual Studio Code)を使ってコードを書くことで,WordPress内に反映させることが出来ます.

これで,Wordpressで独自テーマを作成することが出来ます.

やった~!!

終わりに

今回は,Wordpressで独自テーマを作る方法についてご紹介しました.

Web制作の勉強をしていて,そろそろ案件を獲得したい!と考えている方にとって使える内容ではないかと思います.

今後も,日々の勉強で気づいたことなどを投稿していくのでよろしくお願いします.

もし,分からないことがあれば,下のQ&Aコーナーで気軽に質問してください^^

それでは・・・

Q &A

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA