2

Backstretch ( https://github.com/srobbin/jquery-backstretch )を介してページに全画面画像の背景を追加する jQuery スクリプトを追加しています。

私が抱えている問題は、Wordpress を使用しているため、画像へのパスを正しく取得することです。

これは私がこれまでに得たものです：

<script>
    jQuery(document).ready(function($){                    
        $(".primary-container").backstretch(
        "/library/images/image.jpg");               
    });
</script>

URL の先頭で使用<?php bloginfo('template_directory') ?>してみましたが、これは jQuery では機能しないと思います。この場合、画像にリンクする URL を使用するにはどうすればよいですか?

ありがとう。

4

1 に答える 1

4

Jason さん、WordPress と JavaScript のアセットに関して、やや古典的な課題に直面していると思います。JavaScript からアクセスできる PHP 変数 (またはある種の PHP 処理) が必要です。もちろん、JavaScript は PHP を解析できません!

いくつかのコメントは、パスを検査することを提案しています (生成されたときにディレクトリを取得するため) が、テーマ パスが常に同じであると想定しているため、私はそのアプローチのファンではありません。(これは、テーマ フォルダーの名前を変更したり、テーマを変更したり、単にフォルダー構造を変更したりすると、変更される可能性があります)。

<head>通常、すべてのテーマに「ヘルパー」スクリプトを挿入します。これは、(グローバル スコープをクリーンに保つために) 名前空間を持つ非常に単純な JSON オブジェクトです。

<script>
// for bootstrapping page level code
var YOURSITENAME = {
    "isFrontPage":<?= (is_front_page() ? 'true' : 'false'); ?>,
    "isPage":<?= (is_page() ? 'true' : 'false'); ?>,
    "postName":'<?= get_post_name(); ?>',
    "templateURI":'<?= get_template_directory_uri(); ?>',
};
</script>

「templateURI」というタイトルの最後の項目に注目してください。JavaScript では、次のように名前空間付きの JSON オブジェクトを使用して、いつでもこの値にアクセスできるようになりました。

var myDirectoryPath = YOURSITENAME.templateURI;

またはあなたの特定の例では：

var imagePath = YOURSITENAME.templateURI + "/library/images/image.jpg";

jQuery(document).ready(function($){                    
    $(".primary-container").backstretch(imagePath);               
});

もちろん、YOURSITENAME自分にとってより意味のある名前空間に変更してください。

楽しむ！

于 2013-06-20T18:04:22.680 に答える