将图像添加到使用wp_NAV_MENU创建和获取的列表中的锚点

时间:2017-03-14 作者:emcolsson

我已经创建了一个自定义菜单,可从wp管理员处使用。我使用wp\\u nav\\u菜单来调用它,菜单是在ul中创建的,作为纯文本链接。我想知道是否有办法更改这些文本链接,并以某种方式向每个锚定标记添加不同的图像(img src=“pic.jpg”)?我试图在wp\\u nav\\u菜单调用中处理“items\\u wrap”参数,但没有成功。

我有另一个菜单,它是硬编码的锚链接,每个链接有不同的图像,我想将此功能传输到我创建的自定义菜单。

UPDATE一定要遵循下面的提示,仔细阅读那篇文章,我最终只是摆弄它,直到它起作用为止。这些步骤将在wp admin中添加一个额外的输入字段,该字段连接到每个列表项上,然后您可以尝试更改此输出以满足您的需要,我让它与img src一起使用。

1 个回复
最合适的回答,由SO网友:danbrellis 整理而成

菜单项保存为post\\U类型为“nav\\U Menu\\U item”的post。这意味着您可以像处理帖子一样为其分配Posteta,并在菜单编辑屏幕中创建自定义字段,以输入img url或分配媒体ID。

你可以跟随this tutorial 关于向菜单项添加自定义元以满足您的需要。如果你需要帮助,我可以拼凑一些代码来帮助你。

UPDATE我把这一点放在一起,让您可以进入函数。php。未经测试,但应该有效。这是一种不同于我最初共享的链接的方法,但这是我过去使用的方法。

//Adds custom data field form
function wpse_259995_menu_custom_fields_fields( $id, $item, $depth, $args ) {

  $_key = \'img_url\';
  $label = "Image URL";
  $key   = sprintf( \'menu-item-%s\', $_key );
  $id    = sprintf( \'edit-%s-%s\', $key, $item->ID );
  $name  = sprintf( \'%s[%s]\', $key, $item->ID );
  $value = get_post_meta( $item->ID, $key, true );
  $class = sprintf( \'field-%s\', $_key );

  printf(
    \'<p class="%5$s"><label for="%1$s">%2$s<br />
    <input type="text" id="%1$s" class="%5$s" name="%3$s" value="%4$s" /></label></p>\',
    esc_attr( $id ),
    esc_html( $label ),
    esc_attr( $name ),
    esc_url( $value ),
    esc_attr( $class )
  );
}
add_action( \'wp_nav_menu_item_custom_fields\', \'wpse_259995_menu_custom_fields_fields\', 10, 4 );

//Save Custom Menu data
function wpse_259995_menu_custom_fields_save( $menu_id, $menu_item_db_id, $menu_item_args ) {
  if ( defined( \'DOING_AJAX\' ) && DOING_AJAX ) {
    return;
  }

  check_admin_referer( \'update-nav_menu\', \'update-nav-menu-nonce\' );
  $_key = \'img_url\';
  $label = "Image URL";

  $key = sprintf( \'menu-item-%s\', $_key );

  // Sanitize
  if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
    // Do some checks here...
    $value = $_POST[ $key ][ $menu_item_db_id ];
  }
  else {
    $value = null;
  }

  // Update
  if ( ! is_null( $value ) ) {
    update_post_meta( $menu_item_db_id, $key, $value );
  }
  else {
    delete_post_meta( $menu_item_db_id, $key );
  }
}
add_action( \'wp_update_nav_menu_item\', \'wpse_259995_menu_custom_fields_save\', 10, 3 );

//Adds toggle to show field in screen options
function wpse_259995_menu_custom_fields_columns( $columns ) {
  $fields = array(\'img_url\' => "Imae URL");
  $columns = array_merge( $columns, $fields );
  return $columns;
}
add_filter( \'manage_nav-menus_columns\', \'wpse_259995_menu_custom_fields_columns\', 99 );

//Modify the element of the WP walker
function wpse_259995_walker_nav_menu_start_el_menu_with_images ($item_output, $item, $depth, $args ){
  $attr_title  = ! empty( $item->attr_title ) ? $item->attr_title : $item->title;

  $img_url = get_post_meta( $item->ID, \'menu-item-img_url\', true );

  $item_output = $args->before;
  $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . \'<img src="\'.$img_url.\'" />\' . $args->link_after;
  $item_output .= $args->after;
  return $item_output;
}
然后,在标题中。php(或任何调用菜单的地方):

add_filter( \'walker_nav_menu_start_el\', \'wpse_259995_walker_nav_menu_start_el_menu_with_images\', 10, 4 );
wp_nav_menu( /*Call your menu*/ );
remove_filter( \'walker_nav_menu_start_el\', \'wpse_259995_walker_nav_menu_start_el_menu_with_images\', 10, 4 );
UPDATE我忘记了几年前我使用这个解决方案时,它与这个插件一起提供了挂钩“wp\\u nav\\u menu\\u item\\u custom\\u fields”https://wordpress.org/plugins/menu-item-custom-fields/installation/

您需要安装该插件(或重用代码)才能使其正常工作。

相关推荐

Mass Update Broken Links

我在寻找奇迹。我非常怀疑是否有办法做到这一点,但我只是想问:我一直在一台过时的旧服务器上管理一个多站点安装,其中包含一些过时的内容。我们刚刚用了一个新的软件来重新开始。当你读到这篇文章的其余部分时,我相信你会有很多关于发生了什么的问题。要知道这是一个很长的故事,我不想详细说明我为什么要做某些事情。因此,我安装了一个新的WP安装,我的多站点上的人正在新安装上创建一个新站点,导出他们的信息并导入到新服务器。正如您所料,由于目录设置已更改,因此存在大量断开的链接。这些断开的链接位于页面和帖子上。例如,一个旧的链