弊社では、WordPressを使用してホームページの制作を行っております。その際、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は、難しいと思われがちです。ですが、しっかりと手順を踏み、事前準備を行うことでその難しさは半減します。今回紹介してきたことが、何か少しでもヒントにつながれば幸いです。