wordpress下拉菜单_下拉导航：如何在WordPress上维护选定的选项-优快云博客

wordpress下拉菜单

在上一教程中，我们学习了如何使用select元素进行导航并在页面加载时保持选择的选项。为了演示它，我们使用了一个带有一些静态页面的示例项目。

今天，我们将更进一步，讨论将此功能集成到WordPress网站中所需的操作。

注意：本教程假定您熟悉WordPress以及构建子主题的过程。

1.创建一个儿童主题

其初始文件结构如下所示：

让我们仔细看一下子主题的内容。

样式表

子主题的样式表（“ style.css”）以以下文件头开头（您可以根据需要对其进行充实，但是出于我们的目的，这是很好的选择）：

/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: George Martsoukos
Author URI: https://georgemartsoukos.com
Template: twentyfifteen
Version: 1.0.0
*/

在此文件中，我们将样式定位到将在接下来的部分中添加的select元素。

现在，让我们添加这些样式，其中大多数来自上一教程：

.page-top-header {
  border-left: none;
  margin-bottom: 50px;
}

.myselect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 400px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #cbd1d8;
  font-size: 2rem;
  line-height: 1.5;
  background: #fff url(assets/img/down.svg) no-repeat center right 12px / 18px 18px;
  transition: all 0.2s ease-in-out;
}

/*IE*/
.myselect::-ms-expand {
  display: none;
}

.myselect:focus {
  outline: 0;
  border-color: #7bbaff;
  box-shadow: 0 0 0 3px rgba(0, 121, 250, 0.3);
}

排队文件

在“ functions.php”文件中，我们加入了父主题主题表和子主题表。除了这些，我们还加入一个JavaScript文件，该文件将保存我们的JavaScipt代码。

这是必需PHP代码：

<?php
function my_theme_enqueue_scripts() {
  $parent_style = 'twentyfifteen-style';  

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
  );
  
  wp_enqueue_script( 'main-js', get_stylesheet_directory_uri() . '/assets/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

屏幕截图

“ screenshot.png”是主题设计的1200x900px缩略图。

资产

“ assets”文件夹包含我们站点所需的图像和JavaScript文件。在较大的项目中，它可能还包含其他文件夹，例如“ scss”文件夹。

JavaScript

在“ assets”文件夹中，有一个“ main.js”文件，其中包含每次选择一个选项时应运行的代码。

这是必需的代码：

const select = document.querySelector(".myselect");
const options = document.querySelectorAll(".myselect option");

if (select) {
  // 1st method
  select.addEventListener("change", function() {
    const url = this.options[this.selectedIndex].dataset.url;
    if (url) {
      location.href = url;
    }
  });

  for (const option of options) {
    const url = option.dataset.url;
    if (url === location.href) {
      option.setAttribute("selected", "");
      break;
    }
  }

  // 2nd method
  /*select.addEventListener("change", function() {
    const url = this.options[this.selectedIndex].dataset.url;
    if (url) {
      localStorage.setItem("url", url);
      location.href = url;
    }
  });

  if (localStorage.getItem("url")) {
    for (const option of options) {
      const url = option.dataset.url;
      if (url === localStorage.getItem("url")) {
        option.setAttribute("selected", "");
        break;
      }
    }
  }*/
}

2.激活儿童主题

既然我们熟悉了子主题的内容，就可以激活它了。

3.创建一些帖子和类别

下一步，我们将创建四个不同的帖子类别：

设置好类别后，我们将添加一堆帖子并将它们随机分配给上述类别，如下所示：

现在，我们已经添加了内容，让我们看一看类别（归档）页面的外观。

4.自定义类别页面

在每个类别页面中，我们要添加一个select元素，该元素将保存所有帖子类别。每次选择一个选项时，都应加载相关类别，并且应将目标选项标记为已选中。另外，应该显示一个额外的“ All选项，它将加载所有帖子（默认情况下，主页显示所有帖子）。

考虑到这一点，我们首先循环浏览所有帖子类别，并将它们作为选项添加到select元素中。

负责该行为的代码如下：

<?php 
  // get all post categories 
  $cats = get_categories();
  if ( !empty( $cats ) ) {
    echo '<div class="page-header page-top-header">';
    echo '<select class="myselect">';
    echo '<option data-url="' . get_home_url() .  '">All</option>';
    foreach ( $cats as $cat ) {
      $cat_id = $cat->term_id;
      $cat_name = $cat->name;
      $cat_link = get_category_link( $cat_id );
      echo '<option data-url="' . $cat_link . '">' . $cat_name . '</option>';
    }
    echo '</select>';
    echo '</div>';
  }
?>

我们将此代码放在一个名为“ content-post-categories.php”的文件中。该文件存储在名为“ template-parts”的目录中。

我们要在“ index.php”和“ archive.php”父文件中导入目标文件。也就是说，我们将不得不覆盖这些文件并添加我们的自定义代码。

为此，我们首先将这些文件复制并粘贴到我们的子主题中。我们主题的新结构如下：

接下来，在“ index.php”文件中，添加以下代码：

然后在“ archive.php”文件中：

此时，让我们再次导航到类别页面。

足够令人高兴的是， select工作正常。大家好！