Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressテーマの変更をサイトに自動的に導入したいですか?

ほとんどのプロのウェブ開発者は GitHub や Bitbucket のようなバージョンコントロールシステムを使い、変更した内容をステージングサイトやライブサイトに自動的にデプロイしています。DeployHQ のようなデプロイシステムを使えば、Git リポジトリとサーバーの仲介役を務めることができます。

この投稿では、GitHub と Deploy を使って WordPress テーマの変更を自動的にデプロイする方法を紹介します。

How to automatically deploy WordPress theme changes

なぜWordPressテーマ開発にバージョン管理システムを使うのか?

バージョン・コントロール・システムを使えば、ファイルやファイル群の変更を長期にわたって記録し、後で特定のバージョンを呼び出すことができます。言い換えれば、WordPressテーマのテンプレート、画像、CSSファイルを変更するたびに、バージョン管理システムはこれらの変更を記録します。

例えば、変更を一括して実行することにしたとします。その変更によって問題が発生した場合、WordPressテーマの既存の「バージョン」に戻す(またはロールバックする)ことができます。

Git は一般的なバージョン管理システムで、WordPress テーマのような同じコードベースで複数のユーザーが作業することを可能にします。二人の開発者が同じファイルを編集した場合、Git にはこのような問題に対処するためのコントロールがビルトインされています (マージコンフリクトとして知られています)。

詳しくは、WordPressでGitを使うための初心者ガイドをご覧ください。

なぜデプロイメント・システムを使うのか?

GitHub などのサービスと統合されたデプロイシステムを使えば、WordPress テーマに加えた変更を自動または手動でアップロードできます。

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

この投稿では、DeployHQ あるいは単に Deploy と呼ばれるデプロイシステムを使います。Deploy は Bitbucket のような他の Git リポジトリプロバイダでも動作しますが、このチュートリアルでは GitHub に先頭に固定表示することにします。

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

まず、GitHub にアカウントを作成し、Windows または Mac 用の GitHub クライアントを使用して WordPress テーマの変更を保存します。

まずはGitHubのサイトにアクセスし、メールアドレスを入力して新規アカウントを作成します。

Sign up for a GitHub account

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

GitHubはメールの設定も要求します。

Enter details to create a GitHub account

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

WordPressサイトのreCAPTCHAのようなものです。

Verify your GitHub account

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

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

Create a new repo in GitHub

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

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

Enter a name for new repo

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

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

Click the create repo button

これでGitHub リポジトリが使えるようになります。

GitHub for Windows または Mac のインストール

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

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

Download the GitHub client

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

次に、GitHub アカウントを使ってサインインします。Sign in to GitHub.com’ ボタンをクリックします。

Sign in to GitHub client

これでウェブブラウザー上でGitHubが起動します。

デスクトップの投稿者」ボタンをクリックするだけで、GitHub Desktop がアカウントにアクセスできるようになります。

Authorize GitHub access

その後、GitHub Desktop クライアントを開きます。

次に、Gitを設定する必要があります。Use my GitHub account name and email address(GitHubのアカウント名とメールを使う)」オプションを選択し、「Finish(完了)」ボタンをクリックします。

Configure git on desktop client

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

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

Clone a repository

GitHub リポジトリの一覧が表示されます。先ほど作成したリポジトリも含まれます。

リポジトリを選択し、「ローカルパス」フィールドでコンピューター上の保存場所を選択するだけです。完了したら、「クローン」ボタンをクリックします。

Choose a repo from GitHub to clone

これで GitHub にホスティングされているリポジトリをコンピューターにクローン(コピー)しました。

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

まず、上記のステップで選択したフォルダーをコンピューターから探してください。フォルダーの中にREADME.mdファイルがあるはずです。コンピューターの設定によっては、非表示の.gitフォルダーも表示されるかもしれません。

Open the readme file

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

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

View changes to code in GitHub desktop

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

次に、これらのファイルを GitHub にコミット (アップロード) します。そのためには、Summary ボックスに変更点を説明するテキストを入力して ‘Commit to master’ ボタンをクリックします。

