Question

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

帖子标题
带有“阅读更多”链接的二十个单词内容
发布日期

现在，我让它们都显示有响应网格（工作正常），但悬停功能有问题。我还没弄清楚如何在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: ?>

Answer 1

想出来！破碎的图像图标来自这里：

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

Wordpress循环 - 图像上的滚动

1 个答案: