【问题标题】:Add classes to tags in Wordpress将类添加到 Wordpress 中的标签
【发布时间】:2014-04-11 10:52:26
【问题描述】:

我只想将每个标签的名称添加为一个类,以便我可以使用 CSS 单独定位每个标签。我对此进行了广泛的搜索,大多数结果都是指将课程放在正文或帖子上,或者将我指向这里的方向http://codex.wordpress.org/Template_Tags/get_the_tags

我确信我可以通过从这篇文章中提取正确的信息来实现这一点,但我的 php 和 wordpress 知识有限,所以我无法弄清楚如何做我需要的具体操作。

例如 - <a rel="tag" href="">black</a> 将变为 <a rel="tag" href="" class="black">black</a>

顺便说一句,这些标签是 woocommerce 中的产品标签,但我猜这没什么区别?

【问题讨论】:

  • 使用jquery添加Class..

标签: wordpress tags


【解决方案1】:

这个 PHP 应该在不使用 javascript 的情况下添加它们。

foreach (get_the_tags() as $tag) {
    echo "<a rel=\"tag\" href=\"\" class=\"" . $tag->name . "\">".$tag->name."</a> ";
}

【讨论】:

  • 感谢您的回复 :) 我将把这段代码放在哪里?我在function.php文件中试了一下,什么也没发生……
  • 你想在哪里显示标签,在循环内。
  • 对不起,我不明白这是什么意思:-/你的意思是在显示这些标签的 php 文件中,还是在 functions.php 中?
  • 在显示这些标签的 PHP 文件中。
  • 有没有简单的方法可以找出那个文件是什么?在这种情况下,我假设它在 woocommerce 文件夹中,因为它们是 woocommerce 标签...
【解决方案2】:

试试下面的 JS 代码。

这很神奇,

<script>
$(document).ready(function() {
    $( "a" ).each(function( index ) {
        var tst = $(this).html();
        $( this ).addClass( tst );
    });
});
</script>

【讨论】:

  • 谢谢。我已经尝试修改它以适应我的标签所在的位置,但没有乐趣,我想我没有得到它。 &lt;script&gt; $(document).ready(function() { $( ".tagged_as a" ).each(function( index ) { var tst = $(this).html(); $( this ).addClass( tst ); }); }); &lt;/script&gt;我已经把代码放在header.php中了,对吗?
  • &lt;span class="tagged_as"&gt; Tags: &lt;a rel="tag" href="http://localhost:8888/integral-vitality/product-tag/vegan/"&gt;Vegan&lt;/a&gt; , &lt;a rel="tag" href="http://localhost:8888/integral-vitality/product-tag/vegetarian/"&gt;Vegetarian&lt;/a&gt; , &lt;a rel="tag" href="http://localhost:8888/integral-vitality/product-tag/yeast-free/"&gt;Yeast Free&lt;/a&gt; . &lt;/span&gt; 那就是上面的html(woocommerce标签)和js。抱歉,在评论中发布它看起来真的很乱!!
  • 将javascript放在header.php文件中是否正确,我是否根据我的标记定位正确的东西?
  • 是的,没错。您可以放入 header.php 或 footer.php.. 只需将脚本中的“$”符号替换为“jQuery”并尝试。这可能会对您有所帮助。
  • 嗯仍然没有类出现在那些“a”标签上。会不会有冲突什么的?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-10
  • 1970-01-01
  • 2011-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多