Question

我已经买了一个wordpress主题，现在我试图将自己的div插入滑块的代码中。我对wordpress不太满意，在这里你可以看到我的网站：http://nw.flamboyance.nl/

滑块上的

您会看到一个灰色块，其中包含以下代码：<div class="vak '.$align.'"></div>。这就是我已插入的div，但问题是，它上面的文字实际上不在<div class="vak '.$align.'"></div>之间，结果是文本通过缩小或跳出来跳出灰色块...这很难看。

在这里你看到滑块代码的一部分（我的div在<h2>标签之前）：

foreach( $slider_elements['elements'] as $keys ){
foreach( $keys as $key=>$slider ){
    if($slider['img'] != null ){
        $img = cuckoo_get_attachment_all_size( $slider['img'] , 'full');
        $align = $slider['title_aling'] ? $slider['title_aling'] : '';
        $color = $slider['font_color']  ? $slider['font_color'] != '#' ? 'style="color:'.$slider['font_color'].';"' : '' : '';
        $lineColor = $slider['line_color']  ? $slider['line_color'] != '#' ? ' style="background-color:'.$slider['line_color'].';"' : '' : '';
        $line = $slider['slide_title'] != '' && $slider['slide_subtitle'] != '' ? '<span class="slide-title-line"'.$lineColor.'></span>' : '';

        $title = $slider['slide_title'] ? '<div class="vak '.$align.'"></div><h2 class="slide-title '.$align.'" '.$color.'><span class="titspan">'.cuckoo_echo_for_wpml(THEMENAME.' Homepage Slides #'.$key, 'Slide Title', preg_replace('/(\r\n|\n|\r)/','<br/>', $slider['slide_title']), 0). $line.'</span></h2>' : '';
        $subtitle = $slider['slide_subtitle'] ?  '<div class="slide-subtitle '.$align.'" '.$color.'>'.cuckoo_echo_for_wpml(THEMENAME.' Homepage Slides #'.$key, 'Slide Subtitle', preg_replace('/(\r\n|\n|\r)/','<br/>', $slider['slide_subtitle']), 0).'</div>' : '';
        $button = $slider['url_button_slides'] ? '<div class="slide-button '.$cuckoo_button['main-slider-button'].' '.$align.'"><a href="'.$slider['url_button_slides'].'" title="'.cuckoo_echo_for_wpml(THEMENAME.' Homepage Slides #'.$key, 'Slide Button Title', $slider['title_button_slides'], 0).'" class="slide-button">'.cuckoo_echo_for_wpml(THEMENAME.' Homepage Slides #'.$key, 'Slide Button Title', $slider['title_button_slides'],0).'</a><span class="button-back"></span></div>' : '';

        $slides .= "{ image : '".$img."', title : '". $title . $subtitle . $button ."' }," ;
    }
}

}

$ Title，$ subtitle和$按钮显示在左侧和右侧的滑块上。我可以将它放在<div class="vak '.$align.'"></div>之间吗？

对不起，如果我不清楚，我很乐意再解释一下。 Pleasy帮助我。

提前致谢

Answer 1

似乎div只是添加到$title变量所代表的字符串的开头。

$title = $slider['slide_title'] ? '<div class="vak '.$align.'"></div><h2 class="slide-title '.$align.'" '.$color.'><span class="titspan">'.cuckoo_echo_for_wpml(THEMENAME.' Homepage Slides #'.$key, 'Slide Title', preg_replace('/(\r\n|\n|\r)/','<br/>', $slider['slide_title']), 0). $line.'</span></h2>' : '';

因此，只有div才能显示输出的变量。

如果您希望所有这些项目都显示在此包装器div中，那么您将需要找到它们在主题中的显示位置。

看来这段代码最终在页面上为一个名为... supersized的插件定义了一些JavaScript变量

jQuery(".super-homepage").supersized({..});

此插件似乎正在处理特定元素。

<div id="supersized-container" class="super-homepage">

    <!--Arrow Navigation-->
    <div id="prevslide" class="fullwidthslider-prev button-style-1"><a class="load-item"></a><span class="button-back"></span></div>
    <div id="nextslide" class="fullwidthslider-next button-style-1"><a class="load-item"></a><span class="button-back"></span></div>

    <!--Time Bar-->
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>

    <!--Slide captions displayed here-->
    <div class="container message screen-large">
        <div id="slidecaption"></div>
    </div>

    <div id="supersized-loader" class="slidePreloadImg">
        <div class="img-loader"></div>
    </div>
    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">

        </div>
    </div>
</div>

您可以手动将这些类添加到outter most div ...或者让div包装所有上面输出的HTML。

我希望这能引导你朝着正确的方向前进。

修改

Chage this section：

$slides .= "{ image : '".$img."', title : '". $title . $subtitle . $button ."' }," ;

要......这个

$slides .= "{ image : '".$img."', title : '<div class=\"vak ".$align."\">". $title . $subtitle . $button ."</div>' }," ;

Answer 2

另一种可以实现此目的的方法是添加一个隐藏的div，给它一个类，让它成为$align的容器。将其设置为$title的开头：

$title = $slider['slide_title'] ? '<div class="algin_info" style="display:none">' . $align . '<div>...

然后，一旦加载了所有脚本，创建一个包装这些框的脚本，然后查找您创建的类以检索对齐信息，如下所示：

<script>
    $(document).ready(function () {
        var $box = $("#slidecaption");
        var align = $box.find(".align_info").text();
        $box.wrapInner("<div class=" + align + "></div>");
    });
</script>

编辑：

这是另一个答案给你的变体，但是它们有一些语法错误。试试这个：

替换它：

$slides .= "{ image : '".$img."', title : '". $title . $subtitle . $button ."' }," ;

用这个：

$title_content = "<div class='vak $align'>$title  $subtitle  $button</div>";
$slides. = "{'image': '$img','title': '$title_content'},";

Answer 3

不确定这是否有效，因为您需要向我们提供有关您正在使用的滑块的更多信息，但我会尝试以下操作：

$title = $slider['slide_title'] ? '<div class="vak ' . $align . '"><h2 class="slide-title ' . $align . '" ' . $color . '><span class="titspan">' . cuckoo_echo_for_wpml(THEMENAME . ' Homepage Slides #' . $key, 'Slide Title', preg_replace('/(\r\n|\n|\r)/', '<br/>', $slider['slide_title']), 0) . $line . '</span></h2>' : '';
$subtitle = $slider['slide_subtitle'] ? '<div class="slide-subtitle ' . $align . '" ' . $color . '>' . cuckoo_echo_for_wpml(THEMENAME . ' Homepage Slides #' . $key, 'Slide Subtitle', preg_replace('/(\r\n|\n|\r)/', '<br/>', $slider['slide_subtitle']), 0) . '</div>' : '';
$button = $slider['url_button_slides'] ? '<div class="slide-button ' . $cuckoo_button['main-slider-button'] . ' ' . $align . '"><a href="' . $slider['url_button_slides'] . '" title="' . cuckoo_echo_for_wpml(THEMENAME . ' Homepage Slides #' . $key, 'Slide Button Title', $slider['title_button_slides'], 0) . '" class="slide-button">' . cuckoo_echo_for_wpml(THEMENAME . ' Homepage Slides #' . $key, 'Slide Button Title', $slider['title_button_slides'], 0) . '</a><span class="button-back"></span></div></div>' : '';

这会将开头<div class="vak ' . $align . '">添加到$title的开头，将结束</div>添加到$button的结尾

试图在wordpress滑块代码中插入div

3 个答案:

修改