Snow Monkeyでテキストエディタでも簡単にコンポーネントを追加できるようにしました

先日からモンキーレンチのキタジマさんが制作・販売しているSnow Monkeyという100%GPLライセンスのWordPressテーマに乗り換えました。

とても見栄えも良く、作り込まれているテーマなのでそれほどカスタマイズする必要もなく使わせていただいているのですが、一つだけ気になっていた点がありました。

それは、「ビジュアルエディタで使えるコンポーネントがテキストエディタでスムーズに使えない」という点でした。

最初から、ボタンやセクション、吹き出しやカラムレイアウトなどのコンポーネントが装備されているのですが、ビジュアルエディタでは追加する機能が付いているのですが、テキストエディタにはありません

ビジュアルエディタでのコンポーネント追加画面

まぁ、コードをこちらなどから拝見して、そのまま打てば追加することはできるのですが、毎回参照するのも面倒だし、どうするかなーと考えていました。

AddQuicktagプラグインでタグを追加

WordPressにはAddQuicktagという便利なプラグインがあるのですが、そちらでテキストエディタにタグを簡単に挿入できるようにボタンを追加しておくことにしました。

テキストエディタでもタグを簡単に入力できるようにしました

AddQuicktag専用のインポートデータはこちらからダウンロードしてください。

ダウンロードサイトへ(GitHub)

AddQuicktagをインストール

まずは、管理画面のプラグインより【新規追加】を選び、プラグインをインストールします。

AddQuicktagと検索した出てきた中からインストールする

インストール後、プラグインを有効化してくださいね。

設定画面でインポート

addQuicktagの設定画面へ

AddQuicktagプラグインの設定画面へ移動します。

addQuicktagプラグインのインポートセクション

こちらからダウンロードしてきたJSONファイルを選択してインポートをします。これで完了です。

使い方は簡単

言葉で説明するよりもアニメーションが一番わかりやすいかと思います。

AddQuicktagでタグを入力するデモ

Snow Monkeyで使えるコンポーネント一覧

ボタン

ボタン

全幅ボタン

アラート

アラート – ノーマル

アラート

アラート – warning

アラート[warning]

アラート – success

アラート[サクセス]

吹き出し

吹き出し – ノーマル

名前
吹き出し文章

吹き出し - 反対側

現在のお仕事状況
名前
吹き出し文章

カラム

カラム[1/1/2] – スマホ1カラム/タブレット1カラム/PC2カラム

カラム分割
カラム分割

カラム[2/2/2] – スマホ2カラム/タブレット2カラム/PC2カラム

カラム分割
カラム分割

カラム[1/1/3] – スマホ1カラム/タブレット1カラム/PC3カラム

カラム分割
カラム分割
カラム分割

カラム[3/3/3] – スマホ3カラム/タブレット3カラム/PC3カラム

カラム分割
カラム分割
カラム分割

カラム[1/1/4] – スマホ1カラム/タブレット1カラム/PC4カラム

カラム分割
カラム分割
カラム分割
カラム分割

カラム[2/2/4] – スマホ2カラム/タブレット2カラム/PC4カラム

カラム分割
カラム分割
カラム分割
カラム分割

セクション

セクション – ノーマル

セクション

セクション

セクション – 背景グレー

セクション

セクション

まとめ

テキストエディタを使う方向けですので、ある程度コードの入力知識が既にある方が使われるであろうと考えていますので、説明は簡単になってしまいました。ごめんなさい。

何か疑問がありましたらお問い合わせいただいても大丈夫ですのでお気軽にどうぞ。

書籍を出版しました!

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。