コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > CMS チュートリアル > ＆＃＆プレス > WordPress Visual Editorにカスタム機能を追加します

WordPress Visual Editorにカスタム機能を追加します

Lisa Kudrow
リリース： 2025-02-16 13:02:11
オリジナル
414 人が閲覧しました

WordPress Visual Editorにカスタム機能を追加します

キーテイクアウト

  • Tinymceエディターコントロールを搭載したWordPress Visual Editorは、CSSクラスで選択したテキストをラップするカスタムTINYMCEプラグインの作成と登録など、一意の機能を追加するためにカスタマイズできます。
    • カスタム機能を追加するには、WordPress WebサイトでTinymceプラグインを作成し、Tinymceアクションとフィルターを登録し、Tinymceフィルター（MCE_EXTERNAL_PLUGINSおよびMCE_BUTTONS）を使用して外部TINYMCEプラグインをロードし、Tinymce Tloglbarbarにボタンを追加/削除する必要があります。 。
    • カスタム機能は、Tinymceボタンの出力方法とクリックしたときに何をすべきかを伝えるJavaScriptプラグインを作成することで追加することもできます。これには、Tinymce Plugin Managerクラスを使用してプラグインをTinymceに追加し、AddButton関数を使用してボタンを登録し、AddCommand関数を使用してコマンドを登録します。
  • プラグインを使用してコーディングせずにWordPress Visual Editorをカスタマイズすることができます。この目的のための人気のあるプラグインには、Tinymce Advanced、WP Edit、および究極のTinymceが含まれます。
  • コンテンツエディターは、WordPressの重要な部分です。これにより、ユーザーはコンテンツ、ギャラリー、ビデオを作成および管理できます。 また、
    • テキストビューも付属しています。これにより、ユーザーはコンテンツ内にHTMLを挿入または修正できます。

    WordPress Visual Editorは、WysiWygビューと表示されるフォーマットボタンを提供するTinymceエディターコントロールを搭載しています。 Tinymce APIとWordPressのフィルターフックのおかげで、WordPress Visual Editorに独自の機能を追加できます。具体的には、CSSクラスで選択したテキストをラップするカスタムTinymceプラグインを作成および登録する方法について説明します。

    TINYMCEプラグインの作成

    WordPress Webサイトで、WP-Content/Plugins/Tinymce-Custom-Classフォルダーを作成します プラグインのファイルをここに保存するので、次のコードを使用して、次にTinymce-Custom-Class.phpというファイルを作成します。

    これにより、WordPressにプラグインに関する情報が提供され、Tinymceアクションとフィルターを登録するコンストラクトを設定します。

    wordpress tinymceフィルターWordPress Visual Editorにカスタム機能を追加します

    Tinymceは、ビジュアルエディターツールバーに要素を登録するための2つのキーフィルターを提供します。

    MCE_EXTERNAL_PLUGINS：外部TINYMCEプラグイン（https://codex.wordpress.org/plugin_api/filter_reference/mce_external_plugins）

    のロードに使用されます

    mce_buttons：Tinymceツールバーにボタンを追加/削除するために使用されます（https://codex.wordpress.org/plugin_api/filter_reference/mce_buttons、

    mce_buttons_2、 これらのフィルターを呼び出す前に、WordPress管理画面にいることを確認したいと思います。次のコードを__constructに追加します：
<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これは、WordPressユーザーに記録されている現在のログが投稿またはページを編集できるかどうかをチェックします。できない場合は、ビジュアルエディターが表示されないため、そのユーザーのTINYMCEプラグインを登録する意味はありません。 
<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>
ログイン後にコピー
一部のWordPressユーザーは、

ユーザー>プロフィールを介してこれをオフにするため、ユーザーがVisual Editorを使用しているかどうかを確認します。繰り返しますが、ユーザーがビジュアルエディターを使用していない場合は、他のことをする必要がないため、関数を返します。

上記のチェックが通過する場合、2つのTinymce WordPressフィルターが登録されています-MCE_EXTERNAL_PLUGINSおよびMCE_BUTTONS。

最初のフィルター-MCE_EXTERNAL_PLUGINS - Visual Editorと対話するTinymce JavaScriptプラグインファイルを登録できます。クラス内のこのフィルターの関数呼び出しを追加しましょう。

ここでは、すべてのTinymce JavaScriptプラグインを含む$ Plugin_Array内にJavaScriptファイルを登録します。

2番目のフィルター - MCE_BUTTONS - は、Visual Editorにボタンを登録したいことをTinymceに伝えます。繰り返しますが、クラス内のこのフィルターの関数呼び出しを追加しましょう。

これは、Tinymceボタン（custom_class）のプログラム名を登録します。 JavaScriptプラグインを作成

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>
ログイン後にコピー

mce_external_pluginsに電話したとき、javaScriptファイルを参照しました。次に、そのファイルを作成し、JavaScriptコードを追加する必要があります。これにより、Tinymceボタンの出力方法と、クリックしたときに何をすべきかがわかります。

Tinymce-CustomClass.jsというプラグインフォルダーに新しいファイルを作成し、次のコードを挿入します。

