独自の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では、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
Twenty Fourteen 「投稿者」を非表示
TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて
-
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
Twenty Fourteen カスタマイズ
「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent
-
-
「編集(Edit)」リンクの非表示方法
ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ
-
-
スライダー・ギャラリー プラグイン
WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ
-
-
コメント欄停止・コメント削除
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
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