VS Code機能拡張WordPress Postの改造一旦終わり

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket

#test #Polylang #GOLDTHEME #GOLDBLOG #VSCode機能拡張改造 #VSCode機能拡張 #テーマ改造

　こんにちは、如月翔也（@showya_kiss）です。
　今日はちょっとマニアックと言うか、こんな使い方をしているのは世界中に僕しかいない気もするんですが、今の使用環境に合わせてVS Codeの機能拡張であるWordPress Postを改造して自分向きにしたので、それを配布するのと「どういう条件の人に使えるか」、実際の使い方をご説明します。

　その前段階として、僕がVS Codeで何をしているかを説明しますね。

僕はVS Codeはブログ専用に使っています。

　僕はブログをWebブラウザ上で書くのがどうしても嫌で（迂闊な更新・戻るボタンで書いた内容が全部消えるので）、どうしてもオフラインのアプリでブログを書きたいんです。
　そして僕はクロスOS使いなのでWndows/Mac/Linuxで使えないと嫌で、ブログエディタ自体はマークダウンで書ける「Typora（タイポラ）」という3台まで使えて15ドルという使いやすいマークダウンエディタを入手したんですが、それで書いたマークダウンをどうやってWordPressに流し込むか、について考えました。
　HTMLに変換してWordPressの編集画面に流し込むのも考えたんですが、面倒臭いかつクライアントを使う意味がない＋ソースとなるマークダウンファイルの管理が面倒くさいんです。
　そこで色々調べた結果、VS Codeに機能拡張WordPress Postを入れればファイル管理はVS Codeで、そこからTyporaを開いてブログを書いて閉じて、VS Codeに反映されるのでそこからWordPress Postを使って更新すればいいのです。楽勝です。しかもGitHubを噛ませればソースをバックアップできます。

　ちなみに本来VS Codeはコーディング用で、僕はコーディングもするんですが、コーディングはCursorでやっているので完全に使い分けられます。

しかしWordPress Postでは足りない点があります

　しかしVS Codeの拡張機能、WordPress Postでは足りない点があります。
　最低限で言うと

• アフィリエイト・アソシエイト用のHTMLタグが入れられない

　これはマークダウンの仕様なので仕方がないんですが、結局これを刺すためにWordPressのエディタ画面に入るなら最初からエディタ画面に入っても大差ありません。
　故に、同じ事を考えたmasaさんという方が「<!–!」と「!–>」の間に挟んだ部分だけ生のHTMLとして吐き出してくれる機能拡張の改造版を出してくれていたんですが、恐らくVS Code側の変更によって使えなくなってしまいました。

　ので、楽していないで自分に特化した機能拡張をカスタマイズと言うか改造する事にしました。条件は次に挙げます。

改造WordPress Postに必要な機能

• 生HTMLを「そのまま」出力できる調整。AIとかに読ませる時に「<!–!」と「!–>」を挟むとコメントアウト扱いになって毎回指摘されるのがうざいので。
• WordPressのプラグイン「Polylang」用の「language」ヘッダの追加。今英語を使って日本語と英語の二本立てで記事を書いているのですが、Polylangを使うと言語で画面をスイッチしたり、「同じ記事」の英語と日本語をスイッチできるので必要で、その時に記事の言語を伝えるのに「language」ヘッダが必要なのです。
• カテゴリの裏技的実装：Polylangを無料版で使うとAPI経由の投稿でカテゴリを蹴って全部「未分類」に放り込むという荒業をかますので、それを避けるためカテゴリを直接渡さず別の方法で渡しています。
• 「meta_description」ヘッダの追加。FIT社のテーマ、GOLD BLOGやGOLD THEMEを使っている人の場合、「meta description」がSEOに大事なんですが、これそのまま投げても何故かテーマ側で受け取らないんですよね。なので、テーマ側にphpを追加して（子テーマのfunctions.phpに追加して保存するだけです）受け取れるようにします。そしてヘッダから記入すればテーマ側で反映され、記事側にも反映されます。
• 日本語では使用が難しいMDのイタリック処理を排除。他の言語と違い日本語は単語で区切らないため、例えば僕のTwitterのID「showya_kiss」のアンダースコアがMDでイタリックを示すアンダースコアの片割れなのかどうかが改行が来るまで判断できないんです。*も一緒です。なので、意図してイタリックを使う場合iタグを使うように改造します。

改造の結果こうなりました。

　改造の結果こうなりました。

• 基本マークダウンで書いたものがWordPressに投稿されます。
• ただし改行はただの改行でOK、pタグを入れたければ空行を挟んで下さい。
• 行頭字下げはCSSが原則ですが、CSSであらゆる字下げに対応するのは無理なので、CSSに依存せずどこの行頭に半角・全角スペースを入れても反映します。
• Fit関係のメタタグである「meta description」を投げられます。「meta_description」で投げて下さい。
• hashtagに記載されたタグは文頭に記載されます。告知する時に本文を引用するとハッシュタグが乗るので宣伝効果があがるはずです。
• MDでは本来無視するHTMLタグを拾って反映します。アフィ系を貼ったり、日本語と相性の悪いイタリック文字はMDじゃなくでiタグを使う想定です（日本語には単語区切りがないのでイタリックのアスタリスク1文字・アンダースコア1文字が非常に相性が悪い）。
• あくまで僕が使いやすくするためのものなので機能セットが特殊よりです。

