Devil！Daredevil！！ -dev challenge-〜魔王のハック、あるいは失敗日記〜

VS Code用機能拡張「MD to WordPress Post」をアップデートしました。 - Devil！Daredevil！！ -dev challenge-

#VSIX #WordPress #VSCode #Cursor #AI開発 #テスト

　こんにちは、如月翔也（@showya_kiss）です。
　今日はサイト運営にYOASTを入れたので、今開発しつつ自分も使っている「マークダウンを使って書いた記事を」「VS CodeやCursorで」「WordPressに投稿する機能拡張」（一応MD to WordPress Postと名付けています）をYOASTに対応させたので機能拡張を配布します。

目次 Outline

MD to WordPress Postで何ができるか

　機能拡張「MD to WordPress Post」では、VSIXを配布するのでそれを使うことによりVS CodeやCursor、VSIXが使えるVS Codeの分岐ツールであれば、以下の機能が使用できます。

  • マークダウンで書いた記事をWordPressに送る事ができる
    　これであなたのVS CodeやCursorがブログツールに早変わりです。機能拡張でマークダウンファイルを好きなエディタで開くと楽しいですよ（Typoraとか）。
  • VS Code準拠なのでブログ記事をGitHubで管理できる
    　GitHubはドキュメント管理システムなので、ブログ記事も管理できます。記事バックアップも取れますし、GitHubである以上更新の差分確認できるので、ブログアプリとして優秀です。
  • FIT社のWordPressテーマ「GOLDMEDIA」「GOLDBLOG」に対応しています
    　FIT社のWordPressテーマ「GOLDMEDIA」「GOLDBLOG」に必要となる「meta_description」をYAMLに書いて送れます。
  • WordPressのプラグイン「YOAST」に対応させました。
    　WordPressのプラグインである「YOAST」に対応させました。「YOAST」に必要となる「meta_description」（これはGOLDMEDIA/GOLDBLOGと共通の値を使います）と「focus_keyphrase」をYAMLに書いて送れます。

MD to WordPress Postを使う前に

　MD to WordPress Postを使う前に、「.code-workspace」などの設定ファイルに以下の設定を行い、そのワークスペースを開く必要があります。

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "mdToWp.username": "UserName",
        "mdToWp.siteUrl": "https://exsample.com",
       "mdToWp.applicationPassword": "XXXX XXXX XXXX XXXX XXXX XXXX",
       "mdToWp.defaultStatus": "draft",
        "mdToWp.postApiPath": "/wp-json/wp/v2/posts",
        "mdToWp.pageApiPath": "/wp-json/wp/v2/pages"
    }
}

　設定項目は以下です。

  • mdToWp.username
    　WordPressのユーザー名を入力して下さい。
  • mdToWp.siteUrl
    　サイトのURLを入力して下さい。
  • mdToWp.applicationPassword
    　アプリパスワードを入力して下さい。
  • mdToWp.defaultStatus
    　（省略可能）YAMLでstatusを指定しなかった時のステータスを記載してください。
  • mdToWp.postApiPath
    　（省略可能）記事を投稿する際のAPIの位置を記載して下さい。
  • mdToWp.pageApiPath
    　（省略可能）ページを投稿する際のAPIの位置を記載して下さい。

YOAST/GOLDBLOG/GOLDMEDIAのための設定（※必要な人のみ）

　YOASTやGOLDBLOG/GOLDMEDIAを使っている場合、このVSIXを使ってもYOASTにYAMLの値が届かずに破棄されてしまいます。
　そのため、YOASTに「フォーカスキーフレーズ」と「メタディスクリプション」、テーマに「メタディスクリプション」を届けたい場合、以下の手順を行う必要があります。
　ただし、この操作は危険を伴いますので、以下を理解できない場合は無理に実施しないで下さい。

  1. WordPressにログインし、管理画面に移動する
  2. 管理画面で「外観」から「テーマファイルエディター」に移動する
  3. 初めての人は警告が出るのでOKを押す
  4. 画面右側「テーマのための関数」をクリックする
  5. 開いているテキストエリアが以下である事を確認する（以下でない場合すでにこの操作で何かをしています） 
    <?php
//////////////////////////////////////////////////
//ユーザーカスタマイズエリア
//////////////////////////////////////////////////
  6. この記載を以下に書き換える（コピペを推奨します） 
    <?php
//////////////////////////////////////////////////
//ユーザーカスタマイズエリア
//////////////////////////////////////////////////
add_action('rest_api_init', function () {
  foreach (['post', 'page'] as $post_type) {
    register_post_meta($post_type, '_yoast_wpseo_focuskw', [
      'single'        => true,
      'type'          => 'string',
      'show_in_rest'  => true,
      'auth_callback' => function () {
        return current_user_can('edit_posts');
      },
    ]);
    register_post_meta($post_type, '_yoast_wpseo_metadesc', [
      'single'        => true,
      'type'          => 'string',
      'show_in_rest'  => true,
      'auth_callback' => function () {
        return current_user_can('edit_posts');
      },
    ]);
    register_post_meta($post_type, 'fit_seo_description-single', [
      'single'        => true,
      'type'          => 'string',
      'show_in_rest'  => true,
      'auth_callback' => function () {
        return current_user_can('edit_posts');
      },
    ]);
  }
});
  7. 画面下、「ファイルを更新」をクリックして読み込む

　これで準備はOKです。貼り付けるコードが「>が閉じてないのでは？」と思うかも知れませんがこれで正解です。安心して更新して下さい。

