【WordPress】VSCodeから記事投稿 WordPress Postの導入方法

WordPress のデフォルトのエディターでは Markdown 記法を使っての執筆や、複数の画像のアップロードが手間に感じることが多いです。 VSCode の拡張機能「WordPress Post」を使用すると、VSCode 上から WordPress に記事を投稿することができます。

WordPress Post の機能

• Markdown から自動投稿 Markdown で書いた記事を、手間をかけずに WordPress へ投稿することができます。
• アイキャッチ画像の自動アップロード 記事に関連する画像を簡単にアップロードし、アイキャッチとして設定することが可能です。
• 添付画像の自動変換 記事中に添付した画像のパスをブログ上でパスに自動で変換します。 → 確認中
• カテゴリやタグの設定 投稿する記事に対して、VSCode 上からカテゴリやタグを設定できます。
• 公開日の設定や公開ステータスの切り替え いつ公開するか、下書きとして保存するか、公開するかを簡単に切り替えることができます。

事前準備

事前準備として、下記２つを準備しておく必要があります。

• VSCode をインストール
• WordPress を構築

WordPress Post の導入

1. VSCode を開き、拡張機能からWordPress Postを検索します。
2. WordPress Postを選択し、Installをクリックします。 インストールが終わるとInstall→Disableに表示が変わります。

WordPress Post の設定

インストールが完了したら設定を行います。

1. 歯車のマークをクリックし、Extension Settingsを選択します。
2. Api UrlとAuth Userを設定します。
   • Api Url WordPress REST API の URL を指定します。URL の最後に /wp-json/wp/v2 が追加されます。 例えば、サイトの URL が https://yoursite.com であれば、この設定の値は https://yoursite.com/wp-json/wp/v2 になります。
   • Auth User WordPress REST API にアクセスするためのユーザー名を指定します。このユーザーは、WordPress の管理画面にログインするためのユーザー名と同じです。
3. Auth Passwordを設定します。 WordPress REST API にアクセスするためのパスワードを指定します。 パスワードは、WordPress の管理画面で発行できるパスワードです。 パスワードの発行手順は下記の通りです。
   1. WordPress の管理者画面にアクセスします。
   2. 管理画面で [ユーザ] - [プロフィール] を選択します。
   3. [新しいアプリケーションパスワード名] に任意のアプリケーションパスワード名を入力し、 [新しいアプリケーションパスワードを追加] をクリックする
   4. 4 桁の英数字を 6 つ並べたパスワードが表示されます。

その他の設定は下記の通りです。

• Debug 拡張機能のデバッグモードをオン/オフします。デバッグモードがオンの場合、拡張機能が実行する各操作の詳細なログが出力されるようになります。問題のトラブルシューティングやデバッグのために有用です。

• Default Featured Image ID この設定は、Markdown に特定の画像が指定されていない場合に使用されるアイキャッチ画像の ID を指定するものです。-1 は、デフォルトの画像を使用しないことを示しています。

• Media Types アップロードを許可するファイルの拡張子とメディアタイプを指定します。 デフォルトでは.jpg,image/jpg;.jpeg,image/jpg;.webp,image/pngになっており、.jpg, .jpeg, そして .webpファイルを処理できるようになっています。 この設定の書き方は次のような構造になっています。

  .[file-extension],[mime-type];

  • file-extensionはファイルの拡張子（例：jpg, png）です。
  • mime-typeはそのファイルの MIME タイプ（例：image/jpg, image/png）です。 複数のメディアタイプを追加する場合、セミコロン (;) で区切って列挙します。

• Prefix Featured Image Slug アイキャッチ画像のスラッグの接頭辞を設定します。

  • prefix このオプションが選択されている場合、アップロードされる画像のファイル名の先頭に特定の文字列（接頭辞）が追加されます。例えば、接頭辞が “wp-” と設定され、アップロードする画像のファイル名が “image.jpg” の場合、WordPress にアップロードされた後のファイル名は “wp-image.jpg” となります。
  • suffix このオプションを選択すると、アップロードされる画像のファイル名の末尾に特定の文字列（接尾辞）が追加されます。例えば接尾辞が “-wp” と設定され、アップロードする画像のファイル名が “image.jpg” の場合、WordPress にアップロードされた後のファイル名は “image-wp.jpg” となります。
  • none このオプションを選択すると、アップロードされる画像のファイル名は変更されず、そのままの状態で WordPress にアップロードされます。接頭辞や接尾辞の追加は行われません。

• Site Url WordPress の URL。相対 URL を生成するために使用されます。

• Slug Keys スラッグから ID への変換リスト。例えば、カテゴリーやタグのスラッグを ID に変換する場合に使用されます。

• Slug Separator 追加されるファイル名のセパレータを指定します。

• Suffix Featured Image Slug アイキャッチ画像のスラッグの接尾辞を設定します。

• Type Attached Image Slug 添付画像ファイル名の処理ルールを指定します。

• Use Linkable Image Markdown で挿入された画像が HTML に変換されるときに、img タグがクリック可能なリンクとして変換されることを意味します。

MD ファイルを作成し記事を投稿

実際に Markdown ファイルを作成し、 WordPress に記事を投稿してみましょう。

1. Open Folderをクリックします。

2. Markdown を保存するフォルダーを選択します。 ここでは、C:\Wordpress_Post_testを選択します。

3. ファイルを新規追加ボタンをクリックし、 Markdown ファイルを作成します。 ここでは、Wordpress_Post_test.mdを作成します。

4. 作成したファイルに Markdown 形式で内容を記載します。

   # Wordpress_Post_test h1 のタイトル
   
   ## Wordpress_Post_test h2 のタイトル
   
   Wordpress_Post_test の内容

5. メニューバーの[表示] - [コマンドパレット]を選択する (Ctrl+Shift+P)。

6. パレットに [post] と入力して拡張機能 [WordPress Post: Post] をクリックする。

7. 正しく投稿できたメッセージが表示されます。 記事の ID も表示されます。

WordPress で投稿した記事を確認する

1. WordPress の管理者画面から [投稿] を選択し、先ほど投稿した記事があることを確認します。
2. 投稿記事を選択すると、Markdown 形式で書いた内容が HTML 形式に変換されていることが分かります。 パーマリンクは Markdown ファイルの名前と一致します。