HOME  /WordPress(応用)
 /親テーマが「editor-style.css」の時のスタイル機能の使い方
2023年11月28日

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


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

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

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

 

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

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

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

 

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

 

しかし「TinyMCE Advanced」の設定で下記項目に✔をつけると、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です。

 

2.親テーマが「editor-style.css」の時の問題点

CSSクラスメニュは下記の順番で呼ばれます。

①親テーマの「editor-style.css」

②子テーマの「editor-style.css」

例えば

上記の様に表示させたいのに、親テーマの「editor-style.css」中に記載されている「タグ+CSSクラス」が「img.waku0」の上にごみの様に表示されます。

このままではあまり使い易いCSSクラスメニュにならないので下記対策をします。

3.対策方法

既存の「editor-style.css」をリムーブして、新しい名前の「my-editor-style.css」等を利用する宣言により解決させます。

 

3-1.editor-style.cssのファイル名を変更します。

上記では「my-editor-style.css」というビジュアルエディタ用のCSSを新規作成しています。

新しい名前のスタイルシート名は何でも良いです。

 

3-2.functions.phpに下記を加えます。

//editor-style.cssを変更する
function my_styles() {
  remove_editor_styles();                           //親テーマのスタイルシートは読み込まない
  add_editor_style( 'my-editor-style.css' );} //子テーマの指定したスタイルシートを読み込む
add_action( 'admin_init', 'my_styles' );

remove_editor_styles()で親テーマの「editor-style.css」は読み込みません。

add_editor_styleで新しいスタイルシートは「my-editor-style.css」を読み込みます。

add_editor_styleで「editor-style.css」に指定すると。親テーマのスタイルシートが「editor-style.css」の場合は、親のスタイルシートも読み込まれます。

よって親テーマのスタイルシートが何かによって、記述方法が異なります。

 

3.その他の補足事項

3-1.CSSクラスメニュに区切りをつける。

設定したいクラスメニュが増えると区切り文字が無いと選択がしづらくなります。

下図をみて下さい。

上図は所々に区切り文字が入っています。

これを実現する為には、下記の様な形でCSSを記述すると上図の様に表示されます。

//クラスメニュの設定
.____img_________{}
//イメージ関連のCSSクラスメニュの設定

 

3-2.文字列の区切り文字

 文字列の区切り文字に何を使うべきか?

文字列の区切り文字として-(ハイフン)」と「_(アンダースコア又はアンダーバー)」があり、どの様な時に何を使うか?を悩みます。

<確かな事>

■関数名や変数名に「-(ハイフン)」を利用するとエラーになります

■GoogleはURLの文字区切りに「-(ハイフン)」を推奨しています。

 

そこで「ファイル名」や「URL名」の区切り文字は「-(ハイフン)」、プログラムの中での「変数名」や「関数名」の区切り文字は「_(アンダースコア)」で考えると良いと思います。

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

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

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

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

ここでは引用

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

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

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」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

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