文字サイズを変更するjQueryプラグイン(Font Sizer)をWordPressで使う方法

文字のサイズを変更できるjQueryプラグインは、いくつかありますけれど、ここではFont Sizerを使ってサイトのコンテンツの文字の大きさを変更する方法について書きます。

fontsizer

Font Sizerファイルをダウンロードします。

ファイルの配置

ダウンロードしたファイルを解凍して、展開したできたディレクトリをWordPressに移動させます。※使用するファイルはjquery.fontSizer.js、imagesディレクトリのminus.pngとplus.pngファイル。

任意の場所でいいのですが、ここでは使用してるテーマファイルの中とします。
例:twentytwelve/js/

テーマファイルの編集

下準備

まず、fontSizer.jsファイルを開いて、コードを編集します。
var defaultsに入れるtextContainerClass:の値をentry-contentにします。
例:textContainerClass: ‘entry-content’

ボタン画像を表示するためにfontSizer.jsファイルの62行目あたりにあるimgタグのsrcの値を2つ変更します。
例:http://ワードプレスサイトのドメイン/wp-content/themes/twentytwelve/js/fontSizer/images/minus.png

jQuery、FontSizerの登録

jQueryを使えるようにするためにfunctions.phpファイルに下のコードを追加します。

wp_enqueue_script( 'fontsizer', get_template_directory_uri() . '/js/fontSizer/jquery.fontSizer.js', array('jquery' ) );

FontSizerのコードを追加

FontSizerのjqueryコードをheader.phpファイル、または別ファイルを用意して追加します。
例:ここでは、header.phpファイルのwp_head()の後に下のコードを追加します。

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('ul#controls a').fontSizer();
});
</script>

ボタン表示コード追加

文字サイズ変更のボタン表示をする下のコードをテンプレートファイルに追加します。
例:content.phpファイルのdiv.entry-contentの上に配置します。

<div id="control-wrap"></div>

この段階で、ブラウザでサイトの記事を確認するとボタンが確認できます。
またボタンを押すと文字サイズが変更されます。

スタイルシートの追加

style.cssファイルにボタンのレイアウトのためのコードを追加します。
下のコードは、FontSizerのサイトで表示しているコードです。

#controls {	
  float:right;
}
#controls li {
  float:left;
  display:block;
  list-style-type:none;
  margin-right:5px;	
}
a#fs-minus, a#fs-plus {
  outline: 0 none;	
}

記事の横に表示されたボタンを記事上に表示されるために下のコードも追加します。

.clear-both {
  clear: both;
}

これで、作業は終わりです。
この方法は、一例ですので好みで改良してください。

コメントを残す

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