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

2022.1.10 更新

本日はワードプレスに外部ファイルを読み込ませる方法についての備忘録です。

ワードプレスで外部ファイルを読み込ませるためには、ワードプレス用のphp関数である、wp_enqueue_script を使います。

今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルを、このブログの本文に対して指定してみようという試みです。

1. jsファイルをダウンロード後、外部ファイルをテーマフォルダにセットする

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

次に、ご自分のFTPへアクセスします。
ご自分でお使いのテーマのフォルダの中に、先ほどダウンロードした taketori.js と taketori.css を入れます。

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

二つのファイルを入れたテーマフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。拡張子は.js です。ファイル名は自分で分かりやすい名前を付けてください。

ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良きです。設定はこちらに記述していきます。これで間違えても安心です。

3.竹取の縦書きの設定をする

自分用の設定 jsファイルに

(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif'}).element('縦書きにしたい部分ID').toVertical();

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

(new Taketori()).set({設定項目:値,設定項目:値}).element(‘縦書き対象要ID’).toVertical(画面の読み込み待ちをするかどうか);

この様に指定する様に書いてあります。順番に説明しますと、

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

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

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

4.wp_enqueue_scriptで外部ファイルを読み込ませる

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

ヘッダーphpの中に<?php wp_enqueue_script( ‘jquery’ ); ?>という記述があります。

この真下にtaketori.jsと、自分の設定用○○.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')); ?>

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

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


/*   
Theme Name:
Author:　〜〇〇〇　　　　　
*/
@import url("taketori.css");

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

更新してみるとどうでしょう？(画像クリックで拡大)

(後に縦書きは大変読みづらいため、元の横書きに戻しました。画像のみでスミマセン)

おお、なんとか縦書き化に成功したようです！
縦書きの指定を解除したければ、下記のように解除したい記述の先頭に//を付けてコメントアウトしておけばOKです。


//(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif'}).element('div.post_content').toVertical();

ワードプレスには便利なプラグインが沢山揃っていますが、プラグインを使わず自分でphpが編集出来たらもっと幅が広がると思います。
wp_enqueue_script を使って他の外部ファイルの読み込みも是非チャレンジしてみて下さい(^^)/

javascriptで作ったカウントダウンタイマーをワードプレスに実装する

ワードプレスの背景に雪を降らせてみよう

(こちらの記事もどうぞclubringo)