l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 管理区域添加跳转菜单

如何在 WordPress 管理区域添加跳转菜单

Bug编译狮

Bug编译狮

要在 WordPress 管理区域添加跳转菜单，你可以通过自定义菜单（Custom Menu）来实现。以下是详细的步骤和代码示例。

步骤 1: 登录 WordPress 管理后台

首先，你需要登录到你的 WordPress 管理后台。通常，这个地址是 http://yourdomain.com/wp-admin/，其中 yourdomain.com 是你的网站域名。

步骤 2: 进入菜单管理器

在管理后台的左侧导航栏，找到并点击“外观”选项卡，然后选择“菜单”。

步骤 3: 创建新菜单或编辑现有菜单

在菜单页面，你可以创建一个新的菜单或者编辑现有的菜单。点击“创建新菜单”按钮开始新的菜单创建过程，或者选择一个已有的菜单并进行修改。

步骤 4: 添加链接

在菜单创建过程中，你会被引导到链接设置部分。在这个部分，你可以添加外部链接、内部链接或者自定义链接。例如，如果你想添加一个指向其他网页的链接，可以输入网址，比如：

https://www.example.com

步骤 5: 定义菜单项

在链接后，你可以为每个链接定义名称、描述等信息。这些信息会在用户访问时显示出来。

示例代码

以下是一个简单的代码片段，展示了如何在 WordPress 中添加一个外部链接的菜单项：

// 在 functions.php 文件中添加以下代码：
function add_custom_menu_item() {
    // 获取当前主题的根目录路径
    $root_dir = dirname( __FILE__ );

    // 假设我们有一个外部链接，其URL是 "https://example.com"
    $external_url = 'https://example.com';

    // 使用 wp_nav_menu 函数添加菜单项
    wp_nav_menu(
        array(
            'theme_location' => 'primary', // 替换为你的主菜单位置
            'items_wrap'     => '<ul id="%1$s" class="menu">%3$s</ul>',
            'menu_class'     => 'menu-item',
            'container'      => 'div',
            'echo'           => false,
            'link_before'    => '<span class="screen-reader-text">',
            'link_after'     => '</span>',
            'depth'          => 0,
            'walker'         => '',
            'fallback_cb'    => 'wp_page_menu',
            'before_title'   => '<li class="menu-item-title"><a href="%s" title="%s" %1$s>%2$s</a></li>',
            'after_title'    => '%3$s',
            'items_wrap'     => '<li class="menu-item-container"><a href="%1$s" title="%2$s" %3$s><span class="screen-reader-text">%4$s</span>%5$s</a></li>',
            'item_classes'   => 'menu-item menu-item-type-post_type menu-item-object-page menu-item-'
        )
    );
}
add_action('init', 'add_custom_menu_item');

效果说明

当您上传此代码并在 WordPress 管理后台执行更新后，您应该能够看到一个新的菜单项出现在您的 WordPress 主菜单上，指向指定的外部 URL。这将帮助用户轻松地从 WordPress 主页导航到其他网站。

请注意，以上代码仅为示例，实际应用中可能需要根据您的具体需求进行调整，包括更改链接地址、标题样式等。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中，创建和管理跳转菜单是一项重要的工作，可以帮助用户快速访问网站的不同部分。以下是如何在WordPress管理区域添加跳转菜单的步骤：

步骤 1: 创建新菜单

首先，在WordPress管理界面中点击左侧菜单栏中的“编辑菜单”或“新建菜单”，然后选择一个适合您的主题的颜色方案。

示例代码：

<h2>新建菜单</h2>
<form method="post" action="">
    <label for="menu_title">菜单名称:</label><br/>
    <input type="text" id="menu_title" name="menu_title"><br/>
    <label for="parent_id">父级菜单:</label><br/>
    <select id="parent_id" name="parent_id">
        <option value="">请选择父级菜单</option>
        <?php foreach($parent_menu as $id => $name) { ?>
            <option value="<?php echo esc_attr($id); ?>"><?php echo esc_html($name); ?></option>
        <?php } ?>
    </select><br/>
    <button type="submit">提交</button>
</form>

步骤 2: 编辑现有菜单

如果您已经有了现有的菜单，请按照以下步骤操作：

示例代码：

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><br/>
<?php endwhile; endif; ?>

步骤 3: 添加链接到跳转菜单

您可以使用<a>标签来为每个页面或内容创建链接，使其自动出现在跳转菜单中。

示例代码：

<a href="<?php the_permalink(); ?>" class="link-to-post"><?php the_title(); ?></a>

步骤 4: 定义跳转菜单位置

默认情况下，跳转菜单位于顶部（即网页最上方）。 若要调整其位置，可以在edit.php文件中修改相应的类名。

示例代码：

<?php
add_action('wp_head', 'my_custom_css');
function my_custom_css() {
    ?>
    <style type="text/css">
        #header a, .nav-menu li a:hover {
            color: #0077ff;
        }
    </style>
    <?php
}
?>

步骤 5: 验证并保存设置

最后一步是在WordPress管理区域中验证和保存您的设置。

示例代码：

<div id="respond"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#respond').load("http://localhost/path/to/your/page.php");
    });
</script>

以上就是如何在WordPress管理区域添加跳转菜单的完整教程。希望这对你有所帮助！如果你有任何疑问或者需要进一步的帮助，请随时提问。

,

最新更新