Question

我在html5的菜单href中使用data-trending =“abc”。但现在，我正在移动wordpress中的网站，并希望在wp中制作菜单，但效果风格相同。以下是链接参考网站： - http://www.theladbible.com/。我想在wp中找到精确的菜单。我的问题是我不知道如何动态地将数据趋势与wp菜单合并：

这是我的代码：

<section class="primary-nav">
    <ul>
    <li><a data-trending="trending-funny" href="<?php bloginfo('url'); ?>/category/funny">Funny</a></li>
    <li><a data-trending="trending-entertainment" href="<?php bloginfo('url');?>/category/entertainment">Entertainment</a></li>
    <li><a data-trending="trending-news" href="<?php bloginfo('url'); ?>/category/news">News</a></li>
    <li><a data-trending="trending-tech" href="<?php bloginfo('url'); ?>/category/technology">Technology</a></li>
    <li><a data-trending="trending-videos" href="<?php bloginfo('url'); ?>/category/videos">Videos</a></li>
    <li><a data-trending="trending-pictures" href="<?php bloginfo('url'); ?>/category/pictures">Pictures</a></li>
        <li><a data-trending="trending-summer" href="<?php bloginfo('url'); ?>/category/summer">TheSUMMERbible</a>
            <span style="margin-left: 0.2em; padding-left: 0.2em; border-left: 1px solid #eee;margin-top: 0;">
                <img src="http://www1.theladbible.com/images/content/55b680a5d9a22.png" style="max-height: 1em; vertical-align: top;">
            </span>
        </li>
    <li><a data-trending="trending-more" href="<?php bloginfo('url'); ?>/category/more">More</a></li>

    <li><a href="http://www.theoddsbible.com/?utm_source=theladbible.com&amp;utm_medium=channel&amp;utm_campaign=TheLadBible" target="_blank">TheOddsBible</a></li>

    <li><a href="<?php bloginfo('url'); ?>/submit-your-content/">Submit Your Content</a></li>
    </ul>
    </section>

    <section class="trending-nav">

    <div class="trending-content trending-funny">
    <section class="trending">content</section>
<div>
<script>
$('a[data-trending]', sixty520.nav).hover(function (e) {
      var el = $(e.target);
      var trendingList = el.data('trending');
      $('.trending-content', sixty520.nav).hide();
      $('.' + trendingList).show();
    });

  }
</script>

现在我想在wp菜单中转换这个菜单我知道如何在wp中创建菜单但是dnt知道如何将数据趋势与wp菜单合并。

请告诉我任何解决方案。

Answer 1

您可以转到wp-admin中的菜单页面，点击屏幕选项并查看＆＃34; CSS样式＆＃34;框（如果尚未激活）和＆＃34;链接关系（XFN）＆＃34;。完成此操作后，您可以为菜单的<a>元素添加特定的类名，并为<script> $('li.trending a', sixty520.nav).hover(function (e) { var el = $(e.target); var trendingList = el.attr('rel'); $('.trending-content', sixty520.nav).hide(); $('.' + trendingList).show(); }); } </script>元素添加rel属性，您可以在其中编辑每个元素的属性。

如果您更改下面的jQuery代码，它应该可以正常工作。

.trending

因此，您必须将<li>课程提供给WP＆＃34; CSS样式＆＃34;中的Activity个元素。字段并输入所需的值（例如，趋势 - 有趣，趋势 - 娱乐）到＆＃34;链接关系（XFN）＆＃34;字段。

如何动态生成数据趋势属性

1 个答案: