正文 - 在WordPress中使用内联<style>和<script> - 可以安全使用吗?</style>

时间:2015-01-05 03:27:57

标签: javascript php css wordpress

我有一系列模板,我将其整合到一个滑块中。

它将使用模板系统包含在各个区域中。

由于这些是从在线图书馆中获取的,因此我发现合并他们直接提供的模板非常有用。

然而,包括样式和JavaScript似乎可能会产生问题。

示例:

<?php 
 global $slider, $img_path;
?>
<script>
    jssor_<?php echo $slider; ?>_starter = function (containerId) {

        var options = {
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500

            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_<?php echo $slider; ?> = new $JssorSlider$(containerId, options);
    };
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. --> 
<div id="<?php echo $slider; ?>_container" style="position: relative; width: 600px;
    height: 300px; overflow: hidden;">

    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        <div><img u="image" src="<?php echo $img_path; ?>/photography/002.jpg" /></div>
        <div><img u="image" src="<?php echo $img_path; ?>/photography/003.jpg" /></div>
        <div><img u="image" src="<?php echo $img_path; ?>/photography/004.jpg" /></div>
        <div><img u="image" src="<?php echo $img_path; ?>/photography/005.jpg" /></div>
    </div>

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow Navigator Skin 18 css */
        /*
        .jssora18l              (normal)
        .jssora18r              (normal)
        .jssora18l:hover        (normal mouseover)
        .jssora18r:hover        (normal mouseover)
        .jssora18ldn            (mousedown)
        .jssora18rdn            (mousedown)
        */
        .jssora18l, .jssora18r, .jssora18ldn, .jssora18rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(<?php echo $img_path; ?>/a18.png) no-repeat;
            overflow:hidden;
        }
        .jssora18l {
            background-position: -16px -45px;
        }

        .jssora18r {
            background-position: -76px -45px;
        }

        .jssora18l:hover {
            background-position: -136px -45px;
        }

        .jssora18r:hover {
            background-position: -196px -45px;
        }

        .jssora18ldn {
            background-position: -256px -45px;
        }

        .jssora18rdn {
            background-position: -316px -45px;
        }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora18l" style="width: 29px; height: 29px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora18r" style="width: 29px; height: 29px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">javascript</a>
    <!-- Trigger -->
    <script>
        jssor_<?php echo $slider; ?>_starter('<?php echo $slider; ?>_container');
    </script>
</div>

这会以任何方式/形状/形式损害wordpress作为主题/插件功能吗?

0 个答案:

没有答案