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

未分類
登録日：2020/12/12 （ 更新日：2021/02/19 ）
コメントはまだありません
WPInjectorを用いたWordPress記事作成手順

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

全体フロー

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

事前条件

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

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

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

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

本番環境（本番）ページの作成

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

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

２．タイトルを入力します
タイトルの設定

３．「下書き保存」します
下書き保存

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

パーマリンク入力可能

パーマリンク編集

OKボタンクリック

パーマリンク設定完了

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

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

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

７．「下書き保存」します
下書き保存

本番環境（本番）データベースのダンプ取得

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

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

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

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

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

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

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

８．ダンプファイル（データベース名.sql）がダウンロードされます
ダンプファイル

ローカル環境（ローカル）データベースのリストア

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

２．データベースを開きます
データベース選択

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

４．ダンプファイルを選択します。
ダンプファイルの選択

ダンプファイルの選択

ダンプファイルの選択

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

６．wp_optionsにローカル環境のサイトURLを設定します
例）ローカル・サイトURL設定
（テーブル）wp5_options

  • （カラム）siteurl ／ （設定値）http://my-site.local
  • （カラム）home ／ （設定値）http://my-site.local

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

サイトURLの設定

サイトURLの設定

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

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

ローカル環境（ローカル）ローカルリソースの最新化（ソースのPULL）

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

１．Gitリポジトリ（ローカルのワークスペース）を選択します
ワークスペースの選択

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

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

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

Git Pull

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

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

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

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

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

フォルダ名変更

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

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

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

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

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

（参考）テンプレートファイルの内容

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

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

テンプレートの記載内容

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

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

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

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

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

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

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

１．WPInjectorを起動します
EXEファイルをクリック

WPInjectorが起動される

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

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

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

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

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

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

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

ローカル環境（ローカル）ライティング

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

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

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

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

      • ※画像リンクの例
      画像リンクの例

      ※画像表示例
      画像表示例

      本番環境（本番）プログ投稿／固定ページの更新

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

      １．タイトルをコピーし、転記します
      タイトルの転記

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

      ３．キーワードをコピーし、転記します
      キーワードの転記

      ４．本文をコピーし、転記します
      本文の転記

      本番環境（本番）添付ファイルの更新

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

      ２．資材をアップロードします
      資材のアップロード

      本番環境（本番）ブログ投稿／固定ページの公開・内容確認

      １．ブログ記事／固定ページを公開します
      ブログ記事／固定ページの公開

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

      （サンプル）
      内容の確認

      ローカル環境（ローカル）資材のバックアップ

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

      メニューの起動

      コミット

      コミット結果

      ２．コミットをPUSHします

      メニューの起動

      ソースのPUSH

      PUSH結果

      同じカテゴリーの投稿

      【WEB色見本】HTML色名・カラーコード140～便利なコピー・配色機能付き～
      サンプル記事