　ヘッダの書き方が変わります。カテゴリが[]内にカンマ区切りで入るようになります。

---
title: "記事タイトルを入れます。"
slug: "同名スラッグがある場合記事を上書きします"
date: "2025-09-26T23:40:00"
language : "ja"
categories: [テスト,ハック,雑記]
meta_description: "記事の要約を入れます。160文字程度が出来説です"
hashtag: "#Polylang #Test #カテゴリ #暫定対応 #VSCode機能拡張改造 #VSCode機能拡張 #テーマ改造"
status: publish
---

　この拡張機能で配っています。これならPolylangを入れてもカテゴリ設定が可能です。
※この機能拡張は問題が見つかるたびに書き換えているので、引き続き使おうと思う方はファイルリンクを保存するのではなくこのページをブックマークしておいて、毎回リンクが書き換わっているのでリンクからダウンロードし直して下さい。
　VS Codeへのインストール方法は「拡張機能」を開いて左上の「…」から「VSIXからのインストール」で今ダウンロードしてきたファイルを選んでインストールして下さい。拡張機能の再読み込みを求められるので許可すればもう使えます。
　meta_descriptionを使いたい場合、使いたいテーマの子テーマでfunctions.phpを開いて下記を貼り付けて保存しておいて下さい。

// FITテーマのSEOメタデータをREST APIで更新可能にする
add_action('init', function() {
    register_meta('post', 'fit_seo_description-single', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        }
    ));
});

　なお、VS CodeでWordPress Postを使って投稿するにはワークスペースに「〜.code-workspace」ファイルが必要なんですが、以下書式が必要になるので注意して下さい。普通のWordPress Postと設定名・設定内容が変わります。

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"wordpress-post.apiUrl": "https://devildaredevil.com",
		"wordpress-post.username": "ユーザー名",
		"wordpress-post.password": "アプリパスワード"
	  }
}

　具体的に違う部分は「settings」の以下部分です。

• “wordpress-post.apiUrl”: ドメインまでで構いません。
• “wordpress-post.username”: ←設定名が変わっています。
• “wordpress-post.password”: ←設定名が変わっています。

　この点だけ注意して修正して頂ければ動くと思います。

　実は僕はプログラムのロジック自体は理解できる（いくつかの言語を使えるので）んですが、機能拡張を真面目に触ったことがなかったので、コーディング自体はAIであるClaude Proに大部分をやって貰っています。「AIすごい！」と思うかもしれないですが、すごいです。主に40回も同じコードを修正させられてキレない点が。
　直している間に前提を忘れ、コードを読み返さないでエラーから逆算して問題を解決しようとしてコードを複雑化させ、実は問題になっていた部分はそのまま放置、あまつさえ自分で吐いたコードで{と}のペアが取れていないなど素晴らしい結果を残してくれるので、ツッコミが追いつきません。

　ポイントは面倒くさがらずに仕様書をちゃんと書いて、「この仕様で作っていて、今ここまではできている。ここが出来ていないでこう言う結果になってしまっているが、コードを確認の上既存の機能を失わない形で修正してくれ。修正の前に問題の原因と直すアプローチを表示し、許可を得てからコードを書いてくれ」まで言わないと駄目です。それで提示してくる原因に納得感があればコードを書いてもらい、明らかに駄目な事をいってくる場合が多々ある（その方向性だとさっき直した部分が巻き戻って問題が再発する、など）のでその場合それを指摘してやりなおし、です。
　とりあえずコードを書かせるとトークン（コインを連想して下さい。コードを描かせるたびに大量のコインが消費され、使い切ったら補充まで使えないのです）を無駄に消費した結果「あと一歩」のところでトークンが切れて2〜3時間待たされるので精神衛生上よろしくないです。

　AIの素晴らしい部分はどれだけ書き直させてもキレない部分なので、冷静に話を聞いて冷静に訂正して冷静に何度も書かせればいつかは正解にたどり着くので、時間はかかりますが自分で学習してゼロからスクラッチするよりは早いです。
　また人の作ったコードを修正する場合言語を完全に理解していないとどの行でなにをやっていて結局今読んでるコードは何をする処理の何のパーツなんだ、と言う部分でとても大変なので、フルスクラッチするなら自力でもいいんですが、お手本を修正するならAIの方が圧倒的に早いですね。

　という話でした。
　ちなみにこの記事、いつも使っているHHKB Studioではなく、新品のHHKB HYBRID Professionalで打っているんですが、打鍵感が最高です。背筋に鳥肌が立ちます。Studioのスコスコ感も素敵だったんですが、HYBRIDは押し切ったらちょっとだけ「カチャカチャ」言うのです。この音。この音好きなんですよ。めちゃくちゃテンション上がります。

　というわけで、あくまで自分向きの機能拡張改造ですが、まあ必要な方がいらっしゃったら持っていってください。

　では。

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket