主题开发过程中，有时候需要应用到自己的风格，默认的菜单调用无疑增加了对导航设计的难度。后端的菜单设计固然方便，但是严重缺乏了灵活度，比如我在菜单前加入一个图标，这样就很难实现，或许是我对程序了解的不够深刻，但是换取另外一种方式，无疑更加灵活。

第三版主题设计的过程中，采取菜单固定侧边栏的设计，而且利用自定义字段，为每个分类增设了图标的添加，二该类图片全部是纯代码的 svg 图像。要用列表方式全部显示出来并且加入设置好的图标。再来就是不同的分类页下增加分类高亮的提示效果，查阅资料，用到了一个参数轻松搞定，代码如下：

<ul>
        <li> <a href="../">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
          </svg>
          <span class="text-name">Home</span></a></li>
        <?php
        $args = array(
          'orderby' => 'id',
          'order' => 'ASC',
          'hide_empty' => 0
        );
        $categories = get_categories( $args );
        $term = get_queried_object();

        foreach ( $categories as $category ) {

          $image = get_field( 'icon', $category->taxonomy . '_' . $category->term_id );
			
          if ( is_category( $category ) ) {
            echo '<li><a class="active" href="' . get_category_link( $category->term_id ) . '" >';
          } else {
            echo '<li><a href="' . get_category_link( $category->term_id ) . '" >';
          }
          echo $image;
          echo '<span class="text-name">' . $category->name . '</span>';
          echo '</a></li>';
        }
        ?>
      </ul>

Css 代码：

.active {
  background: #444;
  border-radius: 5px;
}

对于 Wordpress 主题开发，更多的经验我会在这里不断补充，和大家一起交流学习 …