dsp15140275697
2014-11-14 15:00
浏览 52
已采纳

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(); ?>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

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.

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题