ブログ未経験者向けのWordPressビジュアルエディタのカスタマイズ

WordPressでサイト構築してブログの更新は担当者に、っていう話はよくあると思うのですが、もうちょっと使いやすくしてあげなきゃなぁと思ってカスタマイズしたメモです。

若い子だからって出来るとは限らない

年1回会社で特設サイトを作っておりまして、毎年ブログの担当者がその年の新人さんたちに変わってゆく、ということを何年かやっているのですが。わたしもこのブログのおかげでWordPressが扱えるようになってきたので、サイト構築をWPでやるようになりました。

自分が記事を書く時はテキストエディタしか使ったことがなかったもので、ビジュアルエディタを触らないままなんとなく「初心者でも扱えるものなんじゃないのかなー」というふわっとした認識でして。

しかも担当の子たちにログイン方法とか簡単なWPの説明した時に、「みんな若いし、書き方は触ってみればなんとなく分かるかな？」って聞いたら「はい！大丈夫だと思います！」なんて元気に答えてくれたもんだから、安心してたら全然大丈夫じゃなかったwww

わたしがちゃんとフォローしなかったのが悪いんですが、なんていうか、「この前まで学生だったんだし、若いからおじ様達より使えるはずだろう」という概念は捨てなきゃいけないですね。

業界ということもあるのでしょうが、想像を超える苦手っぷり。本当に、見覚えのある画面で、見覚えのあるアイコンで、決まった操作じゃないと出来ない。それ以外のことは全然分からない。拡張子すら知らない。ここまでとは…！と、少々ショックだったのですが、こういう時代の流れなのですね、きっと。

前置きが長くなってしまいましたが、そんな彼らでも使いやすいようにいろいろと工夫したメモです。他にも、デジカメやらスマホで撮った写真をWeb用にリサイズして最適化する講座もかなりガッツリやったのですが、今回は割愛してWPの話題に絞ります。

改行、段落の違いを教える

まずは全然カスタマイズでもなんでもないのですが、

• br（改行）はShift + Enter
• p（段落）はEnter

ということを徹底的に教えこまねばなりません。ほっとくとEnterしか使わない行間あきまくりのギャルギャルした感じになってしまいます…！

人によっては「改行とは・段落とはなんぞや」からスタートしなきゃいけないかも…(;´Д`)

あと、記事の始めと終わりに無駄にEnterを打ってしまう人がいて、それも必要ないからね、むしろやらないでね、とお願いしました。複数人数で更新してるので、その人の記事だけ伸びてしまうんです(;´Д`)

ビジュアルエディタの見た目を記事に近づける

デフォルトが明朝体で行間などもかなり違うし、実際の公開記事のイメージが掴めないようです。これを出来るだけ記事に近い見た目になるようにカスタマイズ。

ビジュアルエディタのCSSはeditor-style.cssというファイルらしいので、これを新しく用意。テーマファイルの中へアップロードすると、WPの管理画面から編集できるようになります。

functions.php

//ビジュアルエディタのcssを追加
add_editor_style( 'editor-style.css' );

