Question

我正在尝试在wp_list_pages()函数中的列表项上创建悬停效果。我正在为Wordpress创建一个主题，但似乎无法使悬停效果起作用。我对此很陌生，所以请耐心等待。

我的css看起来像这样：

a.nav:hover { color: yellow; }

因此，对于我的html代码，我将“nav”类添加到我的链接中，如下所示：

<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>

这有效，它将链接的颜色更改为黄色。到现在为止还挺好。但是，当我尝试将此html代码更改为php代码时，该类不存在。

我使用wp_list_pages()函数，如下所示：

<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>

然后结果是：

<ul class="nav">
<li class="page_item page-item-23"><a href="http://example.com/blog/page_id=23">HOME</a></li></ul>

所以我的问题是，如何将nav类添加到此链接？函数内是否有属性或什么？再一次，我真的很擅长这个

Answer 1

来自wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items的wordpress文档：

由pp_list_pages（）生成的列表项（li）用类page_item标记。当在显示页面时调用wp_list_pages（）时，该页面的列表项将被赋予额外的类current_page_item。

有了这个，你可以做的最简单的事情就是将你的悬停代码更改为：

li.page_item:hover { color: yellow; }

Answer 2

查看this。

引用：“将以下行添加到主题的functions.php模板文件中，它将为wp_list_pages（）生成的每个链接添加”tag“的类属性：

add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"tag\" ", $t);'));

Answer 3

我认为更改wp_list_pages函数的默认类的正确方法是：

// add to functions.php

// add classes to wp_list_pages
function wp_list_pages_filter($output) {
  $output = str_replace('page_item', 'page_item new-class', $output);
  return $output;
}
add_filter('wp_list_pages', 'wp_list_pages_filter');

在wp_list_pages中添加要链接的类

3 个答案: