WordPress 3.9以降TinyMCE 4の微調整:スタイル、ボタン、フォント、ドロップダウン、ポップアップの追加

WordPress 3.9で私のお気に入りのアップデートの1つは、TinyMCEバージョン4.0コアを作成することでした。新しいTinyMCEは見た目がすっきりしていて(実際にはWPダッシュボードと一致します)、非常に優れた機能がいくつか追加されています。新しいTinyMCEで動作するように多くの古いテーマとプラグインを更新する必要があったので、少し時間をかけて調べました API そしていくつかのクールなものを考え出す。以下では、TinyMCEの機能を拡張する方法の例をいくつか紹介します。すべての手順やコードの正確な意味を説明するつもりはありませんが(これは開発者を対象としています)、テーマまたはプラグインにコピー/貼り付けして、それに応じて微調整できる正確なコードを提供します.


フォントサイズとフォントファミリーの選択の追加

デフォルトでは、カスタムフォントとフォントサイズはTinyMCEエディターに追加されません。以下の関数は、これらの両方のドロップダウンを2行目のエディターの左端に追加します。別の行に配置する場合は、「mce_buttons_2」と表示されている場所を変更するだけです(例:3行目には「mce_buttons_3」を使用します)。.

//エディターでフォントサイズとフォントファミリーの選択を有効にします
if(!function_exists( 'wpex_mce_buttons')){
function wpex_mce_buttons($ buttons){
array_unshift($ buttons、 'fontselect'); //フォント選択を追加
array_unshift($ buttons、 'fontsizeselect'); //フォントサイズ選択を追加
$ buttonsを返します。
}
}
add_filter( 'mce_buttons_2'、 'wpex_mce_buttons');

カスタムフォントサイズの追加

デフォルトでは、フォントサイズはpt値に設定されていますが、常に理想的とは限りません。ピクセル値(12px、13px、14px、16px..etc)を使用し、より柔軟なオプションを提供することを好みます。以下の関数は、ドロップダウンセレクターのデフォルトのフォントサイズオプションを変更します.

// mceエディターのフォントサイズをカスタマイズします
if(!function_exists( 'wpex_mce_text_sizes')){
関数wpex_mce_text_sizes($ initArray){
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
$ initArrayを返します。
}
}
add_filter( 'tiny_mce_before_init'、 'wpex_mce_text_sizes');

カスタムフォントの追加

フォントファミリーセレクターのデフォルトのフォントオプションは、デフォルトではすべて「Webセーフ」フォントですが、セレクターにさらにフォントを追加したい場合はどうしますか?たぶんいくつかのGoogleフォント?以下の例を見るのはとても簡単です.

//カスタムフォントをフォントリストに追加します
if(!function_exists( 'wpex_mce_google_fonts_array')){
function wpex_mce_google_fonts_array($ initArray){
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono、times; Arial = arial、helvetica、sans-serif; Arial Black = arial black、avant garde; Book Antiqua = book antiqua、palatino; Comic Sans MS = comic sans ms、sans-serif; Courier New = courier new、courier; Georgia = georgia、palatino; Helvetica = helvetica; Impact = impact、chicago; Symbol = symbol; Tahoma = tahoma、arial、helvetica、sans-serif; Terminal = terminal、monaco; Times New Roman = times new roman、times; Trebuchet MS = trebuchet ms、geneva; Verdana = verdana、geneva; Webdings = webdings; Wingdings = wingdings、zapf dingbats ';
$ initArrayを返します。
}
}
add_filter( 'tiny_mce_before_init'、 'wpex_mce_google_fonts_array');

上記のコードのリストに「Lato」を追加したことに注目してください。とても簡単です!私のTotal WordPressテーマでは、実際に、テーマパネルで定義されているサイトで使用されているカスタムフォントをループ処理し、それらを選択ボックスに追加して、投稿/ページの編集中にも使用できるようにします(甘い)。ただし、コードはフォントファミリーをドロップダウンにのみアドするため、スクリプトが魔法のように読み込まれることはないため、エディターでテキストを変更すると、実際に適用されているカスタムフォントを確認できます。それが以下のコードです。!

//エディターで使用するGoogleスクリプトを追加します
if(!function_exists( 'wpex_mce_google_fonts_styles')){
function wpex_mce_google_fonts_styles(){
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style(str_replace( '、'、 '%2C'、$ font_url));
}
}
add_action( 'init'、 'wpex_mce_google_fonts_styles');

フォーマット(スタイル)のドロップダウンメニューを有効にして新しいスタイルを追加する

WP 3.8の「スタイル」ドロップダウンを覚えていますか?かっこいい!これを使用して、投稿エディター内で使用するクールなクラスを追加できます(私はWPExplorerで実際にボタン、色付きのスパン、ボックスなどに使用しています)。 WP 3.9ではスタイルを追加できますが、新しいTinyMCE 4.0では「形式」に名前が変更されたため、動作が少し異なります。以下は、[フォーマット]ドロップダウンを有効にし、新しいアイテムを追加する方法の例です。.

WordPress TInyMCE形式のドロップダウンメニュー

フォーマットのドロップダウンメニューを有効にする

これは実際にはWP 3.9より前と同じ方法で行われますが、方法がわからない場合に備えて共有します.

//フォーマットドロップダウンメニューをMCEに追加
if(!function_exists( 'wpex_style_select')){
function wpex_style_select($ buttons){
array_push($ buttons、 'styleselect');
$ buttonsを返します。
}
}
add_filter( 'mce_buttons'、 'wpex_style_select');

フォーマットに新しいアイテムを追加する

新しいアイテムの追加はとても簡単です。 「$ settings [‘style_formats_merge’] = true;」を追加したことに注目してください。以下のコードでは、これにより、編集内容が他のフォーマットと一緒にフォーマットドロップダウンメニューに確実に追加されます。全体を上書きしないでください(他のプラグインも同様にそれを利用したい場合があります)。.

// TinyMCEの「フォーマット」メニューのドロップダウンに新しいスタイルを追加します
if(!function_exists( 'wpex_styles_dropdown')){
function wpex_styles_dropdown($ settings){

//新しいスタイルの配列を作成します
$ new_styles = array(
アレイ(
'title' => __( 'Custom Styles'、 'wpex'),
'items' => array(
アレイ(
'title' => __( 'Theme Button'、 'wpex'),
'セレクタ' => 'a',
'クラス' => 'テーマボタン'
),
アレイ(
'title' => __( 'Highlight'、 'wpex'),
'インライン' => 'スパン',
'classes' => 'text-highlight',
),
),
),
);

//古いスタイルと新しいスタイルをマージします
$ settings ['style_formats_merge'] = true;

//新しいスタイルを追加します
$ settings ['style_formats'] = json_encode($ new_styles);

//新しい設定を返す
$ settingsを返します。

}
}
add_filter( 'tiny_mce_before_init'、 'wpex_styles_dropdown');

シンプルなMCEボタンの追加

TinyMCEエディターに新しいボタンを追加することは、ショートコードの場合に特に便利です。ユーザーはショートコードを覚えておく必要がないため、ボタンをクリックするだけで挿入できます。 TinyMCEにすべてのショートコードのボタンを数百個追加すると言っているわけではありません(開発者がこれを行うと嫌いです。これは悪い習慣であり、恐ろしいように見えます)。束を追加したい場合は、次のセクションで説明するようにサブメニューを作成する必要があります.

WordPress MCE新しいボタン

PHPコード– WPで新しいMCEプラグインを宣言する

このコードは新しいMCEプラグインを宣言します。JavaScriptファイル「mce-button.js」の場所を、ファイルの場所と一致するように変更してください(次のサブセクションでもコードを提供します)。明らかに接頭辞「my」の名前をもっとユニークなものに変更します!

//関数を適切なフィルターにフックします
function my_add_mce_button(){
//ユーザーの権限を確認します
if(!current_user_can( 'edit_posts')&&!current_user_can( 'edit_pages')){
戻る;
}
// WYSIWYGが有効かどうかを確認します
if( 'true' == get_user_option( 'rich_editing')){
add_filter( 'mce_external_plugins'、 'my_add_tinymce_plugin');
add_filter( 'mce_buttons'、 'my_register_mce_button');
}
}
add_action( 'admin_head'、 'my_add_mce_button');

//新しいボタンのスクリプトを宣言します
function my_add_tinymce_plugin($ plugin_array){
$ plugin_array ['my_mce_button'] = get_template_directory_uri()。 '/ js / mce-button.js';
$ plugin_array;を返します。
}

//新しいボタンをエディターに登録します
function my_register_mce_button($ buttons){
array_push($ buttons、 'my_mce_button');
$ buttonsを返します。
}

JSコード– MCEにボタンを追加

このjsコードは、上記のスニペットの「symple_shortcodes_add_tinymce_plugin」関数に登録されたjsファイルに含まれます。これにより、「新しいボタン」という新しいテキストボタンがエディターに追加され、クリックするとテキスト「WPExplorer.com is awesome!」が挿入されます。 (もちろん).

