文字のサイズを変更できるjQueryプラグインは、いくつかありますけれど、ここではFont Sizerを使ってサイトのコンテンツの文字の大きさを変更する方法について書きます。
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の値を２つ変更します。
例：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>
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;
}
これで、作業は終わりです。
この方法は、一例ですので好みで改良してください。
コメント