Wordpress循环 - 图像上的滚动

时间:2014-12-12 05:13:13

标签: php html css wordpress

很多人都拥有Wordpress权利。我正在尝试调整循环中的代码,以便缩略图在悬停时显示三个内容:

  1. 帖子标题
  2. 带有“阅读更多”链接的二十个单词内容
  3. 发布日期
  4. 现在,我让它们都显示有响应网格(工作正常),但悬停功能有问题。我还没弄清楚如何在php标签中分配样式。我试图在线找到我需要的代码,只找到了插件。

    任何帮助将不胜感激。谢谢!

    CSS:

    .attach_hover {
        opacity:1;
        width:100%;}
    .attach_hover:hover {
        opacity:.5;
        background-color: white;
        z-index:-3;
    }
    .attach_text {
        color: red;
        font-weight: bolder;
        z-index:-1;
        float:left;
        width:75%;
        text-align:left;
        padding: 51px;
    }
    

    PHP / HTML:

     <div class="row">
    <?php
    $the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ) );
    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
    ?>  
    <div class="col-sm-6" style="max-height:200px">
    <h1><?php the_title(); ?></h1>
    <?php if(has_post_thumbnail()) {                    
        $image_src = the_post_thumbnail( 'custom-size', array( 'class' => "attach_hover" ) );
        echo '<img src="' . $image_src[0]  . '" width="100%"  />';
        echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
        echo '</a>';
        $content = get_the_content();
        echo '<div class="attach_text">'; 
        $trimmed_content = wp_trim_words( $content, 20, '<a href="'. get_permalink() .'"> ...Read More</a>' );
        $the_title = get_the_title();
        echo $trimmed_content;
        echo '</div>'; 
    }?>
                </div><div class="col-sm-6" style="max-height:200px;">
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
                </div>
    <hr> <?php endwhile; else: ?>
    

1 个答案:

答案 0 :(得分:0)

想出来! 破碎的图像图标来自这里:

 echo '<img src="' . $image_src[0]  . '" width="100%"  />';

我还需要在悬停(.posttext)上显示的容器的绝对定位,我不得不消除第二行响应式bootstrap脚手架。它将所有内容缩小为一列:

<div class="col-sm-6" style="max-height:200px;">.

最后,我在.posttext的元素中添加了p类赋值。这些是.posthead .postdate和.postcontent。头部,日期和内容都在容器内有一个位置。

它仍然可以使用调整,但它是一个功能/响应式布局,允许您将鼠标悬停在循环中的帖子附件上并显示:     1.帖子标题     2.带有“阅读更多”链接的二十个单词内容     3.发布日期


CSS:

    .row {
    clear: both;}
.postloop {
    opacity:1;
    width: 100%;
    height: auto;
    padding: 5px 0 5px 0;
}
.posttext {
    color: gray;
    font-size: 100%;
    z-index:3;
    width: 96%;
    padding:5px 10px 5px 5px;
    height: 100%;
    display: block;
    opacity: 0;
    overflow: hidden;
    border: 5px solid blue;
    position: absolute;
     background:rgb(255,255,255);  
    background: transparent\9;  
    background:rgba(255,255,255,0.9);   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
    zoom: 1;
        -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.posttext:hover {
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
 }
.posthead{
    color: blue;
    font-size: 150%;
    font-weight: bolder;
    float:left;
    text-align:left;
    margin-top: -2px;
    width: 80%;
    vertical-align: top;
    display: block;
    height: 60%;
}
.postdate{
    color:black;
    float: right;
    font-style: italic;
    text-align: right;
    width: 20%;
    height: 60%;
    vertical-align: top;
    margin-top: -1px;
    display: block;
}
.postcontent{
    color:black;
        vertical-align: text-bottom;
    vertical-align: bottom;
    text-align: left;
    margin-top: 50px;
    width: 80%;
    height: 40%;
}
.readmore {
    float: right;
    text-align: right;
    vertical-align: text-bottom;
    vertical-align: bottom;
}

PHP / HTML:

     <div class="row">
                <?php
    $the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ) );
    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); 
    ?>
            <div class="col-sm-6"> 
            <?php
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">'; 
echo '<div class="posttext">';
echo '<p class="posthead">';
the_title();
echo '</p><p class="postdate">';
    the_date('F jS, Y');
echo '</p><p class="postcontent">';
    $content = get_the_content();
$trimmed_content = wp_trim_words( $content, 10,"...".'<p class="readmore"> <a href="'. get_permalink() .'">Read More</a>' );
echo $trimmed_content;
echo '</p>';
echo '</div>';
echo '</a>';
    }?> 
                </div>
    <?php endwhile; else: ?>