2-1. 同じようにしてスタイルシートを読み込む
.cssファイルを読み込むには<head></head>に下記のように記載します。
<link rel="stylesheet" id="newstyle-css" href="mytheme/js/newscript/newstyle.css" type="text/css" />
ファイルの置き場所はご自由に。私は管理しやすいようにスクリプトと同じ場所にアップしています。
スタイルシートを読み込むにはwp_enqueue_style(); を使います。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Function Reference/wp_enqueue_style | WordPress Codex
ほとんど同じですね。最後が$mediaと変わっていますが、デフォルト値が”all”なので気にしないです。
同じようにget_header(); の前に書いておきましょう。
wp_enqueue_style('newstyle', get_bloginfo('stylesheet_directory').'/js/newscript/newstyle.css');
$handleには自動で後ろに-cssと付くのでwp_enqueue_script(); と同じ名前でも大丈夫です。(たぶん)
$depsは記載しないと、テーマごとのstyle.cssの直前に記述されるようです。
ですので、style.cssのスタイルを上書きすることができます。元ファイルは変更しないほうがスマート。
2-2. 簡単にスタイルシートを読み込む方法(深く考えない)
wp_enqueue_style(); がメンドウな場合はstyle.cssから読み込んでしまいましょう。
@importを使うとスタイルシートの中から外部スタイルシートを読み込ませることができます。
@import url("js/newscript/newstyle.css");
これをstyle.cssのできる限り上のほうに書きます。(style.css内でスタイルを上書きしたいので)
利点としては、CSSに関する情報はすべてstyle.cssをベースにまとめられること。
但し、この方法だと全ページで読み込まれるので、余計なトラフィックが発生してしまいます。
style.cssに内容をまるっとコピペしてしまうのと似ていますが、美しくないのでオススメしません。
3. スクリプトを記述する
これでスクリプトを実行する準備が整ったので、ページ内に記述しましょう。
<script>jQuery(function(){jQuery('#target').newscript({ height: '320px', fx: 'simpleFade' });});</script>
こんなカンジのものを記載してください、とスクリプトの説明書に書いてあると思います。
オプションの書き方なども、それぞれの指示に従って記述していきます。
あとはスクリプトがうまく動作するようにWordPressでコンテンツ等を書き出せば完了です。
これがまたタイヘンなんですけどね(´・ω・`)
参考. get_bloginfo(‘stylesheet_directory’) と get_stylesheet_directory_uri();
今回の記事はWordPressの”twenty twelve”をベースにした子テーマとして作成しています。
この子テーマではget_bloginfo(); を使ったパスの指定方法にちょっとクセがあります。
get_bloginfo( $show, $filter );
'template_directory' = http://example/home/wp/wp-content/themes/parent-theme
'stylesheet_directory' = http://example/home/wp/wp-content/themes/child-theme
Function Reference/get_bloginfo | WordPress Codex
となっているので、子テーマで作成している場合はget_bloginfo(‘stylesheet_directory’); となります。
ただ、Codexではget_stylesheet_directory_uri(); を使うことを推奨しているようです。
Consider using get_template_directory_uri() instead (for the parent template directory) or get_stylesheet_directory_uri() (for the child template directory).
Function Reference/get_bloginfo | WordPress Codex
わかりにくいですね、、。記事を書いている最中は知らなかったのでget_bloginfo(); のままです。
↓ こちらでも議論されていたようなので今後また変わるのかな。
Improve child theme file inheritance by introducing ‘theme_url()’ to locate a file URI