Question

我不是一个专业的大专业人士，但在基本的脚本编写/调整/编辑方面，我确实知道如何处理CMS。现在，我在我的网站上使用WordPress。我修改了一个主题，一切运行得很好（它在构造模式下）。

然而，我尝试完成了一件事，但我无法让它发挥作用。

WordPress拥有名为“特色图片”的功能。它是您可以包含在文章中的图像/缩略图。我在这里尝试做的是将特色图像转换为图像切换。因此，当人们将鼠标移到（黑白）图像上时，它会变成另一个（彩色）图像。

我能够弄清楚的一件事就是使用名为Multiple Post Thumbnails的WordPress插件。它允许您将2个精选图像（缩略图）添加到单个文章中。在这种情况下：黑白图像和彩色图像。

现在在这里;实际上可以找到一些关于如何激活这个修改的教程，但我无法让它工作。网址：http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/

所以我的两个问题：

是否有更好（更简单）的方法来完成此图像悬停？
至于教程：

我在所有代码上使用了复制/粘贴，并将其添加到我自己的文件/主题中。它给我的全部是一个空白的页面。我不得不从functions.php代码中删除并调整一些代码（例如主题的名称）以使其完全起作用（意思是：能够完全显示我的页面）：

教程：

if (class_exists('MultiPostThumbnails')) {
    new MultiPostThumbnails(
        array(
            'label' =&gt; 'Colored Image',
            'id' =&gt; 'colored-image',
            'post_type' =&gt; 'post'
        )
    );
}

只显示这样的内容：

if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(
    array(
        'label' => 'Colored Image',
        'id' => 'colored-image',
        'post_type' => 'post'
    )
);
}

就像我说的那样，我无法让它发挥作用。调整这段代码会让我离开我开始的地方。仅限黑白图像（特色图像1）。

我正在使用这个Cosmox主题：http://cosmox.ozythemes.com/。我创建了一个页面，其中包含两个彼此之下的合作伙伴（面部）的图像/缩略图（这是特色图像）。滚动这些图像时，会显示包含信息的文本框。它与WHATS NEW部分基本相同。

希望有一个简单的解决方案;）

非常感谢！

@dingo_d：

foreach( $myposts as $post ) :  the_post(); $more = 0; 
        echo '<li>';
        echo '  <div class="item-wrapper">';
        echo '      <div>';
        if ( has_post_thumbnail() ):
            $upload_dir = wp_upload_dir();
            $custom = get_post_custom(); $custom = get_post_meta($custom["_thumbnail_id"][0]); 
            $custom = unserialize($custom['_wp_attachment_metadata'][0]); $upload_folder = dirname($custom['file']);
            if(isset($custom['sizes']) && !empty($custom['sizes'])) {
                echo '<img src="'.  $upload_dir['baseurl'] . '/' . $upload_folder . '/' .  $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%"/>';       
            }else{
                echo '<img src="'.  $upload_dir['baseurl'] . '/' . $custom["file"] . '" width="100%"/>';        
            }
        else:
            //no image image
            echo '<img src="' . OZY_BASE_URL . 'images/no-image310x140.png" width="100%"/>';
        endif;
        echo '          <div class="hover"></div>';
        echo '      </div>';
        echo '      <span class="cfnt" align="center">';
                        the_title();
        echo '      </span>';
        echo '  </div>';
        if($xml->description=='1') echo '<div class="desc"><span class="cfnt">' . get_the_title() . '</span><p>' . strip_tags(get_the_content('','')) . '</p></div>';
        echo "</li>";
    endforeach;

编辑2：

echo '<img src="'.  $upload_dir['baseurl'] . '/' . $upload_folder . '/' .  $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%" class="nohover" /><img alt="imagehover" src="URL TO HOVER IMAGE" class="hover" />';

Answer 1

从上面的代码输出应该是这样的（在html中）

<li>
     <div class="item-wrapper">
        <div>
            <img src=""/>       
            <div class="hover"></div>
        </div>
        <span class="cfnt" align="center"></span>
    </div>
        <div class="desc"><span class="cfnt"></span><p></p></div>
</li>

在图片下方有一个空的div，其中hover类可以与this效果结合使用，使您的图像首先变为黑色，然后在悬停时显示。

WordPress |在特色图片上使用imagehover

1 个答案: