<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

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

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

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

これは、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ボタンの出力方法と、クリックしたときに何をすべきかがわかります。

<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>

addルーチン內(nèi)では、エディターインスタンスを介してビジュアルエディターにアクセスできます。タイトル、コマンド、アイコンの畫(huà)像で構(gòu)成されるAddButton関數(shù)を使用してボタンを登録します。

<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クラス名を?qū)い亭蓼筏绀Α?

<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>

これらのチェックが通過(guò)した場(chǎng)合、エディターのexecCommand関數(shù)を?qū)g行して、選択したテキストを置き換え、選択したテキストを入力されたCSSクラスを含むスパンタグに包まれています。

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

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

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