在每个标签旁边显示图像 | CSS-Tricks

<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check tagslug.png exists and display it
if ($posttags) {
 foreach($posttags as $tag) {
       $image = "/images/tag-images/$tag->slug.png";

       if (file_exists("images/tag-images/$tag->slug.png")) {
         echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '" /></a>';

       // If no image found, output something else, possibly nothing.
       } else {
         echo '<p>Not found</p>';
       }
  }
}
?>

此代码应放在循环内。它将在特定目录中查找与文章标签的 slug 匹配的任何图像，显示它们并将其链接到相关的标签档案。

TeMc

# 2011 年 8 月 1 日

您不使用 $image 在 file_exists 调用中的原因是什么？

Vic Maine

# 2015 年 1 月 16 日

您好，发布此代码的人，这太棒了，节省了大量时间。

但是，对于任何尝试使用此代码但不是 WordPress 大师的人来说，您可能难以在 WordPress 网站上使用它，因为目录结构存在问题。

以下代码有效。它与上面的代码相同，但会为您找到“uploads”目录（已内置到代码中，请完全复制粘贴此代码）...（哦，对了，顺便说一句，我将其从 .png 更改为 .jpg，您可以根据需要切换回来）。

注意：我的“home”和“uploads”目录位于加载 WordPress 时的位置（即 wp-content/uploads），因此如果您已移动它们（因为 WordPress 允许您这样做），那么我不能保证任何结果。我认为它在这种情况下可能仍然有效，但不确定（我也只是在瞎搞）。

另外（如果您不完全理解此代码的作用）

如果您将图像命名为与您要关联的标签相同（即，标签-slug = 标签-slug.jpg ... 然后此代码将在您的“wp-content/uploads”文件夹中找到该图像（即，WordPress 媒体库当前使用的相同文件夹）并将其与该标签关联，以便您可以在循环中将其显示在与该标签匹配的任何文章旁边。

否则，您必须使用那些标签到图像类型的插件，并分别处理每个标签。因此，现在，您可以将一堆图像通过 FTP 上传到您的 wp-content/uploads 文件夹（以正确的方式命名，如上所述），此代码将自动为您匹配它们。这很棒，节省了大量时间和麻烦（非常感谢发布者！）。

注意

在我的情况下，我使用“标签”来表示“来源作者”（我作为链接文章共享的外部文章的作者），因此每篇文章只有一个（1）标签。

我不知道如果您有多个标签（上传文件夹中都有相应的图像），会发生什么。

好的，所以这里就是，不要再为弄清楚为什么您无法使用此代码而绞尽脑汁了……。

如果您想查看一个有效的示例

我正在我的网站上使用它，我目前正在建设中（feedweek.com 链接在我的作者姓名中，我认为）。我将它用于所有主要提要以及右侧边栏（无论您在何处看到博主照片在文章旁边）。该网站正在运行，但尚未准备好投入使用，因此如果您在不合适的时间访问，它可能很乱。

这是有效的代码

<div class="image_wrap">
<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check if tag-slug.jpg exists and display it.
if ($posttags) {
 foreach($posttags as $tag) {
        $upload_dir = wp_upload_dir();
        $image_relative_path = "/" . $tag->slug .".jpg";
        $image_path = $upload_dir['basedir'] . $image_relative_path;
        $image_url = $upload_dir['baseurl'] . $image_relative_path;

        if (file_exists($image_path)) {
        echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>';

       // If no image found, output something else.
       } else { ?>
         <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
       <?php }
  }
}
?>
</div><!-- #image_wrap -->

vic maine

Vic Maine

# 2015 年 1 月 16 日

编辑

我使用插件从我的 URL 中删除标签和分类基础，因此上面的代码中没有包含这些内容，用于链接到标签页面的锚点链接。

如果您的标签页 URL 中仍然包含 /tag/，您需要将其更改为...

<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>

更改为...

<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>

因此它应该看起来像这样...

如果您的网站在标签页 URL 中包含 /tag/，请使用此代码代替我在第一条评论中发布的代码

<div class="image_wrap">
<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL

// Check if tag-slug.jpg exists and display it.
if ($posttags) {
 foreach($posttags as $tag) {
        $upload_dir = wp_upload_dir();
        $image_relative_path = "/" . $tag->slug .".jpg";
        $image_path = $upload_dir['basedir'] . $image_relative_path;
        $image_url = $upload_dir['baseurl'] . $image_relative_path;

        if (file_exists($image_path)) {
        echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>';

       // If no image found, output something else.
       } else { ?>
         <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="  image missing  " />
       <?php }
  }
}
?>
</div><!-- #image_wrap -->

Vic Maine

# 2015 年 1 月 16 日

顺便说一句，您无需在此创建帐户即可留下评论，这真是太好了。如果我需要创建帐户并登录才能发布评论，我可能不会费心留下这些修复...

... 只需要姓名和电子邮件地址！太棒了。

Silvan

# 2015 年 1 月 25 日

这非常有效。现在，如何修改此代码，以便它在标签档案页面上显示标签图像？如果该模板可以提取相同的图像，那就太好了，这样我就只需要创建一次新图像（而不是必须手动将其添加到标签描述中，并将其上传到文件夹）？

我尝试将上面的代码放到 archive.php 中，但感觉它没有在该页面上获取“标签”。

Vic Maine

# 2015 年 1 月 25 日

@Silvan，这在任何地方都有效。我正在 index.php、archive.php、single.php 甚至网站每个页面上的边栏中按原样使用它... 将它放到那里，就像您在 index.php 中做的那样。

whatsQ

# 2015 年 5 月 5 日

我添加了您的代码，但我看到它正在我的主题中查找，而不是在 WordPress 的上传目录中查找。
我有一些测试文件，如
http://whatsq.com/wp-content/uploads/2015/05/Programming.png

但我看到只有代码的 ELSE 部分正在执行。
http://whatsq.com/wp-content/uploads/2015/04/pen.png（我更改了它）

您能告诉我我的代码中缺少什么吗？

http://www.whtasq.com

谢谢。
Raj

whatsQ

# 2015 年 5 月 5 日

代码放在最后一个边栏中

评论

发表评论 取消回复

发表评论取消回复