![見出し画像](https://assets.st-note.com/production/uploads/images/87352431/rectangle_large_type_2_6f8f2fe54af01bc52c0883a1461ba79c.jpeg?width=1200)
【 WordPress #1 】 「 ローカル環境構築 」 FirE♯532
WordPressでのWEBサイト構築の方法を1から解説します。
静的サイトをWordPress化するという工程ではなく、はじめからWordPressで、WEBサイトを作っていく工程の解説です。
情的サイトからの移行に伴う、コードの追記や、書き換えの手間が省け、
PHPの理解にも繋がりますから、このようにサイト構築をしていく方がオススメです。
今回は、ローカル環境の構築です。
【 WordPress = PHP 】
![](https://assets.st-note.com/img/1663677154118-q8Ufnp8qCe.jpg?width=1200)
まず初めに、WordPressってなに?からです。
語り出すと長いので、制作に関連するポイントだけピックアップします。
■ CMS
Contents Management Systemの略です。
コードが分からなくても更新できる。その際の編集可能領域は限られる。
■ PHP
PHPをベースに作られています。
プログラミング言語PHPの基礎の理解が必要になります。
■ テンプレートタグ
独自のタグ(コード)が用意されています。
WordPress内でしか動かない独自のPHPのタグです。
■ ローカル環境
編集はローカル環境で行います。
オープンソースとなっているので、ローカル環境を構築して、WordPress本体を自分のPCに入れて、編集することができます。
まずは、このローカル環境を作る必要があります。
メジャーなのは、MAMPというソフトです。
しかし、もっと簡単に構築が可能なソフトがありますので、そちらを紹介します。
【 Local by flywheel 】
LOCALというソフトです。ダウンロードはこちら↓↓
ダウンロードして、インストールwindows、macの各処理を行います。
ソフトを開くとこのようなUIが開きます。
ダークモードの場合は、このように黒いUIですが、
通常の場合は、白ベースなります。
![](https://assets.st-note.com/img/1663677155729-zA0HdYD7aW.png?width=1200)
① WEBサイトを作る
![](https://assets.st-note.com/img/1663678789043-Z0yHia6xow.png?width=1200)
左下の[ + ] マークをクリックします。
[ Create a new site ] を選択し、[ Continue ] をクリックします。
② WEBサイトの名前を入力
![](https://assets.st-note.com/img/1663678934817-t9QOnh8My9.png?width=1200)
任意の名前を入力します。
自分が管理しやすい名前で大丈夫です。
③ セットアップ
![](https://assets.st-note.com/img/1663679027629-jWIKDnLgOd.png?width=1200)
[ Preferred ]を選択します。
④ WordPressのログイン用データ入力
![](https://assets.st-note.com/img/1663679262022-mvPb91Czdh.png?width=1200)
[ WordPress username ]
[ WordPress password ]
共に、任意ですが、ログイン時に入力する必要があるので、忘れないようにしましょう。
[ WordPress e-mail ]
は、自身のメールアドレスを入力します。
⑤ ローカル環境構築完了
![](https://assets.st-note.com/img/1663679477337-eJ3z69Alby.png?width=1200)
これで、「WordPressテストサイト」というWordPressのサイトができました。
この時点で、ローカル環境へのWordPressのダウンロード、インストールが完了しています。
設定として、下記の二つを選択します。
Web Server : Apache
PHP Version : 7.41
【 Localの使い方 】
![](https://assets.st-note.com/img/1663679477337-eJ3z69Alby.png?width=1200)
Localの各ボタンの解説です。
① WP Admin
![](https://assets.st-note.com/img/1663681377244-QR5Ihkiult.png?width=1200)
[ WP Admin ] をクリックすると、WordPressの管理画面へのログインページが開きます。
![](https://assets.st-note.com/img/1663681544199-WuHZGPHwRn.png?width=1200)
ログインすると、このような管理画面が開きます。
![](https://assets.st-note.com/img/1663681731036-FPmq5IbS9U.png?width=1200)
ひとまず、現段階では、言語設定を「日本語」に変えることだけしておきます。
管理画面の左のサイドバーの
[ Setting ] → [ General ] と進みます。
![](https://assets.st-note.com/img/1663747373988-yo8sh9mtNd.png?width=1200)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
[ General ] をクリックして、[ Site Language ] で、言語を選択します。
![](https://assets.st-note.com/img/1663747473847-r9TE7us0S1.png?width=1200)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
「日本語」はリストの真ん中くらいにあります。
結構見逃すので、よーく見てください。
![](https://assets.st-note.com/img/1663747589262-biAzIlIcqP.png?width=1200)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
下方にスクロールして、[ Save Changes ] をクリックします。
![](https://assets.st-note.com/img/1663747762632-jjfIeMdoEG.png?width=1200)
これ忘れがちです。
他のセッティングにおいても、ページの下部にこのような設定の保存をするボタンがあることが多いので、最後まで確認しましょう。
② Open site
![](https://assets.st-note.com/img/1663681794363-kjxjApWsYM.png?width=1200)
[ Open site ] をクリックすると、サイトが開きます。
この時点では、 WordPressの初期設定のテーマ(Thema)が設定されています。
![](https://assets.st-note.com/img/1663681908944-v4cWWGLc29.png?width=1200)
2022年9月現在では、このようなUIです。
このテーマは、[ twentytwentytwo ] という名前の初期設定のテーマです。
③ Go to site folder
![](https://assets.st-note.com/img/1663680965381-OGxUaKNuKo.png?width=1200)
[ Go to site folder ]をクリックと、作成したサイトのフォルダが開きます。
![](https://assets.st-note.com/img/1663681255447-7r2nLXZMMe.png?width=1200)
覚えておくべきフォルダはここだけです。
[ サイトの名前 ] → app → public → wp-content → themas
このthemas フォルダの中に、 WordPressのテーマと呼ばれるWEBサイトのテンプレートが保存されています。
先ほど、[ Open site ]で初期設定として表示されたテーマは、
「Twenty Twenty-Two 」というテーマです。
このフォルダに、WEBサイトを構築するファイルが入っています。
この
テーマを自作すること= WordPressでWEBサイトを構築することです。
【 テーマの自作 】
WordPressでWEBサイトを作ることは、テーマを自作することです。
簡単いえば、自作したWEBサイトのindex.htmlや、style.cssなどのファイルが入ったルートフォルダをそのまま、themasフォルダの中に入れれば良いだけです。
しかし、 WordPressが、そのフォルダをテーマと認識するためには、
ルールがあります。
そのルールに沿って、必要なファイルを設置したり、必要なコードを書具ことになります。
【 まとめ 】
WordPressの環境構築について解説しました。
次回は、 WordPressでオリジナルのテーマを作るためのファイル構成などを解説します。