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

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

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

: Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。目次子テーマのつくりかた他記事へのリンクアーカイブタイトル("カテゴリー別アーカ

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

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

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

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

: ポップアップが実装できるプラグイン「Anything popup」「Easy Modal」

ポップアップ「Anything Popup」「Anything popup」は、ページにポップアップが実装できるWordPressプラグインです。ポップアップ要素を投稿ページと同様に作成できるた