AddQuicktagプラグイン ~WordPressでブログを始める~ | そう備忘録

AddQuicktagプラグイン ~WordPressでブログを始める~

前回の「TinyMCE Advancedプラグイン」の記事

AddQuicktagについて

投稿画面からHTMLのタグを簡単に挿入する事ができるプラグイン。

以前の記事でstyle.cssに独自CSSを追加した。

追加したCSSのクラスを投稿画面から呼び出す時にいちいちテキストモードに切り替えてHTMLを記述するのは手間が掛かる。

このプラグインを使えば投稿画面のメニューにドロップボックスが追加されてタグの挿入が簡単にできるようになる。

AddQuicktag 投稿画面

インストール方法

メニューから「プラグイン」「新規追加」の「プラグインの検索」でAddQuicktagを検索する。

表示されたら「今すぐインストール」をクリック。

AddQuicktag今すぐインストール

インストールされたら「有効化」をクリック。
AddQuickatg 有効化

設定方法

WordPressのメニューから「プラグイン」「インストール済みプラグイン」を選んで一覧からAddQuicktagの「設定」をクリックする。

AddQuicktagの設定

例えば、style.cssに以下のタイトル用のCSSを記述している時、

style.css
/* 左と下にボーダー(タイトル用) */
div.r_tiltle {
margin: 2em 0em 1.5em 0em; /* 上、右、下、左 枠外とのマージン */
padding: .25em 0 .5em .75em; /* 上、右、下、左 枠内でのマージン */
border-left: 6px solid #e7609e; /* 牡丹色ぼたんいろ */
border-bottom: 1px solid #afafb0; /* 銀鼠ぎんねず */
}

HTML側で、

HTML
<div class="r_tiltle">タイトル行</div>

とタグを挿入したい場合、以下の設定を行う。

ボタンのラベル

プルダウンに表示される名前。

”タイトル”とした

ダッシュアイコン

指定していない。

指定するとラベルの左側にアイコンが表示される。

AddQuicktag ダッシュアイコンの設定

ラベル名

説明を記述した。

開始タグ

<div class=”r_tiltle”>

終了タグ

</div>

アクセスキー

ショートカットキーらしいがIEでしか動作しないみたいなので未設定

AddQuicktagの表示場所

ビジュアルエディタとpost、pageをチェックした

AddQuicktagの設定画面ショット

上記を設定して「変更を保存」するとビジュアルエディタにQuicktagのプルダウンが表示される。

使い方

1.投稿の編集画面でタグを挿入したい文章を選択して

AddQuicktag選択

2.プルダウンから「タイトル」選ぶと

AddQuicktagタイトルをプルダウンから選択

3.タグが挿入される

AddQuicktag タグの挿入

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

元々表示されているボタンを非表示にする事ができる機能。

ただTinyMCE Advancedでも同様の事ができるので、そちらで設定した。

AddQuicktag デフォルトのボタンを非表示にする

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

pre: 拡張コードボタン

チェックしていない。

チェックをするとテキストモードの時にpreボタンが表示される。

AddQuickatg preボタン

<pre>タグは空白や改行など入力した内容をそのまま表示する時に使用するタグ。

コード(HTMLやPHP、Javascriptなど)をそのままHTMLで表示させたい時には<code>タグと一緒に使用する。

プルダウンで言語を選んでcodeボタンをクリックすれば<code>タグが挿入される。

このブログではコードの表示は独自CSSのクラスを作成したのでチェックをしなかった。

htmlentities

チェックしていない。

チェックをするとテキストモードの時にHTML EntitiesボタンとDecode HTMLが表示される。

AddQuicktag HTML Entitiesボタン

HTML Entitiesボタンは適用可能な文字を全て HTML エンティティに変換する。

例えば、 > を &gt; に変換する。Decode HTMLはその逆。

ただ、このボタンで明示的に変換をしなくてもビジュアルエディタで > と入力するとテキストエディターでは &gt; に自動で変換をしてくれているので必要が無かった。

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

エクスポート

設定ファイルをJSON形式でエクスポートする。

他のWordPressに設定を移行する時に使用する。

インポート

 エクスポートされた設定ファイルをインポートする

次回の「Google XML Sitemapsプラグイン」の記事

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。