雑記

ワードプレス投稿記事ビジュアルエディタに明朝など日本語フォントを追加する【Tiny MCE、wing(affinger5)】

更新日:

備忘録です。

ワードプレス投稿記事ビジュアルエディタに、明朝など日本語フォントを追加したいのでいろいろ調べて、実装しました。

前提として、

  • ワードプレスのテーマは【wing(affinger5)】
  • エディタ機能を追加するプラグイン【Tiny MCE】

を使用しています。



[toc]

ワードプレス投稿記事ビジュアルエディタに明朝など日本語フォントを追加を実装

こんな風に、ワードプレス固定ページ・投稿記事ともに日本語フォントの

  • MS Pゴシック
  • MS ゴシック
  • 游ゴシック
  • ヒラギノ角ゴ
  • ヒラギノ角ゴ ProN W3
  • ヒラギノ丸ゴ Pro W4
  • MS P明朝
  • 游明朝
  • ヒラギノ明朝
  • ヒラギノ明朝 ProN W3
  • 游明朝体

などが入れられました。

テーマは【wing(affinger5)】、ビジュアルエディタ追加機能としてプラグイン【Tiny MCE】を入れている環境です。

 

ワードプレスの投稿記事ビジュアルエディタに明朝など日本語フォントを追加する方法

ワードプレスで使用しているテーマのfunctions.phpをダウンロード

私はエックスサーバを使っています。

アフィリエイトにおすすめのサーバーはこれ!圧倒的な安心感とスペックの2選

サーバのFTPから、テーマファイルを探します。

エックスサーバの場合は

  1. public_html
  2. wp-content
  3. themes

でファイルに到達できます。

themesの中で使用中のテーマファイルを開き、functions.phpをダウンロードします。

 

使用中テーマのfunctions.phpに記述追加

以下を追加します。

aadd_filter('tiny_mce_before_init', function($settings){
$settings['font_formats'] =
"Century Gothic='Century Gothic';".
"Franklin Gothic Medium='Franklin Gothic Medium';".
"Gulim='Gulim';".
"Impact='Impact';".
"Verdana='Verdana';".
"Georgia='Georgia';".
"Times New Roman='Times New Roman';".
"Courier New='Courier New';".
"Comic Sans MS='Comic Sans MS';".
"MS Pゴシック='MS Pゴシック','MS PGothic';".
"MS ゴシック='MS ゴシック','MS Gothic';".
"游ゴシック='游ゴシック','Yu Gothic';".
"ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
"ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
"MS P明朝='MS P明朝','MS PMincho';".
"MS 明朝='MS 明朝','MS Mincho';".
"游明朝='游明朝','Yu Mincho';".
"ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
"游明朝体='游明朝体','YuMincho';"
;
return $settings;
});

 

追記したfunctions.phpを同じ場所にアップロード

functions.phpをアップロードして、ファイルを上書きします。

 

「;」や「””」など、一部でも間違えるとエディタが使えなくなったりしますので、作業前はバックアップをとりましょう。
こちらの記事を読んで作業の後、何かありましてもアドバイスしたり責任は持てませんので、ご注意ください!

 

プラグイン”Japanese font for TinyMCE”は真っ白になりました!

ちなみに、WordPressのエディタに日本語フォントを簡単に追加できる!というプラグイン【Japanese font for TinyMCE】を以上の作業の前に、試しに入れてみましたが、有効化した時点で管理画面が真っ白になりました(泣)

プラグインの有効化で真っ白になった場合の対処法は、サーバFTPでプラグインのファイルごと削除すればだいたい大丈夫です。

エックスサーバの場合は

  1. public_html
  2. wp-content
  3. plugins

でファイルに到達できます。

【wing(affinger5)】とプラグイン【Japanese font for TinyMCE】は相性が悪いのかな?

それとも、他のプラグインとの相性が悪いのかな?

検証していないのでわかりませんが、参考になれば嬉しいです!

369(みろく)

369(みろく)

本業は夫の自営手伝いで、自立するためにアフィリエイトブログ・サイト運営してます。真面目に誠実に。2017年8月末から始めて2018年4月に4万円を達成。2018年末までに月100万円発生を目指しています。
*2019年2月追記:2018年末に100万円達成しました。

ブログ収入の秘密の話

みろくが月次利益100万円を超えるまでに実践してきたアフィリエイト記録を、あなただけにこっそり教えます。
以下からメールアドレスを登録してください。

ご登録いただいた方には、みろくのブログアフィリエイトの実践報告をメールマガジンでお送りします。

Recommend Posts・Ad

-雑記

Copyright© 369チャンネル , 2019 All Rights Reserved.