设计师如何建立一个高大网站：没有个人网站都不好意思说自己是设计师
设计师如何建立一个高大网站：没有个人网站都不好意思说自己是设计师图4-26打开阿里云网站，然后在导航中找到“云虚拟主机”，如图4-26所示。Wordpress需要安装在服务器或者虚拟主机上，对服务器的环境要求为：PHP 5.2.4或更高版本；MySQL 5.0或更高版本。目前网上有非常多的服务器提供商可供选择，包括免费的和收费的，一般收费的服务器在速度和稳定性上都好过免费的，另外服务器的价格会高于虚拟主机的价格，个人网站使用虚拟主机即可，建议大家根据实际情况进行选择。下面以服务商“阿里云”为例讲解申请购买虚拟主机的方法。
想要快搭建高质量的个人网站，可以试着用Wordpress搭建属于自己的个人网站了，这也是很多设计师比较关心的事情。
认识Wordpress在前面讲过网页分为静态和动态两种，通过前面知识的学习应该完全可以制作一个静态页面出来，但是静态页面的局限性非常大，尤其是个人网站，可能需要经常更新作品或者文字，这就需要一个动态页面，而动态页面需要编写后台系统，好在现在互联网上有非常多开源的建站系统可供选择，Wordpress就是其中非常优秀的一款。
截止到本书完稿前，Wordpress的最新版本为4.9.4。Wordpress诞生于2003年，经过15年的发展，功能已经非常强大，在其官网上可以看到很多案例，如图4-25所示。
图4-25
Wordpress需要安装在服务器或者虚拟主机上，对服务器的环境要求为：PHP 5.2.4或更高版本；MySQL 5.0或更高版本。
目前网上有非常多的服务器提供商可供选择，包括免费的和收费的，一般收费的服务器在速度和稳定性上都好过免费的，另外服务器的价格会高于虚拟主机的价格，个人网站使用虚拟主机即可，建议大家根据实际情况进行选择。
下面以服务商“阿里云”为例讲解申请购买虚拟主机的方法。
打开阿里云网站，然后在导航中找到“云虚拟主机”，如图4-26所示。
图4-26
在“云虚拟主机”页面中可以看到不同价格的虚拟主机，主要区别是空间、内存、数据库大小和带宽等，如图4-27所示。个人网站选择最便宜的虚拟主机就足够使用了。
图4-27
在下面可以看到对应主机的详细信息，在“数据库类型”和“支持语言”中可以找到对应虚拟主机支持的PHP和MySQL版本号，如图4-28所示。
图4-28
选择好需要的虚拟主机后，单击购买按钮会跳转到配置界面，在这个界面中主要是选择虚拟主机的操作系统，因为需要用来搭建Wordpress，所以选择Linux操作系统，如图4-29所示。
图4-29
一般虚拟主机的操作系统需要根据网站开发的语言和数据库进行选择。网站的开发语言为ASP、.NET和HTML，数据库为ACCESS和SQL Server 则选择Windows系统；网站的开发语言为PHP、HTML和WAP，数据库为MySQL和SQLite则选择Linux系统。机房则根据所在地，或者目标主要访问用户所在地进行选择即可，比如有青岛和北京两个机房，目标用户主要分布在北京就可以优先选择北京的机房。距离越近延迟时间越少访问速度越快。无论是机房还是操作系统，后期都可以进行切换。
付款完成后，在网站的“管理控制台”中可以找到购买的虚拟主机，如图4-30所示。
图4-30
单击右侧的“管理”按钮即可进入虚拟主机的管理界面，在这个界面中可以找到虚拟主机的FTP登录名和密码、MySQL数据库的名称、用户名和密码等信息，这些可以用来对Wordpress进行配置，如图4-31所示。
图4-31
安装Wordpress准备好服务器或虚拟主机后就可以安装Wordpress了。Wordpress的安装非常简单，首先访问Wordpress的官网并下载Wordpress安装包，如图4-32所示。
图4-32
将下载到的wordpress-4.9.4-zh_CN.zip文件通过FTP工具上传到虚拟主机上。可供选择的FTP工具非常多，这里以FileZilla为例进行讲解，FileZilla是一款免费的FTP工具，有Linux、Windows和macOS版本可供选择，如图4-33所示。需要注意的是，这里的操作系统版本是个人电脑的操作系统，并非虚拟主机的操作系统。
图4-33
下载并安装后打开FileZilla，主界面如图4-34所示。要使用FileZilla进行传输，需要对FileZilla和虚拟主机进行连接。可以在阿里云的帮助中心找到阿里云虚拟主机和FileZilla进行连接的设置方法。
图4-34
当连接到虚拟主机后，可以在FileZilla右侧的“远程站点”界面中，看到虚拟主机的文件信息，然后找到htdocs文件夹并打开，如图4-35所示。
图4-35
将下载的Wordpress安装包解压，然后将解压出来的文件复制并粘贴到FileZilla右侧的远程站点窗口中，即可把这些文件上传到htdocs文件夹中，如图4-36所示。注意，不要把wordpress文件夹上传上去了。
图4-36
FileZilla下方会显示文件上传的进度，等文件全部上传完成后，打开浏览器输入http://xxx.xxx.com/wp-admin/install.php，其中xxx.xxx.com这个地址是虚拟主机的默认域名，大家在图4-31中的临时域名可以找到这个地址，每个人的虚拟主机的域名都不相同，用该地址替换xxx.xxx.com，如果一切无误浏览器会打开图4-37所示的网页。
图4-37
单击“现在就开始”按钮进行数据库配置，如图4-38所示。这里的所有信息请回到虚拟主机的管理界面进行查询并将其填入对应的列表中，其中，数据库名对应图4-31中的数据库名称；用户名对应的是数据库用户名；密码则是各位数据库的密码，如果不清楚点击重置密码即可重新设置；数据库主机则对应的是数据库链接地址。表前缀保持为默认即可。
图4-38
信息填写完成后单击“提交”按钮，若所有信息正确可以看到图4-39所示的界面，然后单击“现在安装”按钮，即可自动安装Wordpress。
图4-39
在“欢迎”界面中需要填写一些初始信息，如图4-40所示。这里的所有信息都可以按照自己的喜好进行填写，后续也可以随意修改，需要注意的是，这里填写的用户名和密码，是个人网站管理员的账号和密码，建议大家慎重填写，并防止这些信息的泄露。其中电子邮件地址也建议填写真实的邮件地址，在后续找回密码等操作中会有用到。
图4-40
一切填写完成后，单击“安装WordPress”按钮，这时就已经完成了Wordpress的全部安装工作，接下来可以像使用一个博客系统那样使用Wordpress来对个人网站进行管理。
Wordpress的基本使用
安装完成Wordpress后可以通过http://xxx.xxx.com/wp-login.php进入到自己网站的登录界面，输入安装时设置的用户名和密码即可进入Wordpress的后台，如图4-41所示。
图4-41
在这里可以对网站做一切管理，包括界面的设置、文章的发布和留言的管理等。可以通过虚拟主机的临时域名进入到网站，在后台进行任何变动后，都建议前往网站查看变动的效果。图4-42所示是Wordpress默认的网站内容。
图4-42
在后台中执行“外观>主题”菜单命令，即可对网站外观进行修改，默认会有3个主题，可以单击“添加新主题”来选择更多的主题模板，如图4-43所示。
图4-43
在这里可以看到所有的Wordpress主题列表，这个列表还在不断地新增中，找到自己喜欢的主题，把鼠标悬停上去，可以快速地进行预览和安装，如图4-44所示。
图4-44
还可以快速的筛选主题，单击“特性筛选”按钮，然后勾选筛选的内容，接着单击“应用过滤器2”即可对主题进行筛选，如图4-45所示。
图4-45
如果以上都无法满足需要，还可以通过互联网进行主题模板的添加。可以通过搜索引擎搜索“Wordpress主题”等关键词找到对应的网站。现在网上有非常多的模板可供免费下载使用，图4-46所示是一款图片主题，单击网页上方的“下载该主题”按钮，即可下载到一个包含该主题的zip文件。
图4-46
下载完成后回到Wordpress后台的添加主题板块，单击“上传主题”按钮，然后选择刚才下载到的zip文件并单击“现在安装”按钮，即可完成主题的安装，如图4-47所示。
图4-47
Wordpress主题的代码修改虽然可以自行选择主题，但是很多情况下主题也会有所限制，比如上述主题左上角的LOGO只能显示文字，我们希望修改为图片；左下角的Blank Portfolio by ThemePort的字样，我们希望修改为其他内容。
这就需要进行代码层级的修改了，通过前面对HTML和CSS基础知识的学习，这些都是小问题。要修改Wordpress的主题代码，只需执行“外观>编辑”菜单命令即可，如图4-48所示。
图4-48
要修改主题内容，需要找到该内容所在的位置，在上图中的右侧可以切换主题中的文件，不同的内容在不同的位置需要自己慢慢查找，并没有其他快速的办法，但是可以根据内容所在的位置优先找到大致的文件。
比如左下角的文字应该属于页脚位置，因此选择“主题页脚（footer.php）”文件，这时可以看到以下的代码，如图4-49所示。
<?php printf( esc_html__( '%1$s by %2$s' 'blankportfolio' ) 'Blank Portfolio' '<a href="https://themeport.net" rel="designer">ThemePort</a>' ); ?>
图4-49
接下来修改左上角的LOGO，这里的LOGO相对比较复杂一些。
根据LOGO所在的位置应该可以在“首页页眉（header.php）”中找到，但是主题中的内容会根据网站的名字进行变更，可能并不能直接找到这部分代码所在的位置，这时就需要借助chrome的开发者工具。
在chrome中打开这个网站，然后执行“设置>更多工具>开发者工具”操作进入开发者模式，如图4-50所示。
图4-50
这时通过查看“全栈设计”这几个字快速定位其代码，可以看到这里是<h1>和<h2>标签，并且其class值分别为site-title和site-description，如图4-51所示。
图4-51
再回到Wordpress的编辑界面，在“首页页眉（header.php）”中就可以快速的定位到这里的代码所在的位置，如图4-52所示。
图4-52
可以直接在里面的<a>标签中嵌套一个<img>标签，并且直接在<img>标签中设置图片的宽和高的属性，比类似于下面的代码。
<h1>
<a href="http://www.hfwen.com/quanzhan">
<img src="/quanzhan/logo.png" width="102px" height="30px">
</a>
</h1>
这里需要注意图片的位置，一般情况下需要把图片上传到虚拟主机的htdocs文件夹中。
这样便可以完全自定义个人网站了，Wordpress的功能远不止这些，并且通过插件的支持，其功能强大到远超你的想象，大家如果有兴趣可以深入学习，在Wordpress的官网可以查阅到Wordpress的官方文档。
域名的申请和绑定在申请虚拟主机时发现主机只有一个临时域名，且很难记住，实际上要申请一个顶级的域名也非常容易。
域名和主机可以选择同一个服务商，也可以选择不同的服务商，选择相同的服务商在绑定虚拟主机时可能更加方便一点。本文依然以“阿里云”为例，带大家了解一下域名的申请和绑定。
首先，在阿里云网站菜单中，找到域名注册，如图4-53所示。
图4-53
进入到注册域名的页面后，首先需要查询希望注册的域名是否被注册。在上方的输入框中输入希望注册的域名，然后单击“查询名”按钮即可，如图4-54所示。注意如果希望注册一个如www.xxx.com的域名，只需要输入xxx部分即可，一般个人网站可以考虑使用自己名字的拼音或者英文名。
图4-54
域名后缀可以不用选择，一般情况下网站会查询所有的域名后缀，直接单击“查询”按钮即可。在结果页，可以看到可以注册的域名以及对应的价格，还可以单击筛选按钮，只查看感兴趣的后缀域名，如图4-55所示。
图4-55
接下来就可以根据购买虚拟主机的方法购买域名，一个域名最长可以选择10年，且不保证域名的价格永远相同，因此对于自己特别喜欢的域名，如果觉得价格合适可以多买几年，否则域名如果到期后没有续费，就可能会被回收。
域名购买后可以在管理控制台中看到该域名，并对其进行管理，如图4-56所示。
图4-56
如果需要将域名绑定到虚拟主机上，单击“解析”按钮即可。一般情况下需要修改A解析，将其地址设置为虚拟主机的IP地址即可，不同的域名服务商和虚拟主机服务商对此可能会有不同的要求，具体方法建议大家查询对应服务商的帮助文档，如图4-57所示。
图4-57
总结需要注意的是，网站和域名都是锦上添花的东西，更重要的是网站本身的内容。如果没有优质的内容，网站只是一个毫无价值的存在。所以，要让个人网站发挥光芒，持续不断地进行更新才是王道。
爱读微课（iread360.com） | 色技手稿