//'editor-area'というクラスを割り当てる
function custom_editor_settings( $initArray ){
	$initArray['body_class'] = 'editor-area';
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

アップロードしただけでは駄目で、2行目の記述で適用されるようになります。また、ビジュアルエディタのためのクラスを割り当てておきます。

editor-style.css

body.mceContentBody{
	font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
	}
.editor-area{
	line-height: 1.3;
	}
.editor-area img{
	vertical-align: baseline;
	margin: 0 5px;
	}

フォントの指定のみbody.mceContentBodyというクラスになるらしいです。今回はWinマシンでしか更新しないことが分かっているのでこのようなフォント指定にしています。

後はさっき割り当てた.editor-areaというクラスで行間の設定や、画像の設定（後述しますが、絵文字を入れた時用）などお好みのスタイルを設定します。

ビジュアルエディタのボタンをオリジナルに

WP4.0のデフォルトだとこんな感じ。いろいろあるのですが、みんな2段目に気がつかなかった…。。他にも初心者さんには使い方の分からないもの（使って欲しくないもの）などあるので、オリジナルの並びへ。

左から、テキスト色、背景色、フォントサイズ、太字、イタリック、打ち消し、下線、リンクの挿入/編集、リンクの削除、左寄せ、中央揃え、右寄せ、書式設定をクリア、取り消し、やり直し、の順にしてみました。

functions.php

//ビジュアルエディタのボタンをカスタム
function myplugin_tinymce_buttons( $buttons ){
	unset( $buttons );
	$buttons = array( 'forecolor', 'backcolor', 'fontsizeselect', 'bold', 'italic', 'strikethrough', 'underline', 'link', 'unlink', 'alignleft', 'aligncenter', 'alignright', 'removeformat', 'undo', 'redo' );
      	return $buttons;
}
add_filter( 'mce_buttons', 'myplugin_tinymce_buttons' );

$buttonsの配列に左から並べたい順に書いていきます。もちろんボタンの種類は他にもいろいろありますので調べてみてください！

絵文字を挿入出来るようにする

要望があったのでこちらのプラグインを入れました。

• 【WP-emoji2】3キャリア対応ケータイ絵文字を秒速で入力出来るWordPressプラグイン – ひなログ

KtaiStyleのサブ的なプラグインとのことですが、KtaiStyleを使っていなくてもインストールすれば簡単に絵文字を挿入できました。

そのままだと余白がないので、CSSで左右にちょびっと margin あけるようにしてあげると良いかもです。（記事側と、ビジュアルエディタ側両方同じように）

同じ画像はアップロード出来ないようにしたい

これは結局解決策が見つかりませんでした…。。

写真がうまく挿入できなかったとき、アップロードの工程から何度もやり直してしまう人が続出しまして、全く同じ画像が3つも4つも登録されてる…、という。。

WPの仕様として、同じファイル名のものは自動的にリネームして違うファイルとしてアップロードしてくれるのですが、その親切が…！！！同じファイル名だったらアップロード出来ないとか、既にありますよと教えてくれるとかそういうことは出来ないものですかね…。。

もうちょっと調べてみますが、もしもご存知のかたがいらっしゃったら是非教えてください！

他サイズ画像を生成しない

アップロードされた画像に関して中サイズ・大サイズなどの他のサイズを作りたくない場合は、メディア設定の

ここをみんなゼロにしておくと自動生成されません。その代わり、画像を必ずリサイズ・最適化してからアップロードする、という教育をしてあげなきゃいけません。

固定ページはビジュアルエディタ非表示に

管理側の問題なのですが、テキストエディタで書いた固定ページを間違ってビジュアルエディタにされるとぶっ壊れるので、こちらのビジュアルエディタは隠しておいたほうが安心です。

functions.php

//固定ページでビジュアルエディタを非表示
function disable_visual_editor_in_page(){
	global $typenow;
	if( $typenow == 'page' ){
		add_filter('user_can_richedit', 'disable_visual_editor_filter');
	}
}
function disable_visual_editor_filter(){
	return false;
}
add_action( 'load-post.php', 'disable_visual_editor_in_page' );
add_action( 'load-post-new.php', 'disable_visual_editor_in_page' );

ブログトップページに特定のカテゴリのみ表示

これも管理側のメモです。毎年担当者が代わり、ブログのトップページには今年度のカテゴリの記事だけ、しかしアーカイブとして選択すれば過去記事も閲覧可能、という仕様にしました。

• WordPressで固定ページをブログのトップとして記事を一覧表示する方法

前書いた記事ですが、これに従いWPでサイトを構築すると、

• サイトのトップページ → front-page.php
• ブログのトップページ → home.php
• ブログのアーカイブ/検索結果など → index.php

このような構造になり、home.phpを表示されたときだけ指定されたカテゴリのみにする、ということを書きます。

functions.php

//home.phpは特定カテゴリのみ表示
function CustomArchive( $query ) {
	if ( is_admin() || ! $query->is_main_query() )
		return;

	if ( is_home() ) {
		$query->set( 'category_name', 'カテゴリのスラッグ' );
		return;
	}
}
add_action( 'pre_get_posts', 'CustomArchive' );

ナビ部分

<ul>
<?php wp_list_categories('title_li='); ?>
</ul>

あとは、ヘッダーでもサイドバーでもナビのあるところにこう書けば、カテゴリリストを出力してくれます。ここからアクセスしたものはカテゴリアーカイブになるので、index.phpによって出力されます。

<?php if(current_user_can('read_private_pages')): ?>
	<ul>
	<?php wp_list_categories('title_li='); ?>
	</ul>
<?php endif; ?>

ちなみにですが、過去記事へのリンクはログインユーザーだけが見たい、という場合は簡易的で良ければこのように書けばいいかと。（公開記事には変わりないのでURL叩けばアクセスは出来ますが、とりあえずリンクは見えなくなります。）

以上です！最後のほうは初心者さんとか関係なくなってしまいましたが…！どなたかのお役に立てたら光栄ですー！