在杂志主题中使用标题图片

在本教程中，我将向您展示将徽标和其他标题图像添加到 StudioPress 的杂志子主题的最佳方法。

默认全宽标题图像尺寸为 960 像素宽 x 115 像素高。

您可以简单地转到外观 > 标题并上传大小完全相同的图像：

这是前端的样子：

非常适合，但需要更改标题换行背景图像颜色。

更改页眉换行背景图像或颜色

默认情况下，杂志主题使用图像来设置标题背景的样式，您可以在子主题图像文件夹中找到该图像。

图像的大小为 6px 宽 x 115px 高，并命名为 wrap.png。

如果您的标题图像具有相同的高度，您可以使用这些尺寸简单地制作一个新图像，与图像背景相同的背景颜色并替换默认值。

这是您可以在这篇文章的最右侧使用的示例图片 ==>>

否则，您需要更改图像的高度并修改子主题 style.css 和 functions.php 文件中的高度值。

这是创建新的 wrap.png 图像并替换图像文件夹中的默认值后的样子：

现在看起来很完美，但如果您不想要全宽标题怎么办？

更改页眉的宽度

您可以通过在子主题 style.css 文件的第 163 行的 CSS 代码中添加宽度来更改标题区域的宽度。

 #wrap { background: url(images/wrap.png) repeat-x; margin: 0 auto; }

复制上面的代码块并将其粘贴到文件末尾，然后添加默认为 960px 的宽度。

 #wrap { background: url(images/wrap.png) repeat-x; margin: 0 auto; width: 960px; }

这是将换行的宽度更改为与标题相同后的样子：

现在你的标题区域和二级导航菜单是 960px 宽度而不是全宽。

但是主导航菜单怎么样？

要更改主导航菜单的背景宽度，您只需从子主题 style.css 文件的第 352 行复制 CSS 代码并将其粘贴到文件末尾，您需要添加 3 个新声明：

改变这个：

 #nav { background-color: #111; clear: both; overflow: hidden;

对此：

 #nav { background-color: #111; clear: both; overflow: hidden; width: 960px; display: table; margin: 0 auto; }

结果如下：

现在让我们看看添加不是默认高度或宽度的标题图像。

更改标题图像宽度和高度

如果您的徽标或标题图像高于 115 像素的默认高度，则需要更改 functions.php 和 style.css 文件中的高度值：

在您的子主题 functions.php 文件的第 43 行，将高度的值从 115px 更改为 200px：

由此：

 /** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );

对此：

 /** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 200 ) );

现在转到外观 > 标题，您将看到图像下方高度值的变化已从 115 像素更改为 200 像素：

这是它现在在前端的样子：

更改 PHP 代码使您能够上传高度为 200 像素的图像，而不会强制您裁剪图像，但它并没有改变标题区域的实际高度。

为此，只需将 CSS 代码从子主题 style.css 文件的第 176 行复制到文件末尾，并将值从 115px 更改为 200px：

从此改变：

 #header { min-height: 115px; margin: 0 auto; overflow: hidden; width: 960px; }

对此：

 #header { min-height: 200px; margin: 0 auto; overflow: hidden; width: 960px; }

这就是它在前端的样子：

您现在需要做的就是将子主题图像文件夹中的 wrap.png 图像替换为高度为 6 像素 x 200 像素的图像。

这是现在的样子：

显然，如果您像我们在上一步中所做的那样将环绕宽度减小到 960 像素，则不需要添加新的环绕图像。

您可能还希望使新的环绕背景图像与您的标题图像颜色相同，您可以使用图形设计工具（如适用于 Windows 的 Paint.net 或适用于 Mac 用户的 GIMP）来实现。

添加标题右侧小部件图像

标题右侧小部件的默认宽度为 468px 宽度。

如果您将图像 HTML 添加到标题右侧区域中的文本小部件，如果图像为 468 像素，它将如下所示：

这显然需要修复。 您需要更改徽标或全宽标题的宽度，并修改小部件图像的填充。

要解决此问题，只需转到第 215 行并删除填充：

从此更改 CSS 代码：

 #header .widget-area { float: right; padding: 25px 0 0; width: 468px; }

对此：

 #header .widget-area { float: right; width: 468px; }

这就是它现在的样子：

看起来更好，但标题下方仍有一个需要修复的间隙。 在将徽标图像添加到标题的左侧之后，让我们回到这一点。

最后，我们可以在 PHP 代码中更改宽度的值，并在 Appearance > Header 下减小自定义标题图像的宽度：

在子主题 functions.php 文件的第 45 行，将宽度值更改为 460 左右：

 /** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 460, 'height' => 200 ) );

现在我们可以转到外观 > 标题并上传这样大小的图像：

这是前端的样子：

标题下方的小间隙仍然需要修复，那么我们该怎么做呢？

因为我在标题右侧区域的文本小部件中添加了图像的 HTML 代码，所以主题添加了 10px 的边距，因为图像居中，如下面的 CSS 代码所示。

要解决此问题，使其仅适用于该区域中的图像，请转到第 1155 行并将代码复制到您的子主题 style.css 文件的末尾：

并改变这一点”

 img.centered, .aligncenter { display: block; margin: 0 auto 10px; }

对此：

 #header .right-widget img.centered, .aligncenter { display: block; margin: 0 auto 0px; }

所以你有它。 这是最终结果：

结论

您可以对标题图像进行更多操作，例如增加右侧小部件区域的宽度并添加不同大小的徽标等。

我希望这能让您更好地了解在使用 StudioPress 的杂志子主题时如何使用不同大小的标题图像。