我是修改wordpress中的php文件的新手。我需要将另一个未包含在模板中的社交媒体图标 (houzz) 添加到我的标题中。我找到了正确的文件和代码,但我似乎无法显示 houzz。任何帮助将不胜感激。这是代码:
<?php
if( has_nav_menu( 'social-menu' ) ){
// #social-menu
mfn_wp_social_menu();
} else {
$target = mfn_opts_get('social-target') ? 'target="_blank"' : false;
echo '<ul class="social">';
if( mfn_opts_get('social-skype') ) echo '<li class="skype"><a '.$target.' href="'. mfn_opts_get('social-skype') .'" title="Skype"><i class="icon-skype"></i></a></li>';
if( mfn_opts_get('social-facebook') ) echo '<li class="facebook"><a '.$target.' href="'. mfn_opts_get('social-facebook') .'" title="Facebook"><i class="icon-facebook"></i></a></li>';
if( mfn_opts_get('social-googleplus') ) echo '<li class="googleplus"><a '.$target.' href="'. mfn_opts_get('social-googleplus') .'" title="Google+"><i class="icon-gplus"></i></a></li>';
if( mfn_opts_get('social-twitter') ) echo '<li class="twitter"><a '.$target.' href="'. mfn_opts_get('social-twitter') .'" title="Twitter"><i class="icon-twitter"></i></a></li>';
if( mfn_opts_get('social-vimeo') ) echo '<li class="vimeo"><a '.$target.' href="'. mfn_opts_get('social-vimeo') .'" title="Vimeo"><i class="icon-vimeo"></i></a></li>';
if( mfn_opts_get('social-youtube') ) echo '<li class="youtube"><a '.$target.' href="'. mfn_opts_get('social-youtube') .'" title="YouTube"><i class="icon-play"></i></a></li>';
if( mfn_opts_get('social-flickr') ) echo '<li class="flickr"><a '.$target.' href="'. mfn_opts_get('social-flickr') .'" title="Flickr"><i class="icon-flickr"></i></a></li>';
if( mfn_opts_get('social-linkedin') ) echo '<li class="linkedin"><a '.$target.' href="'. mfn_opts_get('social-linkedin') .'" title="LinkedIn"><i class="icon-linkedin"></i></a></li>';
if( mfn_opts_get('social-pinterest') ) echo '<li class="pinterest"><a '.$target.' href="'. mfn_opts_get('social-pinterest') .'" title="Pinterest"><i class="icon-pinterest"></i></a></li>';
if( mfn_opts_get('social-dribbble') ) echo '<li class="dribbble"><a '.$target.' href="'. mfn_opts_get('social-dribbble') .'" title="Dribbble"><i class="icon-dribbble"></i></a></li>';
if( mfn_opts_get('social-instagram') ) echo '<li class="instagram"><a '.$target.' href="'. mfn_opts_get('social-instagram') .'" title="Instagram"><i class="icon-instagram"></i></a></li>';
if( mfn_opts_get('social-behance') ) echo '<li class="behance"><a '.$target.' href="'. mfn_opts_get('social-behance') .'" title="Behance"><i class="icon-behance"></i></a></li>';
if( mfn_opts_get('social-vkontakte') ) echo '<li class="vkontakte"><a '.$target.' href="'. mfn_opts_get('social-vkontakte') .'" title="VKontakte"><i class="icon-vkontakte"></i></a></li>';
if( mfn_opts_get('social-viadeo') ) echo '<li class="viadeo"><a '.$target.' href="'. mfn_opts_get('social-viadeo') .'" title="Viadeo"><i class="icon-viadeo"></i></a></li>';
if( mfn_opts_get('social-xing') ) echo '<li class="xing"><a '.$target.' href="'. mfn_opts_get('social-xing') .'" title="Xing"><i class="icon-xing"></i></a></li>';
if( mfn_opts_get('social-rss') ) echo '<li class="rss"><a '.$target.' href="'. get_bloginfo('rss2_url') .'" title="RSS"><i class="icon-rss"></i></a></li>';
echo '</ul>';
}
?>
创建子主题
首先要做的事。编辑主题文件时,最好使用子主题。
来自 Wordpress Codex
子主题是继承功能和样式的主题 另一个主题,称为父主题。子主题是 修改现有主题的推荐方法。
创建并激活子主题后,您可以将需要编辑的模板复制到子主题中(如果模板文件不在主题的根目录中,请保留主题的文件夹结构)
编辑模板文件
由于mfn_opts_get('social-houzz')
选项不存在,您只需像这样插入要为社交图标添加的html即可。
<?php
if( has_nav_menu( 'social-menu' ) ){
// #social-menu
mfn_wp_social_menu();
} else {
$target = mfn_opts_get('social-target') ? 'target="_blank"' : false;
echo '<ul class="social">';
if( mfn_opts_get('social-skype') ) echo '<li class="skype"><a '.$target.' href="'. mfn_opts_get('social-skype') .'" title="Skype"><i class="icon-skype"></i></a></li>';
// Other social icons
// Your custom icon.
echo '<li class="houzz"><a '.$target.' href="link_to_houzz" title="Houzz"><i class="icon-houzz"></i></a></li>';
echo '</ul>';
}
?>
添加 CSS
现在你已经有了类 houzz 的li
,你需要为它添加 CSS。这也应该在子主题中完成,而不是在主主题的样式表中完成。在主题的样式表中查找其他社交图标之一,并将其 css (例如li.skype
)复制到子主题的样式表中。然后将"skype"替换为houzz。您还需要使用新图标编辑新的icon-houzz
类,否则将使用 Skype 图标。
注意:如果您提供指向正在使用的主题的链接,我可以提供更具体的说明。我的说明完全脱离了您提供的代码示例。
这是不好的做法,我不建议你这样做,但这是一个删除PHP并用纯HTML替换它的答案。您现在需要添加适当的href
值,并确保使用 CSS 设置houz 图标的样式。此方法将破坏任何内容管理功能,您只能手动更新标头的这一部分。
<ul class="social">
<li class="facebook"><a href=""><i class="icon-facebook"></i></a></li>
<!-- add more icons here... -->
<!-- your custom icon below -->
<li class="houz"><a href=""><i class="icon-houz"></i></a></li>
</ul>