前回は、プレーンなwordpressテーマを提供してくれる
「UNDERSCORES」の導入を行いました。
前回の記事はこちら: 【WPテーマ自作】UnderScoresの導入
次は、テーマの開発を進めるために
ローカル環境でwordpressの構築を行うことができる
「Local」というアプリを導入して、実際にwordpressを構築します。
今回やること
- 「Local」のインストール
- サイト名とサイトパスの設定
- サイトパスが変更されない場合
- Blueprintについて
- PHPとmysqlの設定
- ユーザー名、パスワード、メールアドレスの設定してサイト作成！
- ADVANCED OPTIONSについて
- 出来上がったサイトの確認
- Localの見た目をカスタマイズ
- まとめ
「Local」のインストール
Localのインストールはこちらから
「FREE DOWNLOAD!」のボタンをクリック。
使用するOSと、名前やメールなど聞かれるので、入力し「GET IT NOW！」
zipファイルがダウンロードされるので、解凍してアプリを起動しましょう。
起動すると、VirtulBoxとホストマシンの構築を行う画面が表示されます。
画面の指示にしたがって「Let’s GO！」クリックで問題ないです。
サイト名とサイトパスの設定
それではLocalで実際にwordpressのサイトを作成します。
画面左下の「+」ボタンをクリック！
What’s your site’s name?と聞かれるので作成したいサイト名を入力します。
「ADVANCED OPTIONS」を開くと
ドメインやサイトデータのパスを変更できます。
ドメイン名をkemarii.localにしたいので、今回は「Local site domain」を変更して「CONTINUE」をクリック！
サイトパスが変更されない場合
サイト名を半角英数字で入力すると、サイトパスを自動検知してくれます。
ですが、今回のようにサイト名を日本語で入力する場合、サイトパスを自動検知してくれません。
そんな時は、「BROWSE」をクリックするとLocalのディレクトリが開くので、新規ディレクトリを作って、名前をつけてあげましょう。
Blueprintについて
wordpressを作るときにいつも使う設定や、プラグインをインストールした状態を雛形として保存できる機能です。
Blueprintに雛形を保存しておくことで、例えば複数サイトを構築する時など、次回以降のサイト構築がちょっとだけ早くなります。
今回は、Blueprintは使わないので
Don’t use a Blueprintにチェックをつけておきます！
「CONTINUE」をクリックしたら
「Preferred」か「Custom」を選択する画面になります。
PHPとmysqlの設定
Preferredは、おすすめの設定でサイトを作成してくれます。
Customを選択すると、PHPのバージョンと、Mysqlのバージョンを選択することができます。
ちなみにカスタムを選択するとこんな感じ。
「PHP Version」と「Database」の選択メニューが表示されます。
今回、特にカスタマイズする必要はないので、「Preferred」を選択して
「COONTINUE」をクリックします！
ユーザー名、パスワード、メールアドレスの設定してサイト作成！
wordpressのユーザー名、パスワード、メールアドレスを入力します。
メールアドレスについては、デフォルトで入力されているものでも特に問題ありません！
ADVANCED OPTIONSについて
「ADVANCED OPTIONS」をクリックすると、wordpressのマルチサイト化にするかどうかのメニューが開きます。
今回はマルチサイト化はしないので、飛ばしてOKです。
マルチサイト化が気になる人に向けて、簡単に説明します。
サブディレクトリと、サブドメインが選べますが
これは、wordpressのサイトネットワークという機能に関する設定です。
これを使用することで例えば、
「hoge.com」にメインのwordpressサイトAを設置し、サブドメインである「fuga.hoge.com」にサブで運用するwordpressサイトBを設置する、みたいなことが可能になります。
※サブディレクトリの場合には「hoge.com/fuga」になります。
そして、設置したそれぞれのwordpressを1つの管理画面で、一括して管理することができるようになります。
ユーザーや、プラグインをまとめて管理できるようになるので、
例えば同じwordpressの設定でメディアサイトを量産したい、みたいなニーズの場合には重宝する機能かと思います。
デメリットもあって、一度マルチサイト化するとサイトを分離するのが少々面倒になります。
サイトを量産したい、というように明確な目的がない限り、個人的にはあまりおすすめしないです。
脱線してしまったので話を戻します！
ユーザー、パスワード、メールアドレスの設定ができたら、「ADD SITE」をクリック！
wordpressや今までの手順で設定してきた項目を元に、wordpressがセットアップされます・・・
しばらく待つと
できました！
出来上がったサイトの確認
「ADMIN」をクリックすると管理画面が、
「VIEW SITE」をクリックするとサイトが開きますので、
早速サイトを見てみましょう！
できてますね！
wordpressのデフォルトのテーマ「Twenty-Twenty」かな？適用された状態で、しっかりとサイトを作ることができました。
このLocalで作ったサイトに対して、前回作った「UNDER SCORES」のテーマを適用し、開発を進めて行きたいと思います！
「UNDER SCORES」のテーマ適用方法については、前回の記事にまとめています。
前回の記事はこちら: 【WPテーマ自作】UnderScoresの導入
Localの見た目をカスタマイズ
Localでwordpressのサイトを無事作ることができました！
さて、記事をみながら気になった方もいるかもしれませんが
Localを初めて起動した時、アプリの色はライトグレーだと思います。
おまけで、Localのカラーテーマの変更方法についても書いておきます。
画面上部メニューバーの
Local -> Preferenceを開きます。
「Preference」画面が開くので、
「Appearance & Behavior」タブの、「Theme」で「Dark」を選択すると
私が使っているこのカラーテーマに変更することができます！
設定変更したら、右下の「APPLY」で適用するのをお忘れなく！
まとめ
今回は、wordpressをローカル環境で簡単に構築することができるツール
「Local」の導入を行いました。
通常wordpressをローカルで作ろうとすると、
MAMPなどを使用すると思いますが、Localを使用すれば手間も時間もかけずに
サクサクとwordpress開発を進める事ができますので、ぜひみなさんも使ってみて下さいね。
次回は、いよいよテーマ開発を進めて行きます！
UNDER SCORESで作ったテーマに、CSSフレームワークを導入して見た目のカスタマイズをしてみたいと思います。
