Question

我正在本地开发一个wordpress主题，我正在尝试为我的wordpress主题中的所有图像/ JS设置基本URL。我已经尝试了标准<base href="http://localhost:8888/wp-content/themes/my-theme/" />，它适用于我的JS和图像文件（不在CSS中），但它使我的菜单链接不起作用。

我也试过了<?php bloginfo('template_directory');?>这会使我的徽标图片的链接工作，但我的js中包含的所有图片都没有。我有一个支持幻灯片的幻灯片作为背景图片运行。

显然我可以使用绝对文件路径 - http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg - 但我确信必须有另一种方法可以使用。

幻灯片图片的js如下

jQuery(function($){

            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide
                slide_interval          :   10000,  //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   500,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   1,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [           // Slideshow Images
                                                    {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg'},
                                                    {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image2.jpg'}
                                            ]

            }); 
        });

非常感谢任何建议。

由于

*更新 *

好的，多亏了Pekka，我已经到了一半......

我的header.php文件中的代码现在为

<script type="text/javascript">
template_directory = "<?php echo bloginfo('template_directory');?>";
</script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory');?>/js/main-site.js"></script>

在我的main-site.js文件中我有

{image : 'template_directory' + '/images/slides/image1.jpg'}

但它不会显示背景图像。我已尝试使用/不使用尾部斜杠 - 假设语法不正确？

有什么建议吗？：）

更新 - 再次 *

注意到''围绕template_directory.Now图像显示但是我的菜单中的链接不再有效：S

Answer 1

我最喜欢将路径填充到JavaScript中的方法是将其设置在HTML页面中，如下所示：

<!-- Do this in the head, before you include any other Javascript -->
<script type="text/javascript">
  template_directory = "<?php echo bloginfo('template_directory');?>";
</script>

然后在JavaScript代码中使用template_directory变量。

这样，您仍然可以拥有静态JavaScript资源，而且您不需要在其中混淆PHP。

Answer 2

我会尝试将jQuery代码放在页脚中，然后在引用图像时，只需使用get_stylesheet_directory_uri（）引用。所以你想要这样的东西：

jQuery(function($){

        $.supersized({

            //Functionality
            slideshow               :   1,      //Slideshow on/off
            autoplay                :   1,      //Slideshow starts playing automatically
            start_slide             :   1,      //Start slide
            slide_interval          :   10000,  //Length between transitions
            transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed        :   500,    //Speed of transition
            new_window              :   1,      //Image links open in new window/tab
            pause_hover             :   0,      //Pause slideshow on hover
            keyboard_nav            :   1,      //Keyboard navigation on/off
            performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

            //Size & Position
            min_width               :   0,      //Min width allowed (in pixels)
            min_height              :   0,      //Min height allowed (in pixels)
            vertical_center         :   1,      //Vertically center background
            horizontal_center       :   1,      //Horizontally center background
            fit_portrait            :   1,      //Portrait images will not exceed browser height
            fit_landscape           :   0,      //Landscape images will not exceed browser width

            //Components
            navigation              :   1,      //Slideshow controls on/off
            thumbnail_navigation    :   1,      //Thumbnail navigation
            slide_counter           :   1,      //Display slide numbers
            slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
            slides                  :   [           // Slideshow Images
                                                {image : '<?php echo (get_stylesheet_directory_uri().'/images/image1.jpg') ?>'},
                                                {image : '<?php echo (get_stylesheet_directory_uri().'/images/image2.jpg') ?>'}
                                        ]

        }); 
    });

Wordpress - 设置基本href

2 个答案: