使用 REST API 显示动态菜单

在上一篇文章中介绍了如何使用 WordPress REST API 创建动态内容的小工具（Widget），可以看到 WordPress 的 REST API 还是非常强大和好用的。另外，这套系统也为创建延时内容提供了帮助，本篇文章介绍另一个应用方式，就是显示动态菜单。

首先到后台管理工具中创建一个主菜单项，CSS 类填入 “rest_api_menu”。如果看不到 CSS 类这一项，到界面顶部点击 “显示选项”，然后把 CSS类勾选上，再到菜单配置界面就能看到了。

然后按照上篇文章中的方法把REST API客户端JavaScript代码激活（backbone.js）。

最后在自己的 JavaScript 代码文件中放入显示代码，本例是把最新的 5篇文章作为子菜单项显示到上面创建的主菜单中。当然可以在 fetch posts collection 时给出过滤条件以提取所需要的内容。

(function( $ ) {
	$(document).ready(function () {
		var postsCollection = new wp.api.collections.Posts();
		postsCollection.fetch( { data:{ per_page: 5 } } ).then(function(result){
		//在主菜单项下添加子菜单列表标签
		$('.rest_api_menu').addClass('menu-item-has-children').append('<ul class="sub-menu"></ul>');
		//添加子菜单项
		for (var i = 0; i < result.length; i++) {
			if (result[i]) {
				$('.rest_api_menu > ul').append('<li><a href="' + result[i].link + '">' + result[i].title.rendered + '</a></li>');
			}
		}
		});
	});
})( jQuery );

使用 MVC 模式的代码请参考这篇文章的内容。