Wordpressのブログ記事をvimからMarkdown記法で投稿する

当ブログはWordpressによる運営をしています。 今までビジュアルビュワーを使ってコツコツ記事を投稿してきました。 しかし普段使うEditerはvimですし、ささいなメモ書きだろうとMarkdown記法で書いているため『Markdownで書いたデータをvimで投稿してぇ』という願望が湧くのです。  

というわけで、これを実現するための努力をした結果、やっとそれらしい環境を整えることに成功しました。 もちろん、この記事もMarkdownで書いてvimから投稿したブログ記事です。  

この環境を作り上げるまでにしてきたことの防備録や、知識の共有を目的に記事を作成しました。 同じような思いを抱くvim初心者の役に立てれば幸いです。  
 

"VimWordPress"を導入する

初めにvimからブログサイトへアクセスを可能にするプラグインを導入します。 そのプラグインとはVimWordPressというものです。  

導入方法はプラグインの管理方法によって異なります。 こればっかりは人それぞれなので各自で調べてください。 私の場合はvimのプラグイン管理にNeoBundleを採用しているため、.vimrcに以下のような記述をしてインストールしました。  

NeoBundle 'MrPeterLee/VimWordpress'

無事インストールできたのであればホームディレクトリに.vimpressrcというファイルを作成します。 このファイルにはvimでアクセスして編集ブログの情報を記入します。 以下の例のように記述しましょう。  

[Blog0]
blog_url = http:// https://hackheatharu.xyz/
username = **********         (ブログのユーザー名)
password = **********         (ブログのパスワード)

  これで準備完了です。 vimから:BlogListとコマンドすることで記事一覧が表示されます。 この一覧表示から記事を選んでEnterを押すとその記事が開き、deleteを押せば記事をゴミ箱に移動させます。  

VimWordPressで使用できるコマンドは、自分が調べた限りだと以下の通りです。 また、基本的に以下のコマンドは:BlogListで記事を選ぶか:BlogNewで記事を作成するかしないとコマンドは使えない。  

実は上記リスト以外にもコマンドは存在しますが、バグで動かない、もしくはそんなに使わないものばかりなので割愛しました。 逆に言うと、これらを使えれば十分です。    

vimから記事を作成・編集してみる

記事を作成する時、最初の10行には記事の設定を記述する項目が設けられます。  

"=========== Meta ============
"StrID : 
"Title : 
"Slug  :
"Cats  :
"Tags  :
"=============================
"EditType   : post
"EditFormat : HTML
"BlogAddr   : http://haya14busa.com
"========== Content ==========

StrIDは自動で割り振られるので記述することは無いと思います。 Titleはブログタイトルを記入してください。空白だとエラーになります。 Slugはパーマリンクです。 Catsはカテゴリです。自分がWordPress側で用意したカテゴリしか指定できません。 Tagsはタグです。これは書いたものをそのまま新規タグとして生成してくれます。 EditTypeで投稿記事か固定ページを選択しますが、基本いじらないでしょう。 BlogAddrも複数ブログを運営しない限り編集しないですね。

EditFormatに関してはバグがあり少々やっかいなので後述します。

あとはContent以下にブログ内容を記述していくだけです。 お使いのvim環境に合わせてHTMLで書いてもいいですしMarkdownで書いてもOKです。  

ただし、デフォルトではfiletypeが指定されていないはずなので:set filetype=markdownと形式を指定してから書こう。

"Markdown Editer"を使ってWordpress側でMarkdown形式に変換してもらう

ここまでの手順を終えたならばvimでブログ記事を投稿できるようになっているはずです。 が、肝心なMarkdown記法で投稿する設定が済んでいません。  

Markdown記法でpostしてもWordpress側はHTMLに変換してくれません。 このままではWordpressのテキストビュワーのような使い方で終わってしまいます。 なのでWordPress側のプラグインの力を借ります。  

検索すると多数のプラグインがありますが『Markdown Editer』を選んでください。 理由は２つあります。

1. ダウンロードして有効化するだけで良いから楽。
2. 他プラグインではBlogListで記事を取得するとHTMLに変換された状態で取得してしまうが、なぜか「Markdown Editer」のみMarkdown形式を保ったまま取得してくれる。

1の理由はともかく2が最も重要です。 2019年9月現在までにあるWordpressプラグインを一通り試したつもりですが、他のものでは文章がHTMLに変換されてしまうのです。 せっかくMarkdown記法で書いたものをHTMLで書き直す羽目になってしまいます。  

もし「Markdown Editer」を使うのが嫌であれば『下書きを.mdで別に保存しおく』ことが必要になってしまいます。 これはこれでめんどくさいと思いますので、特別な理由が無い限りは素直に「Markdown Editer」を使うことをオススメします。  

VimWordPressの注意点

実はWordpressプラグインに頼らなくてもMarkdown形式に変換する方法があります。 というのもVimWordPressには最初からその機能が備わっています。  

pip3 install markdown2 とコンソールからPython3にmarkdown2をインストールします。 BlogNewなどで記事を作成した際"EditFormat : HTMLの部分を"EditFormat : Markdownと変更したら、晴れてmarkdownで投稿できたはずでした。

が、残念ながらPython側でエラーが発生(たぶんバグ)するため使うことができません。 以下、参考サイト  

Pythonのソースをいじれば直せそうですが、前述した「Markdown Editer」で運用しちゃった方が楽です。 少なくとも私はPostする際、markdown形式の投稿が出来ればいいだけなので、どうしてもVimWordPressの機能を使いたいわけじゃなかったので。

「Markdown Editer」でコードハイライトが中央揃えになる不具合

「Markdown Editer」を使用する際、１つだけ沼にハマったことがありました。 コードハイライトが中央揃えになってしまう不具合に遭遇しました(2019/8時点)。

この不具合については以下のサイト様を参考にWordPress側でfunction.phpに2行のコードを加えることで解決できました。

参考サイト 追加するコード

add_filter( 'markdown_editor_highlight', '__return_false' );
add_filter( 'markdown_editor_clipboard', '__return_false' );

Markdownで作成したリンクを別タブで開くためには

Markdownでリンクを挿入するタイトル と記述しますが、このままだと今見ているタブにリンクのサイトが表示されてしまいます。 これを解決するには

<a href="URL” target=”_blank” rel="noopener noreferrer”>タイトル</a>

とHTMLで記述しなければいけないのです。

流石にめんどうなのでWordpressのheader.phpにMarkdownで書いたリンク文字を別タブで開くものとして認識してもらうことにします。

やり方は以下を参考にしました。

使ってみた感想

動画・画像のURL記述、プラグイン特有の記述等はWordpress側でやった方が楽です。 ですが、やはりVimでブログ記事を書けるというのは楽です。 とても作業が捗ります。

最大のメリットはブログ作成時、基本vimしか立ち上げないのでくっそ軽いです。 当然といえば当然ですが外出時のクソ雑魚デザリングや貧弱Wifiのような環境なぞvimで文章を書くだけなら大した問題じゃありません。 個人的にはvimerがWordPressでブログ更新する最適解かなと思います。