个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正尝试在 my site 上为我的 WordPress 主题构建一个响应式标题.根据屏幕分辨率，我想从典型的 WordPress 无序列表菜单(大屏幕)转到自定义选择下拉菜单(手机屏幕)。我想在不依赖任何其他 JS 的情况下执行此操作，因此请不要使用 JavaScript 或 jQuery 解决方案。
在研究如何做到这一点时，我发现了一些有用的资源，例如 this question来自 WordPress 堆栈交换站点。这个答案的问题是你会注意到它不包括实际的 <select>在 <option> 周围标记标签，因此网站上没有任何内容，但如果您查看源代码，您会看到这些选项是在 <ul> 中生成的标签。我通读了 this one也是，但它依赖于 jQuery，这不是我想要的。
我制作了一个名为“select-menu-nav”的第二个菜单，我计划根据屏幕宽度简单地切换此菜单的 CSS 显示属性和带有媒体查询的“主菜单”。
这是相关代码-
HTML:
<header>
<div id="logo-area">
<img id="logo" src="<?php bloginfo('template_directory'); ?>/assets/imgs/db-logo.png" alt="Digital Brent Logo">
<h2 id="site-title">Digital<br/>Brent.com</h2>
</div>
<div id="nav-area">
<?php
$walker = new alpha_nav_walker;
wp_nav_menu( array( 'theme_location' => 'main-nav', 'walker' => $walker) );
wp_nav_menu( array( 'theme_location' => 'select-main-nav', 'walker' => new alpha_dropdown_nav) );
?>
</div>
<div id="news-area">
</div>
<div id="search-area">
<?php get_search_form(); ?>
</div>
</header>
CSS:
@media(max-width: 1100px){
#menu-main-menu{
display: none;
}
#menu-small-screen-menu{
display: block;
}
}
自定义导航功能(下拉):
class alpha_dropdown_nav extends Walker_Nav_Menu{
public function start_lvl(&$output, $depth){}
public function end_lvl(&$output, $depth){}
public function start_el(&$output, $item, $depth, $args){
$item->title = str_repeat(" ", $depth * 4) . $item->title;
parent::start_el(&$output, $item, $depth, $args);
$output = str_replace('<li', '<option', $output);
}
public function end_el(&$output, $item, $depth){
$output .= "</option>\n";
}
}
^ 注意:这是同一文件中自定义菜单 walker 函数的第二次使用。这两个功能不同(第一个在标题的主菜单调用中引用)但我不知道这是否是一个问题，或者这是否是不好的做法。
如何替换 <ul>在带有 <select> 的选项标签周围生成标签？
此外，我欢迎任何关于我的方法的反馈。如果有人知道一种更有效的方法，或者被认为是更好的做法，我很乐意学习一种更有效的方法。谢谢!
最佳答案
我认为这篇文章正是您所需要的!
WordPress 菜单默认显示为无序列表。不过，您可能希望将它们显示为一个选择菜单。下面是创建一个菜单“walker”的示例，它将把它呈现为一个选择菜单。当您使用 wp_nav_menu() 显示菜单时，包括 'walker' => new Walker_Nav_Menu_Dropdown() 以告诉 WordPress 使用这种格式而不是默认格式。
函数.php
<?php
// Nav Menu Dropdown Class
include_once( CHILD_DIR . '/lib/classes/nav-menu-dropdown.php' );
/**
* Mobile Menu
*
*/
function be_mobile_menu() {
wp_nav_menu( array(
'theme_location' => 'mobile',
'walker' => new Walker_Nav_Menu_Dropdown(),
'items_wrap' => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value">%3$s</select></form></div>',
) );
}
add_action( 'genesis_before_header', 'be_mobile_menu' );
nav-menu-dropdown.php
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
function start_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
}
function end_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // don't output children closing tag
}
/**
* Start the element output.
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. May be used for padding.
* @param array $args Additional strings.
* @return void
*/
function start_el(&$output, $item, $depth, $args) {
$url = '#' !== $item->url ? $item->url : '';
$output .= '<option value="' . $url . '">' . $item->title;
}
function end_el(&$output, $item, $depth){
$output .= "</option>\n"; // replace closing </li> with the option tag
}
}
祝你好运! :)
关于html - 将响应式 WordPress <ul> 菜单转换为 <select> 以适用于没有 JS 的小屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38624519/
24
4
0
我正在尝试将我所有的东西从 videomarathon.com/dk 导入到 videomarathon.com/se(帖子等) 我正在使用 wordpress 导入器。 上传导出的文件时，它向我显示
Azure WordPress 和 Azure 可扩展 WordPress 之间有什么区别？除了可扩展的 WordPress 允许您选择 azure 存储之外，我看不出有什么区别 最佳答案 基本区别:
我目前正在一个与体育相关的 wordpress 网站上工作。我所有的帖子都在同一个地方，分为足球、网球等。我想改变我博客的结构，比如足球，应该是domain.com/football对于网球，应该是
Wordpress 3 有一个漂亮的 TinyMCE 实现，我相信它比它所基于的原始 TinyMCE 运行得流畅得多。 很棒的事情:- HTML/源代码 View 作为选项卡而不是弹出窗口- 有吸引力
我在 codex.wordpress.org 和developer.wordpress.org 上看到了 WordPress 开发人员文档。他们都有关于插件和主题的文档。由于我不了解 wordpres
我有自定义帖子循环，我想在底部添加“查看全部”链接，该链接应指向包含该类型所有帖子的页面。 我能想到的唯一解决方案是为帖子类型创建一个模板页面并硬编码指向它的链接，但我希望有一个更优雅和动态的解决方案
我正在尝试使用类在 WordPress 中创建自定义 REST API 端点。我也用传统方法做了同样的事情——效果很好。但是，使用类时出现错误 The handler for the route is
我是 WordPress 的新手，正在尝试在主页的一部分中使用一些自定义代码，该部分旨在显示三个类别(白皮书、文章和帖子)中每个类别的 #1 趋势帖子.代码只是显示(据我所知)最近的 3 个帖子，无论
我正在尝试在 wordpress 中设置搜索页面的样式。在 search.php 中，我可以设置大部分页面的样式，但随后的以下语句(我从未经编辑的原始页面中获得)生成了内容。
我希望得到一些帮助来解决一些让我发疯的编码问题。我更喜欢在我的 wordpress 帖子标题中写“&”而不是“and”。但是写出＆符号会破坏我们的 twitter、facebook 和 google-
是否可以只重写一个类别？ 我有一个类别“ 照片”，并且只针对这个类别。 我只想从/category/photos重写它至 /photos 最佳答案 您可以使用 WP Rewrite API 来实现。
我有一个托管在 www.example.com 上的网站，它是一个 Bitnami 应用程序。 我想在 www.example.com/blog 上可以访问的同一台服务器上安装另一个 bitnami
我一直在做一些测试。注意：这仅在Safari浏览器中发生。 我关闭了所有插件并激活了主题二十（而不是我的Catch Box子主题）。在此配置下，除了顶部菜单中的“主页”选项卡（在Safari中显示如下
我是一名 php 开发人员，目前正在开发一个 CMS/博客系统。我想添加一个永久链接系统，比如 WordPress。我很好奇 WordPress 如何解析永久链接。例如，如何获取 id 这样的数据和
有谁知道Wordpress有多安全？ 我不知道如何定义“有多安全”。但与其他CMS系统相比，它的安全性如何？ 更新: 详细说明我的项目。 我会有很多用户注册。登录后，他们将可以访问我正在开发的插件。大
是否可以授予编辑者管理主题小部件的功能？默认情况下，只有管理员可以这样做。 谢谢， 乔恩 最佳答案 恐怕您将需要使用插件来实现此目的，因为更改窗口小部件是switch_themes capabilit
我有一个在服务器上运行的多站点 wordpress，我想将我的站点转移到另一台服务器上。我通过 filezilla ftp 下载了完整的文件备份还导出了完整的数据库。 现在我将此备份导入到新服务器 (
我使用通用 HTML 标签在 WordPress 插件中创建了一个表单。我刚刚用 echo 测试了文本框提交的值，它工作正常。提交表单后，我需要在同一页面中重定向或显示成功/失败消息。表单提交后如何显
我想启用 wordpress 站点的调试日志，在 wp-config.php 中添加以下设置 /* WordPress debug mode for developers. */ define('WP
是否可以仅在前端(无需编辑 .mo/.po 文件)更改我的 wordpress 安装(WP 3.0 Multisite)的语言？ 在此处更改此选项: 也会在后端更改我的语言。 有任何想法吗？ 感谢您的
我是一名优秀的程序员,十分优秀！