【WordPress】ビジュアルエディタでプラグインを使わずHタグにクラスを追加したりリンクを作成したりする方法
wordpressのエディタ画面でプラグインを使わずHタグにクラスをつけたり、特定のタグで指定したときにしかクラスを与えないといった細かい設定をする方法。
Index
functions.phpにTinyMCEをカスタマイズしたスタイルセレクトボタンを追加する
functons.phpをカスタマイズする。こんな感じ。
functions.php
//スタイルセレクトボタンを追加
function tinymce_add_buttons( $array ) {
array_unshift( $array,
'styleselect'
);
return $array;
}
add_filter( 'mce_buttons', 'tinymce_add_buttons' );
//スタイルセレクトの初期設定を変更
function customize_tinymce_settings($mceInit) {
$style_formats = array(
array(
'title' => 'div(段落)',
'block' => 'div',
'classes' => 'txt-paragraph',
'wrapper' => true,
),
array(
'title' => '見出し2',
'block' => 'h2',
'classes' => 'ttl-xl',
),
array(
'title' => '見出し3',
'block' => 'h3',
'classes' => 'ttl-lg',
),
array(
'title' => '見出し4',
'block' => 'h4',
'classes' => 'ttl-md',
),
array(
'title' => '見出し5',
'block' => 'h5',
'classes' => 'ttl-sm',
),
array(
'title' => '見出し6',
'block' => 'h6',
'classes' => 'ttl-xs',
),
array(
'title' => 'ボックス(赤)',
'block' => 'div',
'classes' => 'frame-red',
'wrapper' => true,
),
array(
'title' => 'ボックス(白)',
'block' => 'div',
'classes' => 'frame',
'wrapper' => true,
),
array(
'title' => 'リスト(丸型タイプ)',
'inline' => 'li',
'selector' => 'ul',
'classes' => 'list-ul',
'wrapper' => true,
),
array(
'title' => 'リスト(数字タイプ)',
'inline' => 'li',
'selector' => 'ol',
'classes' => 'list-ol',
'wrapper' => true,
),
array(
'title' => 'アンダーライン(赤)',
'inline'=> 'span',
'styles' => array(
'text-decoration' => 'underline',
'color' => 'red'
),
'exact' => true,
),
array(
'title' => 'ボタン(googleリンク)',
'inline' => 'a',
'classes' => 'button',
'attributes' => array(
'href' => 'https://google.com'
),
'wrapper' => true,
),
array(
'title' => '書式設定をリセット',
'selector' => '*',
'remove' => 'all',
),
);
$mceInit['style_formats'] = json_encode( $style_formats );
return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings' );そもそもTinyMCEって何？
wikipediaでは下記のようにあり、wordpressが開発しているわけではなく、wordpressが導入しているエディタということ。他にもFacebookなどが導入しているようです。
TinyMCEはTiny Moxiecode Content Editorの略称。TinyMCEはプラットホームに依存しないウェブベースのJavaScript/HTML WYSIWYGエディターであり、LGPLのオープンソフトウェアライセンスに基づいてMoxiecode Systems ABらによって開発されている。TinyMCEはオープンソースのCMS（コンテンツマネージメントシステム）と親和性が高く、MODxやJoomla!・WordPressなど様々なオープンソースWYSIWYGエディターとして組み込まれている。Drupal・MovableTypeなどでもプラグイン追加などにより手軽に利用できる。
-wikipedia-
TinyMCE Style Format のパラメーター一覧
配列内に設定できるパラメーター。
- title
- inline / block
- classes
- selector
- styles
- attributes
- exact
- wrapper
- remove
1.title (任意でつけたいスタイル名)
エディタに表示されるセレクトボタンの名称を設定。
'title' => 'ボックス(赤)',エディタでこの様に表示されます。
2.inline or block (htmlタグ)
選択した要素を囲むタグの設定。
inlineとblockの２つがありそれぞれに設定できるタグが決まっている。
inline
作成するスタイルがインライン要素の時に指定する。テキスト選択部分はこのインライン要素で適用されます。
インライン要素の指定だと。
'inline' => 'span',インライン要素まとめ
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
block
作成するスタイルがブロック要素の時に指定する。選択範囲が既に別のブロック要素が適用されている場合は、新しいブロック要素に置き換えられます。
ブロック要素の指定だと。
'block' => 'div',ブロック要素まとめ
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
3.classes (任意でつけたいクラス名)
選択した要素(インライン/ブロック要素)に適用するクラスを設定する。
下記の例では「見出2」のh2タグにttl-xlというクラス名が適用される。
'title' => '見出し2',
'block' => 'h2',
'classes' => 'ttl-xl',4.selector (htmlタグ)
selectorを設定するとinlineまたはblockで設定した要素ではなく、selectorに設定した要素に適用される。
これは、特定の要素にクラスを適用したり、選択範囲の内部に該当する設定がある時だけしか適用させたくない時に便利。table、tr、ol、ulに適用する時に使える。
ややこしいので実際のコードで説明すると、このサンプルでは選択した要素にliが存在すれば、selectorで指定したulにクラス名が適用される。
'inline' => 'li',
'selector' => 'ul',
'classes' => 'list-ul',エディタの操作手順としては、
1.テキストを選択。
2.デフォルトのリスト作成ボタンをクリックし、リストを作成。
この時にhtmlはulタグとliのタグでスタイルされる。
3.その後に、このカスタムスタイルを適用
ulにlist-ulというクラスが適用され、独自の装飾がつく。
【補足】デフォルトのリストを作成せずにカスタムスタイルを適用させようとしてもliが存在しないので選択が不可になる。
5.styles (プロパティ名:値オブジェクト)
色などのCSSスタイル項目を設定したタグに直接適用する。
'styles' => array(
'text-decoration' => 'underline',
'color' => 'red'
)6.attributes (属性名:値オブジェクト)
選択した要素に属性を適用する。独自のnameやhref属性など。
'attributes' => array(
'href' => 'https://google.com',
'name' => 'googleリンク'
)7.exact (true or false)
指定した要素に類似のスタイルが存在する時の設定。Default(初期値)はfalse。
これはアンダーライン/取り消し線/文字の色などのテキスト装飾の挙動を細かく設定する時に使う。
false
既存の要素に同じプロパティが存在する場合は値が上書きされ、異なるプロパティが存在する場合はその要素に追加される。
true
同じプロパティの有無にかかわらず、新規要素が追加され両方適用させる。
例えば下記のように「アンダーライン」と「打ち消し線」の設定がありexactをfalseに設定した時、
array(
'title' => 'アンダーライン',
'inline'=> 'span',
'styles' => array(
'text-decoration' => 'underline',
),
'exact' => false,
),
array(
'title' => '打ち消し線',
'inline'=> 'span',
'styles' => array(
'text-decoration' => 'line-through'
),
'exact' => false,
),はじめにアンダーラインを適用させたとする。
<p><span style="text-decoration:underline;">hogehogoe</span></p>次に打ち消し線を同じ要素に適用させるとunderlineがline-throughによって上書きされる。
<p><span style="text-decoration:line-through;">hogehogoe</span></p>逆に、exactをtrueに設定した場合。
はじめにアンダーラインを適用。
<p><span style="text-decoration:underline;">hogehogoe</span></p>次に、打ち消し線を適用。すると、はじめに設定した要素を囲むように新しい要素が追加され、両方が適用される。
<p><span style="text-decoration:line-through;"><span style="text-decoration:underline;">hogehogoe</span></span></p>8.wrapper (true or false)
選択した要素をラップ(包括)するか、または置き換えるかを設定する。Default(初期値)はfalseで置き換えるという挙動。
false
選択した要素を置き換える。
true
選択した要素の親要素としてラップする。
コードサンプル
array(
'title' => 'div(段落)',
'block' => 'div',
'classes' => 'txt-paragraph',
'wrapper' => false,
),falseを設定すると、エディタ画面で通常テキストを選択時はpタグで囲まれており、そのテキスト要素に「div(段落)」を適用させるとpタグがなくなり、指定した要素div(段落)に置き換わる。
pタグで選択。
段落を適用。
divに置き換わる。
trueにすると選択したpタグはそのまま残り、その親要素としてdiv(段落)が追加されスタイルが適用される。
使いどころとしては段落を分ける時にdivで分割したいときなどに便利。
※ただし、htmlの文法上ありえない組み合わせのときは適用されない。
例えば、下記のようにpタグをh2タグで更に囲むなど。
<h2><p>テキストテキストテキストテキスト</p></h2>9.remove (none or empty or all)
要素のフォーマットをリセットする。Default(初期値)はnone。
wordpresssのエディタにデフォルトである「書式設定をクリア」はnoneが設定されている。
none
要素からスタイル、クラス、または属性のみが削除され、要素は削除されない。
empty
要素にスタイル、クラス、または属性がない場合、その要素は削除される。
all
要素のスタイル、クラス、または属性に関係なく、要素を削除する。
タグ要素もすべてリセットしたい場合の設定
array(
'title' => '書式設定をリセット',
'selector' => '*',
'remove' => 'all',
),上記以外にもパラメーターはあるようですが、これだけあれば十分カスタマイズできるので、残りは下記参照元を見てください。
参照元
おまけ:WordPrssのエディタにCSSを反映させる
上で設定したクラスのスタイルシートを投稿画面のエディタにも反映させる方法。
本内容にある画面キャプチャもカスタムスタイルシートを適用させてます。
記事入力段階でイメージがつかめるので便利です。
