Wordpress - 设置基本href

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 周围的“”。现在图像正在显示，但我的菜单中的链接不再起作用：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') ?>'}
                                        ]

        }); 
    });