Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
WordPress 菜单项添加图片上传选项字段 - 微码盒
!
也想出现在这里? 联系我们
广告位

WordPress 菜单项添加图片上传选项字段

要在 WordPress 菜单中添加图片上传功能,你可以使用自定义菜单项(Custom Menu Items)功能和 WordPress 提供的媒体上传功能。下面是一个示例代码

首先,在你的主题的 functions.php 文件中添加以下代码:

  1. // 注册菜单项类型为 "图片"
  2. function register_menu_item_type_image() {
  3. $args = array(
  4. 'label' => __( '图片', 'textdomain' ),
  5. );
  6. register_nav_menu_item_type( 'image', $args );
  7. }
  8. add_action( 'init', 'register_menu_item_type_image' );
  9. // 显示菜单项类型为 "图片" 的字段
  10. function add_menu_item_fields_image( $item_id, $item, $depth, $args ) {
  11. if ( $item->type == 'image' ) {
  12. $image_url = get_post_meta( $item_id, '_menu_item_image_url', true );
  13. ?>
  14. <div class="field-image-url description description-wide">
  15. <label for="edit-menu-item-image-url-<?php echo esc_attr( $item_id ); ?>">
  16. <?php _e( '图片选择', 'textdomain' ); ?>
  17. </label>
  18. <div class="image-preview"></div>
  19. <input type="hidden" id="edit-menu-item-image-url-<?php echo esc_attr( $item_id ); ?>" name="menu-item-image-url[<?php echo esc_attr( $item_id ); ?>]" value="<?php echo esc_attr( $image_url ); ?>" />
  20. <button class="upload-image-button button"><?php _e( '上传图片', 'textdomain' ); ?></button>
  21. </div>
  22. <?php
  23. }
  24. }
  25. add_action( 'wp_nav_menu_item_custom_fields', 'add_menu_item_fields_image', 10, 4 );
  26. // 加载菜单项类型为 "图片" 的字段脚本和样式
  27. function load_menu_item_fields_image_scripts() {
  28. ?>
  29. <script>
  30. jQuery(document).ready(function($){
  31. // 添加上传图片按钮的点击事件
  32. $(document).on('click', '.upload-image-button', function(e) {
  33. e.preventDefault();
  34. var imageUploader = wp.media({
  35. title: '<?php _e( '选择图片', 'textdomain' ); ?>',
  36. multiple: false
  37. })
  38. .on('select', function(){
  39. var attachment = imageUploader.state().get('selection').first().toJSON();
  40. // 显示图片预览
  41. $('.image-preview').html('<img src="' + attachment.url + '" alt="" style="max-width:100%;" />');
  42. // 设置隐藏字段值为图片 URL
  43. $('#edit-menu-item-image-url-<?php echo esc_attr( $item_id ); ?>').val(attachment.url);
  44. })
  45. .open();
  46. });
  47. });
  48. </script>
  49. <?php
  50. }
  51. add_action( 'admin_print_scripts-nav-menus.php', 'load_menu_item_fields_image_scripts' );
  52. // 保存菜单项类型为 "图片" 的字段值
  53. function save_menu_item_fields_image( $menu_id, $menu_item_db_id, $menu_item_args ) {
  54. if ( isset( $_POST['menu-item-image-url'][ $menu_item_db_id ] ) ) {
  55. $image_url = sanitize_text_field( $_POST['menu-item-image-url'][ $menu_item_db_id ] );
  56. update_post_meta( $menu_item_db_id, '_menu_item_image_url', $image_url );
  57. }
  58. }
  59. add_action( 'wp_update_nav_menu_item', 'save_menu_item_fields_image', 10, 3 );

在菜单编辑器中创建一个自定义链接,并将链接类型设置为 "图片"。然后,你将能够看到一个名为 "图片选择" 的字段和一个 "上传图片" 按钮。

点击 "上传图片" 按钮,将弹出一个媒体上传框,在那里你可以上传或选择一张图片。选择了图片后,它将显示在字段下方的图片预览区域,并且图片的 URL 将被保存到隐藏字段中。

请注意,这只是一个简单的示例代码,你可以根据自己的需求和设计来扩展和美化菜单项的图片上传功能。

要在前端调用 WordPress 菜单中上传的图片,你可以使用以下方法:

获取菜单项的图片 URL:在你的主题文件中,你可以使用 get_post_meta() 函数来获取菜单项的图片 URL。

  1. $menu_item_id = 1; // 替换为你菜单项的 ID
  2. $image_url = get_post_meta( $menu_item_id, '_menu_item_image_url', true );

在需要显示图片的位置使用 <img> 标签:使用获取到的菜单项图片 URL,你可以将它应用于 HTML <img> 标签的 src 属性,以在前端显示图片。

  1. <img src="<?php echo esc_url( $image_url ); ?>" alt="菜单项图片">

将上述代码嵌入到你希望显示图片的地方,确保将 $menu_item_id 替换为相应的菜单项 ID。这样就能够在前端页面上显示菜单项上传的图片了。

WordPress 菜单项添加图片上传选项字段

已有 464 人购买
    此资源下载价格5元立即购买(VIP 免费)立即升级
查看演示升级 VIP立刻购买

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

WordPress前台显示用户注册时间

2024-5-17 9:56:01

WordPress教程

获取WordPress当前分类文章所有标签

2024-5-21 1:28:18

下载说明

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

站长声明

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