AddQuicktagの使い方とサンプルコード

制作の久保田です。

今回は使い方によっては作業を爆速化できるプラグイン「AddQuicktag」をご紹介します。
使い方の他、利用サンプルも掲載しているので、どういったシーンで有効か確認いただければと思います。

AddQuicktagとは？

AddQuicktagは、予めコードを登録することで、簡単に記事内にコンテンツを埋め込むことができるWordpressプラグインです。
通常のエディタでは、見出し・段落・表などの記事制作のための要素が用意されていますが、AddQuicktagを利用すると、それ以外の装飾されたコンテンツを挿入することが可能になります。

ここでは、AddQuicktagのインストールと設定の他、利用時の注意点や利用サンプルを掲載します。

インストールと有効化

管理画面の左メニューの「プラグイン」から「新規追加」を選択します。
「プラグインの検索」から「AddQuicktag」を検索します。
検索結果の「AddQuicktag」の「今すぐインストール」をクリックします。
インストールが完了したら「有効化」をクリックして有効化します。

WordPress.org 日本語

AddQuicktag

https://ja.wordpress.org/plugins/addquicktag/

AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。

プラグインを手動でインストールする場合はこちらのリンクからダウンロードできます。

使い方

AddQuicktagを有効化すると、左メニューの「設定」の中に「AddQuicktag」というメニューが追加されるので、中に入って設定していきます。

コードの登録

設定項目はそれほど多くありません。
下記項目の中でも、ボタンとタグだけ設定して表示を有効化すると利用ができます。

ボタンとアイコン
開始タグと終了タグ
アクセスキーと並び順
表示設定
拡張コードクイックタグボタン

基本的には、ラベルとタグと表示の設定だけできていれば使用できます。
ここでは、以下のリンクボタンの作成を例にコードの登録方法を見ていきます。

<div class="aqt-btn-01"><a href="#">view more</a></div>

ラベルの登録

「ボタン名」にエディタに表示される名前を登録します。
「ダッシュアイコン」を選択すると、エディタにアイコンが表示されます。
「ラベル名」は「ボタン名」に付与されるラベルです。

特に必要ない場合は、「ボタン名」だけ入っていればokです。
ここでは「リンクボタン」として登録しています。（※1）

開始タグと終了タグ

実際に挿入する開始タグと終了タグを登録します。
まとまったコードを1つ出力したい場合は、開始タグのみに終了タグも含めて登録してokです。
ここでは、view more というテキストも含めて出力したいため、まとめて開始タグに登録しています。（※2）

アクセスキーと並び順

アクセスキーでショートカットキーの登録ができます。
alt + アクセスキーでコード入力ができるようになります。

並び順は、数値の小さい順に登録したタグの並び替えを行います。
不要であれば空欄で問題ありません。

有効化

登録項目の右側にあるチェックボックスをチェックして、タグを有効化します。
AddQuicktagを利用したい投稿タイプにチェックをいれます。

ここでは「ビジュアルエディター」「post」「page」にチェックを入れて、投稿と固定ページで有効化しています。（※3）
すべてに有効化したい場合は一番右のチェックマークをクリックしてください。

デフォルトのクイックタグを非表示にする

AddQuicktagを有効化するとテキストエディタに、デフォルトでいくつかのクイックタグが挿入されます。
数が多くなると煩雑になってくるため、不要なものはここでチェックを入れて非表示にしておきます。

拡張コードクイックタグボタン

<pre>タグなど、htmlをそのまま表示させたい場合などのクイックタグを表示したい場合にチェックをいれます。
ここも不要であればチェックなしのままでokです。

登録が完了したら、「変更を保存」ボタンをクリックして保存します。（※4）

登録したタグを使用する

登録したボタンを実際に利用するため、「固定ページ」へ移動して、新規記事制作を行います。
エディタに「Quicktags」というプルダウンが追加されていると思うので、ここから登録したボタン名を選択するとコードが挿入されます。
※テキストエディタの場合は、プルダウンではなく、ボタン名が直接表示されます。

記事内にボタンを挿入することができました。

インポートとエクスポート

AddQuicktagは、「インポート」と「エクスポート」も可能です。
よく使うコードをまとめておくことで、他のサイトに再利用が容易になります。

