ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

リッチテキストフィールドのTinyMCEアイコンをカスタマイズする方法

リッチテキストフィールドに表示される書式アイコンをカスタマイズしますか?デフォルトでは、WPFormsは標準的な書式オプションを備えた2つのツールバーを表示します。

このガイドでは、ユーザーが必要とするツールだけを含むようにこれらのツールバーをカスタマイズする方法を説明します。

デフォルトのtinyMCEアイコンが利用可能

上部ツールバーのデフォルトフィールドは次のとおりです:

  • テキストフォーマット(テキストを見出しまたは段落テキストとしてマークします)
  • 太字
  • イタリック
  • 箇条書きリスト
  • 番号付きリスト
  • 引用ブロック
  • 左揃え
  • 中央揃え
  • 右揃え
  • リンクの挿入/編集
  • 続きを読むタグの挿入
  • ツールバーの切り替え(下部ツールバーのオン/オフを切り替えます)

下部ツールバーのデフォルトフィールドは次のとおりです:

  • 取り消し線
  • 水平線
  • 文字色
  • テキストとして貼り付け
  • 書式をクリア
  • 特殊文字
  • インデントを減らす
  • インデントを増やす
  • 元に戻す
  • やり直し
  • キーボードショートカットリスト(これらのショートカットが表示されるモーダルウィンドウが開きます)

このチュートリアルでは、PHPを使用して訪問者に表示されるアイコンをカスタマイズする方法を説明します。

フォームの設定

まず、フォームを作成し、リッチテキストフィールドを追加します。フォームの作成に役立つ情報が必要な場合は、最初のフォームの作成方法に関するガイドをご覧ください。

ツールバーアイコンのカスタマイズ

利用可能な書式設定オプションを変更するには、サイトにPHPコードを追加する必要があります。カスタムコードの追加方法がわからない場合は、WordPressサイトにコードスニペットを追加する方法に関するガイドを確認してください。

どちらかのツールバーをカスタマイズする場合、表示したいすべてのアイコンを含める必要があります。カスタマイズにより、指定したアイコンのみでツールバー全体が置き換えられます。

両方のツールバーをカスタマイズする方法は次のとおりです。

ツールバーをカスタマイズするには:

  • 上部ツールバーの場合:10行目の配列を変更します
  • 下部ツールバーの場合:42行目の配列を変更します
  • 必要に応じてボタンを追加または削除し、同じ形式を維持してください

ツールバーを完全に削除する

書式設定ツールバーを完全に削除したい場合は、CSSを使用して削除できます。サイトにCSSを追加する方法がわからない場合は、WordPressにカスタムCSSを追加する方法に関するガイドを確認してください。

.wpforms-field .wp-editor-tabs, .wpforms-field .quicktags-toolbar {
    display: none !important;
}

特定のフォームからツールバーを削除するには:

div#qt_wpforms-1000-field_25_toolbar, #wp-wpforms-1000-field_25-editor-tools {
    display: none;
}

1000をフォームIDに、field_25をリッチテキストフィールドIDに置き換えてください。これらのIDを見つける方法がわからない場合は、フォームおよびフィールドIDの見つけ方に関するガイドを確認してください。

これで、リッチテキストフォームフィールドをカスタマイズするために必要なすべてが揃いました!次に、評価フォームフィールドを使用する際のアイコンをカスタマイズしますか?詳細については、評価アイコンの見た目をカスタマイズする方法に関するガイドを確認してください。