WordPressはブロガーならSEOに強くHTTPS化の導入がしやすい、WEBデザイナーやフロントエンドエンジニアならばカスタマイズがしやすい、自身のスキルアップをすることができる、クライアントワークスで多い。各々目的で使用出るためダントツのシェアを誇るCMSです。
MacBook Pro 2017 15インチを購入して新しいキーボードやディスプレイに慣れるためにWordPressの開発環境を１から作り直しました。2017年9月移行のテーマはその環境から作ったものです。健忘録がてらMacでのWordPressの開発環境の作りをご紹介します。
なるべく難しい作業を行わずにローカルサーバーの構築から、スマホタブレットでのデザイン確認、環境のサーバーへのアップロードまでできるところまで環境をつくります。
レベル的にはHTMLとCSSでWEBサイトを構築できる人が初めてWordPressのテーマづくりに挑戦するレベルにあります。WEBデザイナーとしてはHTMLとCSSでのコーディングを覚えた初心者と中級者の間のレベルになると思います。
Sublime Textのインストール
まずはテーマ編集するためのテキストエディタのインストール。私はSublime Text 3 を愛用しています。これがないとHTML・CSS・Javadcript・WordPressの開発効率が激減します。Sublime Textの特徴は動作が軽いこと。必要な機能はプラグインを入れることで拡張していくので自分好みのカスタマイズが可能です。
ここは使い慣れているエディターでも大丈夫です。MacならばCoda2やDreamweaverを使う人も多いと思います。
Dreamweaverで作業をしているWEBデザイナーの方は一度Sublime Textに触れていると良いと思います。最近はSCSSコンパイルやベンダープリフィックスを自動で行うタスクランナーを使用したコーディングが流行していますのでSublime Textを使うと連携が取りやすく作業を高速化することができます。
プラグイン導入
Sublime Textのインストールが終わりましたら開発の効率を上げるためにプラグインを導入します。
- Japanize：日本語化
- Emmet：タグ入力省略
- ConvertToUTF8：文字化け対策
- HTML-CSS-JS Prettify：ソースフォーマット
- SFTP：ファイルアップロード / ダウンロード
- SublimeCodeIntel：コード補完
- SublimeLinter：構文エラーチェック
上記プラグインを最小構成として導入しています。
ひとまずこれさえあればWordPressのテーマ作りとサーバーへのアップロード環境は整います。
プラグインを使うために必要なPackageControlをインストール
表示(view)＞Show consoleを選択するとSublime Textの下に入力画面が表示されます。
ここにPackageControlをインストールするコードを打ち込みEnterを押します。コードは下のURLページの【Sublime Text3】のタブの中のものをコピペします。
プラグインのインストール
PackageControlからプラグインをインストールしていきます。
command+Shift+PでPackageControlが開き入力欄が現れます。
ここで「install Package」を選択
ここで必要なプラグインを検索して選択します。これだけでSublime Textにプラグインがインストールされます。この手順を繰り返して必要なプラグインをどんどんインストールしていきます。
SFTPの設定
他のプラグインはgoogleで調べれて使い方はたくさんでてきますので、サーバーにファイルをアップロード / ダウンロードするプラグインSFTPの使い方を私が使用しているレンタルサーバーであるエックスサーバー
を例に解説します。
Sublime Textのアプリの中にフォルダをドラッグ＆ドロップするとプロジェクトとして読み込こまれます（下記のWordPressの設定に詳しく書いてあります）。
まずこの読み込まれたプロジェクトを右クリックし > SFPT/FRP > Edit Remote Mappingを選択。
Typeをsftpからftpに変更。サーバーへの接続をSFTPにすることもできますが、手順が複雑になるためここではFTP接続で進めます。
続いてホスト名、ユーザー名、パスワードを入力します。初期状態ではパスワードはコメントアウトされていますが、外して入力しておくとアップ毎に確認されるパスワード入力を省くことができます。
アップロード先はエックスサーバーでドメイン直下にWordPressを置くなら【ドメイン名/public_html】になります。
設定が完了したら、アップしたいファイルやフォルダを選択して右クリック > SFTP/FTP > Upload Fileでファイルをアップロードすることができるようになります。
MAMPのインストール
Macでのローカルサーバーの定番であるMAMP。検索で情報が見つかるため最初のWordPress開発環境をつくるためには最適です。カスタマイズをすることで便利な環境を作ることが出来ますが今回は出来る限りデフォルト設定で行います。
ローカルサーバーとして動くフォルダ
MAMP>htcodsという場所がローカルサーバーが参照する場です。試しにhtdocs内にtest.htmlというファイルを作り、http://localhost:8888/test.htmlにアクセスするとHTMLファイルが表示させるはずです。
このフォルダの中にWordPressをインストールして動くようにしていきます。
WordPressのダウンロード
公式ページからWordPress本体をダウンロードし、htdocs配下に置きます。ここでのフォルダ名がurlになりますので、作るサイト名にちなんだものにするとわかりやすいです。
これだけではurlにアクセスしてもwordpressは動きません。動かくためにデータベースの設定を行います。
PHPのバージョンを変更する
PHPのバージョンが最新のものだとWordPressの開発に必要なphpmyadminが開けないことがありますので開発環境では古いバージョンを使用したほうがいいでしょう。
MAMPの設定からPHPのバージョンを古い方に変更します。
phpmyadminでデータベースを構築する
MAMPの設定画面からphpmyadminにログインして使用するデータベースを作成します。
名前は任意でかまいません。文字コードはutf-8 general ciを選択し、作成するだけです。
WordPressのconfifg-sample.phpを編集する
Sublime TextにWordPressの入っているフォルダをドラッグ＆ドロップします。こうすることでそのフォルダがプロジェクトとして読み込まれアプリ内でフォルダとテキストが表示されるようになります。
ここでまずconfig-sample.phpをconfig.phpにリネームします。次に下記のように内容を変更。
データベース名は設定した名前を使用。ユーザー名とパスワードはrootがMAMPのデフォルト設定です。ホスト名はlocalhostにして保存します。
WordPressの設定を行う
データベースとWordPressのconfig設定が完了し、作成したlocalhost:8888/xxxx/にアクセスするとwordpressの設定画面が表示されます。ここでユーザー名とパスワードを設定するとログイン状態になりWordPressがローカルサーバーで使用可能になります。
ここまですすめて初めてPHPを使用したWordPressの開発ができるようになります。
WordPressのテーマを作る
ローカルサーバーの中のWordPressであってもネットに繋がる環境であれば管理画面からプラグインやテーマのインストールが可能です。試しに色々なものをインストールしてみましょう。
自作のテーマを作るときはwp-content/themes/の中にフォルダを作りこの中に必要なファイルを作っていきます。themesに入っているデフォルトのテーマやインストールしたテーマを参考にしつつ作っていきしょう。
最小構成であれば、index.phpとstyle.cssだけあればテーマを自作のものに切り替えることができます。
style.cssという名称のファイルを作りファイルに下記を記入します。
管理画面の中の外観を選択すると自作したテーマが表示されているはずです。有効化をするとテーマが有効になります。
テーマはまず静的のHTMLとCSSで作成してそれをローカルサーバー内でphpファイルに組み込んでいくのが一般的です。体系的に覚えた方がいいので参考書を１冊購入して順序よく覚えていくことをおすすめします。
スマホやタブレットでローカルサーバー内にアクセスしデザインを確認する
レスポンシブデザインでWordPressのテーマを作るなら実機検証は必要不可欠です。Chromeの開発ツールでも確認はできますが、細かい挙動などは実機でないとわからないことも多いです。
無線ルーターでインターネットに接続しているならMAMPとWordPressの設定を少し変更するだけでスマホやタブレットから開発している端末にアクセスしてWordPressがみれるようになります。
IPアドレスからアクセスする
ローカルサーバーのあるパソコンのIPアドレスを調べます。ターミナルを起動しifconfigと入力してEnterをおします。そうすると192.168.xxx.xxxという番号が表示されます。これがIPアドレスです。
スマホやタブレットのブラウザにIPアドレスを入力
Ifconfigで表示されたIPアドレス:8888をブラウザに入力してアクセスします。「192.168.11.6」なら「192.168.11.6:8888」にアクセスします。もちろん開発しているPCからでもアクセスできますので、まずはPCで確認してみるとよいでしょう。
ここに表示される中でWordPressをインストールしたフォルダを選択すると、開発環境内のWordPressにスマホやタブレットからアクセスすることができます。
WordPressにログインして、サイトのURLをIPアドレス192.168.xxx.xxx/フォルダ名に変更します。
スマホ・タブレットだと画像やCSSが読み込まれない問題
開発しているPC以外の端末から無線LAN経由でアクセスするとページは表示されますが画像やCSSが読み込まれずにレイアウト崩れしています。これはIPアドレスからアクセスした端末が読むHTMLが参照するファイルが「http://localhost:8888/~」となっているためです。開発端末以外での参照URLを「http://192.168.11.6（IPアドレス）/~」に変更してあげる必要があります。
WordPressの設定からURLを変更する
WordPressの一般設定からWordPressアドレス、サイトアドレスをIPアドレス:8888に変更します。
URL変更が完了したらスマホやタブレットで192.168.xxx.xxx/フォルダ名にアクセスします。これで開発中のWordPressがローカルサーバーで確認することができます。
これでWordPressの開発環境完成
これですべての端末からのアクセスができるため、レスポンシブデザインのレイアウト確認を実機で行うことができるようになります。またSublime TextのプラグインSFTPを使用しファイルのアップロードもできるため、このMacBook Proを持ち歩けばブログの管理はすべて行うことが可能になります。
実際はgulpといったタスクランナー（SCSSのコンパイルや確認用のブラウザの自動更新など）を走らせて作業効率化をしていますが、ここまでのローカルサーバー環境構築ならMacを所持している人なら誰でもできるようになると思います。
スポンサーリンク
コメントを残す