!
也想出现在这里? 联系我们
广告位

WordPress 菜单添加自定义选项打造超级菜单

最近疫情期间静止在家,终于有时间研究这个超级菜单,上篇是 用小工具创建 WordPress 超级菜单 ,再介绍一个通过为 WordPress 菜单添加自定义选项,再利用短代码打造超级菜单的方法,废话不说直接上代码。
WordPress 菜单添加自定义选项打造超级菜单
将代码添加到当前主题函数模板 functions.php 中:

  1. // 设置添加字段
  2. function zm_menu_custom_fields( $item_id, $item ) {
  3. $menu_code = get_post_meta( $item_id, 'zm_menu_code_checkbox', true );
  4. $menu_shortcode = get_post_meta( $item_id, 'zm_menu_shortcode', true );
  5. ?>
  6. <p class="zm-menu-code-label description" style="margin: 10px 0">
  7. <label for="zm-menu-code-<?php echo $item_id; ?>" >
  8. <input type="checkbox" id="zm-menu-code-<?php echo $item_id; ?>" name="zm_menu_code[<?php echo $item_id; ?>]" <?php checked( $menu_code, true ); ?> />
  9. 为顶级菜单添加CSS类(仅在顶级菜单勾选)
  10. </label>
  11. </p>
  12. <p class="zm-menu-shortcode-label description">
  13. <label for="zm-menu-shortcode-<?php echo $item_id; ?>">
  14. 输入短代码(仅在菜单子项目中使用)
  15. </label>
  16. <input type="hidden" class="nav-menu-id" value="<?php echo $item_id; ?>" />
  17. <div class="logged-input-holder">
  18. <input type="text" name="zm_menu_shortcode[<?php echo $item_id; ?>]" id="zm-menu-shortcode-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_shortcode ); ?>" style="width: 100%;">
  19. </div>
  20. </p>
  21. <?php
  22. }
  23. add_action( 'wp_nav_menu_item_custom_fields', 'zm_menu_custom_fields', 10, 2 );
  24. // 保存字段
  25. function zm_save_menu_custom_item_meta( $menu_id, $menu_item_db_id ) {
  26. $button_value = ( isset($_POST['zm_menu_code'][$menu_item_db_id] ) && $_POST['zm_menu_code'][$menu_item_db_id] == 'on' ) ? true : false;
  27. update_post_meta( $menu_item_db_id, 'zm_menu_code_checkbox', $button_value );
  28. if ( isset( $_POST['zm_menu_shortcode'][$menu_item_db_id] ) ) {
  29. $sanitized_data = sanitize_text_field( $_POST['zm_menu_shortcode'][$menu_item_db_id] );
  30. update_post_meta( $menu_item_db_id, 'zm_menu_shortcode', $sanitized_data );
  31. } else {
  32. delete_post_meta( $menu_item_db_id, 'zm_menu_shortcode' );
  33. }
  34. }
  35. add_action( 'wp_update_nav_menu_item', 'zm_save_menu_custom_item_meta', 10, 2 );
  36. // 前端输出
  37. function zm_menu_custom_output( $title, $item ) {
  38. if( is_object( $item ) && isset( $item->ID ) ) {
  39. $menu_shortcode = get_post_meta( $item->ID, 'zm_menu_shortcode', true );
  40. // 输出菜单标题,可以删除
  41. if ( ! empty( $menu_shortcode ) ) {
  42. $title = '<span class="zm-menu-custom-title">'.$title.'</span>';
  43. }
  44. // 输出短代码
  45. if ( ! empty( $menu_shortcode ) ) {
  46. $title .= '<span class="show-menu-shortcode">' . do_shortcode( $menu_shortcode ) . '</span>';
  47. }
  48. }
  49. return $title;
  50. }
  51. add_filter( 'nav_menu_item_title', 'zm_menu_custom_output', 10, 2 );
  52. // 添加CSS类
  53. function zm_menu_custom_add_class( $classes, $menu_item ) {
  54. $menu_code = get_post_meta( $menu_item->ID, 'zm_menu_code_checkbox', true );
  55. $menu_shortcode = get_post_meta( $menu_item->ID, 'zm_menu_shortcode', true );
  56. // 为顶级菜单添加CSS类
  57. if ( ! empty( $menu_code ) ) {
  58. $classes[] = 'zm-menu-code';
  59. }
  60. // 为子菜单添加CSS类
  61. if ( ! empty( $menu_shortcode ) ) {
  62. $classes[] = 'zm-menu-shortcode';
  63. }
  64. return $classes;
  65. }
  66. add_filter( 'nav_menu_css_class', 'zm_menu_custom_add_class', 10, 2 );

之后,会在菜单选项设置中增加一个复选表单,用于为顶级菜单添加特定 CSS 类,一个文本框为菜单子项添加短代码并添加 CSS 类,方便编写配套样式。
WordPress 菜单添加自定义选项打造超级菜单
上述,只是基本代码,并加了简单的注释,还需要编写短代码及相应的样式。

举一反三,能添加短代码,当然也能添加更多的自定义选项设置。具体效果可以参阅我主题的超级菜单。如果不想折腾代码可以安装相似功能插件:WP Menu Custom Fields

不过用插件,最后也需要折腾代码,因为在原菜单中强行加入自定义内容,不重写样式是肯定不行的。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

重置 WordPress 文章编辑界面元素默认位置

2022-5-23 7:55:45

WordPress教程

WordPress 评论显示用户角色

2022-5-23 19:57:24

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索