格式化WordPress主题中的PHP生成的HTML，用于站点文本logo

我正在使用Wordpress主题建立一个网站, 该主题内置了图形和文本徽标选项。我想使用内置的文字徽标功能, 但是我想将徽标分开, 以便可以在徽标中使用多种字体和格式。

header.php文件使用以下代码调用徽标：

    <?php napoli_site_logo(); ?>

生成的HTML如下所示：

    <a href="http://www.psphotography.com/" class="logo">
         <span>Paige Stumbo</span>      </a>

它从主题设置中的字段中提取徽标文本, 并在主CSS中引用.right-menu .logo span以获取其格式。

要复制徽标, 我从上方获取HTML, 并将其放在下面的header.php文件中

    <?php napoli_site_logo(); ?>

我将class =的HTML更改为引用” logo1″而不是徽标, 然后在CSS文件中复制了所有.right-menu .logo范围, 并将其更改为.logo1。

这给了我我想要的结果, 两个单独的文本徽标现在可以并排显示在主页上。

生成的HTML如下所示：

    <!-- LOGO -->
    <a href="http://www.psphotography.com/" class="logo">
         <span>Paige Stumbo</span>      </a>
    <a href="http://www.psphotography.com/" class="logo1">
         <span>PHOTOGRAPHY</span>       </a>
    <!-- /LOGO -->

如何获得第二个徽标而不是第一个徽标并排？我知道如何使用基本的HTML格式来实现此目的, 但是由于HTML是从PHP生成的, 所以我迷路了。

#1

应用以下CSS：

.logo {
  display: block !important; 
}
.logo1 {
  display:block !important; 
}

小提琴显示它正常工作：https：//jsfiddle.net/tet4djoc/