子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法

by ブログ工房 「 WordPress 」記事で、今日一番読まれているページ TOP 5

まだデータがありません。

カテゴリー別今日の人気ランキング
スポンサーリンク

クイックタグとは

WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)として登録しておけば、作業の効率もあがります。

HTMLエディターのボタンの追加には、プラグイン「AddQuickTag」を利用するのが一般的ですが、プラグインなしでボタンを追加する方法もあります。この方法では、単純にタグをボタンとして登録するだけではなく、定型文もボタンとして登録することができます。

コードの記述形式とパラメータの説明

ボタンを追加するには「functions.php」にコードを追加していきます。記述ミスや文法ミスを犯すと最悪の場合、WordPressが動かなくなることもありますので、「functions.php」を修正する場合は、必ず事前にファイルのバックアップを取り(別名で保存)、不具合が発生したら元に戻せるようにしてください。

コードの記述形式は、追加したいボタン1つに対して次の1行を記述します。

  • ID:ボタンの識別記号です。ダブらないようにIDをつけます。
  • ボタンのラベル:ボタンに表示される名前です。
  • 開始タグ:開始タグを記述します。定型文を作る時はここに記述します。
  • 終了タグ:終了タグを記述します。終了タグのないタグは「’ ‘」にします。タグの後ろのバックスラッシュn は改行です。

以下のコードは、当サイトで使用しているものです。最後の2行は、リスト文とテーブル文を定型文にしたものです。

「functions.php」にコードを追加する

Simplicityの場合、子テーマの「functions.php」にコードを追加できますので、親テーマのバージョンアップなどの影響を受けずに管理ができ、便利です。このコードを、子テーマの「functions.php」に追加します。

子テーマのfunctions.phpにコードを追加

追加後のボタン一覧

HTMLエディターのボタンです。赤枠が追加ボタンになります。

  • タグを付けたい箇所をマウスでドラッグしてからボタンを押すと、ドラッグした部分の前後にタグが挿入されます。
  • ドラッグしないでボタンを押すと、マウスカーソルの位置に開始タグが挿入され、ボタンの名前が終了タグに変わります。

追加したクイックタグ


(参考)子テーマを利用したカスタマイズは以下も参考にしてください。

style.cssのサンプル

子テーマを利用してサイトデザインをカスタマイズする方法
子テーマによるテーマの編集方法 WoedPressのテーマは、 配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...

header-insert.phpのサンプル

子テーマを利用してXREAのバナー広告を簡単に設置する方法
XREA無料サーバーの自動挿入広告の問題 XREAの無料ウェブサービスの自動挿入広告は、HTML の <BODY> タグの直後に自動挿入さ...

footer-insert.phpのサンプル

子テーマを利用してフッターに最新の新着・更新記事を表示する
過去記事を追加・変更しても・・ WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする