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

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

関連記事

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

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

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

テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点

TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

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

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

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

no image

テーマ ブックマーク 2014

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

Comment

Message

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

*

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

    PAGE TOP ↑