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

时间：2014-11-14 15:00:07

标签： php css wordpress

我们正在使用Elision WP主题。我们在主题后端设置中通过短代码在家中拉出一个旋转滑块。我们需要在幻灯片上添加静态文本。

革命滑块设置为1100px x 680px，我们想要＆＃34;英雄文字＆＃34; div位于左下角，左起20px，底部50px。它还需要响应。

附：布局图片链接，homepage.php代码。

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 个答案:

答案 0 :(得分：0)

我不确定您是如何计划将静态标题添加到页面上的。您可以在那里进行硬编码，因为我将在下面向您展示，或者您可以创建自定义字段。如果您决定采用这条路线，我发现Advanced Custom Fields非常容易使用。

<?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

将以下CSS添加到您的网站，以将其放置在正确的位置：

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

您需要使用百分比来准确地将标题放在您需要的位置，但我建议使用％而不是px值，因为您希望它具有响应性。

我希望这会有所帮助。

相关问题
最新问题