Add summary and commit to master

リポジトリに変更をコミットします。

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

Click the push origin button

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

デプロイの設定

最後のステップは、GitHub リポジトリの変更が WordPress サイトにプッシュされるようにすることです。

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

あなたのコードとウェブ・サーバーとの接続を想像してほしい。

まず、Deployのサイトに アクセスし、新規アカウントを登録する必要がある。Deployは有料のサービスだが、1プロジェクトと1日5回のデプロイを行うための無料アカウントを提供している。

DeployHQ website

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

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

Create a project in deploy

次に、プロジェクトの名前を入力します。

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

Enter a name for project

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

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

Create project in deploy

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

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

Authorize deploy with GitHub

クリスタルを投稿する」ボタンをクリックしてください。

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

Select GitHub project

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

次のステップでは、Deploy がサーバー情報の提供を求めてきます。ここで Deploy に WordPress サーバーへのファイルのアップロード方法を指示します。

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

Enter name for your server

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

  • ホスト名:あなたのサイトのSFTP/FTPホスティングサービス
  • ポート:ホスティングサービスのSFTP/FTPポート(通常、SFTP = 22、FTP = 21)。
  • ユーザー名とパスワードFTPユーザー名とパスワード
  • デプロイメント・パス:WordPress テーマファイルをアップロードする前に移動するパス。例えば、public_html/example.com/wp-content/themes/MyTheme。MyTheme は GitHub にコミットした WordPress テーマです。

これらの詳細を入力したら、「save ‘Create Server」ボタンをクリックします。

Enter FTP config details

Deployはサーバーへの接続をテストし、すべてが正しく動作すれば成功のメッセージを表示します。

Deploy’ ボタンをクリックすると、GitHub のファイルがサイトにアップロードされます。

Click the deploy button

展開の進捗状況が表示されます。

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

View deployment progress

Deploy を使って GitHub からサイトへのデプロイが完了しました。これで、コンピューター上で WordPress テーマに変更を加えた場合は、それを GitHub にコミットする必要があります。その後、Deploy のサイトにアクセスして手動でデプロイを開始する必要があります。

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

自動デプロイメントの設定

まず、デプロイダッシュボードの「プロジェクト」ページにアクセスします。ここでプロジェクト名をクリックします。

Select your project

次に、左のメニューから「自動デプロイメント」タブに向かいます。

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

Enable auto deployment

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

新しいブラウザータブで GitHub アカウントにログインするだけです。そして自分のリポジトリをクリックし、設定タブに向かいます。ここから、左側のメニューから Webhooks セクションに移動し、’Add webhook’ ボタンをクリックします。

Add webhook to GitHub

Deploy server settingsページからコピーしたWebhook URLをPayload URLフィールドにペーストします。

その後、ドロップダウンからコンテンツタイプとしてapplication/x-www-form-urlencodedを選択します:

Enter webhook address

次に、スクロールダウンして、どのイベントがWebhookをトリガーするかを選択できます。初期設定のままで構いません。

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

Click add webhook button

これですべてです。GitHub リポジトリに新しい変更があると、Deploy に通知されるようになります。Deploy はその変更を自動的にサイトに反映します。

この投稿が、GitHub と Deploy を使って WordPress テーマの変更を自動的にデプロイする方法を学ぶ助けになれば幸いです。WordPress サイトのステージング環境の作り方やビジネスサイトに必須の WordPress プラグインについてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

6件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. rambideunt says

    Is it save to put my wordpress files in the public repo in github? does it means some of my personal configuration data such as data in wp-config being exposed to public?

    • Dave Bergschneider says

      Private repo if doing the full WP installation is best practice. However best practice would to be only committing files unique to your project such as custom plugin’s or themes. The rest is just clutter. Especially since you aren’t likely uploading the database to GitHub.

      Thanks for this article, I’ve found a new workflow!

    • Robert Lyall says

      With the service being used in this article (DeployHQ), you can use the Config Files feature to avoid having to put your production credentials inside your repository.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。