当前位置: 首页 > 编程笔记 >

WordPress动态页面菜单导航

丌官皓君
2023-03-14
本文向大家介绍WordPress动态页面菜单导航,包括了WordPress动态页面菜单导航的使用技巧和注意事项,需要的朋友参考一下

在编写了可以在Wordpress中创建给定页面的子页面列表的函数之后,我需要更强大,更自动的功能。为此,我创建了一个插件,该插件将创建一个包含动态创建的页面菜单的小部件。

该小部件可以确定当前正在显示的页面,并将爬到页面树上,直到找到根页面为止。在攀爬页面树的同时,插件将保留当前所选页面的路径,并且在打印出该树时,路径将被打开。它最适合具有坚实层次结构页面的站点,而不是简单的博客站点。

在效率方面,我已经使用最多嵌套25个级别的页面进行了测试,页面负载只有很小的减少。但是,对于一般的小型Wordpress网站而言,此插件是完美的,因为页面仅嵌套了几层。

<?php
/**
 * Plugin Name: Page Menu Navigation
 * Plugin URI: http://www.hashbangcode.com/
 * Description: Adds an intelligent page navigation menu that is dependent on page hierarchy.
 * Version: 1.0
 * Author: Philip Norton
 * Author URI: http://www.hashbangcode.com/
 */
 
/**
 * Print out hirachical page structure.
 *
 * @global object $post The current post.
 */
function printPages()
{
    global $post;
 
    if ($post->post_type == 'page') {
        if ($post->post_parent > 0) {
            $root  = findPathInformation($post);
            $pages = traversePageTree($root['root'], $root['activepath'], $root['depth']);
        } else {
            $root = $post;
            $pages = traversePageTree($root, array($root->ID), 1);
        }
        echo printPageTree($pages);
    }
}
 
/**
 * From a single page find out how deep it is
 *
 * @param object $page The current page.
 *
 * @return array An array of information about the page and the path.
 */
function findPathInformation($page)
{
    // 上那棵树,看看那是什么。
    $reverse_tree = climbPageTree($page);
    // 整理树以获取当前的活动路径。
    $activePath = flattenTree($reverse_tree);
 
    // 确保当前页面在活动路径中。
    $activePath[] = $page->ID;
 
    $root = $reverse_tree[0];
 
    // 设置为2,就好像我们在此代码中一样,位于根目录下。
    $depth = 2;
 
    // Recursivley遍历页面并找到根页面和深度。
    while (is_array($root->post_parent)) {
       ++$depth;
       $root = $root->post_parent[0];
    }
 
    return array('root' => $root, 'depth' => $depth, 'activepath' => $activePath);
}
 
/**
 * Flatten the tree into a single array.
 *
 * @param array $tree A multi dimensional array of pages.
 *
 * @return array A single dimensional array of pages.
 */
function flattenTree($tree)
{
    $flat = array();
 
    while (is_array($tree[0]->post_parent)) {
       $flat[] = $tree[0]->ID;
       $tree = $tree[0]->post_parent;
    }
 
    $flat[] = $tree[0]->ID;
 
    return $flat;
}
 
/**
 * Find out if the current page is in the active path.
 *
 * @param integer $id The ID of the current page.
 * @param array $activePath An array of ID's of the pages in the current path.
 *
 * @return boolean True if the page is in current path, otherwise false.
 */
function inActivePath($id, $activePath)
{
    if (in_array($id, $activePath)) {
        return true;
    } else {
        return false;
    }
}
 
/**
 * Starting with the current page go up level after level until the root page
 * reached. This function will run one SQL query for every level.
 *
 * @global wpdb $wpdb The current Wordpress database connection object.
 *
 * @param object $page The current page.
 *
 * @return <type>
 */
function climbPageTree($page)
{
    global $wpdb;
    $parent = $wpdb->get_results("SELECT ID, post_title, post_parent FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'page' AND ID = " . $page->post_parent . " ORDER BY menu_order, post_title", OBJECT);
 
    if (count($parent) > 0) {
        foreach ($parent as $item => $par) {
            if ($par->post_parent != 0) {
                $parent_parent = climbPageTree($par);
                if ($parent_parent !== false) {
                    $parent[$item]->post_parent = $parent_parent;
                }
            } else {
                // 到达树的顶部
                return $parent;
            }
        }
    }
 
    return $parent;
}
 
/**
 * Traverse the page structure and create a tree of the pages.
 *
 * @global wpdb $wpdb The current Wordpress database connection object.
 *
 * @param object $page The page to start the tree traversal from, usually root.
 * @param array $activePath An array of page ID's in the active path.
 * @param integer $maxdepth The maximum depth to follow the traversal
 * @param integer $depth The current depth of the traversal.
 *
 * @return array A tree of pages.
 */
function traversePageTree($page, $activePath = array(), $maxdepth = 10, $depth = 0)
{
    if ($depth >= $maxdepth) {
        // 我们已经达到最大深度,停止遍历。
        return array();
    }
 
    // 获取Wordpress db对象。
    global $wpdb;
 
    $children = $wpdb->get_results("SELECT ID, post_title, post_parent FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'page' AND post_parent = " . $page->ID . " ORDER BY menu_order, post_title", OBJECT);
    if (count($children) > 0) {
        foreach ($children as $item => $child) {
            if (inActivePath($child->ID, $activePath)) {
                // 当前页面处于活动路径中,找到子代。
                $children[$item]->children = traversePageTree($child, $activePath, $maxdepth, $depth + 1);
            }
        }
    }
 
    return $children;
}
 
/**
 * Print out the page tree as created by the traversePageTree() function.
 *
 * @see traversePageTree()
 *
 * @param array $pages A tree of pages.
 */
function printPageTree($pages)
{
    $class = '';
    $output = '';
    $output .= "\n<ul>\n";
    foreach ($pages as $page) {
        if (is_page($page->ID) === true) {
            $class = '';
        }
        $output .=  "<li" . $class . "><a href=\"" . get_page_link($page->ID) . "\" title=\"" . $page->post_title . "\">" . $page->post_title . "</a>";
        $class = '';
        if (isset($page->children) && count($page->children) > 0) {
            $output .= printPageTree($page->children);
        }
        $output .=  "</li>\n";
    }
    $output .=  "</ul>\n";
    return $output;
}
 
/**
 * Widget function
 *
 * @param array $args
 */
function pageMenuNavigationWidget($args)
{
    extract($args);
 
    echo '<div id="subNav">';
    echo printPages();
    echo '</div>';
}
 
register_sidebar_widget(__('Page Menu Navigation'), 'pageMenuNavigationWidget');
$wp_registered_widgets[sanitize_title('Page Menu Navigation')]['description'] = 'Creates a navigation menu.';

如果您喜欢这个插件并且觉得它有用,请告诉我,我将其添加到Wordpress插件中心。我确定可以对插件进行一些改进,如果您认为有任何改进,请留下评论并告诉我。

更新01/11/2010

我还用过Walker_Page类生成了动态菜单。使用Walker_Page方法的好处是,它可以用于覆盖WordPress随附的默认页面小部件。

 类似资料:
  • 你好,我想在这个代码的帮助 函数register_my_custom_menu_page(){add_menu_page('custom menu title','custom menu','my-menu-slug2','manage_options','custompage','my_custom_menu_page',plugins_url('myplugin/images/icon.png

  • 我需要你的帮助我的html中有导航菜单我想在我将html传输到Wordpress时准确地获取它们,但是当我将html传输到Wordpress时,它看起来不一样。Wordpress无法阅读我的导航栏菜单CSS,为什么?你能帮助我吗?请看我想说的图片。 以下是我的导航菜单html代码和css:

  • 我用html、css和JavaScript创建了一个响应式导航栏。当页面宽度小于768px时,将显示条形图标,单击该图标时,将显示导航菜单。问题是当导航菜单出现时,页面仍在后台滚动。导航菜单下的滚动应该停止。 null null

  • 我正试图通过icomoon字体,通过菜单栏在wordpress的文本链接左侧添加图标。我正在使用从icomoon下载的css。我已经在WP的管理区域的菜单选项区域中添加了该类。图标(字体)确实显示在'li'元素上,但我希望它们被添加到'a'元素中。仅供参考,添加字体的类使用:before选择器。以下是css的摘录:

  • 如何在默认情况下设置无背景色的导航栏并在滚动时获得背景色? 当向下滚动带有类的div时,应该会获得新的bg颜色。 对于顶部的固定位置,我使用来自Bootstrap3的。 我几乎尝试了我遇到的每一个教程,但我没有成功。 我甚至尝试从WordPress词缀插件,但没有运气。 这是我的密码

  • 我的Wordpress菜单栏不工作。我正在创建一个新菜单,但当我在菜单中添加一些页面或类别时,它不会得到重新排序。请帮我整理一下,我正在使用woo commerce,它为我提供了内置菜单,但没有得到重新排序。