string(14) "34.204.169.230"
 
HOME  /WordPress(応用)
 /親テーマが「editor-style.css」以外の時のスタイル機能の使い方
2020年04月20日

親テーマが「editor-style.css」以外の時のスタイル機能の使い方

ここでは親テーマのビジュアルエディタのCSSが「editor-style.css」以外の場合の設定について解説しています。

親テーマがどの様なCSSを使っているか?は下記を参照してください。

 ブロックエディタ時代にビジュアルエディタを使う方法

 

1.TinyMCE Advancedをインストールした時の問題点

1-1.TinyMCE Advancedプラグインをインストールする。

下記のプラグインをインストールして有効化して下さい。

 

1-2.設定→TinyMCE Advancedの旧エディタタブを開きます

下記のエラーがでています。

­ ­エラーの理由

この記事を書いて時点のTinyMCE Advancedのバージョンは、5.3.0になります。

今後改善されるかも判りませんが、現在のAdvancedで意識しているCSSは「editor-style.css」になります。

しかし親テーマが使っているビジュアルエディタのCSSが「editor-style.css」でないので読めませんというエラーになります。

 

2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法

<対策方法>

①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。

 

②上記のファイル名を「editor-style.css」に変更する。

 

③子テーマのfunctions.phpに下記を追加します。

function my_styles() {
  remove_editor_styles();                  //親テーマのエディタスタイルシートの削除
  add_editor_style( 'editor-style.css' );//子テーマのスタイルシートの追加
} 
add_action( 'admin_init', 'my_styles' );

※1.関数名は任意です。

※2.上記は、現在設定されているエディタCSSを解除し、新たなCSS名を指定しています。

 

④「設定→TinyMCE Advanced」を再度、開き直すと、エラーが消えて下記が表示されますので✔して下さい。

その他の設定はデフォルトで問題ありません。

変更した場合は必ず「設定の保存」を実行して下さい。

以上で「editor-style.css」で設定した「スタイル」が利用できる様になります。

 

3.TinyMCE Advancedのスタイル機能とは

TinyMCE Advancedプラグインをインストールすると下記の様なボタンが追加されます。

このボタンをビジュアルエディタのメニュに配置して下さい。

 

このスタイルをクリックした時に表示されるメニュのデフォルトは下記になります。

 

しかし、項番2で「CSSクラスメニュ」の所に✔を付けるとクラスメニュが定義できるようになります。

­ ­メモ

CSSクラスメニュとはタグ(p、div、img、table等)に付けたクラスメニュです。

例えばimgタグに「.×××」というクラスをつけたメニューという事です。

 

例えば下記の様なクラスメニュを「editor-style.css」に設定します。

img.waku0 {
	padding:2px;
	border-radius:0;
	border:1px solid #8b8682;}
img.waku5 {
	padding:5px;
	border-radius:0;
	border:1px solid #8b8682;}

 

そうするとスタイルメニュをプルダウンすると、設定したクラスが表示されます。

下記の例ではimgが選択されている時に「.waku0」と「.waku5」のクラスを追加する事ができる様になります。

CSSのクラスはBootstrap等のクラスでも、任意設定のクラスでもOKです。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「tinymce」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。