WordPress小部件链接中的自定义数据属性

时间:2013-04-19 21:09:59

标签: wordpress jquery-mobile

我正在使用WordPress和jQuery Mobile构建移动网站。

我想创建一个自定义小部件区域,当用户点击按钮时出现。

我希望小部件区域中包含的链接看起来像JQM按钮。为此,我应该将属性data-role =“button”添加到小部件中的“a”元素。

有没有办法为functions.php中的这些'a'元素添加自定义属性?

默认情况下,这是窗口小部件中链接的代码:

<h3 class="widget-title">Categories</h3>
  <ul>
    <li class="cat-item cat-item-646">
      <a title="Some title" href="http://example.com/category/">Category</a>
    </li>
    ... 

我需要在'a'元素中添加一个data-role属性:

<a title="Some title" href="http://example.com/category/" data-role="button">Category</a>

我想知道WP API是否提供了一个过滤器来执行来自functions.php的过滤器,或者是否可以通过某种方式使用PHP

2 个答案:

答案 0 :(得分:1)

要过滤链接并向其添加data-role=button,请使用以下代码。

$('li.cat-item').find('a').each(function () {
 $(this).attr('data-role', 'button');
});

.cat-item是一类列表项。

答案 1 :(得分:1)

最后我找到了我的问题的答案:如何从functions.php向WP菜单项添加自定义数据属性。

可以操作WordPress菜单(而不仅仅是菜单)的标记。 WP提供了Walker类,可以在functions.php。

中进行扩展

我不在这里重现代码,但谁对WP菜单构建感兴趣,可以从这里抓取它:

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

来自WP stackexchange的其他有用的资源管理器如下:

https://wordpress.stackexchange.com/questions/14037/menu-items-description-custom-walker-for-wp-nav-menu/

https://wordpress.stackexchange.com/questions/19245/any-docs-for-wp-nav-menus-items-wrap-argument/

https://wordpress.stackexchange.com/questions/64515/fall-back-for-main-menu/