如何使此交换图像代码在Wordpress中工作 [英] how to make this swap image code working in wordpress

问题描述

好的，我在这个很好的教程的基础上创建了一个投资组合页面:

ok, I created a portfolio page on the base of this nice tutorial: http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

但是因为它基于css，所以有一些限制.像目前一样，除非我将标题悬停，否则没有图像显示.

but because it is based on css, it has some limitations. like currently there are no image showing unless I hover a title.

这是我的CSS:

.container_imd {
  position: relative;
  overflow: hidden;
  margin: 100px auto;
  width: 800px;
  height: 500px;
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}



.container_imd li img {
  position: absolute;
  top: 0;
  left: 800px;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

/*NAV*/
.container_imd nav {
  width: 170px;
  height: 500px;
  background: #fff;
}

/*UL*/
.container_imd ul {
  width: 800px;
  height: 500px;
  list-style: none;
}

.container_imd li a {
  z-index: 1;
  display: block;
  padding-left: 20px;
  width: 150px;
  height: 30px;
  background: white;
  color: #444;
  text-decoration: none;
  font: 14px/30px Helvetica, Verdana, sans-serif;
}

.container_imd li:nth-child(1) {
  padding-top: 50px;
}

.container_imd li a:hover {
  background: #eee;
}

.container_imd li a:hover + img {
  left: 0px;
}

&这是WordPress的代码:

& here is the code from WordPress:

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php the_post_thumbnail() ?>
      </li>
      <?php endwhile; ?> 
    </ul>
  </nav>
</div>

如何显示最后一个列表项中的图像?因此即使没有人悬停任何标题，它也始终可见. &当有人悬停其他标题时，它将替换图片*显示该帖子所附的图片.我知道可以使用javascript，但我不太了解javascript.有人可以帮忙吗?

how can I show the image from the last list item here? so it is always visible, even if no one hover any of the title. & when someone hover any other title it ll replace the image * show the image attached with that post. I know it is possible using javascript, but I don't know javascript much. can anyone help?

推荐答案

您不需要JS:只需要您的PHP代码即可输出具有与示例中相同结构的HTML.此PHP代码来自以下哪个WP模板:page.php?对于最后一张图片，您需要在循环之外添加一个额外的<img>标签和nav标签，即使没有链接悬停，该标签也将始终显示.

You don't need JS: you just need your PHP code to output an HTML with the same structure as the one in the example. What WP template is this PHP code from: page.php? For the last image, you need to add an extra <img> tag outside of the loop and the nav tag, that will always show even if no links are hovered.

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=1; $i<count($loop->posts); $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[0]->ID );
</div>

最后发布为静态信息:

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=0; $i<count($loop->posts)-1; $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[count($loop->posts)-1]->ID );
</div>

这篇关于如何使此交换图像代码在Wordpress中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！