要在 WordPress 菜单中添加图片上传功能，你可以使用自定义菜单项（Custom Menu Items）功能和 WordPress 提供的媒体上传功能。下面是一个示例代码：
首先，在你的主题的 functions.php 文件中添加以下代码：
- // 注册菜单项类型为 "图片"
- function register_menu_item_type_image() {
- $args = array(
- 'label' => __( '图片', 'textdomain' ),
- );
- register_nav_menu_item_type( 'image', $args );
- }
- add_action( 'init', 'register_menu_item_type_image' );
- // 显示菜单项类型为 "图片" 的字段
- function add_menu_item_fields_image( $item_id, $item, $depth, $args ) {
- if ( $item->type == 'image' ) {
- $image_url = get_post_meta( $item_id, '_menu_item_image_url', true );
- ?>
- <div class="field-image-url description description-wide">
- <label for="edit-menu-item-image-url-<?php echo esc_attr( $item_id ); ?>">
- <?php _e( '图片选择', 'textdomain' ); ?>
- </label>
- <div class="image-preview"></div>
- <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 ); ?>" />
- <button class="upload-image-button button"><?php _e( '上传图片', 'textdomain' ); ?></button>
- </div>
- <?php
- }
- }
- add_action( 'wp_nav_menu_item_custom_fields', 'add_menu_item_fields_image', 10, 4 );
- // 加载菜单项类型为 "图片" 的字段脚本和样式
- function load_menu_item_fields_image_scripts() {
- ?>
- <script>
- jQuery(document).ready(function($){
- // 添加上传图片按钮的点击事件
- $(document).on('click', '.upload-image-button', function(e) {
- e.preventDefault();
- var imageUploader = wp.media({
- title: '<?php _e( '选择图片', 'textdomain' ); ?>',
- multiple: false
- })
- .on('select', function(){
- var attachment = imageUploader.state().get('selection').first().toJSON();
- // 显示图片预览
- $('.image-preview').html('<img src="' + attachment.url + '" alt="" style="max-width:100%;" />');
- // 设置隐藏字段值为图片 URL
- $('#edit-menu-item-image-url-<?php echo esc_attr( $item_id ); ?>').val(attachment.url);
- })
- .open();
- });
- });
- </script>
- <?php
- }
- add_action( 'admin_print_scripts-nav-menus.php', 'load_menu_item_fields_image_scripts' );
- // 保存菜单项类型为 "图片" 的字段值
- function save_menu_item_fields_image( $menu_id, $menu_item_db_id, $menu_item_args ) {
- if ( isset( $_POST['menu-item-image-url'][ $menu_item_db_id ] ) ) {
- $image_url = sanitize_text_field( $_POST['menu-item-image-url'][ $menu_item_db_id ] );
- update_post_meta( $menu_item_db_id, '_menu_item_image_url', $image_url );
- }
- }
- add_action( 'wp_update_nav_menu_item', 'save_menu_item_fields_image', 10, 3 );
在菜单编辑器中创建一个自定义链接，并将链接类型设置为 "图片"。然后，你将能够看到一个名为 "图片选择" 的字段和一个 "上传图片" 按钮。
点击 "上传图片" 按钮，将弹出一个媒体上传框，在那里你可以上传或选择一张图片。选择了图片后，它将显示在字段下方的图片预览区域，并且图片的 URL 将被保存到隐藏字段中。
请注意，这只是一个简单的示例代码，你可以根据自己的需求和设计来扩展和美化菜单项的图片上传功能。
要在前端调用 WordPress 菜单中上传的图片，你可以使用以下方法：
获取菜单项的图片 URL：在你的主题文件中，你可以使用 get_post_meta() 函数来获取菜单项的图片 URL。
- $menu_item_id = 1; // 替换为你菜单项的 ID
- $image_url = get_post_meta( $menu_item_id, '_menu_item_image_url', true );
在需要显示图片的位置使用 <img> 标签：使用获取到的菜单项图片 URL，你可以将它应用于 HTML <img> 标签的 src 属性，以在前端显示图片。
- <img src="<?php echo esc_url( $image_url ); ?>" alt="菜单项图片">
将上述代码嵌入到你希望显示图片的地方，确保将 $menu_item_id 替换为相应的菜单项 ID。这样就能够在前端页面上显示菜单项上传的图片了。
WordPress 菜单项添加图片上传选项字段
已有 464 人购买
- 此资源下载价格为5元立即购买（VIP 免费）立即升级
