エディタースタイル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'); // ブログエディット
追記
