GitHubとDeployを使用してWordPressテーマの変更を自動的にデプロイする方法

ほとんどのプロのWeb開発者は、GitHubやBitbucketのようなバージョン管理システムを使用し、変更をステージングサイトまたはライブサイトに自動的にデプロイしています。

変更を自動的にデプロイするために複数のツールを試しましたが、この実体験に基づき、DeployHQ を使用してサイト上のテーマ開発をプッシュできることがわかりました。DeployHQ は、Git リポジトリとサーバーの中間として機能します。

この記事では、GitHubとDeployを使用してWordPressテーマの変更を自動的にデプロイする方法を説明します。

WordPressテーマ開発でバージョン管理システムを使用する理由

バージョン管理システムを使用すると、ファイルまたは一連のファイルに対する変更を時間とともに記録できるため、後で特定のバージョンを呼び出すことができます。言い換えれば、WordPressのテーマテンプレート、画像、またはCSSファイルを変更するたびに、バージョン管理システムがこれらの変更を追跡します。

たとえば、一連の変更を実行することにしたとします。それらの変更が問題を引き起こした場合、WordPressテーマの既存の「バージョン」に戻す（ロールバックする）ことができます。

Gitは一般的なバージョン管理システムであり、複数のユーザーがWordPressテーマのような同じコードベースで作業することを可能にします。2人の開発者が同じファイルを編集した場合、Gitにはこれらの問題（マージコンフリクトとして知られる）を処理するための組み込み制御があります。

詳細については、WordPressでのGit使用入門をご覧ください。

デプロイメントシステムを使用する理由

GitHubのようなサービスと連携するデプロイシステムを使用すると、WordPressテーマに加えた変更を自動または手動でアップロードできます。

これは一方向の同期システムとして見ることができます。たとえば、WordPressテーマのファイルを削除した場合、FTP経由でも削除する必要があります。デプロイシステムを使用すると、GitHubにコードの変更をコミットする際にこれが自動的に行われます。

この記事では、DeployHQ、または単にDeployと呼ばれるデプロイシステムを使用します。DeployはBitbucketのような他のGitリポジトリプロバイダーとも連携しますが、このチュートリアルではGitHubを使用します。

WordPressテーマのGitHubリポジトリの設定

まず、GitHubでアカウントを設定し、WindowsまたはMac用のGitHubクライアントを使用してWordPressテーマへの変更を保存する必要があります。

まず、GitHubウェブサイトにアクセスし、メールアドレスを入力して新しいアカウントを作成できます。

次に、ユーザー名とパスワードを入力する必要があります。

GitHubはメール設定を選択するように求めます。

その後、下にスクロールしてパズルを解いてアカウントを確認できます。

WordPressサイトのreCAPTCHAとまったく同じです。

アカウントが確認されると、GitHubダッシュボードが表示されます。

ここから、上部にある「+」アイコンをクリックして「新しいリポジトリ」オプションを選択できます。

次に、リポジトリ名（WordPressテーマのフォルダ名など）を設定することから始められます。  

次に、このリポジトリを公開リポジトリにするかプライベートリポジトリにするかを選択する必要があります。公開リポジトリでは、誰もがコードを確認できますが、変更を加えることはできません。プライベートリポジトリは、あなただけが確認できます。

最後に、READMEファイルを追加したい場合はチェックボックスをオンにできます。

それが完了したら、「リポジトリを作成」ボタンをクリックするだけです。

あなたのGitHubリポジトリが使用準備完了になります。

GitHub for WindowsまたはMacをインストールする

次に、WordPressテーマのコードをリポジトリに入れる必要があります。これを行う簡単な方法は、コンピューターにインストールされるGitHubクライアントを使用することです。

GitHub Desktopのウェブサイトにアクセスし、WindowsまたはMacで利用可能なデスクトップクライアントをダウンロードしてください。

ダウンロードが完了したら、GitHubクライアントを起動します。

次に、GitHubアカウントを使用してサインインする必要があります。「Sign in to GitHub.com」ボタンをクリックできます。

これにより、WebブラウザでGitHubが起動します。

GitHub Desktopがアカウントにアクセスできるように、「デスクトップを承認」ボタンをクリックするだけです。

その後、GitHub Desktopクライアントを開くことができます。

次に、Gitを設定する必要があります。「GitHubアカウント名とメールアドレスを使用する」オプションを選択し、「完了」ボタンをクリックするだけです。

次に、先ほど作成したGitHubリポジトリを追加しましょう。

これを行うには、「インターネットからリポジトリをクローン」オプションをクリックします。

作成したリポジトリを含む、GitHubリポジトリのリストが表示されます。

リポジトリを選択し、[Local Path]フィールドの下でコンピューター上のどこに保存したいかを選択するだけです。それが完了したら、[Clone]ボタンをクリックできます。

GitHubでホストされているリポジトリをコンピューターにクローン（コピー）しました。

次に、WordPressテーマのコードをリポジトリのフォルダーに追加し、そのコードをGitHubにコミットして同期する必要があります。

まず、前のステップでコンピューター上で選択したフォルダーを見つけます。フォルダーにはREADME.mdファイルがあるはずです。コンピューターの設定によっては、非表示の.gitフォルダーも表示される場合があります。

WordPressテーマのコードに変更を加えたら、このフォルダにコピー＆ペーストするだけです。

その後、GitHub MacまたはWindowsアプリを開くと、追加したファイルがウィンドウに表示されます。

変更は緑色でハイライト表示されます。これらはローカルリポジトリに保存したが、まだコミットしていない変更です。

次に、これらのファイルをGitHubにコミット（アップロード）する必要があります。これを行うには、変更内容を説明するテキストを[Summary]ボックスに入力し、[Commit to master]ボタンをクリックするだけです。

これにより、行った変更がリポジトリにコミットされます。

これらの変更をGitHubにアップロードするには、[Push origin]ボタンをクリックできます。

コミットがGitHubにアップロードされたことを確認するには、GitHubウェブサイトでリポジトリにアクセスしてください。すべてがうまくいけば、コードの変更が表示されます。

デプロイの設定

最後のステップは、GitHubリポジトリへの変更がWordPressウェブサイトにプッシュされていることを確認することです。

DeployHQ（またはDeploy）は、GitHubリポジトリへの変更を監視し、その変更のみをWordPressウェブサイトに自動または手動でアップロードするウェブベースのサービスです。

コードとウェブサーバーの間の接続と考えてください。

まず、Deployウェブサイトにアクセスして、新しいアカウントにサインアップする必要があります。Deployは有料サービスですが、1つのプロジェクトと1日5回のデプロイに対して無料アカウントを提供しています。

サインアップが完了したら、デプロイダッシュボードにログインできます。

ここから、「プロジェクトを作成」ボタンをクリックして開始できます。

次に、プロジェクトの名前を指定する必要があります。

その後、コードホスティングプラットフォームとしてGitHubを選択できます。

下にスクロールすると、プロジェクトのゾーンを選択するオプションや詳細オプションなど、さらに多くのオプションが見つかります。

それが完了したら、「プロジェクトを作成」ボタンをクリックして続行します。

DeployはGitHubにリダイレクトします。

まだサインインしていない場合は、ログインを求められます。その後、DeployにGitHubアカウントへのアクセスを許可するように求められます。

続行するには、「krystalを承認」ボタンをクリックするだけです。

DeployはGitHubからリポジトリのリストを取得し、このプロジェクトのリポジトリを選択するように求めます。

WordPressテーマリポジトリをクリックするだけで、Deployがインポートしてくれます。

次のステップで、デプロイはサーバー情報の提供を求めます。ここで、デプロイにWordPressサーバーにファイルをアップロードする方法を伝えます。

名前を入力し、プロトコルオプションとして「FTP」を選択することから始められます。

次に、下にスクロールしてFTP認証情報を入力する必要があります。

• ホスト名: ウェブサイトのSFTP/FTPホスト
• ポート: ウェブサイトホストのSFTP/FTPポート（通常、SFTP = 22、FTP = 21）
• ユーザー名とパスワード：FTPのユーザー名とパスワード
• デプロイパス： WordPressテーマファイルをアップロードする前に移動するパス。例：public_html/example.com/wp-content/themes/MyTheme。ここでMyThemeはGitHubにコミットしたWordPressテーマです。

これらの詳細を入力した後、「サーバーを作成」ボタンをクリックして保存します。

Deployはサーバー接続をテストし、すべて正しく機能していれば、成功メッセージが表示されます。

これで「デプロイ」ボタンをクリックして、GitHubファイルをウェブサイトにアップロードできます。

デプロイの進捗状況が表示されます。

Deployが完了すると、成功メッセージが表示されます。

Deployを使用してGitHubからウェブサイトに変更を正常にデプロイしました。これで、コンピューターでWordPressテーマに変更を加えたら、それらをGitHubにコミットする必要があります。その後、手動でデプロイを開始するためにDeployウェブサイトにアクセスする必要があります。

GitHubにコミットした変更がウェブサイトに自動的にデプロイされるように、自動デプロイを設定する方法を見てみましょう。

自動デプロイの設定

まず、デプロイダッシュボードにアクセスし、「プロジェクト」ページに移動する必要があります。ここから、プロジェクト名をクリックするだけです。

次に、左側のメニューから「自動デプロイ」タブに移動できます。

ここで、サーバーの自動デプロイのオプションを有効にする必要があります。

その後、Webhook URLをコピーしてGitHubアカウントに追加する必要があります。

新しいブラウザタブでGitHubアカウントにログインするだけです。次に、リポジトリをクリックし、「設定」タブに移動します。ここから、左側のメニューのWebhookセクションに移動し、「Webhookを追加」ボタンをクリックできます。

デプロイサーバーの設定ページからコピーしたWebhook URLをペイロードURLフィールドに貼り付けます。

その後、ドロップダウンから「Content type」として「application/x-www-form-urlencoded」を選択します。

次に、スクロールダウンして、どのイベントがWebhookをトリガーするかを選択できます。デフォルト設定を使用できます。

それが完了したら、「Webhookを追加」ボタンをクリックするだけです。

これで完了です。リポジトリに変更があると、GitHubはDeployに通知します。Deployは自動的にそれらの変更をウェブサイトに実装します。

この記事では、GitHubとDeployを使用してWordPressテーマの変更を自動的にデプロイする方法を学びました。また、WordPressでjQueryを最新バージョンにアップグレードする方法やWordPressの最新バージョンを確認して更新する方法に関するガイドも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。