使用functions.php在id之后放置内容

Question

我正在为我的公司开发一个使用 wordpress+divi 主题的网站，由于一些预订系统实施和个性化 css，这很难定制，所以我制作了一个子主题以避免出现问题。 现在的问题是：有没有办法使用我的functions.php子文件添加一个钩子过滤器，可以在特定ID之后放置内容，例如

<li id="first-menu-item">home</li>
//my custom content through functions.php goes here
<li id="second-menu-item">portfolio</li>
<li id="third-menu-item">contacts</li>

我知道以这种方式使用 jquery 是可能的

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( '#first-menu.item' ) .after( '<li>my custom content</li>' );
});
</script>

这可行，但我认为这不是正确的方法，因为我想在该特定 ID 之后放置的只是 html 代码，而是 wordpress 搜索功能，我认为认为我可以放置 php 标签是错误的在 jquery 中.. 所以我必须添加这个

<?php get_search_form(); ?>

直接在我的 header.php 中，但我想避免这种情况，因为 divi 的开发人员可能会更新 header.php 文件，我必须再次编辑我的子 header.php，所以我必须通过我的子 function.php 来执行此操作...我发现 wordpress 有不同的过滤器钩子可以像“wp_nav_menu_items”一样制作，但是如果我想在特定的行/div/id/class 之后放置代码呢？

Answer 1

这可以使用自定义帮助函数并在“wp_get_nav_menu_items”上添加过滤器来完成。以下是您可以使用的自定义帮助函数。

function _custom_nav_menu_item( $title, $url, $order, $parent = 0 ){
  $item = new stdClass();
  $item->ID = 1000000 + $order + parent;
  $item->db_id = $item->ID;
  $item->title = $title;
  $item->url = $url;
  $item->menu_order = $order;
  $item->menu_item_parent = $parent;
  $item->type = '';
  $item->object = '';
  $item->object_id = '';
  $item->classes = array();
  $item->target = '';
  $item->attr_title = '';
  $item->description = '';
  $item->xfn = '';
  $item->status = '';
  return $item;
}

以下是添加过滤器的方法。

add_filter( 'wp_get_nav_menu_items', 'your_custom_function', 20, 2 );
function your_custom_function( $items, $menu ){
  //your logic and code for customization
  return $items;
}

您将定义自己的逻辑来确定正确的位置。我已成功将其与 Divi 主题一起使用。

希望这至少能给你一个起点。 好吧，我想知道，为什么您要在导航菜单中添加搜索表单！

===== 更新 =====

您可以自定义菜单的包装以添加其他内容。请检查此thread。这对你很有用。

另外，要为移动版本启用此功能，您可以使用另一个检测移动设备的插件，mobble。

我在很多网站上都用过这个插件很多次了，效果还是比较靠谱的。您可以使用此插件中的“is_mobile()”函数有条件地启用自定义功能，这样您就不必依赖 css 在桌面设备上隐藏相同的功能。