ZeroPlus Media > Web制作 > WordPress > 【WordPress】Quicktagへ独自のデザインを簡単に追加する方法

【WordPress】Quicktagへ独自のデザインを簡単に追加する方法

Web制作

2021/12/25

2023/04/14

WordPressで記事を執筆していると、何度も使用するデザインがあります。

ZeroPlus Mediaは黄色い枠を用いて「この記事で身につく内容」を冒頭に表示しています。

このデザインは毎回CSSを記述しているのではなく、オリジナルのQuicktagを作成しボタン1つで出力しています。

この記事ではオリジナルデザインをQuicktagへ追加し、簡単に出力する方法を紹介します。

この記事で身につく内容

オリジナルQuicktagの追加方法
デザインをボタン1つで簡単に出力可能にする方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

QuickTagについて
実装方法1.プラグイン「AddQuicktag」を使用する
実装方法2. functions.phpにコードを記述する
- ビジュアルエディタにQuicktagを追加する
- テキストエディタにQuicktagを追加する

QuickTagについて

QuickTagとはHTMLのタグを1クリックで出力できる機能です。ビジュアルエディタとテキストエディタで使用することができます。

QuickTagが何かわからない方は、こちらの記事をご覧ください。

【WordPress】簡単にタグを出力できるQuickTagとは？

実装方法1.プラグイン「AddQuicktag」を使用する

まずはプラグインを使った実装を紹介します。

AddQuicktagをインストール

プラグイン > 新規追加

より「AddQuicktag」と検索します。

こちらのAddQuicktagをインストールして有効化します。

Quicktagを設定する

設定 > AddQuicktag

よりAddQuicktagの設定画面へと移動します。

このような「Quicktag」を設定できる画面が表示されます。

ZeroPlus Mediaでは既にいくつかのQuicktagを設定してます。

1番上に設定している「アンダーライン_水色」というQuicktagでは下記のように設定しています。

表示名を「アンダーライン_水色」
開始タグを「<span class="underline_blue">アンダーライン付きテキスト」
終了タグを「</span>」
並び順を「1」

「表示名、開始タグ」のテキストエリアは入力が必須です。

ショートコードを登録する場合

Quicktagにショートコードを登録することができます。

入力する箇所は下記2つのテキストエリアです。

表示名
開始タグ

ZeroPlus Mediaでは下記のように、内部リンクをショートコードで出力しています。

複雑なネスト構造のHTMLを登録する場合

複雑なHTML/CSSを必要とするデザインも登録できます。

開始タグの箇所に終了タグ以外の全てを入力します。すると、複雑な内容も登録することができます。

Quicktagで出力する

投稿一覧 > 新規追加より投稿ページに移動します、

ビジュアルエディタの場合

QuickTagsというセレクトボタンが設置されているので、こちらから先ほど設定したQuicktagを実装することができます。

テキストエディタの場合

このようにQuicktagが追加されています。

以上でプラグイン「AddQuicktag」を用いたQuicktagの実装は終了です。

実装方法2. functions.phpにコードを記述する

functions.phpはテーマ全体に影響を及ぼすので、WordPressやプログラムに精通している人が触りましょう。

functions.phpから修正する場合は、ビジュアルエディタとテキストエディタでそれぞれに追加するプログラムが必要です。

ビジュアルエディタにQuicktagを追加する

ビジュアルエディタにQuicktagを追加するプログラムをfunctions.phpの最下部に追加します。

//スタイルのセレクトボタンを追加
if ( !function_exists( 'add_style_select' ) ):
    function add_style_select($init_array) {
        //追加するタグの配列を作成
        $style_formats = array(
        array(
            'title' => 'チェック',
            'inline' => 'span',
            'classes' => 'check'
        ),
        array(
            'title' => '引用',
            'block' => 'blockquote'
        ),
        );
        //JSONに変換
        $init_array['style_formats'] = json_encode($style_formats);
        return $init_array;
    }
endif;
add_filter('tiny_mce_before_init', 'add_style_select', 10000);

//TinyMCEにスタイルセレクトボックスを追加
if ( !function_exists( 'add_tag_to_editor' ) ):
    function add_tag_to_editor($buttons) {
        //見出しなどが入っているセレクトボックスを取り出す
        $temp = array_shift($buttons);
        //先頭にスタイルセレクトボックスを追加
        array_unshift($buttons, 'styleselect');
        //先頭に見出しのセレクトボックスを追加
        array_unshift($buttons, $temp);

        return $buttons;
    }
endif;
add_filter('mce_buttons_2','add_tag_to_editor');

6行目〜14行目を用途に合わせて修正する必要があります。