HTMLコーディングの学習を始め、いざクラウドワークスやランサーズでHTMLコーディングまわりの仕事を探してみるとWordpressまわりの仕事が多いことに気付くと思います。
避けて選んでもいいのですが、せっかく多くあるWordpress案件を受けれないのは勿体ないのでWordpressのデザインを色々いじって勉強してみる為に自分のパソコンにWordpressを稼働させてデザインを色々いじってみようという目論見です。
WordPressをいじる
WordPressに対して色々いじってみるだけなら、無料のレンタルサーバーを利用して色々試すことも可能です。
以下の記事でXFREEという無料サーバーを利用してWordpressを色々いじってみる方法を解説しておりますので、良ければそちらも参考にしてみてください。
実際のレンタルサーバーを利用してやってみるメリットは携帯からの表示確認・実機確認ができる・しやすいというところです。
デメリットとしては編集や修正などが気軽にできない、修正をサーバーに上げる必要などがあるなどが面倒というところですね。
開発作業はローカル環境で行い、実機のモバイル最終確認に利用すると一番効率が良さそうというところでしょうか。
WordPressのローカル開発環境を作る
Windowsをお使いであればXAMPPを入れた後にWordpressをダウンロードしてきて展開・設置するだけで割と簡単に開始可能です。
XAMPPはwebサーバーであるApacheやWordpress稼働に必要なPHPやMySQLがすべてセットになっている便利なソフトです。
インストールから稼働までは以下の記事で書いているのでそちらを参考にしてみてください。
最初にWordpress用のデータベースを用意します。XAMPPのコントロールパネルからApacheとMySQLをstartして以下のURLにアクセスします。
http://localhost/phpmyadmin/
左上の新規作成よりデータベースの作成に進みます。名前は何でもいいですが「wp」とでもしておきます。右側のリストからは「utf8-general_ci」を選びます。
作成を押して「wp」というデータベースができればOKです。
次にWordpressをダウンロードしてきます。ダウンロードは公式サイトより可能です。
ダウンロードしてきたZIPを解凍したwordpressというフォルダをxamppのhtdocsに配置します。そのままインストールしたならC:\xampp\htdocsに配置です。
配置したら以下のURLにアクセスします。
http://localhost/wordpress/
するとWordpresssの設定画面が表示されるので、進んでいきます。
ユーザー名：root
パスワード：空
データベースのホスト名：localhost
テーブ接頭辞：wp_
サイト名とかはご自由に、サイトの管理画面に入るためのIDとパスワードもご自由に。公開サーバーではないローカルに作るだけなのでtestとか超適当な値でもOKです（本番公開するサイトでそんな値は絶対に設定しないようにご注意ください）
インストールを完了させるとログイン画面にうつるので先ほどの値でログインすればいつものWordpress管理画面が表示されます。
あとはお好きなように修正していけばOKです。
管理画面上からだとPHP部分の修正がしづらいのですが、ローカルに設置しているのでPHP部分の修正も自由に可能です。
デフォルトのデザインのPHPをいじるなら「C:\xampp\htdocs\wordpress\wp-content\themes\twentytwenty」のあたり。
まとめ
これができればローカルにwordpressを何個も設置していくつもカスタマイズを試していくことが可能になります。
データベースを新しく作って、wordpressのzipを解凍したものをhtdocsに別名で設置してそのフォルダ名でURLにアクセスすればOKです。
これで色々と練習してwordpress関連のHTMLコーディング案件を受けるための勉強をしていきましょう！
WordPressのデザイン・テンプレートをイチから作成してみる方法は今後記事にしていければと思います。