l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中添加“跳转到食谱”按钮（两种简单方法）

如何在 WordPress 中添加“跳转到食谱”按钮（两种简单方法）

Bug编译狮

Bug编译狮

要在 WordPress 中为文章添加“跳转到食谱”按钮，你可以选择两种不同的方法：通过使用自定义 HTML 和 JavaScript 或者利用内置的 WordPress 功能来实现。下面我将分别介绍这两种方法，并提供一个简单的示例代码。

方法一：使用自定义 HTML 和 JavaScript

  1. 编辑页面模板：

    • 打开你的 WordPress 网站并找到你想要添加“跳转到食谱”按钮的文章。
    • 选中该文章后，点击 “编辑” 按钮。

  2. 插入自定义 HTML 和 JavaScript：

    • 在编辑器底部，找到 “附加脚本和样式” 部分，然后点击右上角的 “添加新行” 按钮。

    • 插入以下HTML代码：

      <a href="https://example.com/recipe" class="jump-to-recipe">跳转到食谱</a>

      这个链接将会指向你指定的食谱页面。

  3. 编写JavaScript代码：

    • 同样，在 “附加脚本和样式” 部分，点击右上角的 “添加新行” 按钮。

    • 输入以下JavaScript代码以实现点击时跳转功能：

      document.querySelector('.jump-to-recipe').addEventListener('click', function() {
 window.location.href = this.getAttribute('href');
});

  4. 保存更改：

    • 完成以上步骤后，保存您的更改。

示例效果

当你点击文章中的“跳转到食谱”按钮时，它会自动跳转到你设置的食谱页面。

方法二：利用内置的 WordPress 功能

虽然这种方法不如前一种灵活，但它可以帮助你在没有太多代码知识的情况下快速完成目标。

  1. 添加自定义菜单项：

    • 登录 WordPress 控制面板，导航到 “外观 > 主题”。
    • 点击 “侧边栏” 选项卡，然后选择你希望放置“跳转到食谱”按钮的位置（例如左侧或右侧）。

  2. 创建新的菜单项：

    • 在左侧菜单中，点击 “新建菜单” 并命名为 “食谱”。

  3. 添加链接：

    • 在 “食谱” 菜单中，点击 “添加链接” 来创建一个新的链接。
    • 在 “网址” 字段中输入 “https://example.com/recipe“，并在 “标题” 字段中输入 “跳转到食谱”。

  4. 保存更改：

    • 完成上述步骤后，保存你的更改。

示例效果

当用户点击“食谱”菜单下的“跳转到食谱”链接时，他们会被自动导向到你指定的食谱页面。

通过这两种方法，你可以在 WordPress 文章中轻松地添加“跳转到食谱”按钮，无论是通过定制 HTML 和 JavaScript 还是利用内置的 WordPress 功能。选择哪种方法取决于你的技术熟练程度和个人偏好。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中添加一个”跳转到食谱”按钮的方法有很多，下面我将介绍两种简单的方法：

方法一：使用自定义菜单

  1. 首先，在WordPress后台选择”编辑主题” > “功能” > “自定义菜单”。
  2. 在新创建的自定义菜单下，你可以为不同的页面或分类添加链接。例如，如果你希望用户点击某个标签（如”食谱”），就可以在自定义菜单中设置链接指向该标签对应的食谱页面。

示例代码：

<a href="<?php echo get_permalink( $post->ID ); ?>" target="_blank">
    <img src="https://example.com/images/recipe.png" alt="Recipe Image">
</a>

在这个例子中，get_permalink()函数用于获取当前文章的URL，然后通过target="_blank"属性打开一个新的浏览器窗口。

方法二：使用WordPress插件

  1. 安装并激活WordPress插件，如WP Recipe Linker。
  2. 启动插件后，会显示一个新界面，允许你设置链接的目标、标题和描述等信息。
  3. 保存配置后，你可以在网站上看到新的”跳转到食谱”按钮了。

示例代码：

<?php
// 创建一个包含食谱链接的新页面
function wp_recipe_linker_new_page() {
    global $wp_query;

    // 获取当前页面的所有食谱链接
    $recipes = array();
    foreach ($wp_query->posts as $post) {
        if (in_array($post->ID, $recipes)) continue;
        $recipes[] = $post->ID;
    }

    // 创建新页面
    $new_page_id = wp_insert_post(array(
        'post_title' => 'Recipes',
        'post_content' => '',
        'post_status' => 'publish',
        'post_type' => 'page',
        'post_parent' => null,
        'menu_order' => -100,
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $recipes,
            ),
        ),
    ));

    // 设置页面链接
    add_page_to_self_link($new_page_id);

    // 添加到菜单
    register_nav_menu('recipes', __('Recipes'));

    return $new_page_id;
}
add_action('init', 'wp_recipe_linker_new_page');
?>

这个插件可以帮助你在WordPress首页上自动展示所有的食谱链接，非常方便。

以上就是两种添加”跳转到食谱”按钮的方法，你可以根据自己的需求选择合适的方式。

最新更新