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

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

ボタン

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

php

css

サンプル

メモ

php

css

サンプル

注意書き
注意
注意書きのテスト。

補足情報
補足
補足情報のテスト。

ボックス

php

css

サンプル

タイプ1(タイトルが枠に囲われている)
タイプ1
ボックスタイプ1のサンプル
タイプ2(左上に飛び出したタイトル)
タイプ2
ボックスタイプ2のサンプル

カード(関連記事)

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す