a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

VSCode で書いた Markdown を WordPress に投稿する

f:id:ninna2:20170409134909j:plain:w360

前回は、VSCode の Markdown Preview を WordPress の自分のサイトのイメージのスタイルに変更する方法について記載しました。これでVSCode で実際のサイトのイメージをプレビューしながら投稿記事の作成が行えるように環境が整いました。今回は、VSCode で書いた記事を WordPress に投稿していく方法について記録しておこうと思います。

前回の記事は、下記です。参考にしてください。

ninna2.hatenablog.com

  1. “VSCode にネタを蓄積”
  2. “VSCode で記事に仕立て上げる" ←前回はここまで
  3. WordPressに投稿” ←今回はここから
  4. “体裁チェック”
  5. “公開”

投稿の方法には、色々なやり方があります。自分のやりやすい方法を行ってもらうのが良いと思いますが、私が今後こうやっていこうと思っている方法を記載しておこうと思います。

どのような方法で、WordPress に投稿する術があるのかを色々なサイトで調べてみました。おおよそこのあたりが、簡単に思いつく範囲ではないでしょうか。他にもっと良い方法があるかもしれません。

  1. VSCode で書いた Markdown を HTML 形式に変換して WordPress に張り付ける
  2. WordPressMarkdown プラグインを導入して、Markdown をそのまま転記(コピー&ペースト)する
  3. WordPressREST API で外部から記事投稿を行う
  4. VSCode の Markdown Preview をドラッグ&ドロップして WordPress に張り付ける

せっかく、Markdown で記事を書いているので、WordPress 上も Markdown 形式で持っておきたいです。編集する際も何かと楽ですので。というわけで、"WordPressMarkdown プラグインを導入して、Markdown をそのまま転記(コピー&ペースト)する" 方法を採用したいと思います。

WordPressMarkdown プラグインを導入する

まずは、WordPressMarkDown 構文で投稿記事を記載できるようにしないと始まりません。WordPressMarkdown プラグインは、さまざまなものがあります。私は、王道で“JetPack”をインストールして MarkDown 対応させています。"JetPack"自体は、Markdown 拡張プラグインがメインではなく、"訪問者の統計情報表示、セキュリティサービス、画像配信の高速化、そしてトラフィック増加促進といった機能を持つ 無料のプラグイン"です。入れておいて損はないと思います。

プラグインの導入方法は、さまざまなサイトで紹介されていますので、今回は割愛します。

プラグインが有効化できたら、JetPack の “設定” から “Writing"、"Markdown” を有効化しておきます。これで記事を書く際に Markdown 構文が使用できるようになります。

f:id:ninna2:20170409004455j:plain:w360

WordPress に画像ファイルを事前にアップロードしておく

VSCode で書いた記事を、WordPress に投稿した際にどうしても発生してしまう問題、それは画像参照先が見つからない問題です。このいい解決策は模索中です。まだいい解は見つかっていません。

ですので、とりあえず一番オーソドックスであろう方法で今は乗り切ろうと思います。

WordPress の画像アップロードは、説明するまでもないと思いますが、管理画面から"メディア" - “新規追加” でドラッグ&ドロップするだけです。

f:id:ninna2:20170409004458j:plain:w360

アップロードが完了したら、画像ファイルのURL情報を確認しておきます。後で使います。私のアップロードしたファイルは、"http://ninna2.wpblog.jp/wp-content/uploads/2017/01/wp_vscode_sync_2_1.jpg"というURLになっていました。

f:id:ninna2:20170409004503j:plain:w360

投稿記事のファイル参照パスを変更する

画像のアップロードが終わりましたが、このまま Markdown を投稿しても画像の参照先が誤っているので、正しく表示されず、投稿後にちまちま修正を行わないといけなくなります。ですので、VSCode側で、一括置換を行っておきましょう。

先ほど確認したURLのディレクトリパス部分が置換後のパスになります。私の場合、ローカルの VSCode で記事を書いているときには、imagesフォルダに画像を入れて参照しているので、基本的に “images/wp_vscode_sync_2_1.jpg"の様な参照パスになっています。

これを、一括置換で、変更しておきます。

具体的には、"images/“ を"http://ninna2.wpblog.jp/wp-content/uploads/2017/01/"に置換するだけです。VSCodeには、高度な置換機能が備わっているので、[ctrl] + H で置換するだけです。

既に、Web上にファイルをアップロードしているので、インターネットにつながっている限りは Markdown Preview でも参照切れにはならないはずです。

VSCode で書いた MarkdownWordPress

ここまできて、やっと、VSCode で書いた Markdown を、WordPress 側に張り付けていきます。ただ単にコピー&ペーストするだけです。ただし、タイトルはタイトル欄に、本文は、本文欄に貼り付けます。説明するまでもないですね。1点注意するとすれば、ビジュアルでなくテキスト側に張り付けないといけないことぐらいです。

f:id:ninna2:20170409004500j:plain:w360

体裁チェックと公開

最後、必ず体裁のチェックをプレビューで行い、表示に問題がなければ、公開します。長かったですが、VSCodeで記事を書いて WordPressへ公開していくまでの一連の流れがこれでできそうです。もっと効率の良い方法が見つかれば、また記事にしたいと思います。いつか、Rest API を使って VSCode から直接アップロードみたいなことを実現できればといいのかなと思ってます。