Question

我整个上午都被困在这上面，而且我不会想到我会更进一步。

我试图显示wordpress菜单，然后我要显示父菜单的所有子页面，所有子页面都有缩略图，我希望这些子页面显示。

我尝试将缩略图添加到子页面中的ing标签

以下是我如何查看代码

父菜单

<nav>
  <a href="#" >Sample Page 1</a>
  <a href="#" >Sample Page 2</a>
</nav>

儿童菜单

<ul class="sample_page_1">
  <li>
    <a href="#">
      <img src="image.jpg" alt="img05">
      <h4>Belts</h4>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image.jpg" alt="img05">
      <h4>Belts</h4>
    </a>
  </li>
</ul>

<ul class="sample_page_2">
  <li>
    <a href="#">
      <img src="image.jpg" alt="img05">
      <h4>Belts</h4>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image.jpg" alt="img05">
      <h4>Belts</h4>
    </a>
  </li>
</ul>

这是我到目前为止的代码，但它没有做它应该做的事情，它没有显示图像，我无法弄清楚如何？甚至不确定这是正确的方法吗？

<ul>
<?php
$menu_name = 'shoes';
    $items = wp_get_nav_menu_items($menu_name);
    foreach ( $items as $item){
        echo '<li><a href="#">'.$item->title.'</a></li>';
    }
?>
</ul>

由于

Answer 1

在我的测试中得到了令人满意的结果。这将影响所有菜单，因此可以随意添加其他逻辑以仅定位某些菜单。

您可能需要设置样式以使其看起来更好一点，但只需将其放入您的functions.php文件中：

add_filter('walker_nav_menu_start_el', 'maiorano_generate_nav_images', 20, 4);
function maiorano_generate_nav_images($item_output, $item, $depth, $args){
    if(has_post_thumbnail($item->object_id)){
        $dom = new DOMDocument(); //DOM Parser because RegEx is a terrible idea
        $dom->loadHTML($item_output); //Load the markup provided by the original walker
        $img = $dom->createDocumentFragment(); //Create arbitrary Element
        $img->appendXML(get_the_post_thumbnail($item->object_id, 'thumbnail')); //Apply image data via string
        $dom->getElementsByTagName('a')->item(0)->appendChild($img); //Append the image to the link
        $item_output = $dom->saveHTML(); //Replace the original output
    }
    return $item_output;
}

显示带有子菜单和缩略图的wordpress菜单

1 个答案: