エディタースタイルcss
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d_admin/editor-style.css
ブログ表示css
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d/less/parts/blog_con.less
ファンクション
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/func/scripts.php
を全部かえた
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d_edit
以下に
TinyMCE スタイルを追加
http://nelog.jp/wordpress-tinymce-custom
ファンクションのコードは難しいので理解しようとせず
ただ書いて
クラスと タイトルを増やす
そして
ブログ表示css
lessで管理 .blog_con{ の中身はレスしない}
.blog_con { h2,h3,h4,h5{margin-bottom:24px; margin-top:36px; font-weight:bold} h2{ background-color:#000; color:#fff; padding: 15px 30px; font-size:24px; } h3{font-size: 23px; border-bottom: 5px solid #e7e7e7; padding: 10px 0; } h4{font-size: 20px; border-bottom: 5px dashed #eee; padding: 8px 0;} h5{font-size: 20px; padding: 8px 0;} .box_ivory{background-color: #F8EEDA; padding: 20px; margin:12px 0px;} .box_gray{background-color: #e7e7e7; padding: 20px; margin:12px 0px;} .box_sky{background-color: #C5EAFF; padding: 20px; margin:12px 0px;} }
エディタースタイルcss
.blog_con{ の中身のみコピペ追記}
h2,h3,h4,h5{margin-bottom:24px; margin-top:36px; font-weight:bold} h2{ background-color:#000; color:#fff; padding: 15px 30px; font-size:24px; } h3{font-size: 23px; border-bottom: 5px solid #e7e7e7; padding: 10px 0; } h4{font-size: 20px; border-bottom: 5px dashed #eee; padding: 8px 0;} h5{font-size: 20px; padding: 8px 0;} .box_ivory{background-color: #F8EEDA; padding: 20px; margin:12px 0px;} .box_gray{background-color: #e7e7e7; padding: 20px; margin:12px 0px;} .box_sky{background-color: #C5EAFF; padding: 20px; margin:12px 0px;}
に共通のスタイルを記入すればよい
editor-style.css」に
@import url('blog_con.css');
//エディターCSSを差し込む ビジュアルエディタを同じデザインに add_editor_style('d_edit/editor-style.css');
//TinyMCE追加用のスタイルを初期化 //http://com4tis.net/tinymce-advanced-post-custom/ if ( !function_exists( 'initialize_tinymce_styles' ) ): function initialize_tinymce_styles($init_array) { //追加するスタイルの配列を作成 $style_formats = array( array( 'title' => '太字', 'inline' => 'span', 'classes' => 'bold' ), array( 'title' => '赤字', 'inline' => 'span', 'classes' => 'red' ), array( 'title' => 'グレーボックス', 'block' => 'div', 'classes' => 'box_gray' ), array( 'title' => 'アイボリーボックス', 'block' => 'div', 'classes' => 'box_ivory' ), ); //JSONに変換 $init_array['style_formats'] = json_encode($style_formats); return $init_array; } endif; add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000); //TinyMCEにスタイルセレクトボックスを追加 //https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4 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'); //END --TinyMCE追加用のスタイルを初期化
ファンクに
require_once locate_template('d_edit/edit_style.php'); // ブログエディット
追記