在菜单中显示图片而不是文本

Question

我正在做一个定制的主题。在这个主题下，我创建了一个名为“社会化”的菜单，用于链接到诸如twitter、facebook、...etc等社交网站。

现在，我想要显示的不是文字，而是社交媒体图标。我怎么能这么做？让每一个菜单项都成为一个图像？

谢谢。

Answer 1

这将是我的问题的解决方案，如果你想在网站的后端(管理区域)在任何时候编辑。如果您想要静态菜单，只需在需要的地方插入步骤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>

步骤2)下载“页面上的小部件”插件或类似的插件。安装并转到页面设置上的小部件。位于“设置>页面上的小部件”。插入您想要的名称，我将使用“社交部分”。转到“外观>小部件”部分，并在新创建的小部件(社交-部分)中添加一个文本小部件。我们将使用它动态更改菜单，而不是每次我们需要添加社交网络时，主题php文件中都有静态菜单。

步骤3)打开你想要菜单去的地方的文件。这可能因主题而异。开发人员友好的主题将为主题提供钩子。。我的示例将使用“我的父母主题”钩子插入我们在步骤1中创建的菜单。如果您的主题没有预定义的钩子，您可以在wordpress代码索引中查找默认的wp挂钩。

第4步)使用子主题functions.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

步骤5)将css保存/上载并编辑到链接中。这是有点长，但它是一个解决方案，你可以编辑在后端。如果您对此方法有任何疑问，请随时与我联系。

Answer 2

在您的例子中，为社会菜单创建名为" social“的菜单项，向其添加含义完整的类名:twitter图标、facebook图标，然后使用style.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;
}