WordPress |在特色图片上使用 imagehover

Posted 2023-05-08

【中文标题】WordPress |在特色图片上使用 imagehover

【英文标题】：WordPress | Using imagehover on Featured Images

【发布时间】：2014-10-22 04:08:20

【问题描述】：

我不是一个专业的专业人士，但我确实了解基本的脚本/调整/编辑以及 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' => 'Colored Image',
            'id' => 'colored-image',
            'post_type' => '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'] . '" />';       
            else
                echo '<img src="'.  $upload_dir['baseurl'] . '/' . $custom["file"] . '" />';        
            
        else:
            //no image image
            echo '<img src="' . OZY_BASE_URL . 'images/no-image310x140.png" />';
        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'] . '"  class="nohover" /><img  src="URL TO HOVER IMAGE" class="hover" />';

【问题讨论】：

你不能只使用css吗？例如这里：html5templatesdreamweaver.com/hover-effects.html

您好，感谢您的回复。我确实查看了使用 CSS 的选项，但我认为效果不会那么好，因为我使用的是不同的“精选图片”。它们都是通过使用 layouts-objects.php 文件中的一个代码来调用的（据我所知）。看看我原帖的底部。我在 layouts-objects.php 文件中添加了代码。特色图片部分：portfolio-featured-thumb-460。

从我可以看到你在.item-wrapper div 中有图像，在图像只是空的.hover div 和带有标题的跨度之后。这里alessioatzeni.com/wp-content/tutorials/html-css/… 他们在图像下使用另一个 div 来消除图像的不透明度（.fourth-effect .mask 和边框用于覆盖图像）。

我试图弄清楚你在说什么，但我想这些信息让我大吃一惊；）该图像确实是从 item-wrapper div 调用的（['portfolio-featured-thumb- 460']）。你说它在图像之后是空的是什么意思？ “无图像图像”部分？最后：我应该如何处理 .hover div 和 span（带有标题）？我确实看过网址。看起来不错（如果我能够使用第二张图像而不是一些不透明度百分比）。谢谢！ :)

顺便说一句，我也在尝试找出其他选项。在我的原始帖子中，在 EDIT 2 中，您可以看到我修改后的一段代码（中间部分带有投资组合特色 -thumb-460）。如果有一种方法可以替换 URL TO HOVER IMAGE 部分（不仅仅是使用真实的 url，而是以代码的形式 - 就像该代码的第一部分一样），那也可以解决这个问题，对?从多个帖子缩略图插件中调用（第二个，悬停精选）图像。希望这是有道理的...... ;)

【参考方案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 效果结合使用，以使您的图像首先为黑色，然后在悬停时显示。

【讨论】：

再次感谢您的回复。我做了一些测试，但是我现在能够使原始的第一个特色图像悬停，我无法使用第二个特色图像中的代码使其悬停。 PASTEBIN（未更改的代码）：pastebin.com/1vW5R6NW。 PASTEBIN（编辑过的代码，所以我现在可以看到一个无图像图像，它悬停在第一个图像/拇指上）：pastebin.com/wMyrWw1U。看来我需要一些 代码放在 echo 'NEW CODE FOR 2ND FEATURED IMAGE'; 之间。这个插件的作者在他的网站上谈论的唯一代码是：MultiPostThumbnails::has_post_thumbnail()

所以我基本上要说的是，我不是在寻找将第一个精选图像悬停在库存图像或颜色（这将是一个永久链接/代码）上，而是使用第二张特色图片也被上传到同一篇文章/帖子中，并且有自己的代码（我似乎无法放在一起）。