記事投稿時の画像の差し替えが面倒(WordPress, VSCode, マークダウン)

全記事を読みたい場合はこちら → ブログ執筆環境改善プロジェクト

掲題の通りです。僕だけでしょうか？

WordPressの投稿機能で直接記事を作成せず、
一度ローカル環境で記事を書いてWordPressの投稿機能から投稿する人は
みんな同じ問題を抱えているかと思っています。

記事を作成しているときはローカル環境だけで完結したい。
それはVSCodeとマークダウンで実現できます。

しかし、ローカル環境にある画像をそのままアップしても階層が異なるのでリンク切れが起きます。
そのため記事投稿時に一つずつ画像のリンクを差し替えていかなければなりません。
本記事ではリンク差し替えの負担を軽減したいと思います。

おおまかな手順

• Paste Imageの設定を本気でやる
• VSCodeのマクロ機能と正規表現を使って一括変換
• マクロをショートカットに登録
• 微調整

詳細手順

Paste Imageの設定を本気でやる

考え方

コピペした瞬間に変更不要なパスになってくれればヨシ。
イメージとしてはこんな感じです。

末尾の枝番は-1,-2,-3・・・となってほしいところですが、
Paste Imageにインクリメントのようなものがなく、
今回は時分秒にします。

では、Paste Imageの設定をしていきます。

ファイル→ユーザー設定→設定

ファイル→ユーザー設定→設定

Paste Image: Default Nameの変更

Paste Image: Default Nameを以下の内容に変更

${currentFileNameWithoutExt}-HHmmss

しかしながらやはり時分秒だと飛び番で数字の桁数が多く管理しにくい。

気に入らない場はコチラを変更します。

Paste Image: Show File Path Confirm Input Boxの変更

Paste Image: Show File Path Confirm Input Boxにチェックを入れます。
画像を貼り付ける際に保存するファイル名を確認してくれます。

Paste Image: Pathの変更

Paste Image: Pathを以下の内容に変更

${currentFileDir}\img-${currentFileNameWithoutExt}

VSCodeのマクロ機能と正規表現を使って一括変換

VSCodeに標準のマクロ機能はまだ無いみたいですね。
以下の順でやっていきます。

1. 拡張機能ssmacroをインストール
2. マクロを作成
3. マクロをキーバインディングに追加
4. マクロを実行してみる

1. 拡張機能ssmacroをインストール

2. マクロを作成

任意の場所に任意のファイル名でマクロファイルを作成します。

参考までに僕のファイルパスはこんな感じ

C:\Work\ブログ\macros\imagepath_replace.json

作成した.jsonファイルにマクロ内容を記述します。

[
    {
        "command": "ssmacro.replace",
        "args": {
            "info": "replace imagepath",
            "find": "(!\\[.*\\](\\(.*\\)))",
            "replace": "[$1]$2",
            "all": true,
            "reg": true,
            "flag": "gmi"
        }
    }
]

3. マクロをキーバインディングに追加

キーボードショートカットを開く

keybindings.jsonを開く

keybindings.jsonに以下を追加
※僕はCtrl+Alt+/をショートカットに割り当てました。適宜読み替えてください。
※先程作成したマクロファイルのファイルパスも適宜読み替えてください。

    {
        "key": "ctrl+alt+/",
        "command": "ssmacro.macro",
        "args": {
            "path": "C:\\Work\\ブログ\\macros\\imagepath_replace.json"
        }
    }

僕は最後にこんな感じで追加しています。

4. マクロを実行してみる

割り当てたショートカットを実行
僕の場合は、Ctrl+Alt+/

微調整

以下の順でやっていきます。

1. 画像ファイルをWordpressに登録します。
2. ファイルパスをブログ上のものに変更

1. 画像ファイルをWordpressに登録します。

WordPressにメディアを追加

この辺りからパスをコピー

僕のものは以下の感じですが、http(s)://(サイトドメイン)/wp-content/uploads/年/月の部分をコピーしておきます。

https://www.premium-tsubu-hero.net/wp-content/uploads/2021/06/wordpress-vscode-blogenv-02-185253.png

VSCodeのパスの以下の部分を

先程コピーしたhttp(s)://(サイトドメイン)/wp-content/uploads/年/月/に置き換えます。

Ctrl + Shift + Lで一気に選択。
Ctrl + Vで一気に置き換えが個人的に便利です。

まとめ

マクロのお陰で一番面倒だった
ファイルパスの差し替えだいぶ楽になりました。

記事投稿時の画像の差し替えが面倒(WordPress, VSCode, マークダウン)

おわり