zh-cn:头部标题设计

  • A+
所属分类:wrodprss
广告也精彩

他们说,你不能只看封面就判断一本书的好坏,但每天都有人这样做。他们拿起了一本书,看看封面,然后放下它,或者打开它,仅仅是因为封面给了他一些期待。网站的包装往往也是人们判断的标准,并且第一印象通常来自于头部标题

网站的标题通常是人们首先看到的。从这个横跨页面顶部的桅杆头或标题艺术,人们可以对他们将要看到和阅读的内容做出全面的判断。那些说你不能根据封面来判断一本书的人,也说你只有30秒的时间来给别人留下好印象。在互联网的世界里,下一个网页是点击离开,你拥有的远远少于此。

我们将带您进入WordPress标题的体系结构,并提供如何定制它成为您自己的书封面的提示,以良好的第一印象吸引人们进入您的站点。然后我们将提供一些专家关于如何制作一个好的网站标题的提示。

WordPress的头部设计

默认情况下, WordPress的头部是一段简单的代码. 你不需要进入代码区去更改你所选择的WordPress附带的任何主题的头部信息. 你只需要进入管理后台>设置>普通面板里设定好博客名称、网站标题、网站描述,其余的工作WordPress会帮你做好。

在最简单的形式中,WordPress Classic Theme在wp-content/themes/./header.php模板文件中具有这样的标题代码:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

头被设置在h1 HTML标记中,并且具有一个模板标记,该模板标记与两个不同的选项或参数一起使用。您可以在bloginfo()的文档中了解关于这些参数的更多信息。基本上,第一个链接显示网站的URL,第二个链接显示管理>设置>常规面板中设置的博客或网站的名称。当用户将鼠标移动到标题标题上方时,可以单击标题返回到网站的主页或首页,如.>Settings>General面板中设置的。

WordPress Default Theme以背景中的图像为特色,并在wp-content/themes/default/header.php中呈现这样的标题:

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>
同样,以博客或网站名称为特征的模板标记位于链接中,但是这显示了与上面的URL请求类似的另一种用法。它以不同的方式获得相同的信息。它还从.>Settings>General面板中添加了站点的描述。

默认/Kubrick主题的标题

同样,以博客或网站名称为特征的模板标记位于链接中,但是这显示了与上面的URL请求类似的另一种用法。它以不同的方式获得相同的信息。它还从.>Settings>General面板中添加了站点的描述。

基本上,这两个头示例以不同的方式执行相同的操作。它们在标题中提供了具有图像潜力的信息,并使标题可单击以帮助网站导航。这只是在头中需要多少信息,以及如何显示这些信息的问题。

使用来自Classic Theme的第一个示例,图像仍然可以在背景中使用,在h1选择器的样式表中设置,但是第二个示例通过给它自己的划分,对头部中的图像的使用提供更多的控制。这些外观如何完全由样式表控制。

标题样式

如上面两个示例中所列出的,头部的样式包含在h1、头部、头部和描述CSS选择器中。这些都是在..css中找到的,不过可以在您正在使用的主题的header.php中的样式中找到。你必须检查两个地方。

在经典主题中,标题的CSS在一个选择器#header中找到。

#header {
	background: #90a090;
	border-bottom: double 3px #aba;
	border-left: solid 1px #9a9;
	border-right: solid 1px #565;
	border-top: solid 1px #9a9;
	font: italic normal 230% 'Times New Roman', Times, serif;
	letter-spacing: 0.2em;
	margin: 0;
	padding: 15px 10px 15px 60px;
}

背景颜色被设置为绿色阴影,并且在标题周围一直有边框,边框会改变颜色,从而产生凹陷的阴影效果。泰晤士报字体的大小是230%,比普通的字母间距要宽。左侧的填充将文本从左侧缩进。

通过修改每个样式属性中的信息,可以容易地改变所有这些,给边框一个较厚的宽度,并使边框都变成相同的颜色,改变背景颜色、字体大小和样式、字母间距等等。

默认WordPress主题标头也是如此,只是需要考虑更多的样式,它们在header.php的“head”标记和..css中找到,不过一旦设置了样式,就可以将信息移动到样式表中。

控制头部外观的样式可以在h1、头部、头部mg和描述CSS选择器中找到。就像经典主题一样,找到这些引用并在那里进行修改以改变外观。

通过引入一个名为Kubrickr的实用程序,可以简化对默认WordPress主题的标题图像的更改。它只要求您为标题提供一个新的图像文件名,然后为您切换它,因此您不必深入研究代码。如果您想要更改的只是标题图像,那么这是一个极其有用和简单的工具。

如果您确实想深入了解代码,请深入了解头部样式并进行更改。下面是关于手动更改标题图像的简单教程。

更改标题图像

有许多不同的标题图像和标题艺术可用于更改标题中的图像。默认主题或Kubrick WordPress主题的标题图像的样式,以及基于该主题的任何主题,要比经典主题的更加复杂。样式可以在header.php“head”部分的样式中找到,也可以在..css中找到。要仅更改标题图像引用,请打开header.php模板文件并查找以下样式:

#header {
  background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") 
  no-repeat bottom center; }
#headerimg  {
  margin: 7px 9px 0; 
  height: 192px; 
  width: 740px; }

要更改图像文件,请将“kubrickheader.jpg”替换为您上传到站点以替换的新图形图像的名称。如果它位于不同的目录中,则通过将bloginfo()标记替换为图形位置的特定地址来更改它。

如果您使用的图像大小相同,那么只需替换图像。如果大小不同,请在下一节#headerimg中填写图像的高度和宽度。如果您不知道,并且正在使用Windows,请以缩略图视图模式查看图像驻留在计算机上的文件夹。从Windows资源管理器菜单中单击View>缩略图。在缩略图视图模式下,找到您的图像并把鼠标放在上面。一个小气球提示将弹出列出尺寸。在样式中使用这些信息。否则,只需右键单击图像文件并选择Properties,它应该会给您文件大小和尺寸。

保存模板文件,并将其和图像上传到您的网站并查看。可能需要进行一些更改来微调布局和外观。

头部图像就绪后,是时候处理头部的其余部分了。打开..css样式表文件并查找以下内容:

  • h1
  • header
  • headerimg
  • description

您的主题可能具有也可能不具有所有这些,但是默认主题在样式表中的不同位置具有所有这些。所有这些或者其中一些可能需要更改属性来更改头部的外观。

如果更改标题图像或标题艺术的大小,请确保更改其他结构CSS选择器,如内容和侧栏,以适应标题大小的更改。

红车主题标题

标题图像规范

适合默认WordPress主题的标题图像大约是192x 740像素。如果要在任何WordPress主题中替换标题,请检查标题图像的大小,然后找到与该大小匹配的替换。如果选择比替换更小或更宽或高的头部图像,则可能必须修改网页的其他结构元素以允许头大小的改变。

如果要修改整个站点的主题,则需要考虑标题图像的大小,即整个页面或内容区域的宽度。最常见的两种屏幕大小是1024x768和800x600像素。然而,宽屏幕显示器正在逐渐普及,网页设计师现在需要准备1280x1024和1600x1200的屏幕宽度。

如果您将网站设置为“浮动”,位于浏览器窗口中间,两边都有空格,那么您可以将标题宽度设置为所需的任何内容。如果您正在设计具有灵活或“弹性”屏幕宽度的主题,那么标题的宽度就变得非常重要。

如果使用可以重复的头部图像,并且使用弹性宽度,则可以设置头部内的样式以重复以填充空间:

#header { 
background: url("/images/kubrickheader.jpg") 
repeat-x top left; }

这将头图像设置为水平地从左上角开始重复并穿过。您可以根据标题设计和布局需要的任何背景位置来调整它们。

标题艺术

网页设计领域的一个新术语是标题艺术。这些是标题图像,通常使用颜色、形状、符号、图像和文本的组合手工制作。它们需要一些时间和劳动来创造。虽然有一些免费的头像艺术网站,一些网站出售他们的手工头像。尽管照片可能以自己的方式独特,并传达所需的视觉风格,但手工制作的标题艺术品更容易与其他网页颜色匹配,并且由于其独特的性质,通常更美观。

选择预制的标题艺术有一些好处。艺术家们已经完成了工作,你所要做的就是选择最适合你的网站的设计。并且该图形已经准备好使用,已经设置了大小,并保存为小文件大小。

Digital Westex的WordPress Header Art的特色是大小多样的标题艺术,可以专门为WordPress免费下载。

标题艺术版权

如果不想生成自己的头文件,那么可以使用的最好的头文件艺术是任何具有“Creative Commons.e”的、专门允许其公共使用的头文件。阅读用于图像使用的个人许可证,以确保您具有在站点上使用标题艺术的权限。通常,您必须对作者进行属性、共享,而不是将其用于商业目的。如果有疑问,在使用之前一定要征得作者的同意。

由于头饰艺术是由设计师/艺术家“照原样”制作和授权的,一些头饰艺术未经艺术家许可不能修改。检查网站的版权和许可证,并询问您是否有疑问,并希望修改作品。

设计你自己的头部艺术

您还可以设计自己的标题艺术。任何平面设计软件程序都可以工作。流行的包括Adobe Photoshop、Adobe Elements、JASC PaintShop Pro、The Gimp和Macromedia Fireworks。图形设计软件应该有能力调整大小和控制分辨率和类型的图像时,保存。标题艺术的大小应该是要放入的标题容器的大小。

您可以使用自己的照片、艺术品、字体和图像的任何组合来创建标题艺术。完成后,将其保存为“for web”作为jpg、gif或.png文件。有关使用哪个的说明,请阅读Sitepoint的GIF-JPG-PNG的区别文章。这些文件类型将压缩图像的分辨率,减少文件的大小。一般来说,避免文件大小大于50K,因为较大的文件大小会减慢站点访问时间。

快速跟踪主题标头

隐藏标题文本

许多主题和主题设计者都希望标题只带有图片,不带有文本。有些将文本放在图形图像中,因此不需要实际使用文本。一个选项是删除生成标题和描述的模板标记。另一种选择是把它留在里面,但是把它藏起来。

为了在代码中隐藏标题文本,不要更改模板文件中的任何内容。只更改CSS。添加display:none到您不希望显示的CSS选择器中。例如,为了在h1选择器中隐藏文本:

h1 {display:none; font-size: 230%; color: blue;.......

它仍然存在,但是已经命令浏览器不以任何方式显示它。容器字面上是“不在那里”。

它可能是隐藏的,但是一些网页阅读器和搜索引擎仍然会找到这些信息。如果您认真考虑使站点可访问,一些较新的文本阅读器将访问样式表,并且不读取标记为display:none的元素。解决这个问题有两种流行的方法。一种是使用display:none,如上所述,但是还包括一个听觉样式表,该样式表将选择器更改为display:block,“打开可见性”。另一种方法是通过负缩进从字面上“离开页面”定位内容。这里有一个例子:

h1 {
   font-size: 0;
   text-indent: -1000px; }

这种技术将整个h1标签及其内容物理地移出网页。屏幕阅读器仍然会“读取”文本,因为它在那里,但它不会显示在页面上。到目前为止,广泛的测试已经证明,这种技术适用于大多数浏览器和所有屏幕阅读器。

有关技术和听觉样式表的更多信息:

屏幕阅读器真正说什么?(无障碍和显示:无)

测试屏幕阅读器和显示:

华纳图像置换的现状与看法

隐藏文本但不隐藏屏幕阅读器

W3的听觉样式表

关于网页设计的听觉样式表

听觉样式表

丰富风格指南

使整个标题可点击

为了使整个标题,图形和所有,可点击,你必须把标题图形内的链接。有两种方法可以做到这一点。您可以手动将图形直接放入WordPress主题中,或者可以使用样式表定义链接大小区域以包含标题艺术区域。

要通过将标题艺术嵌入到标题中来使标题艺术可点击,请在WordPress主题的wp-content/themes/./header.php模板文件中更改以下内容:

<div id="header">
     <h1><a href="<?php bloginfo('url'); ?>/">
     <?php bloginfo('name'); ?></a>
</h1>
</div>

to:
  <div id="header">
    <a href="<?php bloginfo('url'); ?>">
  <img src="http://www.lixiongzhao.com/wp-content/uploads/2018/12/headerimage.jpg" alt="zh-cn:头部标题设计" alt="<?php bloginfo('name'); ?>" />
    </a>
     <h1><a href="<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>">
         <?php bloginfo('name'); ?></a>
     </h1>

您可以将h1标题样式设置为重叠或位于下方,甚至在标题中都不可见。

为了使标题的整个区域可点击,标题必须为h1锚HTML标记设置宽度区域,以使可点击区域覆盖背景中的标题图像。样式在样式表中设置。

HTML和WordPress模板标签如下所示,与上面相同:

<pre><div id="header">
     <h1><a href="<?php bloginfo('url'); ?>/">
     <?php bloginfo('name'); ?></a>
</h1>
</div>
然后,CSS将被设计成类似这样的样式,以扩大可单击链接区域,并隐藏标题文本(可选),根据自己的设计需要定制。
#header h1 a {
	width: 400px;
	height: 100px;
	display: block;
	background: url(images/headerimage.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

另一个选项是添加脚本,使标题部分可点击,这可能不是对所有浏览器都适用。这显示在默认WordPress主题(Ku.)中,标题是可点击的:

打开wp-content/themes/default/header.php模板文件。

从<div id="header">更改为:

<div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;">
如果希望标题的两个文本区域都是可单击的,而不是整个标题图像,请使用以下内容使标题艺术和博客标题和描述可单击的。
<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a href="<?php echo get_option('home'); ?>">
     <?php bloginfo('description'); ?>
   </a>
  </div>
 </div>
</div>

旋转标题图像

有几个脚本可以让您在标题、侧边栏或任何模板文件中旋转图像。我们将研究其中的一种,随机图像旋转器的使用。

将脚本保存到一个单独的文件夹中,在该文件夹中,您希望在标题中旋转的标题图像。对于这个示例,将其命名为rotate.php.要使用它作为随着网页的每次加载而改变或旋转的背景图像:

#header { 
background: url("/images/headerimgs/rotate.php") 
no-repeat bottom center; }
要将其实际放入您的头部或站点的其他位置,请在头部分区中添加像这样的图像链接:
<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

图像旋转脚本包括:

Photomatt的随机图像旋转器

来自自动实验室的图像转子PHP

WordPress随机化插件

RDC主题头

将导航添加到头部

标题是另一个可以向网站添加导航元素的区域。通常这些是标题顶部或底部的水平菜单。要添加这些元素,请在标题内创建一个新分区,以样式化标题导航元素。

这可以非常简单,只要使用List Categories模板标记之一在标题顶部显示您的类别即可。让我们看一个使用list_cats()标记的示例。

在这个示例中,list_cats()模板标记被设置为在没有日期或文章计数的无序列表(<ul><li>)中根据ID对类别列表进行排序,不隐藏空类别,在链接中使用类别“.”作为标题,不显示父类别的子类,并且排除类别1和33。它位于自己的“类别”划分中。注意,到主页或首页的链接已经在列表的开头手动包含。

<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->
要样式化此列表,..css中的#categorylist可以是:
#categorylist {font-size:12px; font-style:normal;
        text-transform:uppercase; }
#categorylist ul {list-style-type: none; list-style-image:none; 
        margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论!