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カラム

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

セクション

セクション – ノーマル

セクション

セクション

セクション – 背景グレー

セクション

セクション

まとめ

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

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

この記事を書いた人

久野 晃司

WordBench岐阜モデレーター。岐阜を中心にWeb全般のお仕事をしているフリーランスです。趣味はサッカー観戦。専門は英国プレミアリーグ、マンチェスターユナイテッドを贔屓しています。英国滞在歴2年、日常英会話は大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Ruby on Rails・プログラミング教育に興味があります。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします