WordPressカスタマイズ

ビジュアルエディタに独自のクイックタグを追加する

クイックタグを追加することで、書式の追加の効率が良くなり、記事作成が速くなる。

読者に読みやすい、見やすいコンテンツを作るうえで、適度の装飾は必要です。
HTMLやCSSに慣れている人であれば、テキストエディタモードで、ガンガン記述すればいいですが、一般の人はそうははいきません。

HTMLやCSSに精通していなくても、簡単に書式を追加できるのがクイックタグの機能。

追加の仕方は2つある。

  1. プラグインを使う
  2. テーマテンプレートに埋め込む

プラグインを使う

AddQuicktag というプラグインを使えば、簡単にクイックタグを追加することが可能です。

使い方は別の記事で。

テンプレートに埋め込む

ビジュアルエディタにクイックタグメニューを追加する

WordPress標準のビジュアルエディタ(TinyMCE)のメニュー部分に、プルダウン式のクイックタグを追加することにする。
ます、テーマテンプレート直下に「js」フォルダを作って、以下のscriptを「mce-button.js」として保存。

TinyMCEのオプションの editor.addButton でツールバーに「クイックタグ」のメニューボタン(プルダウンメニュー)を追加します。
プルダウンに表示されるのは、menuの配列に記述しもの。ここに追加すれば、好きな書式を追加できます。

TinyMCE自体のカスタマイズは、本家のリファレンスをご覧ください。

次に、functions.php に先ほどのscriptを読み込むように記述する。

テキストエディタにクイックタグを設置する。

次に、テキストエディタモードの時にクイックタグボタンを表示させるようにする。
下記コードを、おなじみの functions.php に追記

QTags.addButton で書式を追加すれば、いくらでも追加できる。

予定では、これでビジュアルエディタでもテキストエディタでもクイックタグが使えるようになるはず。

 

ピックアップ記事

  1. 無料セッション!ホームページ・WordPressのお悩み解決
  2. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  3. スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…
  4. iPhoneの空き容量を確保する方法
  5. Internet Explorerの終わり-Microsoftが公式に使用をやめ…

関連記事

  1. WordPressカスタマイズ

    WordPressカスタマイズ

    不要なダッシュボードウィジェットを非表示にする

    WordPressにようこそ!を非表示にするダッシュボードウィ…

  2. WEB技術

    お問合せフォームの送信通知をLINEで受け取る

    どのホームページにも、お問合せフォームは必ずあります。WordPr…

  3. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

    権限グループ 管理者 administrator 編集…

  4. WordPressカスタマイズ

    WordPressの基礎

    WordPressのRSSフィードにアイキャッチ画像を入れる

    WordPressが発行するRSSフィードは、デフォルトではアイキャチ…

  5. WordPress初心者ワークショップ 名古屋開催

    SEO

    WordPress初心者ワークショップをやりました。次回は2月20日

    定期的に開催しています、WordPressを全部自分で作っていくワーク…

ピックアップ

  1. さよならインターネットエクスプローラー
  2. WordPress初心者ワークショップ 名古屋開催
  3. wordpress5.0リリース
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. line@がLINE公式アカウントへ

    WEB技術

    LINE@が「LINE公式アカウント」に変わります。2019春に
  2. Rails

    Ruby on Rails チュートリアル
  3. SEO

    オススメのWordPressテンプレート 2018
  4. Rails

    【Rails 5 サポートメモ】Rails 実行時に 「no connectio…
  5. 今日の出来事

    ユーザー目線
PAGE TOP