WPのエディタの書体を変えたい!?

2012年6月10日

コミュネスの講習会で勉強してきました。
最初はネットで調べたりしたんですけど、あまり参考になる情報がなくて、やってもダメだったとか、アップデートで設定が変わってしまう変更手法とかばかりで、ちょっと期待と違ったのですが、コミュネスの講習会で教えて頂けたので、わかりやすかったので記事にしてみました。


TinyMCEでゴシックをテンプレから指定(advanced有効技)
ワードプレスの入力エディターの明朝を変更したい‥‥‥
Safariで入力が固まる‥‥‥(明朝フォントバグ)
ゴシックならいいのにな‥‥‥

それを実現する方法です。

functions.php のレジストや初期化あたりに以下の1行を取り付けるだけで、TinyMCEのフォントを切り換えられます。

ver 3.3まで
[html]// This theme styles the visual editor with editor-style.css to match the theme style.
@add_editor_style(‘editor-style.css?’.time()); // by k.sudow cache time limit![/html]

なお、スタイルシートを変えたくない場合は以下のようにします。
キャッシュされますので値の内容を変更しても即座に反映しません。

[html]// This theme styles the visual editor with editor-style.css to match the theme style.
@add_editor_style();[/html]

念のため互換のないバージョンでエラーさせないために @処理させています。

ver 3.4以降(2012.06.17更新)
[html]// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style(); // by k.sudow not use time limit 3.4 later.[/html]

互換重視ではなく最新バージョン更新なので@処理は外しています。今週の講習で学びましたが、3.4からmceカスタム定義はセキュリティ対策のため、スタイルシートの後に$timeを入れて time limit を用いる手法が使えなくなりました。 スタイルシートにパラメータを引き渡して不正コードを実行させようとする「GET拒否」ということみたいですね。ちょっとコミュネスのITワードプレス勉強会で賢くなれました。

WordPress3.4テーマ add_editor_style 新仕様
http://core.trac.wordpress.org/browser/tags/3.4/wp-includes/theme.php#L0

コミュネスワードプレス勉強会
http://communes.jp/sns/?cid=179?


専用スタイルシート editor-style.css
次の2つのファイルをテーマの直下に配置します。

editor-style.css および editor-style-rtl.css

この時、editor-style.css の *{} と body{} の それぞれの font-size値 と line-height値 を、親メインとなるテーマのstyle.cssの class .entry の各値に一致させて合わせることで、最終的な投稿結果と同じ見た目で編集作業が出来るようになります。つまりTinyMCEの入力デザインが変えられます。


<参考例>

例えば、現在利用しているテーマに含まれている「style.css」 の要素「.entry」の font-sizeが13px、line-heightが1.6em ならば‥‥
このテーマのフォルダーに追加する「editor-style.css」のbodyの値は以下のようにテーマのstyle.cssと同じ値にすれば、エントリー記事の表示と入力モードがまったく同じデザインになります。しかも、テーマごとに設定させるテクニックになりますので、テーマごとに予め自作しておけば、後からどのテーマを選ぼうと、すべて入力と表示が同じスタイルとなります。FTP経由でテーマをまるごとバックアップしておけば、いざというとき丸ごエディターの書体を変えたままの状態で改良したテーマをインストールしなおせるということです。つまりコアをアップデートしても、エディターの書体がデフォルトに戻ってしまうようなことは無くなります。(本当のウィジウィグ技術/コミュネス技術者談)

[html]body {
/* same to style.css .entry line-height and font-size */
color: #333;
font: 13px “Helvetica Neue”, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}[/html]

以上です。どうぞご参考まで


コメントを残す

(メールアドレスが公開されることはありません。)

インターネット集客はお任せ下さい

Copyright (C) 2024 All Rights Reserved.