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. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…
  2. iPhoneの空き容量を確保する方法
  3. スマホ動画を作るときの手順とアプリ
  4. WordPress初心者ワークショップをやりました。次回は2月20日
  5. WordPress 5.0 リリースで注意するべきこと

関連記事

  1. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

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

  2. WordPressカスタマイズ

    WordPressカスタマイズ

    WP管理画面のサイドバーの不必要なメニューを非表示にする

    運用上触ってほしくないメニューが管理画面のサイドバーに表示されているこ…

  3. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿で管理者権限のユーザーにメールを送る

    以前書いた記事で、レビュー待ち投稿の時に管理者に自動でメールを送るメモ…

  4. WordPressカスタマイズ

    WordPressカスタマイズ

    管理画面で不要な表示オプションを非表示にする

    WordPressの投稿画面や固定ページ作成画面は、一般のユーザーには…

  5. WordPressの基礎

    WordPressのよく使うテンプレートタグ

    ブログのURLを取得するhome_url()<?ph…

  6. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿がされた場合、管理者にメールを送る

    想定としては、ブログ記事の公開に上長や責任者の商人が必要な場合。…

ピックアップ

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

    Googleの日本語Webフォント
  2. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限
  3. さよならインターネットエクスプローラー

    ネットの歩き方

    Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  4. WordPressカスタマイズ

    アイコンフォント
  5. Rails

    AWS Cloud9の時刻設定
PAGE TOP