(関数() {
tinymce.PluginManager.add( 'my_mce_button'、function(editor、url){
editor.addButton( 'my_mce_button'、{
テキスト:「新しいボタン」,
アイコン:false,
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
});
});
})();

新しいMCEボタンにカスタムアイコンを追加する

上記では、エディターに「新しいボタン」として表示される新しいボタンを追加する方法を示しましたが、これは少し不自然です…そのため、変更されたコードは、独自のカスタムアイコンを追加する方法を示します.

CSSでスタイルシートを読み込む

この関数を使用して、管理パネルで使用する新しいスタイルシートをロードします。一部のプラグイン/テーマはすでにスタイルシートを追加している可能性があるため、テーマ/プラグインがこれをスキップし、カスタムCSSを追加してjsを調整するだけです(以下を参照)。.

function my_shortcodes_mce_css(){
wp_enqueue_style( 'symple_shortcodes-tc'、plugins_url( '/ css / my-mce-style.css'、__FILE__));
}
add_action( 'admin_enqueue_scripts'、 'my_shortcodes_mce_css');

カスタムCSS

これは、以前にロードされたスタイルシートを追加するためのCSSです。.

i.my-mce-icon {
background-image:url( 'YOUR ICON URL');
}

Javascriptを調整する

次に、以前に追加したJavaScriptを微調整して、テキストパラメータを削除し、アイコンをfalseに設定する代わりに、カスタムクラス名を付けます。.

(関数() {
tinymce.PluginManager.add( 'my_mce_button'、function(editor、url){
editor.addButton( 'my_mce_button'、{
アイコン: 'my-mce-icon',
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
});
});
})();

サブメニュー付きのボタンを追加する

MCEボタンサブメニュー

先ほど、TinyMCEバーに大量の新しいアイコンを追加することは悪い考えであると述べました(そうです)。以下のコードをチェックして、JavaScriptを編集してカスタムボタンのサブメニューを表示する方法を確認してください。実際に見てみたい場合は、 Symple Shortcodesビデオ.

(関数() {
tinymce.PluginManager.add( 'my_mce_button'、function(editor、url){
editor.addButton( 'my_mce_button'、{
テキスト:「サンプルドロップダウン」,
アイコン:false,
タイプ: 'menubutton',
メニュー:[
{
テキスト:「アイテム1」,
メニュー:[
{
テキスト: 'サブアイテム1',
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
},
{
テキスト: 'サブアイテム2',
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
}
]
},
{
テキスト:「アイテム2」,
メニュー:[
{
テキスト: 'サブアイテム1',
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
},
{
テキスト: 'サブアイテム2',
onclick:function(){
editor.insertContent( 'WPExplorer.com is awesome!');
}
}
]
}
]
});
});
})();

クリック時にボタンにポップアップウィンドウを追加する

上記の例では、すべてのボタンに「WPExplorer.comは素晴らしいです!」というテキストが挿入されているだけです。すばらしいのですが、ユーザーがテキストに挿入されているものを変更できるポップアップウィンドウを作成するのはどうでしょうか。今は甘いでしょう!これは、Symple Shortcodesのバージョン1.6に追加したものであり、プラグインがよりユーザーフレンドリーになっています.

WordPress MCEポップアップウィンドウ

(関数() {
tinymce.PluginManager.add( 'my_mce_button'、function(editor、url){
editor.addButton( 'my_mce_button'、{
テキスト:「サンプルドロップダウン」,
アイコン:false,
タイプ: 'menubutton',
メニュー:[
{
テキスト:「アイテム1」,
メニュー:[
{
テキスト:「ポップアップ」,
onclick:function(){
editor.windowManager.open({
タイトル: 'ランダムショートコードを挿入',
体: [
{
タイプ: 'textbox',
名前: 'textboxName',
ラベル: 'テキストボックス',
値: '30'
},
{
タイプ: 'textbox',
名前: 'multilineName',
ラベル: 'マルチテキストボックス',
値:「ここで多くのことを言える」,
multiline:true,
minWidth:300,
minHeight:100
},
{
タイプ:「リストボックス」,
名前: 'listboxName',
label: 'リストボックス',
'値':[
{テキスト: 'オプション1'、値: '1'},
{テキスト: 'オプション2'、値: '2'},
{テキスト: 'オプション3'、値: '3'}
]
}
],
onsubmit:function(e){
editor.insertContent( '[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
})();

これはかっこいいです…?

良い質問!次に、これらの素晴らしい調整を行い、壮大なものを作成するか、WordPress 3.9の新しいTinyMCEと互換性を持つようにプラグイン/テーマを更新します。以下のコメントであなたが思いついたことを教えてください!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map