WordPressでオリジナルテーマを作ろう #1: WordPressの導入

![wordpress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/ebdd5939-6d5d-eeca-569f-db8b2c033e96.png)

これから何回かに分けて、自作のWordPressテーマの作成手順を説明します。

####Localのインストール

WordPressを利用するためには、いくつか条件があります。詳しくは[こちら](https://wpdocs.osdn.jp/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E7%94%A8%E6%84%8F)をご参考ください。

今回はWordPress開発環境を整える手間を省くために、Local by Flywheelというソフトウェアを利用します。

まず[公式サイト](https://localwp.com/)にアクセスし、右上のダウンロードボタンを選択します。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/dc6d75d7-7fc7-9e6b-3fd7-908a52ec42bf.png)

次に、自分が使っているOSを選択します。（本記事ではWindowsで進めます）

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/71806d38-52da-e93e-29d8-6284b600d441.png)

Work Emailは必須項目なので、自分のメールアドレスを入力してください。それ以外の欄は入力しなくても問題ありません。

![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/4d7dff3f-de24-b644-cf9f-5b3ca775954a.png)

インストーラがダウンロードできたら、それを開いてインストールを進めてください。

セットアップが完了したら、Localを起動します。

![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/6d40a4d2-0205-6f05-a958-14d1544ddca9.png)

赤枠のところにチェックを入れて、I AGREEを選択します。

エラーレポートを送信するかどうか聞かれるので、オンにするかオフにするか決めてください。

Welcome画面が表示されますので、それを閉じます。

![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/17c9aed4-f192-f1c5-cc0a-996e6562adf8.png)

上の画面が表示されれば、Localの導入は完了です。

####ローカルサイトの構築

中央のCREATE A　NEW SITEを選択すると、サイト名を聞かれます。（後から変更可能）

本記事ではMySiteとします。

![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/fdfd06be-431e-84f2-2f30-0303d97d8b3c.png)

次に開発環境を設定できるので、Customを選択します。

![img7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/e1e7ecac-a908-9925-8673-79c2f95a66a9.png)

WordPressのユーザー名、パスワード、メールアドレスを聞かれるので、自分で決めてください。

![img8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/76aa5336-372e-7f59-6ade-82285c7501b6.png)

ADD SITEを選択すると環境構築が始まるので、終わるまでしばらく待ちます。

![img9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/a9f55fef-f3ef-a695-20e8-0733265c8553.png)

WordPressのインストールが完了すると、上の画面が表示されます。

####設定の変更

右上のVIEW SITEを選択するとブラウザが起動し、サイトが表示されます。

![img10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/2ca1e077-7446-c5d9-9867-790359356ba8.png)

続いて管理画面を見ていきましょう。

ADMINを選択するとログイン画面が現れるので、先ほど設定したユーザー名（メールアドレス）とパスワードを入力します。

![img11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/645ac2b0-7743-2b90-cc80-d85b8169d694.png)

ログインに成功すると、

![img12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/adbcdb5f-7578-d2cf-8f94-8b91273d04ee.png)

管理画面が出てきます。

セットアップ直後のWordPressは英語表記になっているので、日本語表記に変えておきましょう。

左側のメニューからSettingsのGeneralを選択し、

- Site Language: 日本語
- Timezone: UTC+9

に設定を変更し、保存します。

![img13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/21e45236-0cd8-334a-dba1-f3bfef818235.png)

次に、左側のメニューから「プラグイン」の「新規追加」を選択します。

左上の検索欄にmultibyteと入力します。

![img14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/cf569ebb-bfbc-3537-e75c-e2da528c43b1.png)

赤枠のWP Multibyte Patchをインストールし、有効化します。これがないと、サイト上で日本語を表記する際に不具合が発生します。

以上でWordPressの導入は完了です。

次回からオリジナルテーマを作成していきます。

[WordPressでオリジナルテーマを作ろう #2: テンプレートの作成](https://qiita.com/takahashitakuya031126/items/9b49af55706fa4db8533)