ワードプレスに外部ファイルを読み込ませる

明けましておめでとうございます!

一年の計は元旦にあり!今年はもっと更新頻度を上げて行く様、頑張ります☆

さて、本日はワードプレスに外部ファイルを読み込ませる方法についてです。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレス用のphp関数である、wp_enqueue_script を使います。
今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルをこのブログの本文に対して指定してみようという試みです。

1.縦書きにするためのファイル、『竹取』をダウンロード

『竹取』から、taketori_js.zipをダウンロードします。これを解凍しますと、中に taketori.js と taketori.css というファイルが入っています。

2.外部ファイルをセッティングする

次に、ご自分のFTPへアクセスします。
私の場合は現在子テーマを使っていますので、そのフォルダの中へ1.でダウンロードした taketori.js と taketori.css を入れます。そうでない方はご自分で使用しているテーマのフォルダの中にこの二つのファイルを入れて下さい。

3.自分用の設定を書くためのjsファイルを作る

二つのファイルを入れたテーマのフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。名前は何でも良いです。拡張子は.js です。
(ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)

4.竹取の縦書きの設定項目を指定する

3.で作成したjsファイルに
(new Taketori()).set({lang:’ja-jp’,fontFamily:’sans-serif’}).element(‘縦書きにしたい部分ID’).toVertical();

と記述します。
竹取の説明書を読んで頂くと、

(new Taketori()).set({設定項目:値,設定項目:値}).element(‘縦書き対象要ID’).toVertical(画面の読み込み待ちをするかどうか);
この様に指定する様に書いてあります。順番に説明しますと、

.set({設定項目:値,設定項目:値})
  色々な設定出来ますが、ここでは
  {言語:日本語, フォントファミリー:ゴシック} の二つを設定しました。

.element(‘縦書き対象要ID’)
  ここでは、どの部分に対して縦書きを適用するかを指定します。
  私の場合は、自分のサイトをfirebugで見てみると縦書きにしたい部分の継承元が
  div.post_contentでしたので、element(‘div.post_content’); と指定しました。
  ブラウザfirefox上で、縦書きにしたい部分の本文の上を右クリック、
  ”firebugで要素を調査”してIDやクラスを確認して下さい。

.toVertical(画面の読み込み待ちをするかどうか);
   これは特に指定がなくても.toVertical();このように記述しておいて下さい。
   実はこれを省いたために全く縦書きにならず、四苦八苦したんですよ(ノ_-;)…

5.wp_enqueue_scriptで外部ファイルを読み込む

それでは、header.phpファイルの中に外部ファイルを読み込む記述をしていきます。

ヘッダーphpの中に<?php wp_enqueue_script( ‘jquery’ ); ?>という記述があります。
この真下にtaketori.jsと、3.で作った○○.jsを読み込ませます。<!– 竹取 –>の下の二行です。

<?php wp_enqueue_script( 'jquery' ); ?>
<!-- 竹取 -->
<?php wp_enqueue_script('taketori','/wp-content/themes/ご自分のテーマ/taketori.js',array(),'0.1.0'); ?>
<?php wp_enqueue_script( 'my-script','/wp-content/themes/ご自分のテーマ/○○.js', array('taketori')); ?>

6.@import urlで外部cssを読み込ませる

次にスタイルシートへtaketori.cssを読み込ませる記述をします。

/*   
Theme Name:
Author: 〜うんぬんかんぬん以下略     
*/
@import url("taketori.css");

@import url は、必ずcssの記述の前に書いて下さいね!上記のように一番上に書けばOKです。

更新してみるとどうでしょう?(画像クリックで拡大)
縦書きブログ1

縦書きブログ2

おおっ、なんと縦書き化に成功したようです!
(このテーマでは縦書きはヒジョーに読みづらいため横に戻しました。画像のみでスミマセン ><) 縦書きの指定を解除したければ、3.で作ったjsフィイルの記述の先頭に//を付けてコメントアウトしておけばOKです。 //(new Taketori()).set({lang:’ja-jp’,fontFamily:’sans-serif’}).element(‘div.post_content’).toVertical();

WPには便利なプラグインも沢山揃っていますけど、自分でphpがいじくれたらもっと幅が広がると思います。
wp_enqueue_script を使ってjQueryなど様々な外部ファイルも是非試してみて下さい!

(今回も師匠に沢山助けて頂きました ^^; この記事が出来るまではclubringoで)

コメントを残す