• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでスタイル・スクリプトファイルを読み込む方法まとめ(CSS・JavaScript)

WordPressでスタイル・スクリプトファイルを読み込む方法まとめ(CSS・JavaScript)

最終更新日:2021年10月27日

目次 非表示
1 フロントエンドでスタイル・スクリプトを読み込む
2 管理画面でスタイル・スクリプトを読み込む
3 ログイン画面でスタイル・スクリプトを読み込む

フロントエンドでスタイル・スクリプトを読み込む

フロントエンドでスタイルまたはスクリプトを読み込みたい場合、wp_enqueue_scriptsフックを利用します。scriptsとありますが、styleを読み込むこと際にも利用します。

ファイルの読み込みには、関数wp_enqueue_style及びを使います。

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

次にスタイル及びスクリプトを読み込むためのコード例を記載します。

add_action('wp_enqueue_scripts', function() {

  // CSS
  wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
  
  // JavaScript
  wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/js/main.css', ['jquery'], '1.0', true);
  
});

どちらの関数の第3引数には依存関係を指定できます。

管理画面でスタイル・スクリプトを読み込む

管理画面でのみ読み込みたいスタイルまたはスクリプトがある場合、admin_enqueue_scriptsを利用します。

グローバル変数を利用することで、特定のページや投稿タイプでのみ読み込むことができます。

add_action('admin_enqueue_scripts', function() {
  global $pagenow, $post_type;

  // 例: $hook == 'edit.php'
  if ( $pagenow != 'edit.php' ) {
    return;
  }
  // 例: $post_type == 'post'
  if ( $post_type != 'post' ) {
    return;
  }
  
  // wp_enqueue_style または wp_enqueue_script を実行
  wp_enqueue_style('admin-style', get_stylesheet_directory_uri().'/admin-style.css', [], '1.0');
});

ログイン画面でスタイル・スクリプトを読み込む

admin_enqueue_scriptsは、ログインページでは実行されません。ログインページでは、login_enqueue_scriptsを実行し、スタイルまたはスクリプトを読み込む必要があります。

add_action('login_enqueue_scripts', function() {
  // wp_enqueue_style または wp_enqueue_script を実行
  wp_enqueue_style('login-style', get_stylesheet_directory_uri().'/login-style.css', [], '1.0');
});

参考:

wp_enqueue_style()
wp_enqueue_script()
wp_enqueue_scripts
admin_enqueue_scripts
login_enqueue_scripts

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPress管理画面の投稿一覧にカスタムカラムを追加する方法
Next Post: WordPressのフックとは? »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressのプラグインとは?初心者向けに使い方を解説
  • WordPressでアイキャッチ画像に説明文(キャプション)を追加する方法
  • Conoha WINGレビュー|実際に使ってみた感想
  • エックスサーバーレビュー|ページ表示速度や稼働率を検証してみた
  • 初心者向けにWordPressに最適なレンタルサーバーの選び方を解説

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2022 FOXWP All rights reserved.