Emmetにも対応!カスタムHTMLブロックを見やすく拡張できるWordPressプラグイン「Custom HTML Block Extension」

Emmetにも対応!カスタムHTMLブロックを見やすく拡張できるWordPressプラグイン「Custom HTML Block Extension」

Emmetにも対応!カスタムHTMLブロックを見やすく拡張できるWordPressプラグイン「Custom HTML Block Extension」

Custom HTML Block Extensionは、「カスタムHTML」ブロックを拡張できるWordPressプラグインです。カスタムHTMLブロックの見た目を変えたり、Emmetを使えるようにしたり色々と拡張できます。

Custom HTML Block Extensionのインストール

インストール手順は以下の通りです。

ファイルをFTPでアップロードしてインストール

  1. Custom HTML Block Extensionをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Custom HTML Block Extensionを有効化します。

WordPress管理画面でインストール

  1. [プラグイン] – [新規追加]にアクセスします。
  2. 「Custom HTML Block Extension」で検索します。
  3. [今すぐインストール]をクリックして、Custom HTML Block Extensionをインストールします。
  4. [有効化]をクリックしてプラグインを有効化します。

Custom HTML Block Extensionの設定

プラグインを有効化したら、[設定] – [Custom HTML Block Extension]で各種設定を行います。右側にプレビューが表示されるので、プレビューを確認しながら設定していきましょう。

Custom HTML Block Extensionの設定
テーマ テーマの選択
インデントの幅 インデントの幅を指定
インデントの種類 タブかスペースを選択
Emmetを有効にする チェックを入れるとEmmetが有効化
フォントファミリー フォントの種類を選択
フォントの太さ フォントウェイトを指定
フォントサイズ font-sizeを指定
行の高さ line-heightの指定
折り返し 折り返しのオン/オフを切り替え
ミニマップを有効にする チェックを入れるとミニマップが有効化
カーソルのスタイル カーソルのスタイルを選択
自動インデント 自動インデントの種類を選択
サジェストを有効にする チェックを入れるとサジェスト機能が有効化

[アドバンスド]タブでは、さらに細かく設定を変更できます。

Custom HTML Block Extensionのアドバンスド設定

また、[オプション]タブでは、Custom HTML Block Extensionを有効化するエディタの種類を選択できます。

拡張を有効化するエディタの種類

Custom HTML Block Extensionを有効化した後のカスタムHTMLブロック

Custom HTML Block Extensionを有効化した後のカスタムHTMLブロックは、以下のようになります。

Custom HTML Block Extensionを有効化した後のカスタムHTMLブロック

格段に見やすくなりますし、Emmetも使えて便利ですね。

なお、Classic Editor(旧エディタ)にも対応していて、投稿エディタをテキストモードにすると、以下のようにCustom HTML Block Extensionの設定が反映されています。

クラシックエディタでのCustom HTML Block Extensionの反映

あとがき

カスタムHTMLブロックをよく使うサイトでは、インストール必須といっても過言ではないですね。

ちなみに、設定画面もかなり作り込まれていて、設定の横にある情報マーク(iのマーク)をクリックすると、説明文と動画が表示されます。細かい配慮が素晴らしいです。

設定画面のヘルプ

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です