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
工作正常。 大家好!
结论
在本教程中,我们创建了一个WordPress子主题,并介绍了在页面加载时维护所选选项的过程。 希望您发现我们在这里讨论的所有内容都有用,并且可以将它们应用到即将进行的项目中。
最后但并非最不重要的一点是,我们子主题的所有文件都可以作为Github存储库使用 。
wordpress下拉菜单