設定画面下の方にある「エクスポート」から「エクスポートファイルのダウンロード」をクリックすると、jsonファイルがエクスポートされます。
「インポート」からダウンロードしたjsonファイルを選択し、「ファイルのアップロード・インポート」ボタンをクリックするとインポートができます。

作成するタグと利用の注意点

ここでは、AddQuicktagを利用する上で、知っておいたほうが良いかなと思うことをいくつかご紹介します。

個別のclass名をつける

意図しない表示がされてしまうことを防ぐため、AddQuicktagで挿入するコードには、独自のclass名のルールを追加することをおすすめします。
例えば、.aqt-ttl-01 など、頭に aqt とつけるなどしておくと、他のcssとのバッティングを防ぐことができます。
また、class名が入っていないとWordpressのエディタで自動で整形されてコードが抜け落ちてしまうこともあるので、これを防ぐことができます。

<!-- 独自のclass名をつける -->
<div class="aqt-ttl-01">
    <span class="aqt-color-01">見出し</span>が入ります。
</div>

<!-- 他のcssとのバッティングや、タグが消えてしまう可能性あり -->
<h2>
    <span>見出し<span>が入ります。
</h2>

画像は uploads で上げた画像を登録する

AddQuicktagで画像を登録する際、Wordpressのアップロード画像を利用すると、差し替えが容易になります。

挿入した画像の編集ボタンをクリック

画像の編集から置き換えができます。
テーマファイルの中の画像を参照していると、置き換えボタンが表示されず、編集ができません。

AddQuicktag が表示されないときは？

AddQuicktagを登録したけど、エディタに表示されないときは、以下の項目を確認してみてください。

有効化の設定
ツールバーの切り替え
WordPress、プラグインのアップデート

おそらく一番多い理由は、先に解説した「有効化」のチェックが外れているケースだと思います。
Wordpressのバージョンによるバグなのか、チェックして保存してもチェックが消えてしまうケースもあるので、再度有効になっているか確認してみてください。

また、AddQuicktagのプルダウンは、デフォルトのツールバーでは折りたたまれて表示されていないこともあります。
この場合はツールバー切り替えボタンをクリックすることで表示できます。

上記を確認しても解決しない場合は、バージョンによるバグの可能性があるため、WordpressとAddQuicktagをアップデートして確認してみてください。

サンプルコード

ボタン

先程サンプルで作成したボタンです。
htmlをAddQuicktagに登録し、cssはテンプレートファイルに記述します。

<!-- html（AddQuicktag） -->
<div class="aqt-btn-01"><a href="#">view more</a></div>

<!-- css（テーマに記述）-->
<style> 
/* aqt-btn-01 */

.aqt-btn-01 {
    margin-bottom: 4rem;
}

.aqt-btn-01 a {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
    padding: 13.5px 10px 15.5px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, .1 );
    background: #C5A882;
    color: #fff;
    border: solid 2px #C5A882;
}

.aqt-btn-01 a:hover {
    background: #fff;
    color: #C5A882;
}
</style>

タイトル

あらかじめデザインされたタイトルを登録しておくと、通常のブログでは難しいタイトルを出力することができます。
テキスト部分は通常のエディタ操作と同様に編集することができます。

title

タイトル

<!-- html（AddQuicktag） -->
<div class="aqt-ttl-01">
    <div class="en">title</div>
    <div class="jp">タイトル</div>
</div>

<!-- css（テーマに記述）-->
<style> 
/* aqt-ttl-01 */

.aqt-ttl-01 {
    text-align: center;
    position: relative;
    padding-bottom: 7.5rem;
    margin-bottom: 3.5rem;
}

.aqt-ttl-01::after {
    content: '';
    width: 2px;
    height: 60px;
    background: #C5A882;
    position: absolute;
    bottom: 0;
    left: calc( 50% - 1px );
}

.aqt-ttl-01 .en {
    font-size: 6rem;
    line-height: 1.15;
    text-transform: capitalize;
    color: #C5A882;
}

.aqt-ttl-01 .jp {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 2.4px;
}
</style>

カラムレイアウト

より複雑なレイアウトを登録することも可能です。
3カラムレイアウトを追加できるサンプルです。

見出しが入ります

この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。

見出しが入ります

この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。

見出しが入ります

この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。

