サポート » 使い方全般 » 特定の固定ページのみ.js外部ファイルが読み込まれる様にしたい

  • 解決済 kiki222

    (@kiki222)


    WordPressを利用してサイトを構築したいと考えております。
    今まではhtmlで構築しておりましたので、
    ページのアドレスが変更されず
    それぞれの固定ページのアドレスが.htmlになる様に
    「Custom Permalinks」と言うプラグインを使用しています。

    そこで質問なのですが、
    特定の数ページのみのhead内に.jsファイルへの<link hrefの記載をしたいのですが、
    ファイル名を羅列するのではなくスマートに書く方法はあるのでしょうか?
    ページ名はart1.htmlからart15.htmlまでで、
    art.htmlには記載したくありません。
    現在は下記の様に記載しております。

    <?php if(is_page("art1","art2","art3","art4","art5","art6","art7","art8","art9","art10","art11","art12","art13","art14","art15")): ?>
    <script src="http://www.sample.com/js/jquery.fancybox.js"></script>
    <?php endif; ?>

    宜しくお願い致します。

15件の返信を表示中 - 1 - 15件目 (全20件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    固定ページということなので、固定ページテンプレートを作ってはいかがでしょう。
    JSを読み込みたいページでのみ、そのテンプレートを選択するという感じです。
    jquery.fancybox.jsはhead内じゃなくbody内で呼んでも特に問題ないので。

    トピック投稿者 kiki222

    (@kiki222)

    mypacecreator様
    お返事ありがとうございます。

    申し訳ございません、情報の追加がございます。
    fancybox.cssも合わせて特定の固定ページのみ読み込ませたいのです。
    一番の希望としてはhead内にcss記述を入れて、
    body閉じタグの直前にjs記述を入れたいです。

    何かスマートな記述方法はありますでしょうか?
    宜しくお願い致します。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    body閉じタグの直前にjs記述を入れたい

    wp_enqueue_scriptを使えば、footer.phpをいじらなくてもwp_footerの位置でJSを出してくれるようにできます。使い方は検索してください。

    一番の希望としてはhead内にcss記述を入れて、

    ここはちょっと面倒というか、やり方がいくつか考えられます

    1.
    header-fancybox.phpを新たに作って、固定ページテンプレートではget_header('fancybox');で呼び出す

    2.
    if文内で正規表現を使う

    3.
    カスタムフィールドで記述を追加する、もしくは条件分岐用の値を入れる
    (このフィールドに値があったら、fancyboxを呼び出す、という要領)

    他にもあるかもしれませんがパッと思いついたのはこんなかんじです。

    こんにちは、

    functions.php

    add_action( 'after_setup_theme', 'raindrops_fancybox_setup' );
    
    function raindrops_fancybox_setup() {
    
    	add_action( 'wp_enqueue_scripts', 'raindrops_fancybox_css' );
    	add_shortcode( 'myfancybox', 'myfancybox_js' );
    }
    
    function raindrops_fancybox_css() {
    
    	global $post;
    	if ( has_shortcode( $post->post_content, 'myfancybox' ) ) {
    
    		$my_css = '/*something css*/';
    
    		wp_add_inline_style( 'style', $my_css );
    	}
    }
    
    function myfancybox_js() {
    
    	wp_enqueue_script( 'myfancyboxjs', 'http://www.example.com/js/jquery.fancybox.js', array(), '1.0', true );
    
    	return;
    }

    というのはどうでしょう?

    必要な固定ページに、[myfancybox]というショートコードを書いてやる

    投稿でもページでもたぶん使えるし、テンプレートでの制限もないので、ので柔軟ぽく思います。

    ショートコードは、フッターにスクリプトを挿入する。

    投稿に、[myfancybox]というショートコードがあったら、style.cssの直後にインラインのスタイルを、wp_add_inline_styleで挿入してやる。

    関数名ぐしゃぐしゃですけど、使う場合は、直してください。関数もまとめられるかもしれないので、その点は、よろしく

    トピック投稿者 kiki222

    (@kiki222)

    mypacecreator様
    再度のご回答ありがとうございます。
    仰って頂いた方法で、切り替える事が出来ました。
    まず、

    1.
    header-fancybox.phpを新たに作って、固定ページテンプレートではget_header(‘fancybox’);で呼び出す

    通常のheader.phpにはfancybox.cssの記述はなし、
    header-fancybox.phpのみfancybox.cssを記載しました。
    そして、page-fancy.phpを作成し、
    固定ページの新規作成画面の「ページ属性」で「テンプレート」を選択出来るようにしました。
    (合っておりますでしょうか?)

    次に、

    wp_enqueue_scriptを使えば、footer.phpをいじらなくてもwp_footerの位置でJSを出してくれるようにできます。

    <?php wp_enqueue_script('fancybox', 'http://www.sample.com/js/jquery.fancybox.js', array(), '2.1.5', true); ?>


    header-fancybox.php内に記載したところ、body閉じタグの前にコードが表示されました。

    ここで、質問なのですが
    今まではhead内に直接

    <script src="http://www.sample.com/js/jquery.fancybox.js?v=2.1.5"></script>
      <script type="text/javascript">
    	$(document).ready(function() {
    		$(".fancybox").fancybox();
    	});
    </script>

    と記載して呼び出される様にしておりましたが、
    p_enqueue_scriptを使用したことにより、

    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".fancybox").fancybox();
    	});
    </script>

    のみがhead内に残っている状態です。
    同じようにbody閉じタグの前に挿入されるようなコードはありますでしょうか?

    何度も申し訳ございませんが、宜しくお願い致します。

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    ご回答ありがとうございます。
    function.phpに書き込む方法を教えて頂き、ありがとうございます。
    スマートな方法の様なのですが、
    スマートすぎてまだまだ分からない部分が多く理解が出来ておりません。
    現在はまず、mypacecreator様に回答いただいた方法で試したいと思います。
    上手く出来ましたら、その後nobita様に教えて頂いた方法を自分なりに試してみたいと思います。
    ありがとうございました。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    同じようにbody閉じタグの前に挿入されるようなコードはありますでしょうか?

    インラインの記述があったのですか。
    たとえば
    http://ideasandpixels.com/wp_enqueue_script-inline-script-to-load-after-jquery
    とか。

    簡単な方がいいなら、jquery.fancybox.js自体の最後にインライン部分のJSを付け足しても動くと思います。

    トピック投稿者 kiki222

    (@kiki222)

    mypacecreator様
    お返事が遅くなり、申し訳ございません。
    簡単な方法はいつでも出来るのではないかと思い、
    記述して頂いたアドレスを参考にfunction.phpに記述する方法で
    自分なりに試してみましたが、上手く出来ませんでした。
    もう少し試してみたいと思います。
    ありがとうございました。

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    回答頂いた方法で、
    同じ方かどうか分かりませんが記述方法を紹介している方がいらっしゃいました。

    http://tenman.info/labo/snip/archives/5485

    私にも分かりやすく、ショートコードを利用して
    スクリプトへのリンク、インラインのスクリプト、CSSの追加をする事が出来ました。
    ですがインラインでcssを記述する必要がないため、
    自分なりにコードを変更して

    <?php
    add_action( 'after_setup_theme', 'my_scripts_setup' );
    
    function my_scripts_setup() {
        add_action( 'wp_footer', 'my_add_inline_script', 99 );
        add_action( 'wp_enqueue_scripts', 'my_add_inline_style' );
        add_shortcode( 'myscripts', 'my_add_script_source' );
    }
    
    function my_add_inline_style() {
    
        global $post;
    
        if ( has_shortcode( $post->post_content, 'myfancybox' ) ) {
    
            $my_css= '';
            //twentytwelve-style は テーマにより異なります。
            // link 要素のIDから -css を取り除いたもの
            wp_add_inline_style( 'style', $my_css );
        }
    }
    
    function my_add_script_source() {
        // jquery plugin等、依存関係があるときには、配列に handle を入れてください
        wp_enqueue_style('myfancyboxcss', 'http://www.sample.com/css/jquery.fancybox.css', array('style'), '2.1.5', 'screen');
        wp_enqueue_script('myfancyboxjs', 'http://www.sample.com/js/jquery.fancybox.js', array(), '2.1.5', true);
    
        return;
    }
    
    function my_add_inline_script() {
    
        $scripts= '$(document).ready(function() {
    		$(".fancybox").fancybox();
    	});';
    
        if ( wp_script_is( 'myfancyboxjs', 'done' ) ) {
    
            $html= '<script type="text/javascript">%1$s</script>'."\n";
    
            printf( $html, $scripts );
        }
    }
    ?>

    としましたが、
    head内ではなく、body閉じタグ付近で
    cssへのリンクが挿入されてしまっています。

    head内のstyle.cssの後に挿入される様にするには、
    どこを変更すれば良いものでしょうか?

    nobita様に限らず、どなたでもご回答をお願いできますでしょうか?
    何度も申し訳ございませんが、宜しくお願い致します。

    同一犯です。

    インラインのスクリプトも必要そうだったので、その分を書き足したものを書いてあります。

    //twentytwelve-style は テーマにより異なります。
            // link 要素のIDから -css を取り除いたもの
            wp_add_inline_style( 'style', $my_css );

    ブログのソースを開いていただくと、

    <link rel='stylesheet' id='style-css'  href='http://www.example.com/wp/wp-content/themes/raindrops/style.css?ver=1.253' type='text/css' media='all' />

    style.cssのリンク要素にIDが記述されていると思います。このIDから -css を取り除いたものを、wp_add_inline_style()の第一引数に書いていただくと、style.cssの直後にインラインスタイルが表示されると思います。

    スクリプトへのリンク、インラインのスクリプト、CSSの追加をする事が出来ました。
    ですがインラインでcssを記述する必要がないため、

    必要なければ、

    add_action( 'wp_enqueue_scripts', 'my_add_inline_style' );

    上の部分と、my_add_inline_style()を削除すればいいと思います。

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    同じ方だったのですね!
    ご回答ありがとうございます。
    私の説明方法が悪くて、何度も申し訳ございません。
    インラインでcssの記述は必要ないのですが、
    http://www.sample.com/css/jquery.fancybox.css
    の記述が必要なのです。

    function my_add_script_source() {
        // jquery plugin等、依存関係があるときには、配列に handle を入れてください
        wp_enqueue_style('myfancyboxcss', 'http://www.sample.com/css/jquery.fancybox.css', array('style'), '2.1.5', 'screen');
        wp_enqueue_script('myfancyboxjs', 'http://www.sample.com/js/jquery.fancybox.js', array(), '2.1.5', true);
    
        return;
    }

    と記載してもhead内のstyle.cssの後ではなく、
    ボディ閉じタグ付近の
    http://www.sample.com/js/jquery.fancybox.js
    記載部分の近くに挿入されてしまいます。
    style.cssの後に挿入される様にするには何か、方法はございますでしょうか?
    宜しくお願い致します。

    <?php
    add_action( 'after_setup_theme', 'my_scripts_setup' );
    
    function my_scripts_setup() {
        add_action( 'wp_footer', 'my_add_inline_script', 99 );
        add_action( 'wp_enqueue_scripts', 'my_add_style' );
        add_shortcode( 'myscripts', 'my_add_script_source' );
    }
    
    function my_add_style() {
    
        global $post;
    
        if ( has_shortcode( $post->post_content, 'myscripts' ) ) {
    
    			wp_enqueue_style('myfancyboxcss', 'http://www.sample.com/css/jquery.fancybox.css', array('style'), '2.1.5', 'screen');
        }
    }
    
    function my_add_script_source() {
        // jquery plugin等、依存関係があるときには、配列に handle を入れてください
    
        wp_enqueue_script('myfancyboxjs', 'http://www.sample.com/js/jquery.fancybox.js', array(), '2.1.5', true);
    
        return;
    }
    
    function my_add_inline_script() {
    
        $scripts= '$(document).ready(function() {
    		$(".fancybox").fancybox();
    	});';
    
        if ( wp_script_is( 'myfancyboxjs', 'done' ) ) {
    
            $html= '<script type="text/javascript">%1$s</script>'."\n";
    
            printf( $html, $scripts );
        }
    }
    ?>

    wp_enqueue_style() は、 wp_add_inline_style()と置き換えるようにすると上手く動作すると思います。

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    書いて頂いたコードで、思い通りに出来ました!
    何から何まで、ありがとうございました。
    分からない事が沢山ありますが、一歩ずつ進んで行きたいと思います。
    教えて頂いた事も、どこがどう言う意味なのかを理解しようと思います。
    ありがとうございました!

    トピック投稿者 kiki222

    (@kiki222)

    nobita様
    何度も、申し訳ございません!!!
    教えて頂いた書き方ですが、
    ボディ閉じタグの前でなく
    head内に全てを記述したい場合は
    どこを変更すればよろしいでしょうか?
    色々と試してみましたが、よく分かりませんでした。
    何卒、宜しくお願い致します。

    <?php
    add_action( 'after_setup_theme', 'my_scripts_setup' );
    
    function my_scripts_setup() {
        add_action( 'wp_head', 'my_add_inline_script' );
       //wp_footerをwp_headに変更
        add_action( 'wp_enqueue_scripts', 'my_add_style' );
        add_shortcode( 'myscripts', 'my_add_script_source' );
    }
    
    function my_add_style() {
    
        global $post;
    
        if ( has_shortcode( $post->post_content, 'myscripts' ) && is_singular() ) {
    
    			wp_enqueue_style('myfancyboxcss', 'http://www.sample.com/css/jquery.fancybox.css', array(), '2.1.5', 'screen');
    
    			wp_enqueue_script('myfancyboxjs', 'http://www.sample.com/js/jquery.fancybox.js', array(), '2.1.5', false );
    
    			// 第五引数falseで、ヘッダーに挿入
        }
    }
    
    function my_add_script_source() {
        // jquery plugin等、依存関係があるときには、配列に handle を入れてください
    	// 実行するタイミングの関係で、ヘッダーに埋め込みは間に合わないようなので、空のショートコードにします。
    
    	return;
    }
    
    function my_add_inline_script() {
    
        $scripts= '$(document).ready(function() {
    		$(".fancybox").fancybox();
    	});';
    
        if ( wp_script_is( 'myfancyboxjs', 'done' ) ) {
    
            $html= '<script type="text/javascript">%1$s</script>'."\n";
    
            printf( $html, $scripts );
        }
    }
    ?>

    wp_enqueue_script(),wp_enqueue_style()は、wp_enqueue_scripts()にフックするべきだったんだと思います。

    ショートコードを空にしたこの書き方の方が問題なく動作しそうなので、フッターに埋め込む場合も、ヘッダーに埋め込む場合もこの書き方のほうがよさそうです。

    それと今気づきましたが、トップページなどのループでも、どれかの投稿にショートコードが含まれていると、ロードされるので、is_singular()を追加しました。

15件の返信を表示中 - 1 - 15件目 (全20件中)
  • トピック「特定の固定ページのみ.js外部ファイルが読み込まれる様にしたい」には新たに返信することはできません。