Question

我是新手修改wordpress中的php文件。我需要在我的标题中添加另一个未包含在模板中的社交媒体图标（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

现在你有一个li类的houzz，你需要为它添加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>

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

2 个答案: