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. Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  2. スマホ動画を作るときの手順とアプリ
  3. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…
  4. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  5. スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…

関連記事

  1. WordPressカスタマイズ
  2. WordPressカスタマイズ

    WordPressカスタマイズ

    寄稿者にメディアアップロード権限を付与

    組織などで記事を公開するときに上長の承認が必要な場合、権限設定にちょっ…

  3. WordPressカスタマイズ

    WordPressの基礎

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

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

  4. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

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

  5. 常時SSL化はお済ですか

    SEO

    サイトの常時SSL化はお済ですか?

    ちょっと前から、サイトを常時SSL化しないと、検索順位が下がるよなんて…

ピックアップ

  1. Adobe Premiere Rush CC
  2. Adobe Premiere Rush CC
  3. WordPress初心者ワークショップ 名古屋開催
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. WordPress初心者ワークショップ 名古屋開催

    WordPressプラグイン

    Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  2. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき
  3. WordPressカスタマイズ

    WordPressカスタマイズ

    管理画面で不要な表示オプションを非表示にする
  4. WordPressカスタマイズ

    WordPressカスタマイズ

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

    蛍光マーカーのように表示するCSS
PAGE TOP