Wordpress：如何在旋转滑块上叠加文本/小部件div

We are using Elision WP theme. We have a revolution slider on home pulled via shortcode in theme backend settings. We need to have static text on top of slides.

Revolution slider is set to 1100px x 680px and we want the "hero-text" div to be located on the lower left corner with a 20px from left and 50px from bottom. It also needs to be responsive.

Attached: layout image link, homepage.php code.

http://www.image-share.com/ijpg-2756-164.html

    <?php 
/*
Template Name: Homepage
*/ 
?>

<?php 
global $wp_query;
$id = $wp_query->get_queried_object_id();
$sidebar = get_post_meta($id, "qode_show-sidebar", true);  

if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
else { $paged = 1; }

if(get_post_meta($id, "qode_responsive-title-image", true) != ""){
 $responsive_title_image = get_post_meta($id, "qode_responsive-title-image", true);
}else{
    $responsive_title_image = $qode_options_elision['responsive_title_image'];
}

if(get_post_meta($id, "qode_fixed-title-image", true) != ""){
 $fixed_title_image = get_post_meta($id, "qode_fixed-title-image", true);
}else{
    $fixed_title_image = $qode_options_elision['fixed_title_image'];
}

if(get_post_meta($id, "qode_title-image", true) != ""){
 $title_image = get_post_meta($id, "qode_title-image", true);
}else{
    $title_image = $qode_options_elision['title_image'];
}
$title_image_height = "";
$title_image_width = "";
if(!empty($title_image)){
    $title_image_url_obj = parse_url($title_image);
  if (file_exists($_SERVER['DOCUMENT_ROOT'].$title_image_url_obj['path']))
        list($title_image_width, $title_image_height, $title_image_type, $title_image_attr) = getimagesize($_SERVER['DOCUMENT_ROOT'].$title_image_url_obj['path']);
}

if(get_post_meta($id, "qode_title-height", true) != ""){
 $title_height = get_post_meta($id, "qode_title-height", true);
}else{
    $title_height = $qode_options_elision['title_height'];
}

$title_background_color = '';
if(get_post_meta($id, "qode_page-title-background-color", true) != ""){
 $title_background_color = get_post_meta($id, "qode_page-title-background-color", true);
}else{
    $title_background_color = $qode_options_elision['title_background_color'];
}

$show_title_image = true;
if(get_post_meta($id, "qode_show-page-title-image", true)) {
    $show_title_image = false;
}

$qode_page_title_style = "standard";
if(get_post_meta($id, "qode_page_title_style", true) != ""){
    $qode_page_title_style = get_post_meta($id, "qode_page_title_style", true);
}else{
    if(isset($qode_options_elision['title_style'])) {
        $qode_page_title_style = $qode_options_elision['title_style'];
    } else {
        $qode_page_title_style = "standard";
    }
}
$height_class = "";
if($qode_page_title_style == "title_on_bottom") {
    $height_class = " title_on_bottom";
}


$enable_page_comments = false;
if(get_post_meta($id, "qode_enable-page-comments", true)) {
    $enable_page_comments = true;
}
?>
    <?php get_header(); ?>
        <?php if(get_post_meta($id, "qode_page_scroll_amount_for_sticky", true)) { ?>
            <script>
            var page_scroll_amount_for_sticky = <?php echo get_post_meta($id, "qode_page_scroll_amount_for_sticky", true); ?>;
            </script>
        <?php } ?>
        <?php if(!get_post_meta($id, "qode_show-page-title", true)) { ?>
            <div class="title<?php echo $height_class; ?> <?php if($responsive_title_image == 'no' && $title_image != "" && ($fixed_title_image == "yes" || $fixed_title_image == "yes_zoom") && $show_title_image == true){ echo 'has_fixed_background '; if($fixed_title_image == "yes_zoom"){ echo 'zoom_out '; } } if($responsive_title_image == 'no' && $title_image != "" && $fixed_title_image == "no" && $show_title_image == true){ echo 'has_background'; } if($responsive_title_image == 'yes' && $show_title_image == true){ echo 'with_image'; } ?>" style="<?php if($responsive_title_image == 'no' && $title_image != "" && $show_title_image == true){ if($title_image_width != ''){ echo 'background-size:'.$title_image_width.'px auto;'; } echo 'background-image:url('.$title_image.');';  } if($title_height != ''){ echo 'height:'.$title_height.'px;'; } if($title_background_color != ''){ echo 'background-color:'.$title_background_color.';'; } ?>">
                <div class="image <?php if($responsive_title_image == 'yes' && $title_image != "" && $show_title_image == true){ echo "responive"; }else{ echo "not_responsive"; } ?>"><?php if($title_image != ""){ ?><img src="<?php echo $title_image; ?>" alt="&nbsp;" /> <?php } ?></div>
                <?php if(!get_post_meta($id, "qode_show-page-title-text", true)) { ?>
                    <div class="title_holder">
                        <div class="container">
                            <div class="container_inner clearfix">
                                <?php if($qode_page_title_style == "title_on_bottom") {  ?>
                                    <div class="title_on_bottom_wrap">
                                        <div class="title_on_bottom_holder">
                                            <div class="title_on_bottom_holder_inner" <?php if(get_post_meta($id, "qode_page_title_holder_color", true)) { ?> style="background-color:<?php echo get_post_meta($id, "qode_page_title_holder_color", true) ?>" <?php } ?>>
                                                <h1<?php if(get_post_meta($id, "qode_page-title-color", true)) { ?> style="color:<?php echo get_post_meta($id, "qode_page-title-color", true) ?>" <?php } ?>><span><?php the_title(); ?></span></h1>
                                            </div>
                                        </div>
                                    </div>
                                <?php } else { ?>
                                    <h1<?php if(get_post_meta($id, "qode_page-title-color", true)) { ?> style="color:<?php echo get_post_meta($id, "qode_page-title-color", true) ?>" <?php } ?>><span><?php the_title(); ?></span></h1>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        <?php } ?>

        <?php
        $revslider = get_post_meta($id, "qode_revolution-slider", true);
        if (!empty($revslider)){ ?>
            <div class="q_slider"><div class="q_slider_inner">
            <?php echo do_shortcode($revslider); ?>
            </div></div>
        <?php
        }
        ?>
    <div class="full_width">
    <div class="full_width_inner">
        <?php if(($sidebar == "default")||($sidebar == "")) : ?>
            <?php if (have_posts()) : 
                    while (have_posts()) : the_post(); ?>
                    <?php the_content(); ?>
                    <?php 
 $args_pages = array(
  'before'           => '<p class="single_links_pages">',
  'after'            => '</p>',
  'pagelink'         => '<span>%</span>'
 );

 wp_link_pages($args_pages); ?>
                            <?php
                            if($enable_page_comments){
                            ?>
                            <div class="container">
                                <div class="container_inner">
                            <?php
                                comments_template('', true); 
                            ?>
                                </div>
                            </div>  
                            <?php
                            }
                            ?> 
                    <?php endwhile; ?>
                <?php endif; ?>
        <?php elseif($sidebar == "1" || $sidebar == "2"): ?>        

            <?php if($sidebar == "1") : ?>  
                <div class="two_columns_66_33 clearfix grid2">
                    <div class="column1">
            <?php elseif($sidebar == "2") : ?>  
                <div class="two_columns_75_25 clearfix grid2">
                    <div class="column1">
            <?php endif; ?>
                    <?php if (have_posts()) : 
                        while (have_posts()) : the_post(); ?>
                        <div class="column_inner">

                        <?php the_content(); ?> 
                        <?php 
 $args_pages = array(
  'before'           => '<p class="single_links_pages">',
  'after'            => '</p>',
  'pagelink'         => '<span>%</span>'
 );

 wp_link_pages($args_pages); ?>
                            <?php
                            if($enable_page_comments){
                            ?>
                            <div class="container">
                                <div class="container_inner">
                            <?php
                                comments_template('', true); 
                            ?>
                                </div>
                            </div>  
                            <?php
                            }
                            ?> 
                        </div>
                <?php endwhile; ?>
                <?php endif; ?>


                    </div>
                    <div class="column2"><?php get_sidebar();?></div>
                </div>
            <?php elseif($sidebar == "3" || $sidebar == "4"): ?>
                <?php if($sidebar == "3") : ?>  
                    <div class="two_columns_33_66 clearfix grid2">
                        <div class="column1"><?php get_sidebar();?></div>
                        <div class="column2">
                <?php elseif($sidebar == "4") : ?>  
                    <div class="two_columns_25_75 clearfix grid2">
                        <div class="column1"><?php get_sidebar();?></div>
                        <div class="column2">
                <?php endif; ?>
                        <?php if (have_posts()) : 
                            while (have_posts()) : the_post(); ?>
                            <div class="column_inner">
                            <?php the_content(); ?>     
                            <?php 
 $args_pages = array(
  'before'           => '<p class="single_links_pages">',
  'after'            => '</p>',
  'pagelink'         => '<span>%</span>'
 );

 wp_link_pages($args_pages); ?>
                            <?php
                            if($enable_page_comments){
                            ?>
                            <div class="container">
                                <div class="container_inner">
                            <?php
                                comments_template('', true); 
                            ?>
                                </div>
                            </div>  
                            <?php
                            }
                            ?> 
                            </div>
                    <?php endwhile; ?>
                    <?php endif; ?>


                        </div>

                    </div>
            <?php endif; ?>
    </div>
    </div>  
    <?php get_footer(); ?>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
dongqu9917 2014-11-14 18:36
关注
I'm not sure how you're planning to get your static headline onto the page. You could hard code it in there as I am about to show you below or you could create a custom field. If you decide to take that route, I find that Advanced Custom Fields is really easy to use.

<?php $revslider = get_post_meta($id, "qode_revolution-slider", true); if (!empty($revslider)){ ?> <div class="q_slider"><div class="q_slider_inner"> <h1 class="static-headline">Your awesome text goes here</h1> <?php echo do_shortcode($revslider); ?> </div></div> <?php

Add the following CSS to your site to position it in the correct place:

.q_slider_inner { position: relative; } .static-headline { position: absolute; bottom: 5%; left: 2%; color: #fff; z-index: 21; }

You'll need to play around with the percentages to get the headline exactly where you need it but I recommend using % over px values since you want this to be responsive.

I hope this helps.
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

Wordpress：如何在旋转滑块上叠加文本/小部件div css php
2014-11-14 15:00

回答 1 已采纳 I'm not sure how you're planning to get your static headline onto the page. You could hard code it
如何在WordPress页面上创建小部件时动态编号？ php
2017-01-20 20:18

回答 1 已采纳 There's a number of ways to do this, but I ended up using Advanced Custom Fields (which I was alre
WordPress：需要从PHP文件更改文本颜色 css php
2016-06-22 09:44

回答 5 已采纳 You can just wrap the text inside a span with class. <div class="post hentry ivycat-post">
转载130个原文网站，原文链接：https://blog.csdn.net/qq_43901693/article/details/100606828
2020-03-12 09:27

呓语煮酒的博客文章目录130 余个相见恨晚的超实用网站搞学习找书籍冷知识 / 黑科技写代码资源搜索小工具导航页（工具集）看视频学设计搞文档找图片搞学习 CSDN： https://www.csdn.net/ TED（最优质的演讲）：...
Wordpress自定义文本小部件html支持 php
2017-07-13 23:12

回答 1 已采纳 Your script is calling strip_tags() which removes HTML tags. See http://php.net/manual/en/function
安装失败：无法在ubuntu上的wordpress nginx中创建目录 nginx php ubuntu
2018-09-06 17:25

回答 1 已采纳 changing ownership with this it works like charm sudo chown -R www-data:www-data /var/www/domain_
Wordpress的奇怪问题在我的本地机器上安装 apache mysql php
2017-09-05 09:51

回答 1 已采纳 You should go to Permalink Settings page in your localhost WordPress dashboard and click save chan
warning: require(./admin.php),WordPress提示require_once() Failed opening required的解决方法
2021-04-26 20:54

独立鱼电影的博客本文实例讲述了WordPress提示require_once() Failed opening required的解决方法。一、问题：今天进我的wordpress发现提示require_once() Failed opening required in wp-admin/admin.php错误了,出现这类问题一看...
Wordpress：尝试在窗口小部件定义中调用get_permalink - 抛出错误 php
2015-10-20 16:53

回答 1 已采纳 I tested your code, it was outputting parse error "unexpected var" Parse error: syntax error,
Wordpress：创建左/右帖子布局 php
2017-07-15 17:21

回答 1 已采纳 WordPress has a count of the post inside the loop, use it in the even odd fashion. If you are usin
Wordpress：在单个自定义帖子类型页面上提交帖子方法表单返回404 php
2015-12-09 16:26

回答 2 已采纳 After a long period of debugging, I found the reason: the $_POST fields affects the query. In my
微信小程序开发的学习资料收集
2022-06-28 15:33

来自内蒙古的田园蒙牛的博客小程序开发学习资料集合
在wordpress页面中嵌入Tradingview小部件 javascript php
2017-09-13 19:32

回答 1 已采纳 If you just want to insert that script into a page, you could use a plugin or set up a custom fiel
超详细图解：如何使用 WordPress搭建一个个人博客？
2020-10-15 20:41

写代码的明哥的博客前两天我用WordPress 给自己搭建了一个网站，整个过程非常的顺利，体验非常地好，于是我就整个过程、以及其中的一些搭建心得，记录下来。如果你也正好有搭建个人网站的想法，那么本文会给你一个参考，也许看了这篇...
WordPress前端投稿实现图片上传
2019-07-09 16:14

1016134519的博客好像现在的站长都喜欢让用户投稿，最近看上了一款前端富文本编辑器quill，顺便做下前端投稿的功能。前端投稿最重要的就是媒体文件的上传，quill富文本编辑器也提供了相应的api，我们完全可以自己实现前端上传媒体...
没有解决我的问题, 去提问

悬赏问题

¥15 高德地图点聚合中Marker的位置无法实时更新
¥15 DIFY API Endpoint 问题。
¥20 sub地址DHCP问题
¥15 delta降尺度计算的一些细节，有偿
¥15 Arduino红外遥控代码有问题
¥15 数值计算离散正交多项式
¥30 数值计算均差系数编程
¥15 redis-full-check比较两个集群的数据出错
¥15 Matlab编程问题
¥15 训练的多模态特征融合模型准确度很低怎么办

Wordpress：如何在旋转滑块上叠加文本/小部件div

1条回答 默认 最新

悬赏问题

1条回答默认最新