<!-- html（AddQuicktag） -->
<div class="aqt-column-01">
    <div class="flex">
        <div class="box">
        <figure class="img ofi"><img class="alignnone size-full wp-image-000" src="[url]"></figure>
        <div class="ttl">見出しが入ります</div>
        <div class="read">この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。</div>
        </div>
        <div class="box">
        <figure class="img ofi"><img class="alignnone size-full wp-image-000" src="[url]"></figure>
        <div class="ttl">見出しが入ります</div>
        <div class="read">この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。</div>
        </div>
        <div class="box">
        <figure class="img ofi"><img class="alignnone size-full wp-image-000" src="[url]"></figure>
        <div class="ttl">見出しが入ります</div>
        <div class="read">この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。</div>
        </div>
    </div>
</div>

<!-- css（テーマに記述）-->
<style> 
/* aqt-column-01 */

.aqt-column-01 .flex {
    display: flex;
    margin: 0;
}

.aqt-column-01 .flex .box {
    width: calc( ( 100% - 80px ) / 3 );
    margin: 0 40px 40px 0;
}

.aqt-column-01 .flex .box:nth-child( 3n ),
.aqt-column-01 .flex.center > li:last-child {
    margin-right: 0;
}

.aqt-column-01 .img {
    text-align: center;
    line-height: .5;
    margin-bottom: 15px;
}

.aqt-column-01 .img img {
    width: 320px;
    height: 180px;
}

.aqt-column-01 .ttl {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
    -js-display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aqt-column-01 .read {
    font-size: 1.4rem;
    line-height: 1.8;
}
</style>

Q & A

よくある質問のようなコンテンツもブロックでまとめて追加できると便利です。

Qよくある質問が入ります。このテキストはダミーです。

A解決策が入ります。このテキストはダミーです。

この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。

<!-- html（AddQuicktag） -->
<div class="aqt-faq-01">
    <div class="ttl q"><span class="icon en">Q</span>よくある質問が入ります。このテキストはダミーです。</div>
    <div class="txt">
        <div class="ttl a"><span class="icon en">A</span>解決策が入ります。このテキストはダミーです。</div>
        <div class="read">この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。</div>
    </div>
</div>

<!-- css（テーマに記述）-->
<style> 
/* aqt-faq-01 */

.aqt-faq-01 {
    background: #fcf7f5;
    padding: 10px 40px;
    margin-bottom: 40px;
}

.aqt-faq-01 .ttl.q {
    font-size: 2.4rem !important;
    margin: 30px 0 !important;
    position: relative;
    padding-left: 53px;
}

.aqt-faq-01 .ttl.q .icon {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #fff;
    background: #c5a882;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.aqt-faq-01 .txt {
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.aqt-faq-01 .txt .read {
    font-size: 1.4rem;
    line-height: 1.8;
}

.aqt-faq-01 .ttl.a {
    display: inline-block;
    font-size: 2.2rem;
    line-height: 1.6;
    margin-bottom: 15px;
    position: relative;
    padding-left: 50px;
}

.aqt-faq-01 .ttl.a .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    background: #c5a882;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

バナー

テキストベースのバナーを追加できるようにしておくと、導線をつくるときに役立ちます。

バナータイトルが入ります。
説明文が入ります。このテキストはダミーです。

<!-- html（AddQuicktag） -->
<div class="aqt-bnr-01">
    <a href="#">
        <span class="ttl">バナータイトルが入ります。</span>
        <span class="txt">説明文が入ります。このテキストはダミーです。</span>
        <span class="img ofi"><img class="alignnone size-large wp-image-xxx" src="[url]"></span>
    </a>
</div>

<!-- css（テーマに記述）-->
<style>
/* aqt-bnr-01 */

.aqt-bnr-01 {
    margin-bottom: 40px;
}

.aqt-bnr-01 a {
    display: block;
    text-decoration: none;
    position: relative;
    padding: 60px 20px !important;
    background: #000;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.aqt-bnr-01 a br {
    display: none;
}

.aqt-bnr-01 .ttl {
    display: block;
    position: relative;
    z-index: 99;
    font-size: 2.8rem;
}

.aqt-bnr-01 .txt {
    display: block;
    font-size: 1.8rem;
    margin: 10px 0 0;
    position: relative;
    z-index: 99;
}

.aqt-bnr-01 .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.aqt-bnr-01 .img img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    opacity: .4;
    object-fit: cover;
    transition: all .6s;
}

.aqt-bnr-01 a:hover .img img {
    transform: scale( 1.1 );
    opacity: .6;
}
</style>