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

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 和 $button 显示在左侧和右侧的滑块上..我如何将它放在 <div class="vak '.$align.'"></div> 之间？

抱歉，如果我不清楚，我很乐意再次解释。请帮助我。

提前致谢

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>

您可以将那些类手动添加到最外层 div... 或者让您的 div 包装以上所有输出 HTML.

希望这能为您指明正确的方向。

编辑

更改此部分：

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

为了...这个

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

Answer 2

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

$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

的结尾

Answer 3

实现此目的的另一种方法是添加一个隐藏的 div，给它一个 class，让它成为任何 $align 的容器。将其设置为 $title:

的开头

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

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

<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'},";

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

trying to insert div in wordpress slider code

html

php

wordpress

slider

编辑