WordPressで仕事ができるレベルになる練習環境の作り方と練習方法

ローカル環境の作り方と 練習方法を解説

こんにちは! WordPress大好きライターのナナミです。

WordPressに限らず、何かを始める時に怖いのが本番での失敗。そんなことがないように、まずは練習をしてから本番に臨みたいのが人の常です。

WordPressの練習場所ってどうすれば用意できるの?
そもそもWordPressの練習って何をすればいいんだろう…… 

今回はこんな疑問にお答えすべく、WordPressの練習について場所のことから方法まで一気に解説していきます!

WordPressの練習にはローカル環境が安心です。まずはその準備からはじめて、本番で失敗しないよう練習していきましょう。

WordPressのローカル環境を作るべき理由

ローカル環境とは、サーバー上ではなくパソコンの中だけで作られた環境のことを言います。つまりこれを用意すれば、あなただけが見れるWordPressを用意できるということです。

ぶっちゃけそこまでやる必要あるの?
URL教えずにやればいいんじゃないのかな……

と思うかもしれませんが、WordPressを練習するならローカル環境はぜひ用意していただきたい! その理由は下記の3つです。

誰かに見られる心配ゼロ

ローカル環境なので、当然ながら誰かに見られる心配がありません。つまりもう何しても問題ない、トライ&エラーをひたすら繰り返せる状態にできます。

WordPressの練習は、とにかくトライ&エラーの繰り返しになります。エラーが出たら都度調べて対処してをくりかえして、問題解決力を高めていくのです。

だから安心して失敗できる環境が一番。となると誰にも見られないローカル環境は最強なんです。

うっかり壊してもダメージが少ない

「誰かに見られてもいいからサーバー上でやっちゃえー」なんて人もいると思います。

しかしトライ&エラーを繰り返していると、うっかりでも故意でも致命的なエラーを出してしまい、もうどうやっても元に戻せない……なんてこともしばしばあります。

本番でそれをやってしまうと、もう心が折れますね。私ならぽっきりいきます。

練習用の環境と割り切っているローカル環境なら、まだダメージは少ない! 大事な本番環境はちゃんと残っているからです。

本番と練習を分ける安心感、超大事です。マジで。

仕事現場ではローカル環境は必須

これが何より重要だったりします。

WordPressの制作案件の場合は、いきなり本番で作るなんてことはほぼありえません。まずはローカル環境で作成して、本番環境にインポートするという流れで進めます。テスト環境がある場合は、ローカルと本番の間にテストアップが入りますね。

WordPress関係の案件は、一から作るだけでなく修正する案件なんてものもあります。これも当然本番環境でいきなりやるのではなく、下記のような流れになります。

  1. 本番環境のデータをローカル環境に移して修正
  2. テスト環境にアップロードし修正を確認
  3. 本番環境にインポートする

本番を変更するのは、本当に大丈夫という確信がある状態でなければならないのです。

ローカル環境はただの練習場所ではなく、仕事をするときの重要な作業環境でもあります。つまりローカル環境を作るのはWordPressで仕事をする練習ともいえるわけですね。

WordPressの練習環境(ローカル環境)の作り方

ではそんなローカル環境、どのように作ればいいのでしょうか?

ざっくり説明すると、WordPressにはデータベースPHPが必要なので、それらを使えるアプリケーションを設定する必要があります。

どんなアプリがあるのか、ご紹介していきましょう。

XAMPPを使う(Win/Mac)

WordPressのローカル環境といえばこれ、XAMPPザンプ)です。

これを入れて起動させれば、パソコンの中で擬似的なサーバーを用意することができます。その中にPHPとデータベースもあるので、ほぼ本番に近い状態のローカル環境を作れる優れものです。

昔はWindowsでしか使えなかったのですが、最近はMac版もあるのでどっちのOSでも大丈夫です。

色々便利なのですが、ちょっと設定がややこしい部分があるのが玉にキズ。下記の記事などを参考にしてセッティングしてみてください。

【WordPress入門】ローカル環境でWordPressを使って見よう(XAMPP)
更新日 : 2018年11月8日

MAMPを使う(Win/Mac)

まだXAMPPがWindowsでしか使えなかった頃、Macでローカル環境といえばこのMAMP(マンプ)でした。XAMPPと同じく、擬似的なサーバーを用意できるアプリケーションです。

これもWindows版が出てるので、どっちがいいのか悩んでいる人も多いと思いますが、ぶっちゃけWordPressならどっちでもいいので、勘で選びましょう。

強いていうなら、Windows版のMAMPは日本語対応していないので、Windowsの人はXAMPPの方がいいかなというくらいです。

⇨ ダウンロードはこちら

InstantWPを使う(Win)

XAMPPとかMAMPは難しいです……

という方は、もっと手軽なInstantWPというアプリを使う方法もあります。

これはWindowsでしか使えないアプリなのですが、WordPressに特化しており、インストールするだけですぐに使うことができます。

欠点としては、WordPressを1個しか入れられないこと。ただの練習用ならいいのですが、仕事に使うにはちょっと不便です。

⇨ ダウンロードはこちら

local by flywheelを使う(Win/Mac)

最近注目されているのがこれ、WindowsでもMacでも簡単に使えて、複数のWordPressを入れることができるlocal by flywheelです。

XAMPPやMAMPのようなややこしい設定は不要、InstantWPと同じくらい手軽なのに、仕事にも使えるレベルのアプリとなっています。

しかもこちらはローカルでSSL環境を簡単に用意できるのも魅力。XAMPPやMAMPでもできなくはないのですがめっちゃ面倒なので、これからローカル環境を用意する方にはぜひおすすめしたいアプリです。

ただ、まだ普及率が低いので解説記事などが少ないという欠点も……。local by flywheel自体を試行錯誤して使ってみる必要があるかもしれません。

⇨ ダウンロードはこちら

これでバッチリ! WordPressの練習方法

さて、試行錯誤する環境が整ったらあとは色々試してみるのみ!

とはいえどこから手をつければいいのか……という方のために、練習ステップをまとめましたので参考にしてみてください。

まずはいろいろ投稿してみる

WordPressといえば投稿機能です。まずは投稿内容がどのように反映されるのか、どんな風に記事を書けばいいのかを把握するところから始めてみましょう。

画像を入れた投稿や、YouTubeの埋め込みを入れてみたり、文字の大きさを変えてみたり…いろんなパターンで投稿して「あ、こうなるんだ」とわかればOKです。

エディタの使い方については、下記の記事などを参考にしてみてくださいね。

初心者向け WordPressエディターの使い方とおすすめプラグイン
更新日 : 2019年6月13日

色々投稿していくうちに、「ここはこういう形で投稿したいな……」なんて思ってくるはずです。それを踏まえて次行ってみましょう!

デザインを変えてみる

投稿だけでは対応できないデザイン的な部分、今度はここを変更してみましょう。

最初はそんなに大掛かりな変更ではなく、文字の色を変えてみたり背景色を変えてみたり、ちょっとだけCSSを追加して「ここを変更するならここをいじればいいんだ」という感覚を身につけましょう。

WordPressのCSS設定については、下記の記事を参考にしてみてくださいね。

初心者必見!CSS編集でWordPressを自分好みにカスタマイズする方法
更新日 : 2018年11月8日

投稿したものの表示を変えてみる

デザイン的な見た目が変えられるようになったら、今度は表示する情報を変更してみましょう。ここからPHPの知識が必要になってきます。

PHPを使うことで、データベースに保存されている投稿の情報などを呼び出して表示することができます。ここではそれを練習するために、タイトルの位置を変更してみたり、記事へのリンクを貼ってみたり色々試してみましょう。

このタイミングでは「一つの情報を呼び出す」ということだけ意識すればOKです。「Aの記事のタイトルを表示する」みたいな感じで調べながらやってみましょう。

【初心者向け】PHPとは? 言語の特徴やできること、作れるものを解説
更新日 : 2019年4月27日

投稿表示用のファイルをイチから作ってみる

PHPで情報を呼び出す感覚が掴めたら、今度は一覧を作る練習をしてみましょう。

ここではプログラミングでよく使われる、繰り返し処理の練習WordPressのファイルの仕組みを理解する勉強をしていきます。

まず、WordPressのテンプレート階層について理解しましょう。テンプレート階層がわからない人は下記の記事でチェックして、どのファイルがどこのページに使われているのか確認してください。

それを踏まえて、記事の情報を一覧表示する「ループ」という書き方を練習します。ループとは同じ処理を繰り返して記事を表示するWordPressで必須のコードの書き方です。

こちらについては下記の記事でしっかり解説しているので、要チェックです。

WordPressの記事一覧ページってどんなもの?仕組みと作り方を解説
更新日 : 2019年5月27日

仕事で使えるWordPress知識の練習問題

さて、最後にWordPressを仕事で使うならば知っておきたい3つのポイントを練習問題として用意してみました。

ここにあるものがわかれば、WordPress初級はクリア。わからなければ調べて大丈夫なので、ぜひ覚えていってくださいね。

※Aの後ろに答えが書いてあるので、ドラッグして確認してください。

問題1:PHPを書くとき、どんな記号で囲む?
A:<!–?php ~ ?–>

問題2:記事の個別ページを表示するためのファイルの名前は?
A:single.php

問題3:テーマに必須のファイルは何?
A:index.phpとstyle.css

WordPressの練習に終わりはない

ここまでやれば、WordPressの基礎的な部分はおさえることができます。

しかしWordPressの全てはこれだけではありません。もっといろんな機能があるし、プラグインでさらに機能を追加することもできるので、終わりは無いと言っても過言ではありません。

あくまでもここは序章。どんどん試行錯誤してみてください。ローカルならぶっ壊れても怖くないですしね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説