WordPressのエディター画面で簡単にオリジナルのCSSを呼び出す方法

PCのキーボード

前回作ったAmazonロゴを表示するためのCSSをワンタッチで呼べるようにWordPressを改造する

はじめに

前回はAmazonアソシエイトの正式ロゴをCSSのBefore疑似要素を使って整形して表示しました。

こういつヤツですね

今回はこれをWordPressのプラグインAddQuicktagを使い、エディター上でワンタッチで呼び出せるように設定してみます。

AddQuicktag

なにをするもの?

投稿画面にワンタッチでタグを入力するためのボタンを設定することができるようになります。

AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。クイックタグの設定を JSON ファイルとしてエクスポートすることが可能です。エクスポートしたファイルは他の WordPress にインポートすることができます。

(AddQuicktagダウンロードページより引用)

ダウンロードとインストール

下記かダウンロードするか、WordPress管理画面のプラグイン→新規追加からAddQuicktagで検索し、インストール下さい。

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

使い方

プラグインをインストールすると、管理画面の「設定」にからAddQuicktagの項目が追加されます。

写真のようにショートカット用ボタンのラベル名、ボタンを押した時に出力されるタグを設定します。筆者の場合は、開始タグの項目に終了タグも一緒にいれてしまっています。

投稿用のエディター画面に追加した「amazon1」タグボタンが表示されます。

ボタンを押すと写真のタグがいっぺんに表示されます。毎回クラス名を確認しながら手打ちするのとでは全く効率が違いますね。

おわりに

このプラグインAddQuicktagは、他にも自分があまり使わない標準のタグボタンを非表示にする機能があります。なるべく効率よく編集して、ブログの内容に集中したいものですね。

ここまで読んでいただいてありがとうございました。
ハッピーな1日を!

AddQuicktagでタグを呼び出して早速書いてますw

カフェや公園でブログを書くなら

https://momomon.club/information/press/wordpress/error-on-funcitionphp

ABOUTこの記事をかいた人

モモモサーバー編集長。 興味のあることにどんどん首を突っ込んで行きたい。 カレーパンが大好き。