在 WooCommerce 帐户中的 <nav> 和 <ul> 之间添加内容

Question

我正在为 WC 制作一个自定义仪表板，需要以最简单的方式在仪表板的 WooCommerce 菜单中的nav和ul元素之间添加内容。

我看到有一个名为woocommerce_before_account_navigation和woocommerce_after_account_navigation的钩子，但这些钩子在整个nav元素之后或之前添加内容。

这是我正在尝试做的事情的图片。

有人有解决方案吗？

Answer 1

由于 WooCommerce 不提供挂钩来准确地在您需要的地方注入代码：#1 从您的主题自定义导航部分由于WooCommerce 允许您覆盖其大部分模板文件，您可以：复制navigation.php位于的文件/wp-content/plugins/woocommerce/templates/myaccount/。将此文件粘贴到/wp-content/themes/your-theme/woocommerce/myaccount/.进行您想要的更改。利润！请记住，您需要不时关注 WC 的更新，因为您覆盖的文件中可能存在您可能想要/需要移植的更改。或者...#2 使用 AJAX 和 JS 在你想要的地方注入你的自定义代码使用WordPress 的 AJAX API生成您需要的 HTML 输出，nav并ul使用 jQuery/vanilla JavaScript将其注入和标签之间。这样您就不必覆盖 WC 的模板。但请记住，如果您在站点上使用缓存插件时执行此操作，则需要对其进行配置，以便它每大约 24 小时或更短时间重建一次缓存，否则某些用户可能会遇到问题（例如）。

Answer 2

嗯....最简单但不是最好的方法是：手动放置一个空的 div 标签，这样你的代码就会变成这样：<nav class= 'woocommerce-MyAccount-navigation'><div style ='blah-blah'>//that div after the nav bar ;TLDR<div id='newDiv></div><ul>//etc包装代码以在 php 函数中显示用户信息、头像和姓名（我命名为 getUsernameAndStuff()），让其id成为用户的 id。喜欢 ：<?php&nbsp;function getUsernameAndStuff(id){//put the code here..}?>然后使用js：<script>document.getElementById().innerHTML=<?php getUsernameAndStuff(id)?></script>