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

Question

我是在 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>';

                }
            ?>

Answer 1

创建子主题

首先要做的事情。编辑主题文件时，最好使用子主题。

来自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）复制到您的子主题的样式表中。然后用 houzz 替换“skype”。您还需要使用新图标编辑新的 icon-houzz 类，否则将使用 Skype 图标。

注意：如果您提供指向您正在使用的主题的链接，我可以提供更具体的说明。我的说明是完全根据您提供的代码示例编写的。

Answer 2

这是一种不好的做法，我不建议您这样做，但这是 一个 答案，它只是删除了 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>