この連載は、HTML,CSS,JavaScriptまでを一通り学び終えた人を対象に、Localというアプリで開発環境を用いてWordPressのテーマファイルを自作し、Webサイトを作る方法を解説していきます。
HTML,CSS,JavaScriptまでを一通り学び終えた人は、次に何を勉強するべきかという問題に直面することが多いと思います。JavaScriptまでは Web業界全体で使われている知識ですが、Node.jsといったフレームワークの知識になってくると、会社によって使用しているフレームワークが違うため、どれを学んだら良いのか迷いやすいです。また、PHPの学習を始めようとしても、JavaScriptまでと違って、ブラウザで簡単に表示されるわけではない為、ローカルサーバーを立てなければいけませんが、DockerやMampといったアプリは難しくて挫折しやすいです。それに加え、データベースやサーバーといった別の知識が必要になってくるため、何をしたら良いのか分からなくなってしまいます。
そこでオススメなのが、WordPressのテーマファイルを自作して、Localというアプリを使ってサイトを作る方法です。この方法だと、HTML,CSS,JavaScriptの知識さえあれば、最低限の勉強量で、投稿機能やお問い合わせフォームを含んだ本格的なWebサイトが作れるようになります。ちなみに、ハナグミでの仕事も、主にこういった手順で行われています。
今回は僕がコーディングした、和みサポートさんのサイトを例に解説していきます。和みサポートさんには快く掲載許可を頂きました。ありがとうございます。
まずはローカルのアプリをインストールします。
https://localwp.com/ のページの”DOWNLOAD FOR FREE”をクリックすると、
以下のようなフォームが表示されます。名前とEmailを入力して、Please choose your platformでは自身が使用しているPCのCPUを選んで、Please choose your organization typeではOtherを選んでください。
するとLocalのダウンロードが完了します。
次に、Local アプリ内で和みサポートさんのサイトを作ります。画面左下の＋マークを押して、
次にCreate a new siteを選択して、Continueを押すと
以下の画面に遷移します。ここでは、サイト名を入力します。今回は、和みサポートさんのURLと同じnagomi-supportと入力してContinueを押しましょう。
そして、Preferedの方を選択してContinueを押すと、
以下の画面に遷移します。ここではWordPressのログイン用のIDとパスワードを決めるのですが、ローカル環境でしか使わないため、セキュリティは基本的に気にしなくて大丈夫です。よって覚えやすいように、IDとパスワードはそれぞれadminとpasswordとしておきましょう。こうして右下のAdd Siteを押すと、ローカル環境でサイトが作られます。
するとこの画面に遷移します。この画面で重要なのは右上の方にある”WP Admin”と”Open site”という二つのボタンです。
“Open site”を押すと、ローカル環境で作られたワードプレスのサイトが表示されます。現状はまだ何も触ってないんで、デフォルトのテーマとデフォルトのページが表示されています。
“WP Admin”を押すとワードプレスの管理画面に遷移します。ここでは先ほど決めたID:admin Password:passwordを入力すると管理画面にログインできます。
管理画面は下の感じです。
これでWordpressの管理画面にログインできたと思います。
最後にサイトの言語を日本語に変更しておきましょう。SettingsのGeneralをクリックすると、Site Languageのところのドロップダウンメニューで”English”が選択されていると思います。ここを”日本語”に変更しましょう。
ここで重要なのは、ドロップダウンメニューで”日本語”を選択しただけでは、変更が反映されないことです。Generalの一番下でスクロールすると、”Save Changes”という青いボタンが出現します。ここをクリックすることで変更が反映されます。
これで管理画面が日本語になったかと思われます。基本的にWordpressの設定を変更する際は、「変更を保存」を押さないと反映されない仕様になっているので、ぜひ覚えておいてください。
これでWordpressの開発環境が完成したので、次回からはテーマファイルを自作してサイトを制作していきます。
