Question

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

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

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

修改

如果我显示我想要修改的列表可能会有所帮助 - 从技术上讲，我想要修改的项目位于 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>

Answer 1

只需在与其对应的代码后将所有图标命名并将其放在服务器上的相同文件夹中（让我们说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 了解如何获取您正在寻找的标签。

Answer 2

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

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

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

Answer 3

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

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

     <?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()); ?>

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

enter image description here

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

基于Wordpress中的类别或标记的不同<li>类</li>

3 个答案: