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. WordPress初心者ワークショップをやりました。次回は2月20日
  3. 無料セッション!ホームページ・WordPressのお悩み解決
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. iPhoneの空き容量を確保する方法

関連記事

  1. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

  2. cf7 google sheet connector
  3. WordPress初心者ワークショップ 名古屋開催

    WordPressプラグイン

    日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ

    好評をいただいております、ゼロから作るWordPressワークシッ…

  4. WEB技術

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

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

  5. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

  6. WordPressカスタマイズ

    WordPressカスタマイズ

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

    以前、寄稿者権限のユーザーがレビュー待ちの投稿をしたときに、管理者へ通…

ピックアップ

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

    ブログのリンクを貼るときの注意
  2. PHP

    背景色に対して文字色は白か黒か
  3. WordPressカスタマイズ

    Googleの日本語Webフォント
  4. WordPress初心者ワークショップ 名古屋開催

    SEO

    WordPress初心者ワークショップをやりました。次回は2月20日
  5. さよならインターネットエクスプローラー

    ネットの歩き方

    Internet Explorerの終わり-Microsoftが公式に使用をやめ…
PAGE TOP