このjavaScript関数は、いくつかのアクションを実行します：
<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>
ログイン後にコピー

Tinymce Plugin Managerクラスを呼び出します。これは、多くのTinymceプラグイン関連のアクションを実行するために使用できます。具体的には、追加関数を使用してプラグインをTinymceに追加しています。

addルーチン内では、エディターインスタンスを介してビジュアルエディターにアクセスできます。タイトル、コマンド、アイコンの画像で構成されるAddButton関数を使用してボタンを登録します。

最後に、addCommand関数を使用してコマンドを登録します。これは、ボタンがクリックされたときを示すアラートを示しています。

プラグインフォルダー内にicon.png画像も含める必要があります。これは、ボタンに使用されるアイコン画像です。

コードを保存し、WordPress管理>プラグインでプラグインをアクティブにします。 
<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>
ログイン後にコピー
次に、ページまたは投稿を作成または編集すると、アイコンでボタンが表示されることを願っています。

ボタンをクリックすると、
    ボタンがクリックされています！
  • アラート：
    • が表示されます。

    • 実行するコマンドを定義する

    アラートをプロンプトに置き換えましょう。ユーザーに、ビジュアルエディターの選択したテキストをラップしたいCSSクラス名を尋ねましょう。 

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
このコマンドは、ユーザーがテキストを選択し、CSSクラス名を入力してプロセスをキャンセルしなかったことを確認するために、いくつかの正気チェックを実行します。

これらのチェックが通過した場合、エディターのexecCommand関数を実行して、選択したテキストを置き換え、選択したテキストを入力されたCSSクラスを含むスパンタグに包まれています。

すべてが機能した場合は、「テキスト」ビューに切り替えてください。選択したテキストがスパンタグに包まれていることがわかります。

結論

WordPressプラグインを作成して、Tinymce Visual Editorにボタンを追加しました。このプロセスでは、WordPressがTinymceとの統合に使用するフィルターと、ボタンを追加してクリックしたときにアクションを実行するために必要なJavaScriptコードを調査しました。 WordPress Visual Editorにカスタム機能を追加します完全なソースコードをダウンロードするには、githubリポジトリまたは直接zipファイルのダウンロードリンクにアクセスしてください。

次の記事では、Tinymceプラグインをさらにカスタマイズするためにさらに高度な手順を取り上げます。 WordPress Visual Editorにカスタム機能を追加することについてのよくある質問（FAQ）

WordPress Visual Editorにカスタムボタンを追加するにはどうすればよいですか？

WordPress Visual Editorにカスタムボタンを追加すると、Tinymce APIを使用して実現できます。このAPIを使用すると、ツールバーに新しいボタンを追加して機能を定義できます。 WordPressインストールのプラグインディレクトリに新しいプラグインファイルを作成し、「MCE_BUTTONS」フィルターを使用してボタンを追加できます。次に、「mce_external_plugins」フィルターを使用してプラグインのJavaScriptファイルをロードします。これにより、ボタンの機能が定義されます。プラグインを使用してコーディングせずにWordPress Visual Editorをカスタマイズします。ツールバーにボタンを追加、削除、または再配置したり、エディターの外観を変更したり、カスタムスタイルとフォーマットを追加できるプラグインがいくつかあります。この目的のための人気のあるプラグインには、Tinymce Advanced、WP Edit、およびUltimate Tinymceが含まれます。 'tiny_mce_before_init'フィルターを使用して編集者。このフィルターを使用すると、「style_formats」オプションを含むTinymce設定アレイを変更できます。このオプションには、それぞれがスタイルを定義するアレイの配列として、カスタムスタイルを追加できます。各スタイルには、「タイトル」、「ブロック」、「クラス」、「ラッパー」プロパティが含まれている必要があります。

TINYMCEとは何ですか？また、WordPress Visual Editorとどのように関連していますか？

はい、WordPress Visual Editorは完全に応答性が高く、モバイルデバイスで使用できます。ただし、画面サイズが小さいため、「キッチンシンク」のドロップダウンにいくつかのツールバーボタンが隠されている可能性があります。 'tiny_mce_before_init'フィルターと「style_formats」オプションを使用して、WordPress Visual Editorにカスタム形式。カスタム形式を配列の配列として定義でき、それぞれが形式を定義します。各形式には、「タイトル」、「インライン」、「クラス」、「ラッパー」プロパティを含める必要があります。編集者WordPress管理エリアのユーザー>プロフィールに移動し、[視覚エディターを無効にします]オプションを確認します。 WordPress Visual Editorでショートコードを使用できます。エディターにショートコードを入力するだけで、投稿が表示されると処理されます。ツールバーの「テーブル」ボタンを使用して、ビジュアルエディター。このボタンが表示されていない場合は、Tinymce Advancedのようなプラグインをインストールして追加する必要がある場合があります。

以上がWordPress Visual Editorにカスタム機能を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：WordPress noncesとは何ですか？ 次の記事：LEMPスタックにWordPressを使用してVPSを構築します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2769
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2904
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2427
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2332
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2413
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート