TinyMCE Advanced設定

自分がWordPressを導入する際には、TinyMCE Advancedをインストールしていたりします。

コードは、WordPress 3.9 / TinyMCE Advanced 4以降の設定になります。
それ以前のものは、記述が違っていたりするので、使用できないと思います。

コーポレートサイトなど、納品する際によく設定する内容です。
下記コードをインポートすると設定情報が変わります。

{"settings":{"toolbar_1":"bold,italic,underline,strikethrough,alignleft,aligncenter,alignright,alignjustify,outdent,indent,forecolor,backcolor","toolbar_2":"bullist,numlist,blockquote,pastetext,removeformat,link,unlink,image,table,code","toolbar_3":"fontsizeselect,formatselect,styleselect","toolbar_4":"","options":"advlink,image","plugins":"table,link"},"admin_settings":{"options":"no_autop","disabled_plugins":""}}

ブロックやクラスを追加する為に functions.phpに下記を追記する。

function custom_editor_settings( $initArray ){
     $initArray['body_class'] = 'entryBody';
    
     //Paragraph指定
     $initArray['block_formats'] = '段落=p; 見出し1=h3; 見出し2=h4; 見出し3=h5';
    
     //フォーマット指定
     $style_formats = array(
          array('title' => '回込み解除','selector' => '*', 'classes' => 'alignclear')
     );
     $initArray['style_formats'] = json_encode( $style_formats );
     $initArray['style_formats_merge'] = false;
     return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

外部スタイルシートを読込むようにfunctions.phpに追記する。

//エディタ用CSSファイル追加
function add_custom_editor_style($css) {
    $files = preg_split("/,/", $css);
    $files[] = plugins_url(). '/my_setting/css/editor-style.css';
    $files = array_map('trim', $files);
    return join(",", $files);
}
add_filter('mce_css', 'add_custom_editor_style');

最後に、スタイルを追加する。

.entryBody {
     font-size: small;
     line-height: 1.9;
     font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,'ＭＳ Ｐゴシック',Verdana,Arial,Helvetica,sans-serif;
     margin: 0;
     padding: 10px;
}
.entryBody p {
     margin: 0 0 20px;
}
.entryBody img {
     max-width: 100%;
     height: auto;
}
.entryBody .aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
}
.entryBody .alignleft {
     float: left;
     margin: 0 18px 20px 0;
}
.entryBody .alignright {
     float: right;
     margin: 0 0 20px 18px;
}
.entryBody .alignclear {
     clear: both;
}
.entryBody img.centered {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
.entryBody h3 {
     font-size: 18px;
     border-left: 5px solid #333;
     border-bottom: 1px solid #333;
     padding: 0 0 5px 10px;
     margin: 0 0 15px;
}
.entryBody h4 {
     font-size: 14px;
     border-left: 4px solid #333;
     border-bottom: 1px solid #333;
     padding: 0 0 5px 10px;
     margin: 0 0 10px;
}
.entryBody h5 {
     font-size: 14px;
     margin: 0 0 8px;
}
.entryBody ul,
.entryBody ol {
     list-style-position: outside;
     margin: 0 0 20px 20px;
     padding: 0;
}
.entryBody ul li {
     list-style: disc;
}
.entryBody ol li {
     list-style: decimal;
}
.entryBody table {
     border-collapse: collapse;
     margin-bottom: 20px;
}
.entryBody table caption {
     text-align: left;
     padding: 0 0 5px;
     font-weight: bold;
}
.entryBody table th,
.entryBody table td {
     padding: 5px;
     border: 1px solid #ccc;
     line-height: 1.3;
}
.entryBody table th {
     background: #dcdcdc;
}