AddQuickTagの使い方｜使いたいデザインを簡単に選択

WordPress
2019.05.22

以前の記事でCocoonのカスタマイズについてまとめたのですが、思ったより読んでいただいていて、質問もいくつかもらっています。

この中でも多用しているのですが、CSSでデザインを変えたパーツを使う場合

  1. HTML上でデザインを変えたいパーツ（箇条書き等）にクラス名をつける
  2. つけたクラス名に対してCSSを適用する

という流れになります。

②のCSSはstyle.cssに記載しておけばよいだけなのですが、使う都度、クラス名をつけたHTMLを記述するのはちょっと面倒です。

 

そこで今回は、良く使うHTMLを登録しておき、使いたいときにコンボボックスから選ぶだけで登録したHTMLが追記されるプラグイン「AddQuickTag」を紹介します。

スポンサーリンク

使い方

カスタマイズ用のCSSを編集

まずはカスタマイズ用のCSSをstyle.cssに記述します。

以下のコードは番号なしの箇条書きを、チェックマークのアイコンを使ったデザインにするものです。

  • こういう箇条書き

以下のコードでは、ただの<ul>や<li>ではなく、「ul-icon-01」というクラス名のついた<ul>や<li>に適用されるようになっています。

.ul-icon-01 {
    list-style: none;
    padding:0;
    margin:0;
}
.ul-icon-01 li {
  position: relative;
  padding-left: 0.9em;
  margin: 0.8em 0;
}
.ul-icon-01 > li:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #ffffff;
  background: #e4ab3d;
  border-radius: 50%;
  text-align: center;
  margin-right: 0.4em;
  width: 1.3em;
  height: 1.3em;
  position: absolute;
  left: -15px;
  top: 3px;
  line-height: 1.4;
}
.ul-icon-01 li ul {
  margin: 0 0.4em 0 -1.2em;
}

クラス名を指定したHTMLを記述

前述のCSSを追加することで、「ul-icon-01」というクラス名を持つ箇条書きのデザインがアイコンを使ったものに変わります。

後は実際にそのクラス名を使ったHTMLを書くだけです。

投稿画面のエディタで、右上のタブから「テキスト」を選んで以下のように記述します。

<ul class="ul-icon-01">
  <li>テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

これで、カスタマイズ後の箇条書きが表示されるはずです。

また、普通にクラス名を指定しない箇条書きにすれば、カスタマイズ前の箇条書きとなります。

プラグインで簡易化する

これでデザインを変えた箇条書きを使うことができました。

ですが、このままではカスタマイズ後のデザインを使うために毎回HTMLを手で打たないといけません。

ここで先ほど名前を挙げたプラグイン「AddQuickTag」の出番です。

AddQuickTagのインストール

使用するプラグインは「AddQuickTag」というものです。

他のプラグインと同様に、インストールして有効化します。

  1. プラグインの新規追加を選択する。
  2. AddQuickTagを検索してインストールを押下。
  3. 有効化を押下。
  4. インストールは以上です。

AddQuickTagの設定

画面はちょっと見づらいのですが、設定手順は簡単です。

  1. 設定からAddQuickTagを選択する。
  2. 以下のように入力して「変更を保存」を押下する。（*のついている2か所を入力してチェックはすべて入れればOK）
  3. 投稿画面のエディタで選択できることを確認する。
  4. 実際に選択して箇条書きが作成されることを確認する。
  5. 設定は以上です。

おわりに

以下の手順で、新しくカスタマイズしたデザインを追加し、簡単に使うことができるようになりました。

  1. クラス名の付いたパーツ（HTMLタグ）に対するCSSを記述
  2. AddQuickTagにクラス名の付いたパーツ（HTMLタグ）のテンプレートを登録
  3. 使いたいところでAddQuickTagのボックスから登録したHTMLタグを選択

以前紹介した方法ではすべてのデザインが置き換わってしまいましたが、この方法であれば純粋にデザインを追加することが可能です。

ここで登録したHTMLやCSSは、テーマを問わずどこでも使用可能なので、将来的にもずっと活かすことができます。

気に入ったデザインのCSSがあればそれを登録し、いろいろなパーツを記事に追加できるようにしてしまいましょう。

コメント