11/2の授業の「ワードプレスで外部JS、cssを読み込ませる方法」について、未だ四苦八苦しています。
下記が現在の状況です。改善点があれば教えて下さい!
◆子テーマのフォルダに新しく***.jsというファイルを作り、これに自分用の設定を書いていく事にしました。
(※この子テーマのフォルダには、子header.php、taketori.jsとtaketori.cssも入っています)
◆その***.jsには
1 |
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif'}).element('div.post_content'); |
とだけ、記述しました。ちなみに↓
(new Taketori()).set({設定項目:値,設定項目:値}).element(‘縦書き対象要素ID’);
が、竹取の説明書きにある指定方法です。(竹取の説明はこちらです)
.element(‘縦書き対象要素ID’)には、自分のサイトをfirebugで見て、縦書きにしたい「投稿記事」に当たる部分の継承元が
div.post_contentでしたので、これを指定しました。
◆子ヘッダーphpの中に
1 |
<?php wp_enqueue_script( 'my-script','/wp-content/themes/mono-child/***.js', array('jquery')); ?> |
と記述、***.jsファイルを読み込ませることは出来たようです。
ちなみに子ヘッダーphpには、この辺りにこの順番で書いて読み込ませています。
1 2 3 4 5 6 7 8 9 10 |
<?php wp_enqueue_script( 'jquery' ); ?> <!-- 竹取 --> <?php wp_enqueue_script('sample','/wp-content/themes/mono-child/taketori.js',array('jquery'),'0.1.0'); ?> <?php wp_enqueue_script( 'my-script','/wp-content/themes/mono-child/***.js', array('jquery')); ?> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> |
◆スタイルシートについては、子style.cssの中に
1 |
@import url("taketori.css"); |
と書いてtaketori.cssも読み込ませております。
…しかし、やはり投稿記事は横書きのままです…(>_<; まだ、なにか設定漏れや記述間違いがあるでしょうか? また、お借りしている雑誌(Web Designing2012年12月号)の竹取の記事には、
1 |
var taketori1=(new Taketori()).set({lang:'ja-jp',fontFamily:'serif'})...以下略 |
と書かれておりますが、「var taketori1=」の部分(この方の設定なのだと思いますが..)が、よくわかりません。
長くなりましたが、何卒ご教授お願い致します!
1 |
var taketori = (new Taketori()).set({fontFamily:'serif'}).element('div.post_content').toVertical(); |
でも
1 |
(new Taketori()).set({fontFamily:'serif'}).element('div.post_content').toVertical(); |
でも動きました。
とすると、WordPressへの読み込みの際の問題の可能性が高い。
さて、竹取JSはjQueryのプラグイン「ではない」ので、wp_enqueue_script の array の指定は不要です。
***.jsは竹取JSの為のスクリプトなので、arrayには竹取JSを読み込む際に指定した名前を入れないといけません。
現在は’sample’と指定していますが、ちゃんと’taketori’と指定した方が良いですね。つまり、以下のようにします。
1 2 3 |
<!-- 竹取 --> <?php wp_enqueue_script('taketori','/wp-content/themes/mono-child/taketori.js',array(),'0.1.0'); ?> <?php wp_enqueue_script( 'my-script','/wp-content/themes/mono-child/***.js', array('taketori')); ?> |
間違ってはいなさそうとの事、少しホッとしました。
又、
1 2 3 |
<!-- 竹取 --> <?php wp_enqueue_script('taketori','/wp-content/themes/mono-child/taketori.js',array(),'0.1.0'); ?> <?php wp_enqueue_script( 'my-script','/wp-content/themes/mono-child/***.js', array('taketori')); ?> |
も書き直しました。
こちらのサイトで説明されている、
1 |
wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false ); |
$handle…スクリプトの識別名
$deps(optional)…依存するスクリプトのリスト(配列)
$ver(optional)…スクリプトのバージョン
この辺りの理解が今一歩です…。
他の方の作ったテーマをいじるよりも、twenty-twelveなどwpでフォルトのテーマを使った方が
外部ファイルやjqueryを読み込ませる等のカスタマイズはしやすいのでしょうか?
***.jsの記述が、
1 |
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif'}).element('div.post_content'); |
ではなく、
1 |
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif'}).element('div.post_content').toVertical(); |
とすれば動く(はず)。
1 |
.toVertical(); |
が、必要だったんですね。
このほんの少しの事が自分では見つけられないものなんですよね ;^_^A
ほんとに感謝です!
少々重たいですが、面白いので暫くはこのままで行きます。