重新设计您的WordPress网站(添加个人风格)

没有其他平台可以像WordPress那样让您自定义网站外观的能力。这是WordPress在发布商和网络开发人员中同样受欢迎的原因之一.


您可以立即使用基本(单调)的WP主题,添加徽标,编辑几行代码,更改CSS并拥有一个外观专业(但仍然很风趣)的网站。这项工作很简单,本教程将向您展示如何做.

你准备好了吗?让我们从第一件事开始。颜色.

设计配色方案

为您的WordPress网站开发配色方案时,需要考虑很多因素。可以把它想象成是在粉刷您的房屋或石头和灰泥的商店。您必须确定墙壁上要使用的颜色以及门所要使用的颜色.

外墙和内墙的油漆方式取决于几个因素,最重要的是您的个人喜好.

为WordPress网站着色也没有什么不同。您想要什么颜色的链接?您的背景,您将如何使其最具吸引力并让您的竞争对手望而却步?哪种颜色可以补充(甚至增强)您的信息?您如何想要您的文字?天空是可在WP网站上使用的颜色选择的限制.

您必须确定从开始就将使用的所有颜色。我建议您只坚持三种颜色,但是您可以随意使用任意多种颜色.

只是不要过度使用它,否则最终将以所有颜色稀释您的营销信息。毕竟,过量的东西都是有毒的,所以无论您选择什么颜色,确保和谐都非常重要.

最好在大多数人都能看到(并希望)喜欢它们的地方使用最多的颜色。我说的是您的徽标和标头。这些区域正是您需要最多颜色的地方。您网站的其余部分可能色彩斑colorful,但内容更丰富.

216种颜色对12种颜色

我们都熟悉十二种基本颜色,但是网络上充满了各种颜色及其不同​​的阴影。因此,在营造专业外观的同时选择散发出个人温暖感的颜色可能是一项艰巨的任务。.

不过,您很幸运,因为我在Internet上钓鱼,发现了以下工具可帮助您入门:

库勒

库勒

Kuler由Adobe设计,旨在帮助Web开发人员创建一流的配色方案。 Kuler是一个在线工具,意味着您可以随身携带并在任何地方使用它,但是还有一个桌面应用程序可以帮助您直接从桌面开发配色方案。此外,如果您具有Adobe ID,则只需单击一下即可保存配色方案.

Kuler可使用多种颜色规则,包括单色,复合,互补,类比和三合色等。.

看看Kuler.

HTML颜色表

知道您将要使用的颜色只是工作的一半。要实现您的颜色,您必须将它们转换为HTML代码.

html颜色图表

这是HTML颜色图表的来源。它是一个彩色图表,其中包含200多种(实际上为216种)Web颜色代码。拥有图表,在阳光下没有任何颜色应该证明难以实现.

这些代码可与HTML,CSS,Adobe PhotoShop和其他图形处理工具一起使用,因此您在世界上可以自由选择自己喜欢的颜色.

查看HTML颜色表.

GENOPAL

如果您在选择颜色方面需要帮助,可以选择GenoPal。这是一个非常简单的网络应用程序,可将调色板“固定”到浏览器窗口。当您选择颜色时,它们以彩色“便签”的形式出现在浏览器中。 ��

基因型

使用GenoPal,您可以增加亮度并控制色相饱和度,因此可以精确获得所需的阴影.

在他们的网站上,正在开发移动应用程序。一旦启动,它将允许您随身携带应用程序并在移动设备上显示颜色。他们的设计独具匠心,并且该应用程序确实有效,这一事实明确表明GenoPal意味着业务.

七彩

ColorHexa是该版本的在线版本 艺术家的画板. 该网站使您能够通过输入颜色代码来混合颜色。他们的先驱应用程序是颜色混合工具,但它们还具有渐变生成器和颜色减法器。那不是在工作的天才吗?

六色

ColorHexa搅拌机如何工作?您所要做的就是输入颜色代码,并用“ +”号分隔,然后ColorHexa完成其余工作。例如,我尝试过:

#ff0000 +#0000ff +#ff00ff,我得到了#aa00aa。此外,它们还会为您提供整页的颜色信息(以您的最终颜色为例,例如#aa00aa)。这是您必须尝试体验前所未有的色彩融合的一种工具.

看看ColorHexa.

终极CSS梯度生成器

终极色彩渐变发生器

就生成颜色渐变而言,这可能是最好的工具。它完全在线,可帮助您生成刷新的中点及其相应的CSS代码。他们还提供了Chrome和Firefox附加组件,可让您将应用程序集成到浏览器中,以便更轻松,更快速地访问.

有一个预览区域,您可以在其中看到渐变,因此您所要做的就是在您认为合适时生成渐变,然后 复制粘贴 生成的CSS代码。真的很简单,而且它们的颜色比您用过的要多.

查看Ultimate CSS Gradient Generator.

挑选字体

现在,我向您展示了如何选择和混合毕加索之类的颜色,让我们来尝试一下字体.

您的颜色和网页设计会吸引人,但这是您的话语,即您的页面和帖子会让人们呆在身边.

我们一直在忙于创建最好的故事,所以我们大多数人都忘记了字体也很重要。但是您选择的字体会影响人们与您的网站的交互方式。使用正确的字体,您的目标受众将想要停留并最终点击进入您的其他页面,这正是您想要的。订婚.

那里有一百万种字体,但是不幸的是,用户只会看到他们计算机上安装的字体。如果您使用的字体未安装在他们的计算机上,他们会看到一个接近的替代字体(或完全不同的字体),不会达到您想要的效果.

“玩字体就像玩火。有时,它可以点亮网页上的火柴,闪烁漂亮的文字。其他时候,它会烧毁整个房子。” – cameraontheroad.com的Lorelle.

您可以使用样式表控制字体(并创建所需的效果)。在您的主题中,样式表通常是 style.css 文件。您可以使用此文件来控制字体的颜色,字体/字体系列的类型,字体大小以及所选字体的其他方面.

以下是一个很好的例子:

#menu {font-family:Arial,Helvetica,Sans-serif,Verdana,“ Times New Roman”;字号:0.8em;颜色:黑色;}

上面的代码将菜单中的字体大小设置为0.8em,并将颜色设置为黑色。还将字体设置为Arial,但是如果用户的计算机上没有Arial,Helvetica将接管。如果他们没有Helvetica或Arial,Verdana,Sans-serif或Times New Roman将接管.

通过控制字体,可以创建更一致的外观.

但是,要一劳永逸地解决字体不一致的问题,可以使用嵌入字体。通过使用嵌入式(或外部)字体,用户无需在计算机上使用该字体.

另外,这是容易完成的工作.

所有您需要做的就是打开您的 style.css 并将以下代码放在顶部.

@ font-face {font-family:Museo300; src:url(“ fonts / museo300-regular.ttf”)格式:('truetype'); font-weight:normal;}

注意:您必须定义字体的名称和位置。在上面的示例中,“ Museo300”是字体,已保存在名为“ fonts”的文件夹中.

例如,要在整个网站上使用字体,您可以编写:

身体{font-family:Museo300;}

您可以对网站上的任何元素使用嵌入字体。例如…

#menu {font-family:Museo300;}

…将在菜单中设置Museo300.

上面的方法意味着您必须下载字体并将其上传到服务器,如果您问我的话,这是非常繁琐的.

然而, ÿ您不需要下载任何要使用的外部字体.

您可以像这样从头(header.php)部分直接链接到字体:

您如何以及在哪里添加以上行?你需要打开你的 WordPress管理面板–>外观–>编辑器–> header.php

如果您不想或无法编辑header.php文件,只需在您的计算机中输入以下行来导入字体 style.css

@import url(http://fonts.googleapis.com/css?family=over+the+rainbow);

上面的示例可让您使用 彩虹之上 Google在您网站上任何位置的字体。例如,如果您想在整个网站上使用Over The Rainbow,则可以使用以下代码:

正文{font-family:“彩虹之上”;}

Google提供 超过600种免费字体家族, 所以玩!

更新(13/12/13):如果您想轻松地将Google字体添加到WordPress网站,可以使用 Google排版插件. 除此之外,您可以在Tom Ewer的《使用Google字体改善WordPress网站字体》中了解有关Google字体以及如何实现它们的更多信息。.

有关使用字体的更多资源

用于添加字体的WordPress插件

对于那些不想深入研究代码的人,您可以随时安装WordPress插件来为您完成一些繁重的工作。以下是WordPress.com上一些更流行的免费字体插件:

你玩得开心吗?让我们继续…

 格式化日期和时间

您是否曾经去过一个WordPress网站,该网站以一种非常漂亮的语气显示了日期或时间,使您感到与网站有关的一个完整的菜鸟?这些网站的所有者只是玩过 单行代码 现在您无法获得足够的日期。哈哈.

好消息,您可以编辑 这行代码 并让您的读者感到惊讶.

在你的 WP仪表板, 导航 出现, 然后到 编辑 如下所示:

格式化日期

到达那里后,您将可以在最右边看到.php文件的列表:

单发

单击单个帖子(single.php),一旦打开,请按来打开搜索栏 Ctrl + F. 在出现的搜索栏中,键入:

时间

您将立即发现可能类似于以下内容的行:

现在,您要编辑的区域是 (“ F Y”).

请允许我充实本节内容,以便为您介绍一些要充实的内容。.

(“ F Y”)中的“ F”代表 该月的全名 “ Y”代表 4位数字的年份. 因此,如果您使用(’F Y’),则日期将如下所示:

2013年九月

如果在F和Y之间加逗号,则应该有以下内容:

2013年九月

如果要添加日期和其他元素,则可以使用以下字符:

l =日期的全名(小写L)

F =月

j =每月的日期(日期)

Y = 4位数字的年份

y = 2位数字的年份

下表中可以找到更多字符:

格式化日期表

这里是一些示例:

格式化日期示例

始终记得只编辑括号内的字符(“ F Y”),然后, 做记录, 不要删除单引号. 随意使用任意数量的字符以实现所需的效果,并记得在完成操作后保存所有内容.

更重要的是,您可以删除…来摆脱日期。

…就像不久前我在博客上所做的一样。 ��现在,我所得到的是 由弗雷德(Fred)发表在某某类别…等等等等. 完全没有日期.

您为下一部分加油了吗?你最好.

找不到the_time函数?

可以,因为现在很多主题都在使用the_date()函数而不是the_time()函数,这实际上是更好的做法。如果您的主题使用the_date()函数,则无需进行任何编辑,因为您只需在“设置->常规”下更改数据在信息中心中的显示方式即可。.

使用图像

这可能是本教程中最简单(也是最短)的部分。但是,如果您真的不熟悉WordPress,则添加图像可能是一个挑战.

WordPress允许您在创建新帖子或页面时通过上载实用程序或(添加媒体按钮)添加图像。所有您需要做的就是将光标放在您要在帖子或页面中放置图像的位置,然后单击“添加媒体”.

添加媒体

上载实用程序打开后,您可以添加其他详细信息,例如标题,大小,链接和对齐方式.

上传工具

该区域位于上载实用程序的右侧.

要了解有关添加图像的更多信息,请查看以下资源:

而且,如果您不确定在哪里可以找到一些很棒的免费图片,请查看我们写的文章,其中涵盖了WordPress的最佳图片资源.

看到?我告诉过你它将是最短的

添加图标

在我们完全忘记图像之前,让我们创建一个favicon并将其添加到您的WordPress网站。网站图标(或收藏夹图标)是用于为网站添加书签的图标.

网站图标将帮助您的读者直观地识别您的网站.

通常,网站图标是扩展名为.ico的16 X 16像素方形图形文件。扩展名代表图标.

如何创建一个图标

您可以在线创建收藏夹图标,也可以使用图像编辑程序(例如GIMP)或任何其他可以保存.ico文件的图标创建。大多数在线服务都是免费的.

尽管图片通常很小(16 x 16像素),但网站图标应完整代表您的博客。您用于创建网站图标的图像或文字应代表您的在线业务.

如果您使用图像编辑器:

  • 相应地裁剪或添加空间以确保您的图像是正方形的
  • 将图像调整为16 X 16像素,然后
  • 将图像另存为 favicon.ico

可用于创建收藏夹图标的联机服务包括(但不限于):

创建收藏夹图标后,他们将允许您将其下载到计算机上,因此请不要担心.

如何在WordPress中安装Favicon

如果主题的主文件夹中还有另一个图标,则需要使用FTP客户端或可用的任何方法将其删除。建议使用FTP客户端,因为它们易于使用,您可以快速找到所需的文件.

在本教程中,我使用faviconer.com为博客创建了一个图标,并使用Filezilla删除了现有的图标.

手持favicon.ico文件,然后将其上传到主题的主文件夹中。这是您当前主题的存储文件夹.

然后将您的网站图标的另一个副本上载到网站的根文件夹(通常是public_html)或主目录中,这样,当您键入yoursite.com/favicon.ico时,便可以看到您的网站图标。这会自动将您的收藏夹图标添加到供稿中.

完成上传后,就可以开始使用favicon.ico了。这是您应该做的:

使用插件添加Favicon

添加收藏夹图标的最佳方法是使用插件。我建议使用“多合一图标”插件可用于更高级的用法,您可以使用“最简单的图标”没有任何后端选项的插件,您只需在服务器上的正确位置上传一个名为favicon.ico的文件.

多合一图标

手动将收藏夹图标添加到模板

有些人可能希望(尽管这不是最好的方法)手动将其图标添加到模板中,请按照以下步骤操作:

  • 登录到您的 仪表板
  • 导航 出现
  • 然后到 编辑器(主题编辑器)
  • 查找并打开 header.php(标题) 文件

将此行添加到您的头文件中(最好在顶部看到其他 标签:

结论

关于重新设计WordPress网站的讨论太多了,以至于试图在一篇文章中涵盖所有内容对您来说是无益的.

为了使您受益最大,最好将本教程分为几个部分(这是第1部分)。随着日子的流逝,我们将分享更多的重新设计技巧,所以请当心。这些教程的目的是帮助您创建有史以来最好的WordPress网站,并让您感到更幸福,因为这一切都是您自己完成的.

如果您想分享您的意见或在讨论中添加一些内容,请随时在下面的评论部分中留下您的评论。!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map