WordPressのエディタ機能をカスタマイズする方法

カードやボックスなどの装飾を実現するエディタのカスタマイズ方法です。プラグインはAddQuicktagとClassic Editorを使用します。

エディタが Gutenbergだと今のところクイックタグが使えないので、Classic Editorで旧リッチエディタのクラシックエディタを使用できるようにします。グーテンベルグのエディタは「ブロックエディタ」と呼ばれています。

ブロックエディタとクラシックエディタ―設定

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

まずは必要なプラグインをインストールします。

テキストエディタのみで記述する場合はプラグインを使わずコードの記述量も少なく追加可能ですが、ビジュアルリッチエディタを使用する場合は、プラグインで対応した方がシンプル。

装飾用のショートコードを追加

ショートコードで対応します。ビジュアルリッチエディターでデザインを確認しつつ記事を書けるようにしようとしたのですが、エンターキーを押した際にブロック要素が2分割されてしまったり、ボックスがエディタの一番上に行ってしまうなど煩雑でしたので、プレビューで確認することにしました。

アイコンにはFont Awesomeを使っています。

ボタン

グーテンベルグではボタンを追加する機能が追加されていますが、旧エディタの場合は追加する必要があります。

php

css

サンプル

[btn href=”https://officetnk.com/”]ボタンのテキスト[/btn]

メモ

php

css

サンプル

注意書き

[memo type=”alert”]注意書きのテスト。[/memo]

補足情報

[memo type=”info”]補足情報のテスト。[/memo]

ボックス

php

css

サンプル

タイプ1(タイトルが枠に囲われている)

[box type=”box1″ title=”タイプ1”]ボックスタイプ1のサンプル[/box]

タイプ2(左上に飛び出したタイトル)

[box type=”box2″ title=”タイプ2”]ボックスタイプ2のサンプル[/box]

カード(関連記事)

コメントする