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'}
                                            ]

            }); 
        });

如有任何建议，将不胜感激。

谢谢

*更新的 *

好吧，多亏了佩卡，我已经走到一半了.

我的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>

在我的主站点in文件里

{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>

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

这样，您仍然可以拥有静态的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') ?>'}
                                        ]

        }); 
    });