これからWordPressを学んでいく方へ、WordPressとは何かから環境構築、プロジェクトの作成までを紹介していきます。
今日、WordPressはブログ、メディア、コーポレートサイトなど様々なサイトに利用されており、理解することでできることが大幅に増えます。また、WordPressは環境構築もとても簡単ですので、安心して臨んでもらえたらと思います。
WordPressとは
WordPressとは、ブログやwebサイトを制作できるオープンソースのソフトウェアです。オープンソースとは、無料でソースコードを公開し、自由に改良・再配布が出来るソフトウェアです。
例えば、本来ブログを作るためには、ユーザーに見える見た目の部分とは別に、管理者が投稿する画面や投稿ボタンを押したら、それが見た目に反映するようなシステムも作らないといけません。
WordPressを使った開発では、管理画面や投稿のシステムが既に用意されているので、私たちは見た目の部分の制作を中心に行えば良くなり、かなりの工数がカットできます。
WordPressはPHPというプログラミング言語で作られており、データベースにはMySQLが使われています。データベースとは、データを置いておく場所です。ブログの場合、投稿した内容や、投稿した日時などのデータをデータベースに置いておきます。
WordPressはもともとは、ブログの制作、管理を行うソフトウェアとして誕生しましたが、現在ではwebサイト制作全般で活用されています。
web制作をする上で、WordPressの理解はマストですし、仕事の幅も広がります。
Local by Flywheelをダウンロードしよう
WordPressを利用するにあたっての環境構築を行います。
環境構築と聞いて、難しいイメージを抱く方も多いと思いますが、ローカル(自身のPC内)にWordPressの環境を構築するのはとても簡単です。
MAMPやXAMPP、Local by Flywheelを利用するなど様々な環境構築方法が存在しますが、今回は「Local by Flywheel」を利用し、行なっていきたいと思います。
初めにLocal by Flywheelにアクセスして下さい。
上記のページが表示されたと思います。
右上の「DOWNLOAD」クリックしてください。
ご自身のお使いのものを選択してください。
Macをお使いの方は「Mac」、Windowsをお使いの方は「Windows」で問題ありません。
Local by Flywheelをダウンロードするにあたっての情報を入力します。
ご自身の名前、メールアドレス、電話番号を入力し、「GET IT NOW!」をクリックしてください。
「click here」をクリックするとダウンロードが開始します。
Macの場合、Finderの「ダウンロード」に、Local by Flywheelがダウンロードされます。左の「Local.app」をドラッグアンドドロップし、右の「Applications」上に移動してください。
上記を実行するとLocal.appがFinderの「アプリケーション」に入りますので、ダブルクリックし、アプリケーションを開いてください。
「開く」をクリックしてください。
以上で、Local by Flywheelのダウンロードが完了となります。
プロジェクトを作成しよう
Local by Flywheellのダウンロードが完了しましたので、続いてプロジェクトの作成を行います。
Local.appを開くと、上記の画面が表示されますので、「CREATE A NEW SITE」をクリックしてください。
プロジェクト名を入力します。
プロジェクト名は任意ですが、今回は「project」という名前でプロジェクトを作成します。プロジェクト名を入力したら右下の「CONTINUE」をクリックしてください。
環境を選択します。
「Preferred」を選択し、「CONTINUE」をクリックしてください。「Custom」を選択すると、PHPのバージョン、Webサーバー、MySQLのバージョンを指定することができます。
プロジェクトを作成するにあたっての情報を入力します。全て任意となりますので、ご自身の情報を入力してください。また、こちらの情報は、ログインする際に必要となりますので、忘れないようにしましょう。入力し終わったら、右下の「ADD SITE」をクリックしてください。
Macをお使いの方で、こちらのポップアップが出てきた場合は、ご自身のPCのユーザー名とパスワードを入力し、「OK」をクリックしてください。
WordPressのダウンロードが開始されますので、終了するまでお待ちください。
WordPressのダウンロードが終了するとこちらの画面が表示されます。上記の画面が表示されれば、問題なくプロジェクトの作成ができています。
サイト画面を確認しよう
作成したプロジェクトのサイト画面を確認します。
右上の「VIEW SITE」をクリックするとサイト画面に遷移します。
プロジェクトを作成しただけで、「なぜサイトが表示されるの？」と思ったも多いかと思います。
WordPressは、デフォルトで何らかのサイト(テーマ)が設定された状態でダウンロードされます。デフォルトのテーマは、変更されることもありますが、2020年6月時点では「twentytwenty」というテーマが設定されます。
テーマとは、テンプレートのようなもので、このテーマを切り替えることで、デザインや機能を変更することが可能になります。テーマの変更は、全く別のサイトに切り替えるといったイメージです。WordPressを利用してのブログやサイト制作は、このテーマをオリジナルで制作することを指します。
テーマ自体は、自身で制作する他、「twentytwenty」のように無料インストール可能なものや有料で販売されているものなどがあります。テーマのインストールや購入は、管理画面の「外観」→「テーマ」→「新規追加」から行います。
このようにデザインや機能の優れたテーマが数多く存在し、それらを利用することでコードを書かずともサイトを作成することができるWordpressですが、webエンジニアとして開発を行う場合はゼロからテーマを制作していくことがほとんどになります。
このサイトでは、既存テーマは利用せずにゼロから制作する方法について解説していきます。
管理画面を確認しよう
作成したプロジェクトの管理画面を確認します。
右上の「ADMIN」をクリックするとログイン画面に遷移します。
プロジェクト作成時に設定したユーザー名とパスワードを入力し、ログインしてください。
こちらが作成したプロジェクトの管理画面になります。
管理画面では、表示設定やテーマの切り替え、プラグインのインストールなど様々な設定ができます。また、ブログやニュース記事の投稿もこちらの管理画面から行います。
試しに、いくつか設定を変更してみましょう。
言語設定
デフォルトで英語に設定されていますので、日本語に変更します。
左のメニューの「Settings」→「General」へ移動してください。
「Site Language」を日本語に変更し、ページ下部の「Save Changes」をクリックし、変更を反映してください。
サイトのツールバーを非表示にする
デフォルトでサイト上部にツールバーが表示されるようになっています。制作の邪魔になってしまうので、非表示にしましょう。
左のメニューの「ユーザー」へ移動してください。
「ツールバー」のチェックを外し、ページ下部の「プロフィールを更新」をクリックし、変更を反映してください。
インデックスの設定
開発時は、サイトをインデックスさせないようにします。
左のメニューの「設定」→「表示設定」へ移動してください。「検索エンジンでの表示」にチェックを入れ、ページ下部の「プロフィールを更新」をクリックし、変更を反映してください。
本番環境へアップする際は、チェックを外し、サイトがインデックスされるようにしますので、覚えておきましょう。
プロジェクトファイルを確認しよう
こちらのセクションではプロジェクトファイルについて解説していきます。
プロジェクトファイルの確認
プロジェクトの置き場所を確認します。
上記の赤枠内のパス(~/Local Sites/project)にプロジェクトがあります。
アイコンをクリックするとfinderが自動で開き、表示されますので、確認してみましょう。
ディレクトリ構成を知る
WordPressのディレクトリ構成について簡単に解説します。
- wp-config.php
- wp-contentフォルダ内のファイル
私たちが制作を行う上で直接変更やカスタマイズをしていくファイルです。
基本的に、上記のファイル以外をいじることはありません。wp-content以外のファイルは「コアファイル」と言われ、WordPress本体を構築しているファイルとなりますので、変更しないようにしましょう。
wp-config.php
データベースの情報などを記載するファイルです。今回は変更しませんが、場合によっては変更が必要になってきます。
wp-content
wp-contentフォルダは、制作していくブログやサイトの情報を管理しています。
以下のフォルダの役割は、知っておきましょう。
- pluginsフォルダ
- themesフォルダ
- uploadsフォルダ
「plugins」にはインストールしたプラグインが入ります。
「themes」にはテーマが入ります。デフォルトで反映されている「twentytwenty」もこちらに入っていますので、確認してみてください。後に簡単なブログを制作しますが、その際もthemes内に新たにテーマを作成し、制作していきます。
「uploads」には、管理画面からアップロードした画像や動画などのメディアが入ります。
以上で、環境構築とプロジェクトの作成が終了になります。
必要なことだけを覚えよう
今回は、WordPressを勉強する準備について解説しました。
プロジェクトの作成方法などは意識して暗記する必要はありません。分からなくなった際も都度調べればOKです。効率的に学んでいくためにも、覚えるべき箇所かどうかを判断して、進めていきましょう。
また、WordPressには様々な機能が準備されており、全ては解説しきれませんのでご自身でも是非調べてみてください。
