WordPressの記事をHTMLで効率的に書く

  • 公開日:

この記事の目次

自分のブログくらいはHTMLで直打ちしたい

WordPressの投稿画面で記事を書くには、「ビジュアルエディタ」と「HTMLエディタ」の2種類があります。

私は普段からお仕事でコーディングをしているので、自分自身のブログ記事を書くときは「HTMLエディタ」にHTMLを直打ちしたいです。そのほうが速いですし、確実ですし。

ただ、WordPressのHTMLエディタは、AtomやSublime Textなどのテキストエディタのように使い勝手がいいものではありません。

テキストエディタでブログ記事を快適に作成する

Chromeの拡張機能と、テキストエディタ(AtomやSublime Text)のパッケージをインストールすると、Chromeのテキストエリア内の内容をテキストエディタでリアルタイムに編集することができます。

普段から使っているテキストエディタで編集ができるので、Emmetが使えてコーディング作業を速くできますし、シンタックスハイライトが適用されてコードも見やすいです。

今回は、AtomからChromeのテキストエリアを編集できる「Atomic Chrome」について説明します。

Atomic Chromeのインストールと設定

  1. Chromeの拡張機能「Atomic Chrome」をインストールします。
  2. Atomのパッケージ「atomic-chrome」をインストールします。

デフォルトでは、Markdownのシンタックスハイライトが適用されます。HTMLのシンタックスハイライトを適用させるためには、atomic-chromeの設定を変更する必要があります。

Atomの設定画面の[Open Config Folder]ボタンをクリックしてTree Viewを表示し、[.atom]→[packages]→[atomic-chrome]→[lib]→[ws-handler.coffee]を開きます。20行目に以下の記述があります。

extension = data.extension ? '.md'

これを次のように変更します。

extension = data.extension ? '.html'

Atomic Chromeの使い方

  1. Atomを起動します。
  2. ChromeでWordPressの投稿画面を開き、HTMLエディタ(テキストエリア)にフォーカスします。
  3. Chrome拡張機能の「Atomic Chrome」のアイコンをクリックします。

すると、Atomで新しいタブが表示されます。このタブで編集した内容はリアルタイムでWordPressの投稿画面に反映されます。

Sublime Textには「GhostText」

Sublime Textをテキストエディタとして使っている方も多いと思います。Sublime Textには、Atomic Chromeと同様のツールとして「GhostText」があります。「GhostText」については、以下の記事が参考になります。

【これ神】Chromeのテキストフィールド内の文字列をSublime Textでリアルタイムに編集できる拡張機能「GhostText」 | 和洋風KAI