独自の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]

  • このエントリーをはてなブックマークに追加

関連記事

head内に出力される要素を整理

Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

no image

テーマ ブックマーク 2014

有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites

Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止

TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの

Twenty Fourteen クレジットを非表示・変更方法

Twenty Fourteenにも最下部に「Proudly powered by WordPress」というコピーライトが表示されます。それを削除もしくは変更するには、footer.phpを編集して行

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

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

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

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

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

Comment

Message

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

*

PAGE TOP ↑