--- title: "Snow Monkeyでテキストエディタでも簡単にコンポーネントを追加できるようにしました" canonical_url: "https://olein-design.com/blog/added-component-to-snow-monkey-on-texteditor" language: "ja" date_published: "2018-01-23T11:35:36+09:00" date_modified: "2018-01-23T11:35:36+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "Snow Monkey" --- # Snow Monkeyでテキストエディタでも簡単にコンポーネントを追加できるようにしました 先日からモンキーレンチのキタジマさんが制作・販売しているSnow Monkeyという100%GPLライセンスのWordPressテーマに乗り換えました。 とても見栄えも良く、作り込まれているテーマなのでそれほどカスタマイズする必要もなく使わせていただいているのですが、一つだけ気になっていた点がありました。 それは、**「ビジュアルエディタで使えるコンポーネントがテキストエディタでスムーズに使えない」**という点でした。 最初から、ボタンやセクション、吹き出しやカラムレイアウトなどのコンポーネントが装備されているのですが、**ビジュアルエディタ**では追加する機能が付いているのですが、**テキストエディタにはありません**。 ![ビジュアルエディタでのコンポーネント追加画面](https://olein-design.com/wp-content/uploads/2018/01/visual.png) まぁ、[コードをこちらなど](https://github.com/inc2734/wp-awesome-components/tree/master/src/component)から拝見して、そのまま打てば追加することはできるのですが、毎回参照するのも面倒だし、どうするかなーと考えていました。 ## AddQuicktagプラグインでタグを追加 WordPressには**AddQuicktag**という便利なプラグインがあるのですが、そちらでテキストエディタにタグを簡単に挿入できるようにボタンを追加しておくことにしました。 ![テキストエディタでもタグを簡単に入力できるようにしました](https://olein-design.com/wp-content/uploads/2018/01/text.png) AddQuicktag専用のインポートデータはこちらからダウンロードしてください。 [ダウンロードサイトへ（GitHub）](https://github.com/Olein-jp/snow-monkey-addquicktag-import-data) ### AddQuicktagをインストール まずは、管理画面のプラグインより【新規追加】を選び、プラグインをインストールします。 ![AddQuicktagと検索した出てきた中からインストールする](https://olein-design.com/wp-content/uploads/2018/01/01.png) インストール後、プラグインを有効化してくださいね。 ### 設定画面でインポート ![addQuicktagの設定画面へ](https://olein-design.com/wp-content/uploads/2018/01/02.png) AddQuicktagプラグインの設定画面へ移動します。 ![addQuicktagプラグインのインポートセクション](https://olein-design.com/wp-content/uploads/2018/01/03.png) こちらからダウンロードしてきたJSONファイルを選択してインポートをします。これで完了です。 ## 使い方は簡単 言葉で説明するよりもアニメーションが一番わかりやすいかと思います。 ![AddQuicktagでタグを入力するデモ](https://olein-design.com/wp-content/uploads/2018/01/b5a9154ccf9af20ec1190d976e5e7930.gif) ## Snow Monkeyで使えるコンポーネント一覧 ### ボタン ボタン 全幅ボタン ### アラート #### アラート - ノーマル アラート #### アラート - warning アラート[warning] #### アラート - success アラート[サクセス] ### 吹き出し #### 吹き出し - ノーマル [!\[\](https://olein-design.com/wp-content/uploads/2017/10/photo-1446769357257-5aa1b1bfcd65-150x150.jpeg)](https://olein-design.com/wp-content/uploads/2017/10/photo-1446769357257-5aa1b1bfcd65.jpeg) 名前 吹き出し文章 #### 吹き出し - 反対側 [!\[現在のお仕事状況\](https://olein-design.com/wp-content/uploads/2017/10/78744690597-150x150.jpg)](https://olein-design.com/wp-content/uploads/2017/10/78744690597.jpg) 名前 吹き出し文章 ### カラム #### カラム[1/1/2] - スマホ１カラム/タブレット1カラム/PC２カラム カラム分割 カラム分割 #### カラム[2/2/2] - スマホ2カラム/タブレット2カラム/PC２カラム カラム分割 カラム分割 #### カラム[1/1/3] - スマホ１カラム/タブレット1カラム/PC3カラム カラム分割 カラム分割 カラム分割 #### カラム[3/3/3] - スマホ3カラム/タブレット3カラム/PC3カラム カラム分割 カラム分割 カラム分割 #### カラム[1/1/4] - スマホ１カラム/タブレット1カラム/PC4カラム カラム分割 カラム分割 カラム分割 カラム分割 #### カラム[2/2/4] - スマホ2カラム/タブレット2カラム/PC4カラム カラム分割 カラム分割 カラム分割 カラム分割 ### セクション #### セクション - ノーマル ## セクション セクション #### セクション - 背景グレー ## セクション セクション ## まとめ テキストエディタを使う方向けですので、ある程度コードの入力知識が既にある方が使われるであろうと考えていますので、説明は簡単になってしまいました。ごめんなさい。 何か疑問がありましたらお問い合わせいただいても大丈夫ですのでお気軽にどうぞ。