独自のCSSやJSを読み込む

WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。
CSSファイルを読み込む方法
CSSを読み込むには、以下の関数を使用します。
wp_enqueue_style
★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる
functions.php(子テーマ)に追加して下さい。
// wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), null, 'all'); } add_action( 'wp_enqueue_scripts', 'my_styles');
- $handle:(必須) (required) ハンドル名を指定 [デフォルト: なし]
- $src:(任意)ファイルパスを指定 [デフォルト:false]
get_option('siteurl') // ルートディレクトリ
get_bloginfo('stylesheet_directory') // 子テーマのディレクトリ
get_bloginfo('template_url') // 親テーマのディレクトリ
get_bloginfo('plugins_url') // プラグインのディレクトリ - $deps:(任意)依存関係を明示。特定のCSSファイルの後に読み込みを行わせたい場合に指定する。ハンドル名で明示 [デフォルト:array()]
- $ver:(任意)ファイルのバージョン番号を指定 [デフォルト:false]
- $media:(任意) CSSのメディアタイプを指定 [デフォルト:'all']
JSファイルを読み込む方法
JSを読み込むには、wp_enqueue_scriptを使用します。
★例として、子テーマフォルダ下に配置したBootstrapのJSファイルを読み込ませる
functions.php内に追記して下さい。
// wp-config/theme/[子テーマ名]/functions.php function my_scripts() { wp_enqueue_script( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_scripts');
- $handle:(必須) (required) ハンドル名を指定 [デフォルト: なし]
- $src:(任意)ファイルパスを指定 [デフォルト:false]
(*ディレクトリ取得方法は、CSSのセクションを参照) - $deps:(任意)依存関係を明示。特定のJSファイルの後に読み込みを行わせたい場合に指定する。ハンドル名で明示 [デフォルト:array()]
- $ver:(任意)ファイルのバージョン番号を指定 [デフォルト:false]
- $in_footer:falseの場合、head内で読み込まれる。footerで読み込ませたい場合は、true[デフォルト:false]
関連記事
-
-
Twenty Fourteen カスタマイズ
「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
-
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
-
プラグイン関連のJSやCSSの読み込みをフィルター
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず
-
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
-
-
Twenty Twelve "Open Sans"の使用を止
「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば
Comment
[…] 参照ページ 独自のCSSやJSを読み込む […]
[…] 独自のCSSやJSを読み込む […]
[…] こちらを参考にさせていただきました。 WordPress – 独自のCSSやJSを読み込む […]
[2016-06-27 9:22]
@jackie1993427 間違えた、http://t.co/Sv2yNLHmf7だったスマン
[…] 独自のCSSやJSを読み込む […]
[…] http://kachibito.net/web-design/wordpress-with-jquery.html http://kwski.net/wordpress/780/ […]
参考にさせていただきました。
ありがとうございます!
@donkeys__ears functions.phpにかきこみだ http://t.co/sy0CheZw3I
[…] ■ 参考サイト CSSやJS記載方法 […]
@ayuko_ruppo 関数でもいけますよー!この辺を参考に WordPress | 独自のCSSやJSを読み込む http://t.co/acrEMndSG9
独自のCSSやJSを読み込む http://t.co/voHGLIFmY9