独自の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]
関連記事
-
-
RSS/Atomフィード カスタマイズ
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿：投稿のフィード @全てのページ サイトのコメント：
-
-
条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」
「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
-
テーマ ブックマーク 2013
2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
テーブル実装プラグイン「TablePress」 + レスポンシブ対応
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり
-
-
「タグクラウド」ウィジェット カスタマイズ
タグクラウドは、管理画面ではあまりカスタマイズできません。必要であれば、フィルターフックやプラグインを用いて表示設定や概観の変更を行うことができます。 目次 出力をカスタマイズ 各タグの
-
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの
-
-
JSやCSSに自動で付与されるバージョン番号を非表示に
Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して
-
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
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