将另一个社交媒体图标添加到WordPress标题


Adding another social media icon to wordpress header

我是修改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>