MD to WordPress Postで記事を書く際に

　MD to WordPress Postで記事を書く場合、まず文頭にYAMLを記載して下さい。
　YAMLは記事投稿とページ投稿で内容が異なります。

記事投稿時のYAML

　記事を投稿する際のYAMLは以下です。

---
type: post
language: "ja"
title: "サンプル記事"
date: "2026-03-20T14:30:00+09:00"
categories: [ "カテゴリ指定" , "複数指定可能" ]
slug: "Slug"
tags: [ "Tag" , "複数指定可能" ]
hashtag: "#VSIX #WordPress #VSCode #Cursor #AI開発 #テスト"
focus_keyphrase: "VS Code や　Cursor で　MarkDown を使って WordPress に投稿する VSIX"
meta_description: "VS CodeやCursorで、マークダウンを使ってWordPressに投稿ができる機能拡張を配布します。"
status: publish
---

　YAMLは「-」3個と「-」3個で挟む必要があります。
　各項目について説明します。

  • type
    　投稿タイプを指定します。投稿は「post」を指定します。
  • language
    　（省略可能）WordPressのマルチ言語プラグインの「polylang」を使っている場合、言語を指定します。
  • title
    　記事のタイトルを指定します。
  • date
    　記事の投稿日時を指定します。
  • categories
    　記事のカテゴリーを指定します。複数指定が可能です。
  • slug
    　（省略可能）記事スラッグを指定します。指定しなかった場合ファイル名がそのまま採用されます。
  • tags
    　記事のタグを指定します。複数指定が可能です。
  • hashtag
    　（省略可能）ハッシュタグという名前ですが、単に記事の1行目にこの内容が記載されるだけです。IFTTTなどでSNSに投稿する際、本文が読み込まれるので「#」付きの文字列を入れておくと勝手にハッシュタグになります。
  • focus_keyphrase
    　（省略可能）WordPressのプラグイン「YOAST」に送るフォーカスキーフレーズです。YOASTはこれを読んで記事の方針を確認します。
  • meta_description
    　（省略可能）記事のメタディスクリプションです。テーマGOLDMEDIA/GOLDBLOGを使っている場合この値を取り込んで記事を表示するため、SEOとして指定したメタディスクリプションが用いられます。
    　また同じ値がYOASTに送られ、記事の概略として扱われます。
  • status
    　（省略可能）記事のステータスです。draftを指定すれば下書きに、publishを指定すれば直接公開状態で投稿されます。省略された場合まず設定ファイルの「mdToWp.defaultStatus」の設定に従い、それもない場合は「draft」とされます。

ページ投稿時のYAML

　ページを投稿する際に必要なYAMLは以下です。

---
type: page
language: "ja"
title: "サンプルページ"
date: "2026-03-21T21:00:00+09:00"
slug: "Slug"
parent_slug: "Parent-Slug"
status: publish
---

　YAMLは「-」3個と「-」3個で挟む必要があります。
　各項目について説明します。

  • type
    　投稿タイプを指定します。固定ページは「page」を指定します。
  • language
    　（省略可能）WordPressのマルチ言語プラグインの「polylang」を使っている場合、言語を指定します。
  • title
    　ページのタイトルを指定します。
  • date
    　記事の投稿日時を指定します。
  • slug
    　（省略可能）記事スラッグを指定します。指定しなかった場合ファイル名がそのまま採用されます。
  • parent_slug
    　（省略可能）記事の親スラッグを指定します。
  • status
    　（省略可能）記事のステータスです。draftを指定すれば下書きに、publishを指定すれば直接公開状態で投稿されます。省略された場合まず設定ファイルの「mdToWp.defaultStatus」の設定に従い、それもない場合は「draft」とされます。

MD to WordPress Postの使い方

　MD to WordPress Postの使い方は以下のとおりです。

  1. 「拡張機能」から「VSIXからのインストール」でVSIXをインストールする
  2. 設定ファイル（code-workspace）に設定をする
  3. ワークスペースにマークダウンファイルを作る
  4. 作ったマークダウンファイルを開き、YAMLを記載する
  5. YAMLに続いて本文をマークダウンで記入し、保存する
  6. コマンドパレットから「Publish Current Markdown to WordPress」を実行する
  7. 記事が投稿される

　上記で投稿は完了です。
　保存したマークダウンを開いて更新し、再度「Publish Current Markdown to WordPress」を実行すれば内容が書き換わってWordPressに反映されます。

MD to WordPress Postの配布

　MD to WordPress Postは以下GitHubリリースページで配布しています。

【配布ページ】https://github.com/darktribe/MD-to-WordPress-Post/releases/tag/MarkDown

　配布ページ一番下にある「Assets」の中、「md-to-wordpress-post-1.6.6.vsix」をクリックするとVSIXがダウンロードされますので、それをお使いのVS Code/Cursorでお使い下さい。

　当機能拡張は別の開発者が開発してGitHubで公開している機能拡張を参考に設計し、主にAIを使って開発しています。
　AIを使ったものが受け入れられない方は、コードは公開していますので設計だけ参考にご自身で組んでも良いかと思います。

　なにかご希望やご意見などありましたら、当ページにコメントを頂ければ幸いです。コメント投稿にはメールアドレスの記載が必要ですが、私にはメールアドレスは公開されないため直接のお返事ができません。時間がある時にコメントにてご返答いたしますのでたまに返答がないかチェックして頂ければ幸いです。

この記事を書いた人 Wrote this article

如月 翔也 男性

著者記事一覧

関連記事 Related articles