独自の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');
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

  • $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');
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

  • $handle：(必須) (required) ハンドル名を指定 [デフォルト: なし]
  • $src：(任意)ファイルパスを指定 [デフォルト：false]
    (*ディレクトリ取得方法は、CSSのセクションを参照)
  • $deps：(任意)依存関係を明示。特定のJSファイルの後に読み込みを行わせたい場合に指定する。ハンドル名で明示 [デフォルト：array()]
  • $ver：(任意)ファイルのバージョン番号を指定 [デフォルト：false]
  • $in_footer：falseの場合、head内で読み込まれる。footerで読み込ませたい場合は、true[デフォルト：false]

Related

Twenty Thirteen ナビゲーションメニューを固定 プラグイン関連のJSやCSSの読み込みをフィルター Default Thumbnail時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2) Twenty Twelve "Open Sans"の使用を止 jQueryをCDNから読み込む titleタグ(wp_title) カスタマイズ ツールチップ実装プラグイン「WordPress Tooltip」 ウィジェット関連のカスタマイズ・プラグイン
  • このエントリーをはてなブックマークに追加

関連記事

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

JSやCSSに自動で付与されるバージョン番号を非表示に

Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して

折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ

Twenty Thirteen ナビゲーションメニューを固定

ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。 スクリプト 以下のjsファイルを用意して下さい。 nav要素のidは、ソースもしくはheade

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

no image

投稿タイトル(entry-title)を非表示にする

表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

Comment

Wordpressで自作css,jsファイルをfunctionsで読み込ませる – 【MsReDesign】相模原市と姶良市にあるWeb制作事業 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
NEXT
「まげでらんに」を応援！

新規投稿

  • ブックマーク

    PAGE TOP ↑