在 wordpress 导航栏设置方面需要帮助
need help in wordpress navbar setup
我整天都在搜索一种创建动态 wordpress 嵌套导航栏的简单方法。
现在我正在寻找一个函数，如果要将所有页面列表作为嵌套对象
我正在使用 get_pages()，它给我平面数组 parent_page_id
[
{
"ID": 2,
"post_author": "1",
"post_date": "2021-10-10 05:21:26",
"post_date_gmt": "2021-10-10 05:21:26",
"post_content": "<!-- wp:paragraph -->\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>...or something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>As a new WordPress user, you should go to <a href=\"http://localhost:8000/wp-admin/\">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>\n<!-- /wp:paragraph -->",
"post_title": "Sample Page",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "sample-page",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:00",
"post_modified_gmt": "2021-10-10 19:14:00",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=2",
"menu_order": 2,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 28,
"post_author": "1",
"post_date": "2021-10-10 19:11:08",
"post_date_gmt": "2021-10-10 19:11:08",
"post_content": "<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:query {\"queryId\":21,\"query\":{\"perPage\":\"100\",\"pages\":0,\"offset\":0,\"postType\":\"post\",\"categoryIds\":[4,3,1],\"tagIds\":[],\"order\":\"desc\",\"orderBy\":\"date\",\"search\":\"\",\"exclude\":[],\"sticky\":\"exclude\",\"inherit\":false},\"displayLayout\":{\"type\":\"flex\",\"columns\":4}} -->\n<div class=\"wp-block-query\"><!-- wp:post-template -->\n<!-- wp:post-featured-image /-->\n\n<!-- wp:post-title {\"isLink\":true,\"textColor\":\"vivid-cyan-blue\",\"fontSize\":\"medium\"} /-->\n\n<!-- wp:post-date {\"fontSize\":\"small\"} /-->\n<!-- /wp:post-template --></div>\n<!-- /wp:query --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
"post_title": "Products",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "products",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 22:01:39",
"post_modified_gmt": "2021-10-11 22:01:39",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=28",
"menu_order": 1,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 156,
"post_author": "1",
"post_date": "2021-10-11 23:25:00",
"post_date_gmt": "2021-10-11 23:25:00",
"post_content": "",
"post_title": "dresses",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "dresses",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 23:25:00",
"post_modified_gmt": "2021-10-11 23:25:00",
"post_content_filtered": "",
"post_parent": 28,
"guid": "http://localhost:8000/?page_id=156",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 158,
"post_author": "1",
"post_date": "2021-10-11 23:45:04",
"post_date_gmt": "2021-10-11 23:45:04",
"post_content": "",
"post_title": "2 level child",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "2-level-child",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-12 00:03:19",
"post_modified_gmt": "2021-10-12 00:03:19",
"post_content_filtered": "",
"post_parent": 156,
"guid": "http://localhost:8000/?page_id=158",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 5,
"post_author": "1",
"post_date": "2021-10-10 06:48:19",
"post_date_gmt": "2021-10-10 06:48:19",
"post_content": "[contact-form-7 id=\"16\" title=\"Contact Us\"]",
"post_title": "Contact Us",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "contact-us",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:09",
"post_modified_gmt": "2021-10-10 19:14:09",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=5",
"menu_order": 3,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
]
现在我想要的是一个嵌套对象，这样我就可以使用递归函数来迭代并生成完全自定义的导航栏
有没有办法实现这样的嵌套对象？对于经验丰富的 wp 开发人员来说，这是一个简单的问题我是新手，所以我对可用功能了解不多，尽管我已经研究过 quit well
您可以使用内置界面和功能
使用菜单时...首先注册一个 location/several 位置
/*** REGISTER MENU ***/
register_nav_menus(array(
'topmenu' => __( 'Top Menu', THEME_NAME ),
'topmenumobile' => __( 'Top Mobile Menu', THEME_NAME ),
'footermenu' => __( 'Footer Menu', THEME_NAME ),
'footermenumob' => __( 'Footer Mobile Menu', THEME_NAME ),
));
然后在后台建立你的菜单：
现在您可以使用 wp_nav_menu
将其输出到前端
例如：
<?php
wp_nav_menu( array(
'theme_location' => (wp_is_mobile() ? 'topmenumobile' : 'topmenu'),
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'topmenu',
'menu_class' => 'nav navbar-nav',
) );
?>
在生成的 HTML 上，您可以应用 CSS 和 JS，如果您使用 bootstrap（例如），甚至可以使用 walker 库。
希望这对您有所帮助，我不确定我是否完全理解您的需求，所以我在这里进行编辑和补充信息。
我整天都在搜索一种创建动态 wordpress 嵌套导航栏的简单方法。
现在我正在寻找一个函数，如果要将所有页面列表作为嵌套对象
我正在使用 get_pages()，它给我平面数组 parent_page_id
[
{
"ID": 2,
"post_author": "1",
"post_date": "2021-10-10 05:21:26",
"post_date_gmt": "2021-10-10 05:21:26",
"post_content": "<!-- wp:paragraph -->\n<p>This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>...or something like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p>As a new WordPress user, you should go to <a href=\"http://localhost:8000/wp-admin/\">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>\n<!-- /wp:paragraph -->",
"post_title": "Sample Page",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "sample-page",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:00",
"post_modified_gmt": "2021-10-10 19:14:00",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=2",
"menu_order": 2,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 28,
"post_author": "1",
"post_date": "2021-10-10 19:11:08",
"post_date_gmt": "2021-10-10 19:11:08",
"post_content": "<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:query {\"queryId\":21,\"query\":{\"perPage\":\"100\",\"pages\":0,\"offset\":0,\"postType\":\"post\",\"categoryIds\":[4,3,1],\"tagIds\":[],\"order\":\"desc\",\"orderBy\":\"date\",\"search\":\"\",\"exclude\":[],\"sticky\":\"exclude\",\"inherit\":false},\"displayLayout\":{\"type\":\"flex\",\"columns\":4}} -->\n<div class=\"wp-block-query\"><!-- wp:post-template -->\n<!-- wp:post-featured-image /-->\n\n<!-- wp:post-title {\"isLink\":true,\"textColor\":\"vivid-cyan-blue\",\"fontSize\":\"medium\"} /-->\n\n<!-- wp:post-date {\"fontSize\":\"small\"} /-->\n<!-- /wp:post-template --></div>\n<!-- /wp:query --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
"post_title": "Products",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "products",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 22:01:39",
"post_modified_gmt": "2021-10-11 22:01:39",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=28",
"menu_order": 1,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 156,
"post_author": "1",
"post_date": "2021-10-11 23:25:00",
"post_date_gmt": "2021-10-11 23:25:00",
"post_content": "",
"post_title": "dresses",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "dresses",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-11 23:25:00",
"post_modified_gmt": "2021-10-11 23:25:00",
"post_content_filtered": "",
"post_parent": 28,
"guid": "http://localhost:8000/?page_id=156",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 158,
"post_author": "1",
"post_date": "2021-10-11 23:45:04",
"post_date_gmt": "2021-10-11 23:45:04",
"post_content": "",
"post_title": "2 level child",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "2-level-child",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-12 00:03:19",
"post_modified_gmt": "2021-10-12 00:03:19",
"post_content_filtered": "",
"post_parent": 156,
"guid": "http://localhost:8000/?page_id=158",
"menu_order": 0,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
},
{
"ID": 5,
"post_author": "1",
"post_date": "2021-10-10 06:48:19",
"post_date_gmt": "2021-10-10 06:48:19",
"post_content": "[contact-form-7 id=\"16\" title=\"Contact Us\"]",
"post_title": "Contact Us",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "contact-us",
"to_ping": "",
"pinged": "",
"post_modified": "2021-10-10 19:14:09",
"post_modified_gmt": "2021-10-10 19:14:09",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost:8000/?page_id=5",
"menu_order": 3,
"post_type": "page",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw"
}
]
现在我想要的是一个嵌套对象，这样我就可以使用递归函数来迭代并生成完全自定义的导航栏 有没有办法实现这样的嵌套对象？对于经验丰富的 wp 开发人员来说，这是一个简单的问题我是新手，所以我对可用功能了解不多，尽管我已经研究过 quit well
您可以使用内置界面和功能
使用菜单时...首先注册一个 location/several 位置
/*** REGISTER MENU ***/
register_nav_menus(array(
'topmenu' => __( 'Top Menu', THEME_NAME ),
'topmenumobile' => __( 'Top Mobile Menu', THEME_NAME ),
'footermenu' => __( 'Footer Menu', THEME_NAME ),
'footermenumob' => __( 'Footer Mobile Menu', THEME_NAME ),
));
然后在后台建立你的菜单：
现在您可以使用 wp_nav_menu
将其输出到前端
例如：
<?php
wp_nav_menu( array(
'theme_location' => (wp_is_mobile() ? 'topmenumobile' : 'topmenu'),
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'topmenu',
'menu_class' => 'nav navbar-nav',
) );
?>
在生成的 HTML 上，您可以应用 CSS 和 JS，如果您使用 bootstrap（例如），甚至可以使用 walker 库。
希望这对您有所帮助，我不确定我是否完全理解您的需求，所以我在这里进行编辑和补充信息。