• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › WordPress › CSSやJavaScriptのハンドル名(id)を確認

CSSやJavaScriptのハンドル名(id)を確認

プラグインのCSSやJavaScriptを常時読み込ませたくない場合に、ハンドル名(id)を指定していろいろと対処することがありますが、ソースを見ればある程度は表示されているのでわかります。しかし表示とは違ったりよく分からないものがあります。それを簡単に確認する方法です。

<link rel=’stylesheet’ id=’gorigori-css‘ …

↑のようなやつです。

設定

WordPressのJavascriptやCSSの名前は?ハンドル名?調べ方!

↑参考にさせてもらったサイトです。

functions.phpに↓を追加するとHTMLソースにCSSやJavaScriptのハンドル名が表示されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//---------------------------------------------------------------------------
// WordpressのJavascriptやCSSのハンドル名をHTMLソースに表示する
//---------------------------------------------------------------------------
function my_get_dependency( $dependency ) {
    $dep = "";
    if ( is_a( $dependency, "_WP_Dependency" ) ) {
        $dep .= "$dependency->handle";
        $dep .= " [" . implode( " ", $dependency->deps ) . "]";
        $dep .= " '$dependency->src'";
        $dep .= " '$dependency->ver'";
        $dep .= " '$dependency->args'";
        $dep .= " (" . implode( " ", $dependency->extra ) . ")";
    }
    return "$dep\n";
}
function my_style_queues() {
    global $wp_styles;
    echo "<!-- WP_Dependencies for styles\n";
    foreach ( $wp_styles->queue as $val ) {
        echo my_get_dependency( $wp_styles->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_styles', 'my_style_queues', 9999 );
function my_script_queues() {
    global $wp_scripts;
    echo "<!-- WP_Dependencies for scripts\n";
    foreach ( $wp_scripts->queue as $val ) {
        echo my_get_dependency( $wp_scripts->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );

例)↓のようなものがHTMLソースに表示されます。[]の左がハンドル名(id)です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- WP_Dependencies for styles
contact-form-7 [] 'https://pluswordpress.com...'
contact-form-7-confirm [] 'https://pluswordp...'
crayon [] 'https://pluswordpress.com/wp-cont...'
crayon-theme-eclipse [] 'https://pluswordpre...'
crayon-font-verdana [] 'https://pluswordpres...'
piyopiyo4 [] 'https://pluswordpress.com/wp-c...'
gorihoge7 [] 'https://pluswordpress.com/wp-c...'
-->
 
<!-- WP_Dependencies for scripts
crayon_js [jquery] 'https://pluswordpress.co...'
contact-form-7 [jquery jquery-form] 'http:/...'
contact-form-7-confirm [jquery jquery-form]...''
piyopiyo4 [] 'https://pluswordpress.com/wp-c...'
-->

プラグインなどのCSSやJavaScriptを個別に読み込む

まったくいらないもの、ページごとに必要なもの、環境によっていろいろあると思いますが、いくつかやってみます。

functions.phpに↓を追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
if (!is_admin()) {
function my_styles() {
 
// 全ページで読み込まない
wp_dequeue_style( 'piyopiyo4' );     
wp_dequeue_script( 'piyopiyo4' );
 
 
// 固定ページのスラッグが「contact」以外では読み込まない
if (!is_page('contact')) {
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7-confirm' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7-confirm' );
}
 
 
//「投稿ページ」以外では読み込まない
if (!is_single()){
wp_dequeue_style( 'crayon' );
wp_dequeue_style( 'crayon-theme-eclipse' );
wp_dequeue_style( 'crayon-font-verdana' );
wp_dequeue_script( 'crayon_js' );
}
 
 
// 投稿ページのスラッグが「hogehoge1」「gorigori2」以外では読み込まない
if (!is_single(array( 'hogehoge1', 'gorigori2' ))) {
wp_dequeue_style( 'gorihoge7' );
}
 
}
add_action( 'wp_enqueue_scripts', 'my_styles');
}

タグ: ハンドル名
カテゴリー: WordPress, 管理
“CSSやJavaScriptのハンドル名(id)を確認” への1件のコメント
"CSSやJavaScriptのハンドル名(id)を確認" に 1 トラックバック・ピンバック
  1. wordpress で wp_dequeue_scriptやwp_dequeue_styleしてテーマのcssやjsを読み込まない より:
    2020/09/01 18:36

    […] 参考(わかりやすい。ありがとうございました! […]

コメントを残す コメントをキャンセル

関連記事
個別にJavaScriptを振り分ける
外部JavaScriptを読み込ませる
JavaScriptで画面外からメニューをスライド表示
特定のカテゴリに個別のCSSを適応させる
大きさの違う画像を綺麗に並べ替える
外部からスタイルシートの変更
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
最新記事を自動でスライドショー
コメントに画像を挿入できるようにする
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
タイトルや本文からタグを自動生成
画像や動画をポップアップし再生
非表示、置換テクニック
Contact Form7の送信完了画面をカスタマイズ
phpMyAdminのユーザー名とパスワードの確認方法
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
CSSやJavaScriptのハンドル名(id)を確認
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
カテゴリに別々のアイコンを表示
レスポンシブなLightbox jQuery プラグイン Strip
背景をスライドショーにする
ページごとに違うヘッダーを読み込む
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
CSS3 角を丸くする
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
ショートコードを追加するプラグイン
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
リンクの表示順を並べ替える
サイト全体のサムネイルサイズを変更
CSS3 ボックスシャドウ
JavaScriptで画面外からメニューをスライド表示
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress