WordPressは優秀なCMSですが、時には少しまとまりのないコードになることも。更新を繰り返す中で、コードが冗長になるのが最たる例です。
コードが少し煩雑になってしまった（またはそうなる可能性がある）からといって、開発プロセスでの妥協を許すべきではありません。効率的なワークフローを導入することで、ウェブ開発からの収入アップすら期待することができます。
今回の記事では、各種開発ツールを使って効率的にWordPressサイトを開発するヒントをいくつかご紹介します。加えて、より具体的な手順も扱います。
ここでご紹介しているコツを実践することで、WordPressサイトの開発時に発生しがちな問題をいくつも回避することができるはずです。そして、メンテナンスや更新がしやすいサイトを作ることもできるようになります。
それでは、さっそく始めましょう。
質の高いコードとは
WordPressの開発ワークフローに進む前に、質の高いコードが実際に重要なのか、という基本から考えてみましょう。
サイトのコードについて重要なポイントがいくつかあります。コードをきれいで整った、そして、理解しやすいものにするための要点です。
具体的には以下の通りです。
- 合理的な設計
- 高い操作性
- モジュールの採用
- わかりやすいコメントの記述
- 再利用やメンテナンスを意識した構造
たくさんあるように見えるかもしれませんが、ご心配なく。この記事では、便利なツールや具体的な手順をご紹介します。とはいえ、その前に、なぜ開発ワークフローにこれらの要素が必要なのか、その理由を理解する必要があります。
WordPressサイト開発とベストプラクティス
WordPressサイトが正しく機能するためには、コードが質の高いものである必要があります。意識しないとWordPressサイトの構造は複雑になりやすく、様々な要素から構成されるため注意が必要です。
WordPressサイトの開発においてコーディングのベストプラクティスが重要である理由はたくさんあります。例えば以下のとおりです。
- WordPressサイトは複雑になりがち
- 1行のコードが大きな影響を与えることがある
- コードを洗練し、丁寧にテストする必要がある
- 質の高いコードは、メンテナンスが容易
- 質の高いコードは、パフォーマンスの向上につながる
これらの点を念頭に置きながら開発計画を進めることで、健全なワークフローを維持することができます。
WordPressサイト開発におけるワークフロー改善のヒント
ここまでで、なぜコードがきちんと書かれていることが重要なのかを簡単に説明しましたが、次に、プロジェクトごとにWordPressのワークフローを改善するためのヒントをいくつか挙げていきます。WordPressのコードをクリーンに保ち、なおかつ最適化するのにご活用ください。
ステージング環境を活用する
ステージング環境/サイトは、言うなれば本番サイトのコピーです。本番サイトに直接変更を加えることなくテストを実施することができるため、非常に重要になります。
ステージングサイトの利用には、多くの利点があります。
- 変更を本番サイトに反映させる前にテストを行うことができる
- ステージングサイトでテストすることで、潜在的な問題を回避できる
- 変更内容が意図したとおりに動作していることを確認できる
- 本番サイトでのダウン発生を回避できる
- 本番サイトが破損するリスクを軽減できる
また、Kinstaのプレミアムステージング環境アドオンを使用すると、都度操作しなくても、WordPressの各サイトに対して自動でステージング環境を作成することができます。大きな手間の削減です。
バージョン管理を導入する
バージョン管理とは、ファイルの変更点を追跡するシステムです。これは、変更について記録しながら、必要に応じて以前のバージョンに戻すことができるため、WordPressの開発には欠かせない要素となります。
人気のバージョン管理システムであるGitを使用するのが一般的です。Gitはフリーでオープンソースの分散型バージョン管理システムで、小さなプロジェクトから非常に大きなプロジェクトまで、高いスピードと効率で処理できるように設計されています。
バージョン管理システムは、特定の物理的オフィスを持たない、大人数で構成されるチームで作業をするときに、特に効果を発揮します。複数の人が同時に変更を加えたために、WordPress内に複数のバージョンのfunctions.phpファイルが存在し、それぞれが微妙に違う名前になっている…といった事態は、絶対に避けたいところです。だからこそ、Gitの利用が大きな意味を持ちます。
GitとGitHubの違い
Gitはバージョン管理システムで、ソースコードの履歴を管理するためのツールです。一方でGitHubは、Gitを使用したソフトウェア開発プロジェクトに対するホスティングサービスであり、同時にその運営会社（GitHub, Inc.）を指します。
この2つは異なるものですが、実際のところ、多くの人がGitとGitHubの両方を指すものとして「Git」という言葉を使っているようです。
自動バックアップを設定する
WordPressの開発における重要な機能の一つがバックアップです。何か問題が発生したときにサイトを復元できるように、バックアップが欠かせません。
バックアップを自動化する方法はたくさんありますが、最も簡単なのがWordPressバックアッププラグインの使用です。多くの素晴らしい選択肢がありますが、性能と使いやすさを重視するなら、Kinstaの自動外部バックアップアドオンをお勧めします。
このアドオンを使用すると、WordPressサイトのバックアップを毎日自動で作成し、指定した外部サーバーに保存することができます。
コードのエラーをチェックする
コード記述の際には、エラーがないかどうかチェックするプロセスが欠かせません。細かな誤り（そしてその疑いまで）をあぶり出してくれるツールとしてはlintがあります（総称としてリンターという言葉が使われることも）。WordPressサイトの開発においても当然、コードの確認は大事な手順です。
多くのコードエディターにこの機能が搭載されていますが、確実にコードのチェックを行いたいのであれば、以下のいずれかを使用することをおすすめします。
- Sublime Text
- Atom
- Vim
- Visual Studio Code
- PhpStorm（記述のチェック機能のある有料の統合開発環境/IDE）
コードジェネレータを使う
コードジェネレータは、コードを自動で生成してくれるツールです。WordPressの開発において、手間を削減し、エラーを回避するのに役立つ便利なサービスです。
多くのコードジェネレータがありますが、代表的なものを紹介します。
- GenerateWP：カスタム投稿タイプ、タクソノミー、メタボックスなどのコードを生成できるコードジェネレータです。
- Hasty：カスタム投稿タイプ、タクソノミー、フィールドといったコードを生成することができます。
- Nimbus ThemesのWordPress Code Generators：カスタム投稿タイプ、タクソノミー、フィールド関連のコードを生成することができます。
WP-CLIを使用する
WP-CLIは、WordPress用のコマンドラインインターフェースです。コマンドラインからWordPressサイトを管理できるため、WordPressの開発において重宝されています。
特に、繰り返しの多い作業や多くのステップを必要とする作業を実行するのに便利です。例えば、WP-CLIは、WordPressのインストール、投稿や固定ページの作成、プラグインやテーマのインストールなど、さまざまな操作に使用できます。また、複数のサイトにまとめて変更を加えるのにも効果的です。
WordPress開発フレームワークを利用する
WordPress開発フレームワークは、ワークフローを効率化してくれるツールです。時間や手間の削減、エラーの回避に有用です。WordPressの開発作業が捗ります。
WordPressの開発フレームワークは数多くありますが、代表的なものは以下の通りです。
- Genesis：StudioPressのフレームワークで、WordPressのサイト構築を高速化できるように設計されています。
- Underscores：Automattic社が提供する、WordPressテーマの円滑な開発を後押しするフレームワークです。
- Foundation：Zurbが提供するフレームワークです。レスポンシブなWordPressサイトの構築を支援してくれます。
- Bootstrap：Twitterが提供するこのフレームワークは、WordPressサイトをレスポンシブなデザインで作成するのに非常に便利です。
タスクランナーを利用する
タスクランナーとは、タスクを自動化することができるツールです。手間を削減しながら、エラーを回避することができるため、WordPressの開発において大きな価値があります。また、複数のタスクを同時に実行することも可能です。
タスクランナーはたくさんありますが、代表的なものは以下の通りです。
- Gulp：CSSのプリプロセス、JavaScriptのソースコード検証（リンター）などのタスクを自動化できるタスクランナーです。
- Grunt：Gruntは、JavaScriptのタスクランナーで、繰り返しの多い作業を自動化するのに有用です。
- Webpack：JavaScriptファイルのバンドルなどのタスクを自動化できます。
Vue.jsやReactに慣れ親しむ
Vue.jsやReactをすぐに使うことはないかもしれませんが、まだの方は、これらに慣れておくことをおすすめします。WordPressの開発では、時代の変化とともに利用される機会が増えているため、学んでおいて損はないでしょう。
Vue.jsは、リアクティブなユーザーインターフェースを実現するためのJavaScriptフレームワークです。Reactは、UI構築に強みを発揮するJavaScriptライブラリとなっています。
Vue.jsもReactも高速で軽量、かつ使いやすいため、WordPressの開発では人気が高く、WordPressをヘッドレスCMSにするためには欠かせない存在です。
ワークフロー考案に時間をかけることの重要性
WordPressサイトは複雑になり得るため、プロジェクトを始める前にワークフローをしっかりと計画することが重要です。計画の時間を取ることで、結果的に時間の節約になり、将来起こりうる問題の多くを回避することができます。
WordPressのワークフローを計画することには、多くの利点があります。例えば以下の通りです。
- 何が必要かを知ることで、結果的に手間の削減になる
- 事前に計画を立てることで、潜在的な問題を回避することができる
- 必要なタスクを一つずつこなしていくことができる
- それぞれの作業を効率化することができる
- 共同での作業者やクライアントにプロジェクトを引き渡す際に発生する問題を最小限におさえることができる
上記からわかるとおり、WordPressサイト開発のワークフローをじっくり考えることは、非常に重要です。これにより、必要なすべてのタスクを遂行しながら、滞りなくプロジェクトを進めていくことができます。
WordPressサイト開発のおすすめワークフロー
WordPressのワークフローには様々なアプローチや考え方がありますが、開発プロセスに採用しておきたいおすすめのステップをいくつかご紹介します。
ステップ1. ローカル開発環境のセットアップ
WordPressのワークフローで最初に行うべきは、ローカル開発環境の構築です。オフラインでWordPressサイトの作業を進めることで、手間を最小限におさえながら、あらゆるエラーを防止することができます。
ローカル開発環境をセットアップする方法はたくさんあります。状況を見て決めるのが最善ですが、数ある選択肢の中の一つとして、Kinsta提供のDevKinstaがおすすめです。
Kinstaのステージング環境、プレミアムステージングアドオンとシームレスに連携可能です。これにより、開発結果をワンクリックで本番環境に反映できます。
また、複数のプロジェクトを同時に進め、本番サイトへの適用前にマージすることも可能です。また、A/Bテスト、プラグイン互換性テスト、リソーステストといった機能が組み込まれており、ビルドの構成を丁寧に確認することができます。
プレミアムステージングアドオンは、Kinstaのホスティングアカウント作成後にいつでも購入可能です。ステージング環境を作成するには、コントロールパネル「MyKinsta」に移動し、画面上部にある「環境」から「新規環境の作成」をクリックします。
ステップ2. バージョン管理のセットアップ
WordPressサイト開発ワークフローの2つ目のステップは、バージョン管理の設定です。これにより、コードの変更内容を追跡し、必要に応じて以前のバージョンに戻すことができるようになります。
Gitのようなツールの使用をおすすめします。流れは次のようになります。
1. GitHubでリポジトリを作成
GitHubでのリポジトリ作成は、以下の手順で行います。
- GitHubアカウントにログインし、右上の「+」をクリック
- ドロップダウンメニューから「New repository」を選択
- リポジトリの名前と説明を入力し「Create repository」をクリック
2. リポジトリをローカル開発環境に複製
今回の例では、DevKinstaを使用して話を進めます。
- 作成したリポジトリのページで、「Clone or download」ボタンをクリック
- 「Clone with HTTPs」セクションで、リポジトリのURLをコピー
- 開発環境でターミナルを開き、リポジトリのクローンを作成するディレクトリに移動
- GithubからコピーしたURLに置き換えて、以下のコマンドを入力
git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.gitこれで、ローカル開発環境にリポジトリを複製することができます。
3. ファイルの追加と変更のコミット
- Gitで追跡したいファイルを、PC上のリポジトリディレクトリに追加
- git add（＋ファイル名）を入力するか、git add . を使ってディレクトリ内のすべてのファイルを追加
- git commit -m と入力（その後に行った変更を説明するメッセージを表示）
- 変更をGithubにプッシュするには、git pushと入力
これで、自分のパソコンでファイルを編集してGitHubにプッシュすることができます。GitHubから最新版のファイルを取得したい場合は、git pullコマンドを使用します。
GitHubを使わない場合には、Bitbucketを使っても同じようなことが行えます。
ステップ3. ローカル環境で開発する
ローカル開発環境とバージョン管理の設定が完了したら、いよいよ WordPressサイトのローカル環境での開発を開始します。
ローカル環境で開発を進めることで、変更を本番に反映する前にステージングサイトでテストすることができます。これにより、エラーやバグが本番サイトに影響を与える前の段階で、発見・対処が可能になります。
ローカル開発環境からステージングサイトへ変更をプッシュするには、DevKinstaのようなツールを使用するのがおすすめです。ものの数回クリックするだけで、ローカルの開発環境からステージングサイトに変更内容を簡単に反映できます。
ステップ4. WP-CLIを活用する
WP-CLIはWordPress用のコマンドラインインターフェースで、ターミナルからWordPressサイトを管理することができます。ユーザーの作成・管理、プラグインのインストール・更新など、さまざまなタスクを実行可能です。
WP-CLIをインストールするには、次の手順に従います。
- WP-CLI pharファイルをダウンロード
- このファイルをPATH内のディレクトリに移動 (例：/usr/local/bin）
- ファイル名をwpに変更
- ファイルを実行可能な状態にする（例:chmod +x /usr/local/bin/wp）
- wp –versionを実行して、WP-CLIがインストールされていることをテスト
これにより、WP-CLIを使用して、コマンドラインからWordPressサイトを管理することができるようになります。コマンドの一覧ついては、WP-CLI v2をご覧ください。
ステップ5. Gulpでワークフローを自動化する
Gulpは、CSSやJavaScriptファイルの圧縮、Sassファイルのコンパイルなどのタスクを自動化することができるタスクランナーです。
Gulpを使用するには、まず、システムにインストールする必要があります。Node.js、npm、そしてもちろんGulpが必要です。Node.jsで以下のコマンドを実行します。
npm install gulp-cli -gGulpがインストールされたら、プロジェクトのルートにgulpfile.jsファイルを作成します。このファイルには、Gulpタスクのコードを記述します。
例えば、次のコードは、CSSファイルを圧縮するタスクです。
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
return gulp.src('src/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});このタスクを実行するには、次のコマンドを使用します。
gulp minify-cssステップ6. コードをチェックする
コード解析ツールを使うことで、エラーを特定することができます。例えば、Atom.ioと以下のパッケージを使用します。
- atom-beautify
- atom-ternjs
- linter
- linter-eslint
- linter-php
- linter-sass-lint
ターミナルで、対象のディレクトリに移動し、以下のコマンドを実行します。
find . -name "*.js" -o -name "*.scss" | xargs eslint --fixこれで、プロジェクト内のすべてのJavaScript、Sassファイルが解析されます。
特定のファイルを対象にするには、以下のコマンドを実行します。
eslint --fix file-name.jsfile-name.jsの部分を実際のファイルの名前に置き換えてください。
ステップ7. CSSプリプロセッサを使う
CSSプリプロセッサ（CSSメタ言語とも）は、CSSの記述を助けるものです。独自の構文で、効率的にCSSを記述できるようになります。CSSプリプロセッサの代表的なものとして、SassとLessの2つが挙げられます。
ここではSassを使って説明を続けます。Sassを使用するには、まずSassコマンドラインツールをインストールする必要があります。そのために、以下のコマンドを実行します。
gem install sassSassがインストールが完了したら、以下のコマンドを使用してSassファイルをCSSにコンパイルすることができます。
sass input.scss output.cssinput.scssをSassファイルの名前に、output.cssを作成したいCSSファイルの名前に置き換えてください。
Sassファイルの変更を監視し、自動的にCSSにコンパイルするには、以下のコマンドを使用します。
sass --watch input.scss:output.css先ほどと同じように、input.scssをSassファイルの名前に、output.cssを作成したいCSSファイルの名前に置き換えてください。
ステップ8. デプロイプラグインを使用する
デプロイプラグインは、WordPressサイトをローカルの開発環境から本番サーバーに簡単にデプロイできるツールです。
選択肢はいくつかありますが、WP Pusherをおすすめします。WordPress サイトで使用できる無料のデプロイプラグインです。
WP Pusherをインストールするには、まず、WP Pusherの公式サイトからZIPファイルをダウンロードします。その後、WordPressサイトにログインし、「プラグイン」＞「新規追加」と進みます。「プラグインのアップロード」ボタンをクリックし、先ほどダウンロードしたZIPファイルを選択します。プラグインをインストールして有効化したら、「設定」＞「WP Pusher」で設定を行います。
WP Pusherを設定すると、FTPインターフェースやWordPressデータベースを直接触ることなく、WordPressプラグインとテーマを本番サーバーにデプロイすることができます。
ステップ9. WordPress Rest APIを利用する
WordPress REST APIは、WordPress管理画面外からWordPressサイトと接続することができる強力な機能です。
WordPress REST APIを使って、様々なかたちでWordPressサイトにアクセスすることができます。たとえば、WordPressサイトのモバイルアプリを構築したり、特別な管理画面を成したりするのに活用することも可能です。
WordPress REST APIを利用する手段となるのが、WordPress Command Line Interface（WP-CLI）です。セットアップの方法などの詳しい説明はこちらをご覧ください。
ステップ 10. スタイルガイドを作成（＋それの踏襲）
スタイルガイドというのは、WordPressサイトのプログラミングやデザインに関する一連の指針をまとめたものです。スタイルガイドを作成することで、コードの一貫性と読みやすさを確保することができます。
WordPressサイト構築に便利なスタイルガイドはいくつもありますが、WordPress Coding Standardsを出発点として使用することをおすすめします。しかし、開発を進めていく中で、随時修正や追加を行うことになるでしょう。
スタイルガイドは、実際のところ、徐々に変化していくものです。とはいえ、開発者向けのステップやガイドラインをできるだけ定義することが重要です。
端的に言えば、スタイルガイドはWordPressサイト開発のワークフローをわかりやすく文書化したものとなります。
ステップ11. サイトを公開する
上記の手順がすべて完了したら、WordPressサイトを本稼働させる準備が整います。WP Pusherなどのデプロイメントプラグインを使っている場合は、コードをリモートGitリポジトリにプッシュするだけで済みます。
Kinstaでも簡単に実行可能です。コントロールパネル「MyKinsta」の「サイト」に移動しサイトを選択したら「本番環境に適用」をクリックします。
次に、「ファイル」または「データベース」の横にあるボックスにチェックを入れ（両方にチェックを入れる）、サイト名を入力し、「Liveに反映する（本番に反映する）」をクリックします。
デプロイメントプラグインもGitも使用していない場合には、ローカル開発環境からWordPressデータベースをエクスポートして、本番サーバーにインポートするだけでOKです。WordPress管理画面の「ツール」＞「エクスポート」で行うことができます。
そして、エクスポートオプションから「すべてのコンテンツ」を選択し、「エクスポートファイルをダウンロード 」ボタンをクリックします。データベースファイルを保存したら、WordPress管理画面の「ツール」＞「インポート」に進み、本番サーバーにインポートすることができます。エクスポートしたデータベースファイルを選択し「ファイルをアップロードしてインポート」ボタンをクリックしてください。
また、FileZillaのようなFTPクライアントを使用して、WordPressのファイルをローカルの開発環境から本番サーバーにアップロードすることもできます。FTPを使用して本番サーバーに接続し、WordPressファイルをpublic_htmlディレクトリにドラッグ＆ドロップするだけでOKです。
WordPressサイトの本稼働を迎えたら、テストに時間をかけて、問題なく機能していることを確認しましょう。
ちなみに、Kinsta AMPを使ってテストすることもできます。サイトの高速化にかかせない、サーバーのパフォーマンス監視、トラブルシューティングを実行可能です。
まとめ
今回ご紹介した通り、WordPressの開発ワークフローには、多くの要素が必要になります。しかし、臆すること無く一つずつ進めることで、WordPressサイトを整理し、ひいては、スムーズな動作や容易な保守管理が期待できます。
また、DevKinsta、プレミアムステージング環境アドオン、Kinsta AMPなどを利用すれば、各業務の効率化を図ることができます。WordPressサイト開発のワークフローから手間を取り除きたい方におすすめです。
WordPressの開発ワークフローの作成について何かご質問がございましたら、以下のコメント欄でお聞かせください。
コメントを残す