福岡の小さなアプリ開発会社のマガジン

WordPressを使用する人必見!ローカルサイト作成からテーマのカスタマイズ方法までのやり方

弊社では、WordPressを使用してホームページの制作を行っております。その際、Local by Flyweelという名のツールを使用してローカル環境を作成することから始めていきます。

ですが、始めてLocal by Flyweelを扱った私は何が何だかさっぱり・・・。
ローカル環境の意味すら分からない・・・。

今回は、そんな初心者の方でも分かりやすいように、ローカルサイト作成からテーマのカスタマイズ方法までのやり方をまとめてみました。

Local by Flyweelでローカル環境を作る

Local by Flyweelとは何だ?という人もいるのではないでしょうか。Local by Flyweelは、簡単に説明すると「ローカル開発環境ツール」になります。このローカル環境とは、「自分自身のPC」を指します。

つまり、自分のPCの中にWordPressを構築していくことができる大変便利なアプリケーションになります。弊社では、このLocal by Flyweelを使用してWordPressのローカル環境を構築しています。それでは、Local by Flyweelの使用手順を見ていきましょう!

 

1.https://local.getflywheel.com/にアクセスしてダウンロードを行い、赤い箇所のどちらかをクリックしてサイトを追加する。


 

2.サイトに名前を付けてローカル環境を追加する。サイト名を入力したら、直下にある「CONTINUE」をクリックする。

 

3.選択は「Preferred」で、CONTINUEボタンをクリックする。

 

4.WordPress Username」にはユーザー名(自身の名前)、「WordPress PassWord」にはパスワード、emailはメールアドレスを入力してWordPressのログイン設定を行う。

 

5.ローカル環境の下地が完成。(サイト名の例:HOMEPAGE)

つぎに:ローカルサイトの作成の仕方

Local by Flyweelでローカル環境の構築準備が整ったら、次にGitとVScodeを使用していきます。GitやVScodeという名前を1度は聞いたことがある人も多いのではないでしょうか。Gitとは、簡単に説明するとバージョン管理システムのことです。

このバージョン管理システムとな何だ?と思った人もいますよね。このバージョン管理システムとは、変更履歴を指します。つまり、チームで制作をしている場合、「いつ」「誰が」「どこを」を作業し、変更したのかが分かるこのGitというツールは大変便利なものなのです。

弊社では、themes配下だけを管理するようにしています。そして、VScodeですが、これはソースコードエディタになります。それでは、このGitとVScodeを使用してローカルサイトの作成していく手順を見ていきましょう!

 

1.https://github.com/にアクセスしてインストールを行い、Clone or downloadをクリックする


 

2.青色のDownload ZIPをクリックする

(Gitで管理している配下のディレクトリがダウンロードされる)

 

3.ZIPを開く

 

4.ローカルサイトのディレクトリーを開く

 

5.themesの名前を_themesに変更する(こちらのディレクトリは後々不要になるので、その目印)

 

6.作成したいローカルサイトの方の名前をthemesに変更する。そして、_themesは削除する。

 

7.https://code.visualstudio.comにアクセスして、vscodeをダウンロードする。そして、先ほどのthemesの下にあるローカルサイト名を開く。

 

8.ファイルを新規作成し、style.cssを作る。

 

さらに:テーマのカスタマイズ方法

ローカル環境を構築していく上で、最後の作業が「テーマのカスタマイズ」になります。これは、別名「WordPressにおけるオリジナルテーマの作成」です。

WordPressを構築していく上でしっかりと、このオリジナルテーマの作成をしておくことが大切です。それでは、テーマのカスタマイズ方法の手順を見ていきましょう!
 

1.ローカルサイトのフォルダを開き、originalの中に、vscodeで作ったstyle.cssとindex.phpがあるか確認する。

 

2.このoriginalのフォルダの中に、screenshot.pngという名前で画像を入れる。

 

3.作成したローカル環境のサイトの管理画面からメニュー>外観>テーマへ行く。

 

4.ローカル環境のサイト名のテーマを有効化にする。

 

最後に:WordPressは難しいという認識は古い!

今回は、初心者の方でも分かりやすいように、ローカルサイト作成からテーマのカスタマイズ方法までのやり方をまとめてみましたが、お役には立ちましたでしょうか?

WordPressは、難しいと思われがちです。ですが、しっかりと手順を踏み、事前準備を行うことでその難しさは半減します。今回紹介してきたことが、何か少しでもヒントにつながれば幸いです。