WPInjectorを用いたWordPress記事作成手順

WPInjectorを用いてローカルPCのWordPressで記事を編集し、本番環境に投稿する手順を確認します。

全体フロー

ローカルPCのWordPressで記事を編集する際のおおまかなフローです。


事前条件

事前に下記の準備を行ってください。

  • ローカルPC上に本番と同様にWebサーバー・DBサーバー・WordPressがインストールされていること
  • ローカルPC上のMySQL(データベース)に本番と同様にデータベースが作成されていること
  • WordPressの投稿内容や素材がGit等で管理されていること
  • ローカルPCにWPInjectorがインストールされていること

※ローカルPCにWordPressを構築する方法については、下記サイトを参照してください。


※ローカルPCにWPInjectorをインストールする手順については、下記サイトを参照してください。


本番環境(本番)ページの作成

1.WordPress管理者ページでページを追加します
※ブログ記事の場合
ブログ記事の追加

※固定ページの場合
固定ページの追加

2.タイトルを入力します
タイトルの設定

3.「下書き保存」します
下書き保存

4.パーマリンクを設定します
※ここでは、パーマリンクに「sample-article」と設定します
パーマリンクの編集ボタンクリック

パーマリンク入力可能

パーマリンク編集

OKボタンクリック

パーマリンク設定完了

5.親ページを設定します ※固定ページの場合のみ
「ページ属性」の「親」選択肢を変更します
固定ページの親ページ設定

6.情報を記録する
ブログ投稿ページ/固定ページの下記の項目を記録します。
ローカル環境で編集する際に使用します。

  • ① PSOT ID
  • ② パーマリンク
  • ③ タイトル

7.「下書き保存」します
下書き保存


本番環境(本番)データベースのダンプ取得

1.phpMyAdminを開きます
※phpMyAdminへのアクセス方法はサイト管理者に確認してください

2.WordPressで使用しているデータベースを開きます
phpMyAdmin左側のデータベースリストからデータベース名をクリックし、データベースを開いてください
※WordPressで使用しているデータベース名はサイト管理者に確認してください
データベース選択

3.エクスポート画面を開きます
「エクスポート」メニューをクリックし、エクスポート画面を開いてください
エクスポート画面を開く

4.エクスポート方法を選択します
エクスポート方法の「詳細」をチェックしてください
エクスポート方法の選択

5.WordPressで使用しているテーブルを全て選択します
※編集対象のWordPressサイトが使用しているテーブルのみ選択してください
 (ブログを複数運営している場合や、他の用途のテーブルがある場合は注意が必要です)
※WordPressで使用しているテーブル接頭辞(”wp_”、”wp5_”など)は、サイト管理者に確認してください
テーブルの選択

6.追加コマンドを選択します
「生成オプション>追加コマンド」の「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT コマンドを追加する」を選択してください
追加コマンドの選択

7.「実行」ボタンをクリックします
ダンプの実行

8.ダンプファイル(データベース名.sql)がダウンロードされます
ダンプファイル


ローカル環境(ローカル)データベースのリストア

1.phpMyAdminを開きます
XAMPPコントロールパネルの「MySQL」サービスの「Admin」ボタンをクリックし、phpMyAdminを開きます
phpMyAdminを開く

2.データベースを開きます
データベース選択

3.インポートボタンをクリックして、インポート画面を開きます
インポート画面を開く

4.ダンプファイルを選択します。
ダンプファイルの選択

ダンプファイルの選択

ダンプファイルの選択

5.「実行」ボタンをクリックし、本番データを取り込みます
投稿データの取り込み

6.wp_optionsにローカル環境のサイトURLを設定します
例)ローカル・サイトURL設定
(テーブル)wp5_options

  • (カラム)siteurl / (設定値)http://my-site.local
  • (カラム)home / (設定値)http://my-site.local

※テーブル接頭辞(”wp_”、”wp5_”など)は、お使いの環境によって異なります
※ローカル環境のサイトURLは環境により異なります

サイトURLの設定

サイトURLの設定

7.ブログ記事/固定ページを公開します
ローカルのWordPress管理画面にログインし、ブログ記事/固定ページを公開します

ブログ記事/固定ページの公開


ローカル環境(ローカル)ローカルリソースの最新化(ソースのPULL)

※リソース管理にGit、GitクライアントツールにTortoiseGitを利用している場合

1.Gitリポジトリ(ローカルのワークスペース)を選択します
ワークスペースの選択

2.右クリックし、TortoiseGitメニューから「Git Sync」を選択します。
Git Syncの選択

Git Sync画面が開きます
Git Sync画面

3.「Pull」ボタンをクリックし最新のリソースを取得します
Git Pull

Git Pull


ローカル環境(ローカル)アップロードフォルダの作成

1.WordPressのリソースフォルダ配下に投稿管理用のフォルダを作成します
※パーマリンク名でフォルダを作成します
※今回は、WordPressの管理フォルダは、C:\xampp\htdocs\my-site\です

右クリックしてメニューを呼び出します
メニュー呼び出し

