1

我的目标是在列表中包含与列表项的标记或分类方式相对应的操作图标。

例如，如果我有一个网络研讨会列表项，它旁边应该有一个网络研讨会图标，列表中的下一个项目可能是白皮书，旁边应该有一个白皮书图标。图标的数量应由列表项的标记或分类方式控制。

我不知道从哪里开始；任何建议表示赞赏。谢谢！

编辑：

认为如果我显示要修改的列表可能会有所帮助-从技术上讲，我要修改的项目位于span class=meta"部分，但我愿意使用任何方法：

    <ul class="sub_nav">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active last">
        <a href="#resource_center" title="Resources II">
            Featured Resources
        </a>
    </li>
   </ul>

    <div id="resource_center">
    <?php
    $resources = get_posts("post_type=resource&posts_per_page=2&cat=31&tag=featured");
    ?>
    <?php foreach ($resources as $key => $resource): setup_postdata($resource); ?>
        <?php if ($key === 0): ?>

        <?php endif ?>

        <p><span class="meta"><?php echo apply_filters('get_the_date',mysql2date('m.d.Y', $resource->post_date), 'm.d.Y') ?></span> 
        <a href="<?php echo get_permalink($resource->ID) ?>"><?php echo $resource->post_title ?></a> &ndash; <?php echo strip_tags(get_the_excerpt()) ?></p>

    <?php endforeach; ?>

    <span class="more"><a href="/resources/">Read More</a></span>

</div>
4

3 回答 3

2

只需在它们对应的标签之后命名所有图标并将它们放在服务器上的同一文件夹中（比如说http://www.yoursite.com/tagicons）

在您的循环中，只需在图像标签中迭代元标签

<img src="http://www.yoursite.com/tagicons/{$tag}.png" />

如果您需要更多帮助，请粘贴您用于迭代列表项的代码。

干杯-D

编辑：

我知道你正在使用 wordpress。

请参阅http://codex.wordpress.org/Function_Reference/wp_get_post_tags 以了解如何获取您正在寻找的标签。

于 2012-05-07T21:26:33.507 回答
1

如果您在 WordPress 循环中生成列表，则可以将类别作为类添加到列表元素中。例如：

...loop started
$categories = get_the_category();
$ids = '';
foreach ($categories as $category) {
    $ids .= ' ' . $category->slug;
}
echo '<li class="' .  $ids '">This item</li>';
...more loop

然后利用 CSS 来设置列表块的样式。

于 2012-05-07T21:31:19.727 回答
0

虽然我认为这两种解决方案都行得通，但我决定使用我在研究满足我的用例的选项时发现的第三种解决方案。这个是理想的，因为我能够将它无缝地融入我现有的代码结构中，并且因为我需要添加特色图像的资源数量相对较少。

我添加了下面的代码，它基本上使用帖子的特色图像作为左对齐缩略图。

     <?php if ( has_post_thumbnail()): ?>

        <?php
        $thumb_id = get_post_thumbnail_id($resource->id);
        $args = array(
        'p' => $thumb_id,
        'post_type' => 'attachment'
        );
        $thumb_image = get_posts($args);
        $thumb_caption = $thumb_image->post_excerpt;
        ?>
        <?php if (!empty($thumb_caption)): ?>
    <div class="caption"><?php echo $thumb_caption ?></div>
        <?php endif ?>

        <?php the_post_thumbnail('sidebar-thumb'); ?>

<?php endif; ?>

紧随其后的是这段代码截取图像并将其放在列表项中：

<?php echo get_the_post_thumbnail($id, 'thumbnail', array()); ?>

这是我添加代码后我的测试站点列表部分的屏幕截图 - 这正是我想要的：

在此处输入图像描述

感谢您的建议和帮助，它让我朝着正确的方向前进！

于 2012-05-08T20:09:00.333 回答