JavaScriptファイルを特定の投稿やページに追加する最も効率的な方法は?


17

最も効率的な方法は、投稿やページ専用のjavascriptファイルを追加することです。

ここに私が思いついたいくつかの解決策があります:

  • HTML編集ビューに切り替えて、JavaScriptをそこに投稿します(かなり悪い解決策)
  • キーと値のペアでその投稿/ページの特定のJavaScriptを含むカスタムフィールド
  • footer.phpで、現在のページに応じてJavaScriptファイルをロードします(ただし、多くの条件につながります)

ちなみに、JavaScriptファイルはページ間で共有されません。これは、現在表示しているものに文字通り固有のものです。

何かご意見は?


メタボックス/カスタムフィールドが最適なオプションです
ミハRekar

効率をどのように定義しますか?
FUXIA

1
「効率的」とは、コードの冗長性を最小限に抑え、特に単一の投稿/ページに対してこれを行う最も効果的な方法を意味します。
マウススポーツ

回答:


29

効率と、JavaScriptを追加するための適切なワードプレスの方法を使用する場合の最適なバランスは、これらの行に沿ってテーマのfunctions.phpファイルに何かを追加することだと思います。例えば:

functions.php:

function load_scripts() {
    global $post;

    if( is_page() || is_single() )
    {
        switch($post->post_name) // post_name is the post slug which is more consistent for matching to here
        {
            case 'home':
                wp_enqueue_script('home', get_template_directory_uri() . '/js/home.js', array('jquery'), '', false);
                break;
            case 'about-page':
                wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
                break;
            case 'some-post':
                wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);
                break;
        }
    } 
}

add_action('wp_enqueue_scripts', 'load_scripts');

これにより、どこにロードされるか、テーマのfunctions.phpファイル内のどこにロードされるかを編集するための中央集中化された場所を完全に制御できます。


1
素敵な小さな機能。「集中化された場所」を持つことは有用であるというのは正しいことです。本当にありがとう。
マウススポーツ

3
これは少し整理できると思います。基本的に、2つの異なるスイッチケースで同じことを確認しています。私は両方のスイッチケースを組み合わせて、条件付きifができると言いますif (is_page() || is_single())。ベンはどう思いますか?
マウススポーツ

私にとっては改善のように思えます。いいね!
ベンHartLenn

@Benは、 テーマ内またはwp-includes内のfunctions.phpですか?私のページのタイトルは Home Onlineへのアクセスで、機能を変更しましたが機能していませんか?homeAccess to Home Online
シアストピエカルツ

@Ciastopiekarzコードがテーマのfunctions.phpファイルに含まれていることをよりよく示すために、回答を更新しました。
ベンハートレン

2

私がやることは、フッターまたはヘッダーに配置し、PHP条件を使用することです。

例えば:

<?php if (is_page ('your-page')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } elseif ( is_page ('another')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } else { ?>

  <script type="text/javascript" src"the file path"></script>

<?php } ?>

この方法では、各ページが読み込まれるたびにすべてのスクリプトを呼び出すのではなく、必要なスクリプトのみを呼び出します。

これは、Wordpressコーデックスhttp://codex.wordpress.org/Conditional_Tagsへのリンクです。

また、投稿ごとにのみ呼び出す必要がある特別なスクリプトがある場合は、カスタムフィールドを使用します。


ニコールに感謝-これは#3でした。私は多くのページを持たないことを考えると、それはまともな解決策です...まだそれを検討しています。
マウススポーツ

上記のWhatiは、is_categories、is_single(投稿用)、is_post_typeなどのワードプレスコーデックスのさまざまなアイテムで使用できます...上記の回答にwordpressの条件リストへのリンクを追加しました。
ニコール

0

他のテストされた方法は以下のとおりです。エディターからページに直接追加し、スクリプトタグでコメントを追加します。

<script type="text/javascript">
<!--
var a = 5;
alert("hello world. The value of a is: " + a);
-->
</script>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.