「新規作成」>「フォルダー」メニューを選択します
新規フォルダー作成

フォルダー名を変更します
フォルダ名変更

フォルダ名変更

公開用のフォルダーが用意できました
公開用フォルダ完成

2.作成したフォルダにHTMLテンプレートファイルを配置します

  • (HTMLファイル名) パーマリンク名.html
  • (ファイル形式) テキスト
  • (ファイルの文字コード) utf-8

※ここでは、『sample-article.html』というファイルを作成します
HTMLテンプレートファイル作成

テンプレートに固定の内容を記載します
※WPInjectorツールのサイトからダウンロードできます
HTMLテンプレートの内容


(参考)テンプレートファイルの内容

WPInjectorでは、テンプレートファイルを使用してWordPressの記事を更新します。
テンプレートファイルは下記のような内容を記載したものです。

※テンプレートの例
テンプレートの例

テンプレートの記載内容

①POST ID ※必須
本番環境で取得したPOST IDを記載します
POST ID

②パーマリンク
本番環境で設定したパーマリンクを記載します
パーマリンク

③タイトル
ブログ記事/固定ページのタイトルを設定します
タイトル

④ページ説明文
ページのDESCRIPTIONの内容を設定します
※複数行に分けて設定することができます。複数行に分けたDESCTIPTIONは、アップデートする際には1行に連結されます。
ページ説明文

⑤キーワード
ページのキーワードを設定します
※1行につき1キーワードを設定します。アップデートする際にはカンマ区切りで1行に連結されます。
キーワード

⑥本文
ブログ記事/固定ページ本文を記載します。
本文は、HTML形式で記載します。
※「CONTENT:」の次の行以降は全て本文として認識されます
本文


ローカル環境(ローカル)WPInjectorによる編集内容の反映

1.WPInjectorを起動します
EXEファイルをクリック

WPInjectorが起動される

2.テンプレートファイルを用意します。
テンプレートファイルの作成

テンプレートファイルの内容(初期状態)
※WPInjectorツールのサイトからダウンロードできます
テンプレートファイルの内容(初期状態)

3.必須項目(POST_ID)を設定します
・テンプレートファイルの「POST_ID:」に続けて、本番環境で作成したブログ投稿/固定ページのPOST IDを記載します。
必須項目の設定

4.テンプレートファイルをWPInjectorに取り込みます
テンプレートファイルの取り込み

5.テンプレートを編集し、内容を記載します
テンプレートの編集

6.WPInjectorがテンプレートの内容を取り込みローカルのWordPressのデータベースに反映します
※テンプレートを編集内容は、自動的にWordPressのブログ記事/固定ページに反映されます
テンプレートの取り込み

ブログ記事/固定ページへの反映


ローカル環境(ローカル)ライティング

  • ブログ投稿/固定ページの本文を記載します
  • HTMLで書式をマークアップします
    ➔見出し、リスト、表、画像などを適切に配置し、ページが見やすくなるようにしましょう

1.画像ファイルを配置します
ブログ記事/固定ページへの反映

2.記事本文中に画像へのリンクを記載します
※画像リンクタグの記載方法
画像リンクタグの記載方法

  • 固定フォルダ名 – ※WordPressが管理しているフォルダ、変更できません
    (例)/wp-content/uploads/
  • 画像のフォルダ名 – ※画像ファイルを配置したフォルダのパスを記載します
    (例)blog/sample-article/
  • 画像ファイル名  (例)image3.jpg
    • ※画像リンクの例
      画像リンクの例

      ※画像表示例
      画像表示例


      本番環境(本番)プログ投稿/固定ページの更新

      ローカル環境で編集した内容を、本番環境のプログ投稿/固定ページに反映します。
      WordPressの「投稿の編集」、「固定ページを編集」画面を開いて、WPInjectorの各入力欄の内容を、WordPressに転記していきます。

      1.タイトルをコピーし、転記します
      タイトルの転記

      2.ディスクリプションをコピーし、転記します
      ディスクリプションの転記

      3.キーワードをコピーし、転記します
      キーワードの転記

      4.本文をコピーし、転記します
      本文の転記


      本番環境(本番)添付ファイルの更新

      1.FTPソフトで、ローカル環境、本番環境それぞれの資材配置フォルダを開きます
      FTP接続

      2.資材をアップロードします
      資材のアップロード


      本番環境(本番)ブログ投稿/固定ページの公開・内容確認

      1.ブログ記事/固定ページを公開します
      ブログ記事/固定ページの公開

      2.公開したブログ記事/固定ページの内容を確認します
      ※サンプルページは、下記のURLで確認することができます。
      https://plus-pm.jp/blog/sample-article/

      (サンプル)
      内容の確認


      ローカル環境(ローカル)資材のバックアップ

      1.作成したファイルをコミットします
      ※TortoiseGit利用の場合

      メニューの起動

      コミット

      コミット結果

      2.コミットをPUSHします

      メニューの起動

      ソースのPUSH

      PUSH結果