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

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

関連記事

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

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

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

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

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

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

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

ツールチップ実装プラグイン「WordPress Tooltip」

「WordPress Tooltip」は、WordPressにツールチップを実装できるプラグインです。jQueryプラグイン「TipTip」を組み込んでいます。プラグインページの対応バージョンは古めで

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

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

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

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

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

Comment

備忘録 – WordPress | MyWordPress へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