php - 在网站文本 Logo 的 Wordpress 主题中格式化从 PHP 生成的 HTML

标签 php html css wordpress wordpress-theming

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

header.php 文件使用此代码调用 Logo :

    <?php napoli_site_logo(); ?>

生成的 HTML 如下所示:

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

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

为了复制 Logo ,我从上面获取 HTML 并将其放在 header.php 文件中

    <?php napoli_site_logo(); ?>

我将 class= 的 HTML 更改为引用“logo1”而不是 Logo ,然后复制 CSS 文件中的所有 .right-menu .logo span 并将其更改为 .logo1 相反。

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

enter image description here

生成的 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 -->

如何让第二个 Logo 位于第一个 Logo 下方而不是并排放置?我知道如何使用基本的 HTML 格式来实现这一点,但是由于 HTML 是从 PHP 生成的,所以我迷路了。

最佳答案

应用以下 CSS:

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

Fiddle 显示它正在工作: https://jsfiddle.net/tet4djoc/

关于php - 在网站文本 Logo 的 Wordpress 主题中格式化从 PHP 生成的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49674771/

相关文章:

CSS3 动画文本。停止内容结束

css - 元素 <tr> 未缩放到容器

php - 与 mysql_fetch_array 中的变量链接

php - 将值添加到数据透视表 Laravel

html - 可以溢出 :hidden affect layout?

javascript - 检查 localStorage 中是否存在变量的值

jquery - Bootstrap 事件菜单更改导航栏高度

php - 将 CSS 类应用于从多个链接到同一页面、不同部分的点击链接

php - Symfony 5 Controller 不会验证错误

javascript - 如何根据按钮单击时输入字段中存在的数字创建 div,仅一次