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. スマホ動画を作るときの手順とアプリ
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. Googleの日本語Webフォント

関連記事

  1. wordpress5.0リリース

    WordPressカスタマイズ

    WordPress 5.0 リリースで注意するべきこと

    2018年12月6日、WordPressのメジャーアップデート「5.0…

  2. WordPressカスタマイズ

    アイコンフォント

    アイコンフォントとは以前は「」のようなアイコンを表示させたい場合は…

  3. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

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

    WordPressプラグイン

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

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

  5. WordPressカスタマイズ

    カスタム投稿タイプの投稿もSNSに自動投稿したい

    WordPress.orgの公式プラグインのJetPackを入れると、…

  6. SEO

    プッシュ通知を配信するプラグイン

    せっかくブログを一生懸命書いても、投稿があったことに気づいてもらえない…

ピックアップ

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

    動画

    スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…
  2. SEO

    プッシュ通知を配信するプラグイン
  3. Adobe Premiere Rush CC

    動画

    Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  4. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき
  5. PHP

    背景色に対して文字色は白か黒か
PAGE TOP