【WordPress】エディタカスタマイズ

# エディタのbodyにclass指定

``` php
/*-------------------------------------------------------
エディタのbodyにclass指定
--------------------------------------------------------*/
function my_tiny_mce_before_init( $init_array ) {
	global $post;
	global $post_type;

	///ページ名を調べる
	$pagename = $post->post_name;

	$init_array['body_class'] = 'post-' . $post->ID . ' ' . $post_type .'-'.$pagename;
	return $init_array;
}
add_filter('tiny_mce_before_init', 'my_tiny_mce_before_init');
```

---

# 投稿画面にフロントのスタイルシート適用

__概要__

投稿画面にフロントのスタイルシート適用させて、投稿画面とフロント画面の見た目の差を無くす。

__施策__

```php
/*--------------------------------------------------------
投稿画面にフロントのスタイルシート適用
--------------------------------------------------------*/
function my_theme_add_editor_styles() {
	add_editor_style( get_template_directory_uri() . '/css/editor.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );
```

---

# ビジュアルエディタの余計な機能を無効化

__概要__

ビジュアルエディタの余計な機能を無効化

__施策__


``` php
/*-----------------------------------------
ビジュアルエディタの余計な機能を無効化する
-----------------------------------------*/
function override_mce_options( $init_array ) {
    global $allowedposttags;

    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';
    $init_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
    $init_array['indent']                  = true;
    $init_array['wpautop']                 = false;
    $init_array['force_p_newlines']        = false;

    return $init_array;
}

add_filter( 'tiny_mce_before_init', 'override_mce_options' );
```

__解説__

| オプション | 説明 |
| ---- |----- |
| valid_elements | 全てのタグと属性値を許可 |
| extended_valid_elements | 既存設定に追加されている全てのタグと属性値を許可 |


---

# 記事内にスタイルシート入力を許可

``` php
/*--------------------------------------------------------
記事内にスタイルシート入力を許可
--------------------------------------------------------*/
function my_can_tinymce_tag($in) {
	$in['valid_children'] = '+body[style]';
	return $in;
}
add_filter('tiny_mce_before_init', 'my_can_tinymce_tag' );
```

---

# Tiny MCEのフォント指定をptからpxに変更する

__概要__

Tiny MCEのフォント指定をptからpxに変更する

__施策__


``` php
/*--------------------------------------------------------
Customize mce editor font sizes
--------------------------------------------------------*/
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 22px 24px 26px 28px 30px 32px 34px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
```

---

# TinyMCE追加用のスタイルを初期化

__概要__

TinyMCE追加用のスタイルを初期化

__施策__

php

``` php
/*--------------------------------------------------------
//TinyMCE追加用のスタイルを初期化
--------------------------------------------------------*/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
	function initialize_tinymce_styles($init_array) {
		//追加するスタイルの配列を作成
		$style_formats = array(
			array(
				'title' => 'テキスト青色',
				'inline' => 'span',
				'classes' => 'txt_blue'
			)
		);
		//JSONに変換
		$init_array['style_formats'] = json_encode($style_formats);
		return $init_array;
	}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

//TinyMCEにスタイルセレクトボックスを追加
if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
	function add_styles_to_tinymce_buttons($buttons) {
		//見出しなどが入っているセレクトボックスを取り出す
		$temp = array_shift($buttons);
		//先頭にスタイルセレクトボックスを追加
		array_unshift($buttons, 'styleselect');
		//先頭に見出しのセレクトボックスを追加
		array_unshift($buttons, $temp);

		return $buttons;
	}
endif;
add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');

```


---



# ビジュアルエディタにHTMLを直挿入するためのボタンを追加

__概要__

ビジュアルエディタにHTMLを直挿入するためのボタンを追加

__施策__

php

``` php
/*--------------------------------------------------------
// ビジュアルエディタにHTMLを直挿入するためのボタンを追加
--------------------------------------------------------*/
function add_insert_html_button( $buttons ) {
	$buttons[] = 'button_insert_html';
	$buttons[] = 'button_insert_html2';
	$buttons[] = 'button_insert_html3';
	$buttons[] = 'button_insert_html4';
	$buttons[] = 'button_insert_html5';
	$buttons[] = 'button_insert_html6';
	$buttons[] = 'button_insert_html7';
	return $buttons;
}
add_filter( 'mce_buttons', 'add_insert_html_button' );

function add_insert_html_button_plugin( $plugin_array ) {
	$plugin_array['custom_button_script'] =  get_stylesheet_directory_uri() . "/assets/js/editor.js";
	return $plugin_array;
}
add_filter( 'mce_external_plugins', 'add_insert_html_button_plugin' );
```

editor.js

``` js
(function() {
    tinymce.create('tinymce.plugins.MyButtons', {
        init : function(ed, url) {
            ////ボタン設定/////////////////////////
            ed.addButton( 'button_insert_html', {
                title : '大ボタン',
                image : url + '/ico_btn_l.svg',
                cmd: 'button_insert_html_cmd'
            });
            // ボタンの動作
            ed.addCommand( 'button_insert_html_cmd', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '<a href="" class="btn_sty01 big_btn">' + selected_text + '</a>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
        },
        createControl : function(n, cm) {
            return null;
        }
    });
	/// Start the buttons
    tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );
})();
```

---

# TinyMCE Templates をAdvance Custom Fieldに適用

__概要__

TinyMCE Templates をAdvance Custom Fieldに適用

__施策__


``` php
/*-------------------------------------------------------
TinyMCE Templates をAdvance Custom Fieldに適用
--------------------------------------------------------*/
add_filter( 'tinymce_templates_enable_media_buttons', function(){ return true;
// Displays insert template button on all visual editors
} );
```

---

# ACFにgoogle maps apiキーを登録

__概要__

ACFにgoogle maps apiキーを登録

__施策__


``` php
/*-------------------------------------------------------
google maps api key
--------------------------------------------------------*/
function my_acf_google_map_api( $api ){
	$api['key'] = '【goolemaps api keyを代入】';
	return $api;
}

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
```

---

# 管理者以外にアップデートのお知らせ非表示

__概要__

管理者以外にアップデートのお知らせ非表示

__施策__


``` php

/*-------------------------------------------------------
//管理者以外にアップデートのお知らせ非表示
--------------------------------------------------------*/
function update_nag_admin_only() {
	if ( ! current_user_can( 'administrator' ) ) {
		remove_action( 'admin_notices', 'update_nag', 3 );
	}
}
add_action( 'admin_init', 'update_nag_admin_only' );

```