WordPressでjQueryプラグイン（jFontSize）を使用して文字サイズを変更する方法

jQueryプラグイン（jFontSize）を利用して、WordPressの記事の文章を大きくする方法について書きます。

jFontSizeサイトからダウンロードします。
ファイルを解凍して、jquery.jfontsize-1.0.jsをテーマのjsディレクトリに配置します。

１．文字サイズ変更のフォント追加

functions.phpファイルに下の文字の大きさを変えるフォントを表示するためのコード記述します。add_filterを使い、the_contentアクションに独自関数をフックしています。

function add_fontsize_change( $content ) {
  $fontsize =
  '<a id="jfontsize-minus" href="#">A-</a>' . "\n" .
  '<a id="jfontsize-default" href="#">A</a>' . "\n" .
  '<a id="jfontsize-plus" href="#">A+</a>';
  return $fontsize . $content;
}
add_filter( 'the_content', 'add_fontsize_change');

※文字の大きさを変えるフォントをcontent.phpに直接記述する方法でも出来ます。
下のコードをcontent.phpファイルの表示したい所（例えば、div.entry-contentの前など）に追加します。

<a id="jfontsize-minus" href="#">A-</a> 
<a id="jfontsize-default" href="#">A</a> 
<a id="jfontsize-plus" href="#">A+</a>

２．jQueryとjFontSizeの登録

下のコードをfunctions.phpファイルに追加します。
jQueryを使えるようにするために、wp_enqueue_scriptを追加してjfontsizeを配置した場所を設定してパスを通します。
URLにパスを通すためのの設定のget_stylesheet_directory_urlをget_template_directory_uriでもパスは通ります。

wp_enqueue_script( 'fontsize', get_stylesheet_directory_uri( __FILE__ ) . '/js/jquery.jfontsize-1.0.js', array('jquery' ) );

テンプレートファイルheader.phpファイルにあるwp_head()の下に下のコードを挿入します。ここで、「.entry-content p」とありますが、環境に応じて変更してください。

<script>
jQuery(document).ready(function() {
  jQuery('.entry-content p').jfontsize();
});
</script>

これで、文字の大きさを変更できるようになります。