17713433920 info@mac163.com
重新设计您的WordPress网站
重新设计您的WordPress网站

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

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

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

设计配色方案

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

外墙和内墙的油漆方式取决于几个因素,而这正是您的个人喜好。

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

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

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

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

216种颜色对12种颜色

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

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

库勒

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

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

看看Kuler

HTML颜色表

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

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

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

查看HTML颜色表

GENOPAL

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

使用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)部分直接链接到字体:

<link href =“ http://fonts.googleapis.com/css?family=over+the+rainbow” rel =“ stylesheet” type =“ text / css” />

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

如果您不想或无法编辑header.php文件,只需在style.css中输入以下行即可导入字体:

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

上面的示例可让您在网站上的任何地方使用Google 的Over The Rainbow字体。例如,如果您想在整个网站上使用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打开搜索栏。在出现的搜索栏中,键入:

时间

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

<?php the_time('F Y'); ?>

现在,您要编辑的区域是(’F Y’)。

请允许我充实本节内容,以便为您提供补充。

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

2013年九月

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

2013年九月

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

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

F =月

j =每月的日期(日期)

Y = 4位数字的年份

y = 2位数字的年份

始终记得仅编辑方括号(’F Y’)中的字符,并且请注意,不要删除单引号。随意使用任意数量的字符即可获得所需的效果,并记得在完成操作后保存所有内容。

此外,您可以删除以下日期来摆脱日期:

<?php the_time('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

添加收藏夹图标的最佳方法是使用插件。我建议使用“ All In One Favicon ”插件进行更高级的使用,这是一种非常简单的方法,您可以使用“ The Simplest Favicon ”插件,该插件没有任何后端选项,您只需上传一个名为favicon的文件即可。 ico放在服务器上的正确位置。

使用插件添加Favicon
使用插件添加Favicon

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

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

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

将此行添加到头文件中(最好在顶部,其中看到其他<link rel =…/>标签:

<link rel =“shortcut icon” href =“ <?php echo gets_stylesheet_directory_uri();?> /favicon.ico” />

完成后保存。

刷新浏览器以查看新更改。

此时,您应该能够更改颜色,选择更好的字体,格式化日期和时间,使用图像并添加图标。

结论

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

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


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部