まだWordPress5.xのエディタで消耗しているの?

Gutenbergよ、お前とは仲良くなれそうにない

WordPress5.0にアップグレードしたらとんでもないことになった。
エディタが全く使い物にならなくなってしまった。
こんな効率の悪い状態で技術ブログに時間を費やしたくないので、以前から考えていたVS CodeでMarkdownを書いて、Wordpressにそのまま投稿出来る仕組みを準備した。

第一段階:Markdownで投稿出来るようにする

JetPackプラグインのインストール

JetPackプラグインっていろいろあるけど、とりあえずこいつを入れておけばいいです。
やりたいことはMarkdownで投稿出来るようにする事だけど、
他に色々機能がついてきて速度低下がちょっと気になる。この辺りは顕著に見られたらチューニングしていく。

ユーザ登録

ちなみに入れただけでは使えません。
Wordpressのアカウントを持っていればそれ経由で登録出来るのでやっておきましょう。
そんなに難しい事はなかったはず。

Markdownの有効化

ダッシュボードから JetPack -> 設定 にあります

動作確認

以下の文章をコピペで貼り付けてみる

ちなみにエディタは「ビジュアルエディタ」ではなく、「コードエディタ」で貼り付けたほうがうまくいきやすいです。

第二段階:Crayon SyntaxHighlighterを使う(必要な人のみ)

この状態だと Markdown書式でソースコードを書いてもスタイリッシュになりません。
元々Crayon SyntaxHighlighterを使っているので、そのまま使い続けます。
(JetPackプラグインとも相性が良いんだってさ)

Crayon SyntaxHighlighterプラグインのインストール



こいつ(Crayon SyntaxHighlighter) を入れてね。

特殊文字のエスケープ解除

この状態で

テキストを書いても「<」や「>」がエスケープされてしまい、正常に表示されない場合があります。

そういった場合はCrayon Syntax Highlighterのプラグインにちょっと手を加えて上げる。

プラグインの編集方法

WEB管理画面から編集出来ます。
ダッシュボード -> プラグイン -> プラグイン編集

ページ内右上の「編集するプラグインを選択」にて「Crayon SyntaxHighlighter」を選んで「選択」をクリック。

以下、2つのファイルを編集してください。

crayon_formatter.class.php

550行目付近の処理をコメントアウトします。

langs/default/operator.txt

※フォルダの中に入っているのでたどっていく

以下を削除します

第三段階:VSCode -> Github -> WordPressで継続的デプロイ環境にする

ここからが本番。 Githubに記事投稿用のリポジトリを用意しておき、masterブランチにpushするとwordpressに自動で投稿してくれる仕組みをセットアップします。

事前準備

  • githubでリポジトリを作成
  • リポジトリに対して何らかのデータ(README.mdがお勧め)を作成しておき、initial commitをしておく。

パーソナルアクセストークン(Personal access tokens)の作成

Githubにてトークンを生成します。

Settings -> Developper Settings -> Personal access tokensでトークンを作成する。

(Generate Token)から。

  • repo 内にある「public_repo」にチェックをつける
    生成されたキーをコピーします。次の手順で使用するのでどこかにペーストして覚えておいてください。

wordpress-github-sync のインストール


こいつをインストール。

wordpress-github-sync の設定

Wordpressダッシュボード -> 設定 -> Github sync から設定へ。

  • Github hostname : 特に変更の必要はなし
  • Repository : ユーザ名とリポジトリ名を組み合わせて入力します。 例えば私のユーザ名は「killinsun」で、作成したリポジトリ名が「blogPosts」であれば、 「killinsun/blogPosts」になります。
  • Oauth Token: 前述した手順で作成した「パーソナルアクセストークン」です。 先程コピーしておいたものから貼り付けます。
  • Webhook Secret : 自分で好きな文字列をパスワードのように指定します。(次の手順で同様のものを入れるので忘れずに)
  • Default Import User : Githubリポジトリに投稿された記事をどのWordpress投稿者として作成するか。 選ぶ。
  • Webhook callback : 自動で生成されているので、これをコピーして次の手順で使用します。

次の手順でExport to Githubをする前に必ず「変更を保存」を行っておく

リポジトリにWebhookを設定

作成しておいたリポジトリを開く -> リポジトリのSettings -> Webhooks -> Add webhook

  • 前段の手順で生成された 「Webhook callback」のURLです。
  • Content typeは application/jsonを選択
  • 前段の手順で指定した「Webhook Secret」と同じ値です。
    その他はデフォルトで問題なし。

両方の設定が保存出来たら「Export to Github」

wordpress-github-syncの設定画面で「Export to Github」をクリックすると、既存のWordpress記事の内容がGithubリポジトリにpushされます。
逆にImport from Githubは手動でGithubリポジトリからWordpressに対して同期をかけます。

投稿してみる

基本以下のような形で投稿しています。
1. リポジトリをローカル上にクローン
2. リポジトリ直下に「適当な名前.md」で新規Markdownファイルを作成
3. Markdownで記事を書いていく

Markdownファイルの先頭に入れる内容

以下のパラメータの挿入が必要です。

  • post_title: 記事名
  • layout: たいていの人は「post」のままでOK. 他に何がサポートされているのかよくわからない。多分ここ見れば幸せになれるはず。
  • published: true=で公開 false=下書きのまま
  1. コミットしてプッシュする
  2. 記事のタグやカテゴリ、画像の挿入はwordpress上で調整

修正方法は?

  • _drafts に下書き中のMarkdownファイル
  • _pagesに固定ページのMarkdownファイル
  • _postsに公開中のMarkdownファイル

それぞれ先頭に日付があるのでそれを頼りに編集します。。ただし記事名に日本語が含まれていると正しく表示されないのでその辺りは注意。(記事内の日本語は正しく表現されている)

これらのファイルを編集後に再度コミット・プッシュすることでWordpressにも反映されます。すごい。とても手軽・・・

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください