【WordPress】ビジュアルエディターで効率よく作業する5つの方法


ビジュアルエディタで効率よく入力するための作業効率をあげる設定を紹介します。

1.改行の使い分けで効率化

ビジュアルエディタで改行するときは enterキーを使いますが、標準では  p タグのように行間が空いてしまいます。テキストエディターや、 quicktagsなどカスタマイズしてBRタグを入れることもできますが、普通の改行をするときは shift+enterキーで改行し brタグが挿入できます。

自分はかなり長い間気づいてませんでした。。。

2.TinyMCEAdvanceでメニュー配置を効率化

よく使うメニューやボタンを1,2列目に追加すると、ボタンで表示を引き換えられるので、普段は1行表示しておけば、編集画面を広く使えます。

3.フィルターの追加と除去でお節介を止める

色々サポートしてくれますが、初期設定で中途半端な対応をされると、かなり編集に迷うと思います。
そのような余計な編集を自動でさせないよう、各ポイントごとの設定方法を説明します。

TinyMCEAdvanceでは、ビジュアルエディタと切り替えるごとに、Pタグ、BRタグを変更したり、タグチェック等を行います。

<p>,<br> を ビジュアルエディタで消さない設定

cssやJavaScriptを書いても、勝手に消されたり、変な段落にされてうまく編集できないことがあります。

<p>, <br /> タグをテキストモードへ切替時削除しない設定です。

現在はテーマの functions.phpに書かなくても、その機能をオフにすることができます。

段落タグ

<p> , <br> を ブログ表示時や、ビジュアルからテキストエディター切替時に、余分な段落等を除去するフィルターを停止します。

ウィジェットの設定画面から設定します。

TinyMCEAdvancedの設定内容

☑ Stop removing the <p> and <br /> tags when saving and show them in the Text editor
    (段落の保持)

段落のようなものはPタグを入れる。(投稿記事出力時も含む)

wpautopはビジュアルエディタで存在した、テキストの2重改行(複数の文)をpダグにしてくれるようです。

また、改行を<BR>に変換してくれます。

Changes double line-breaks in the text into HTML paragraphs (<p>...</p>). WordPress uses it to filter the content and the excerpt.


Function Reference/wpautop « WordPress Codex
http://codex.wordpress.org/Function_Reference/wpautop

テキストエディター入力直後
変換前

  テキストエディターから
切替後

<br>

  <p>&nbsp;</p>

text1text1text1text1text1text1
text2text2text2text2text2text2text2

text3text3text3text3

text3text3text3text3 text3text3text3text3

  <p>text1text1text1text1text1text1 text2text2text2text2text2text2text2 text3text3text3text3 text3text3text3text3 text3text3text3text3</p>
text1
text2

text3
  <p>text1 text2 text3</p>

削除は以下のようにします。

消してしまうと改行の自動変換も効かなくなってしまい <br> タグが挿入されていないと改行さえ無効になるので出力時はそのまま残しても良いと思います。

remove_filter( 'the_content', 'wpautop' ); // Pタグを段落に付加するフィルタを除外


下記( style、id等を消させない設定のセクション)の要領でtiny_mce_before_initフックに 、設定するとエディタ上で処理されません。

$initArray['wpautop'] = false;


もうひとつ、apply_source_formatting は trueにすると改行を置き、falseにすると削除するという若干わけわからない説明がされてます。普通は除くか除かない、 置くか置かないの機能だと思いますが TinyMCEの少なくとも4.0から廃止のようです。だから一旦無視しておきます。


WordPress 3.9 was released with a major update to TinyMCE version 4.0


TinyMCE « WordPress Codex
https://codex.wordpress.org/TinyMCE

単一段落時のPタグ付加しない設定

記事内容で、単なるテキストのみの記事の場合、囲むタグ名です。(version 3.5以上)

forced_root_block デフォルトでは ”p” が入っています。それを動作させないよう解除します。

$initArray['forced_root_block'] = false;
force_br_newlines,force_p_newlines は非推奨になったようです。
これら設定を入れてから  Enter と  Shift+Enterの動きが逆になったようです。(もう少しウォッチしますが)

<script>,<style>,id等を ビジュアルエディタで消さない設定

厳密な構造チェック

cssや div  , span のタグ , id 等を消させない設定です。  Google adsence , JavaScript など書いても、不要なタグ/間違ったタグと認識され消されることを防止します。

functions.phpから 大抵のタグを許可し、削除されないようにします。

function nonvalidate_check_visualeditor( $initArray ){
	// cssのstyleや、divの中のdiv,span、spanの中のspanを消させない
	$initArray['valid_children'] = '+body[script],+body[style],+div[div|span],+span[span]';
	// 空タグや、属性なしのタグとか消させない。
	//$initArray['verify_html'] = false;//verson3

        //id など消させない
        $initArray['valid_elements'] = '*[*]';
        $initArray['extended_valid_elements'] = '*[*]';
        //adsense やJSを消させない
        $initArray['extended_valid_elements'] ='script[src|type]';
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'nonvalidate_check_visualeditor' );

スペースや改行を除く設定

$initArray['remove_linebreaks'] = false;

先頭の全角スペースを反映、スペースが自動で取り除かれなくなります。version3.xのみ

記号の変換サポートフィルタ(投稿記事出力時)

特定の記載、スマイルマークなどを、ブログ出力時に自動変換してくれる機能があります。

※このセクションは紛らわしいですが、エディタの話ではなく、投稿出力時の話です。

関数リファレンス/wptexturize - WordPress Codex 日本語版

変換一例

元のテキスト 変換されたテキスト シンボル名
"---" "—" em ダッシュ
"..." "…" 省略記号
`` 開始引用符
"hello “hello 開始引用符
'hello ‘hello 開始引用符
'' 終了引用符
world." world.” 終了引用符
world.' world.’ 終了引用符
" (tm)" " ™" 商標記号
1234x1234 1234×1234 乗算記号

除外方法

例によって themeのfunctions.phpに入力(3ヶ所に対して)

remove_filter('the_title', 'wptexturize');//クォートなど気を利かすフィルタを除外
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');

相対パスに変換

relative_urls:相対パスにします。参照

$initArray['relative_urls'] = true;//相対パスにする。ドメインはdocument_base_urlに設定。定義が複雑なのでリファレンス参照

その他のフィルタ(投稿記事出力時)

http://codex.wordpress.org/Plugin_API/Filter_Reference

フィルタ名 説明 補足  
wp_richedit_pre これは、空だったら 空の文字を入れるらしい。 全く理解できないが、deprecatedで使わないことを推奨されているので、調査は置いておく。  
convert_chars 単一タグのタグ置換 brタグや、hrタグは、<br>から、<br />のようにXHTML準拠に変換  
convert_smilies

特定の指定方法の記載を顔文字や絵文字に変換

投稿設定から設定できる。

:!:
:idea:
:lol:
:mad: / :-x / :x
:?:
:oops:
:roll:
:sad: / :-( / :(
:smile: / :-) / :)
:eek: / :-o / :o
:arrow:
 

変換フィルタのまとめ

  • wpautopフィルター で Pタグを追加します。 元の編集では変わりません。(functions.php :wordpressの機能)
  • TinyMCEで wpautop,forced_root_blockフィルタがあると、ビジュアルエディタ画面の表示直前処理(ビジュアルエディタに切り替えた時など)でPタグで修正します。
  • また不正な文法のタグを TinyMCEで ビジュアルエディタ画面の表示直前処理で除きます。

 

4.エディターの表示をblogの記事表示に合わせる

編集中に、ビジュアルエディタで操作していると、記事と表示が違うため意外といろいろ気づきにくいことがあります。いちいちプレビューするのも効率が悪いです。

そこで、ビジュアルエディタでも段落や見出し、表など記事の表示に近づける方法を紹介します。

やり方は、記事と同じ cssを読みこませるだけですが、構成がエディタ内として少し変わってしまうので、追加で作業を行います。

 

これが作業STEP です。

  1. ビジュアルエディタでcssを読みこませる。
  2. 読み込ませたcssに 普通の投稿記事の cssを読みこませる。
  3. ビジュアルエディタの本文のclass に 投稿記事本文の class を追加する。
  4. ビジャルエディタのcssを微調整する。

STEP1 ビジュアルエディタでcssを読みこませる。

これも完全ではないですが、エディター表示時にcssを読み込ませて編集中の表示を改善できる方法があります。以前は functions.phpに フック関数をかけて対応していましたが、特に指定せず動きました。

add_editor_style();

各テーマのルートからのパスやhttpで指定してください。 is_admin()の時だけ、配列マージで登録されます。

関数リファレンス/add editor style - WordPress Codex 日本語版

または 以下のように、functions.phpに追加してもよいです(配列指定可)。cssの順序が制御できにくいが読込は早そう。

add_editor_style("css/editor-style.css");
ページカテゴリで、別のCSSを読み分けたい場合、hook関数を使うなどして分岐します。
wp_enqueue_style()関数の時は、ブログのパスをベースとして指定しますので、add_editor_style()指定の仕方との違いに注意しましょう。

STEP2 読み込ませたcssに通常の投稿記事の cssを読みこませる。

editor-style.cssを作成してテーマ(wp-content/themes/)のindex.php. やstyle.cssと同じ階層にUPロード(themeによってはすでにあります。)

editro-style.cssに以下の行を追加して、同じフォルダにあった標準のCSSを読み込む。 themeやカスタマイズによって追加等あるかもしれません。

@import url("style.css");
@import はファイルの先頭(最初の設定コマンドの前)に入れる必要があります。
cssのコメントは PHPと違い//が使えないので、混乱しないように注意しましょう。 (/*   */ね)

 

STEP3 ビジュアルエディタの本文のclass に 投稿記事本文の class を追加する。

ビジュアルエディタは独自の class設定がされているため、そのままではうまく表示に対応できません。

そちらのclassについても対応する必要があります。

テキストエディタの置換機能を使って、「.article」や「entry-content」という本文の部分をビジュアルエディタの本文「.mceContentBody」classに置換しeditor-style.cssの中に持って来るのは大変(themeによって違う)。

ですので、、 ビジュアルエディタ本文にclassを追加するためfunctions.phpに文を追加してします。参照

function custom_editor_settings( $initArray ){
  $initArray['body_class'] = 'entry-content';
  return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
私はchromeのF12のデバッグ画面で対象のクラスを探し、cssでチェックしました。

STEP4 ビジャルエディタのcssを微調整する。

使いやすい用微調整します。 cssの反映順序(あとがち)に気をつけてください。

.mceContentBody {
 margin-left:20px;
} 

5.よく入力するタグをビジュアルエディタで入れられるように効率化

quicktagas プルダウン

AddQuicktag の設定でビジュアルエディタにチェックをしたタグを作るだけです。そうすると Quicktagsのプルダウンから投入できるようになります。

段落プルダウン

またTinyMCE標準でも入れられます。参照

function tinymce_setting($initArray) {
     //選択できるブロック要素を変更
     $initArray['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4,h5,dt,dd,div,pre';
     return $initArray;
}
//TinyMCEAdvanceより後に実行されるように遅め
add_filter('tiny_mce_before_init', 'tinymce_setting', 10000);

スタイルプルダウン

ビジュアルエディタのスタイルのプルダウンにもセットできます。上記と両方使う場合整合させてください。参照

function tinymce_setting($initArray) {
	//スタイリング用クラス
	$style_formats = array(
		  array(
			   'title' => 'big',
			   'inline' => 'span',
			   'classes' => 'big'
		  ),
		  array(
			   'title' => 'small',
			   'inline' => 'span',
			   'classes' => 'small'
		  ),
		  array(
			   'title' => 'warn',
			   'inline' => 'span',
			   'classes' => 'alert'
		  )
	);
	$initArray['style_formats'] = json_encode($style_formats);
	return $initArray;
}
//TinyMCEAdvanceより後に実行されるように遅め
add_filter('tiny_mce_before_init', 'tinymce_setting', 10000);

リスト表示する場合は、もう一段arrayを設定します。

	$style_formats = array(
		'title' => 'サイズ',
		'items' => array(
						array(
							'title' => '小さく',
							'inline' => 'span',
							'classes' => 'small'
						),
						array(
							'title' => '大きく',
							'inline' => 'span',
							'classes' => 'big'
						),
					),
		),
		array(
			'title' => '色',
			'items' => array(
				array(
					'title' => '赤',
					'inline' => 'span',
					'styles' => array('color' => '#fe0000')
				),
				 array(
					'title' => '青',
					'inline' => 'span',
					'styles' => array('color' => '#0000fe')
				),
				array(
					'title' => '緑',
					'inline' => 'span',
					'styles' => array('color' => '#00fe00')
					),
				),
		),
	);

下記を追加するとプルダウン項目の置き換え(デフォルト項目は削除)ではなく、この記述部分の追加になります。

$initArray['style_formats_merge'] = true;//上書きでなく、マージの場合

 

spanなので、inlineとしてますが、 tableやdivであれば block となります。またiconやselecterもあります。詳しくは以下を参考にしてください。
TinyMCE - style_formats

 

theme_advanced_stylesによりスタイルだけ設定できましたが、3.xの仕様です。4.xでは動きません。
TinyMCE - theme_advanced_styles

editor-styleにあるstyleのみで構成する方法

TinyMCEAdvanceで以下をチェック設定すると、自動的に  editor-style.css の スタイル部分を抽出して スタイルプルダウンを作成してくれます。

□ Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.

ただし、既存のスタイルはなくなります。同様に、上記のstyle_formatsの指定がなくなります。

 

6. chromeを使う。

ページ遷移の際、編集途中だと確認してくれます。

これで、何かの誤動作で、書いてたページが消える可能性もかなり減ります。

泣き寝入りしなくてすみますね。

7.emacs キーバインディングを使う

細かい作業をする時、学習コストはかかりますがemacs のキーバインディングは相性が良いです。

Firefox のブラウザを使って次のアドオンをインストール

Firemacs :: Add-ons for Firefoxまとめ

Windowsは、以下のアプリケーションを使ってキーをカスタマイズ

XKeymacs

まとめ

functions.php

remove_filter( 'the_content', 'wpautop'            ); // Pタグを段落に付加するフィルタを除外
remove_filter('the_title', 'wptexturize');//クォートなど気を利かすフィルタを除外
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');


//見た目をエディタ側でも同じように
//add_editor_style("editor-style.css");
//TinyMCEの中にオプションが有る。

//TinyMCE追加
function my_tinymce($initArray) {
	// styleや、divの中のdiv,span、spanの中のspanを消させない(+存在OK)
	$initArray['valid_children'] = '+body[script],+body[style],+div[div|span],+span[span]';
	$initArray['valid_elements']          = '*[*]';
 	$initArray['extended_valid_elements'] = '*[*]';

        //pタグ自動編集
	$initArray['wpautop'] = false;
        $initArray['forced_root_block'] = false;

	//見た目を合わせるために、 classもヴィジュアルエディタの本文に追加(editor-style.cssは対応している前提
 	$initArray['body_class'] = 'entry-content';

	//スタイリング用クラス
	$style_formats = array(
	array(
		'title' => 'サイズ',
		'items' => array(
						array(
							'title' => '小さく',
							'inline' => 'span',
							'classes' => 'small'
						),
						array(
							'title' => '大きく',
							'inline' => 'span',
							'classes' => 'big'
						),
					),
		),
		array(
			'title' => '色',
			'items' => array(
				array(
					'title' => '赤',
					'inline' => 'span',
					'styles' => array('color' => '#fe0000')
				),
				 array(
					'title' => '青',
					'inline' => 'span',
					'styles' => array('color' => '#0000fe')
				),
				array(
					'title' => '緑',
					'inline' => 'span',
					'styles' => array('color' => '#00fe00')
					),
				),
		),
                 array(
                     'title' => 'info',
                     'block' => 'blockquote',
                     'classes' => 'info'
                 ),
	);
	$initArray['style_formats'] = json_encode($style_formats);
        //選択できるブロック要素を変更
        $initArray['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4,h5,dt,dd,div,pre';
	return $initArray;
}
//TMAより後に実行されるように、10000番ぐらいにフック登録:default:10 (1が高い)
add_filter('tiny_mce_before_init', 'my_tinymce', 10000);

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

2,587 views.



One thought on “【WordPress】ビジュアルエディターで効率よく作業する5つの方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です