如果您想随时在站点的后端（管理区域）上进行编辑，这将是我的问题解决方案。如果您想要一个静态菜单，只需在需要的地方插入步骤1，然后跳过其余步骤。希望有帮助！

您的代码将类似于此：

步骤1）创建菜单并在子主题的“图像”文件夹中插入图像

<ul id="social-links">
    <li><a href="https://facebook.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/facebook.png"></a></li>
    <li><a href="https://plus.google.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/google-plus.png"></a></li>
    <li><a href="https://twitter.com/profileURL" target="_blank"><img src="/wp-content/themes/ThemeNameGoesHere/images/icon/twitter.png"></a></li>
</ul>

步骤3）打开您想要菜单的位置文件。这可能因主题而异。开发人员友好的主题将为主题提供挂钩。我的示例将使用My parents主题挂钩将我们在步骤1中创建的菜单插入到所需的位置。如果您的主题没有预定义的挂钩，您可以在wordpress codex中查找默认的wp挂钩。

步骤4）使用子主题函数。php我们将创建一个简单的函数，在步骤2中创建的页面（社交部分）上调用我们的小部件。

function add_social_menu(){ 
    //Custom function that will add our menu when called
 echo do_shortcode(\'[widgets_on_pages id="social-section"]\') 
    //this will run our widget which will contain our social-links UL
}

add_filter(\'below_header_hook\',\'add_social_menu\'); 
//first parameter will be your hook and the second is the function you want to insert

在你的案例中，为社交菜单创建名为“社交”的菜单项，为其添加含义完整的类名示例：twitter图标、facebook图标，然后使用样式中声明的css。如下代码所示的css将图像附加到相应的菜单项。

.facebook-icon a{
    background: url("facebook-icon.png") no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 0;
    height: 10px;
    line-height: 0;
    text-indent: -9999px;
    width: 10px;
}