AddQuicktagのプラグイン設定&カスタマイズ方法紹介!

top

WordPressの本文をテキストエディタで書く場合、HTMLコードを随所で導入して文章を書いていきます。

しかし、これを毎回入力するのは面倒ですよね。

その問題を解決してくれるのが今回紹介するプラグイン『AddQuicktag』です。

ボタン一つで文字装飾などが簡単にできるので作業スピードが早まるしHTMLコードに慣れるためにもぜひインストールをおすすめします。

今回は設定方法とカスタマイズについて説明していきます。

『AddQuicktagのプラグイン設定&カスタマイズ方法』を動画で視聴

AddQuicktagのプラグイン設定方法

AddQuiccktagをインストールしたあとに『新規記事追加』をクリックしてテキストエディタにすると上部にデフォルトでタグボタンが設置されます▼

 

例えば『b』と書かれているボタンは太字にしてくれるタグボタンです。

文字を書いてその文字をドラッグして『b』ボタンを押すと太字になります▼

 

プレビューするとこのようになります▼

 

このようにテキストエディタで文字を変える場合はテキストを選択して上部にあるボタンを押すことで改行や斜線、フォントサイズやカラーなどの装飾が行えます。

AddQuicktagのカスタマイズ方法

しかし、デフォルトのタグボタンだけでは出来ることに限りがあります。

なので自分好みのHTMLタグをどんどん追加してカスタマイズしていきましょう!

HTMLタグを追加するにはダッシュボードから『設定』→『AddQuicktag』を選択します▼

 

するとAddQuicktagの追加と削除の画面になります。

複雑に見えるかもしれませんが、入力するのは以下赤枠の部分だけで大丈夫です▼

それぞれの意味を説明します

①HTMLタグのボタン名
記事作成画面の上部に表示される名前です。

 

②開始タグ
HTMLの開始のタグを入力する箇所です。

 

③終了タグ
HTMLの終了のタグを入力する箇所です。

 

④チェックボタン
一番右のチェックボックスをONにするとすべてにチェックが入ります。

倉田

ここを忘れるとボタンを押しても反映されないので忘れないようにしましょう。

 

では、文字色を黄色で文字背景色を緑にするHTMLのコードを追加してみます。

こんな感じで入力して最後に『変更を保存』をクリック▼

 

記事投稿の画面を開いてみるとちゃんとボタンが反映されています▼

 

テキストを選択してボタンを押します▼

 

下記のように反映されました▼

 

プレビューするとこのように▼

 

このようによく使うHTMLコードはAddQuicktagに登録しておくといつでもボタン一つで反映できます。

それとビジュアルエディタでも『Quicktags』のプルダウンメニューが追加されるので

TinyMCE Advanceに無いコードはAddQuicktagに登録させてそのメニューから反映できます

最後に

HTMLコードは使用しているテンプレートによって変わってくるのですが、記事を執筆していくなかで

倉田

「ここをこうしたい!」「もっと装飾変えられないかな~」

など思うようになったらその要望を一度ググって該当するHTMLコードを探してみましょう。

Web上にはコードを紹介してくれているサイトがたくさんあるのでそちらを参考にして自分のサイトのタグをカスタマイズしていくとWordPressがどんどん使いやすいものになってきますよ!

       

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です