wordpress主题制作教程

WP主题开发03：如何制作wordpress主题的效果图？

在我们开发wordpress主题模板时，我们首先要有一个参照物，这个参照物可以是一个word描述文档，可以是一个网站，也可以是一个制作好的效果图。一般情况下，客户会通过word文档的形式来描述他对wordpress主题的功能需求，但这并不能够给人以形象化，也就是说，开发者并不能具体了解到——这处wordpress主题到底长得是个什么样子。这时，我们就要有一个主题效果图或参照网站来作为我们开发的参照物，这样，我们才可以有的放矢，而不会毫无头绪。

那么，我们该怎样来制作wordpress主题模板的效果图呢？这就要看具体情况了，如：团队联合开发、个人开发等等情况。主要分为以下三种方式来制作效果图。

方法一：通过专业的设计软件来设计wordpress主题的效果图。

如果你是IT团队来开发wordpress主题，团队中一般都会有一个专业的美工人员，这时，就可以通过美工人员来通过专业的设计软件来设计wordpress主题的效果图。

或者，你是一个个人开发者，而同时，你也精通photoshop这类效果图设计软件，那么，也可以自己通过软件来设计wordpress主题的效果图。

photoshop设计效果图

再或者，你不擅长这类设计软件，你也可以在淘宝或其它类似网站，花钱请别人来设计这个wordpress主题模板的效果图，其它所花的费用也不是很高，网上，几十元到几百元的都有。总之，最终的目的，是要获取一个漂亮的wordpress主题效果。

方法二：通过网站截图来制作wordpress主题的效果图。

这种方法，主要针对的是这样一类客户：1、很中意一个网站的整体布局，觉得正是自己所要的；2、要求不高的客户。对于这类客户，我们就没必要再去请美工人员去专门设计wordpress效果图了，我们只需要有针对性地截取他们所提供的网站的截图就可以了。

怎么截取网站的网页？大家都知道，一般情况下，一个网页往往都很长的，需要拉动滚动条，才能看完整个网页。这时，如果只用普通的截图软件（如：QQ截图）是截取不了整个网页的。那我们使用什么来截取整个网页呢？

长网页截取效果图

嗯，曾经为了拷贝别人的网站，我就使用搜狗浏览器的一个网页截图功能，来截取整个网站的所有需要的页面：首页、分类页、文章页、单页面、搜索页等等。至于其它浏览器，我不知道有没有这个功能，但我一直在使用搜狗浏览器的这个功能，这也是使用它的一个意外发现。我们只需要点击搜狗浏览器 “文件”菜单下的“另存为图片”，就可以把当前浏览的网页保存为一张图片（如上图）。

方法三：通过手绘来制作wordpress主题的效果图。

如果不会photoshop这类设计软件，也没有看中的网站作为参照，这时，如果你有手绘的功底，也可以自己来手绘wordpress主题的效果图。如果你有画画的功底，你可以通过手中的笔来手绘效果；如果你没有画画的天赋，你也可以通过 笔和尺子在白纸上画出一个网站的基本轮廓，也就是我们经常说的草图。作为经验丰富的wordpress主题的开发者，完全可以根据一个草图来开发主题的。当然，如果想进行下一步中的切图，也可以通过扫描仪把草图扫描到我们的电脑中。

手绘草图 效果图

通过上面的三种方法，我们可以制作出不同情况不同需求下的wordpress主题效果图。当然，如果你够专业，或者你们是一个团队开发，那么肯定是选择第一种方法来制作wordpress主题模板的效果图了。而针对个人开发者来说，就不是那么回事了，并不是每一个开发者都是美工高手，有的开发者，可能从来都没有碰过设计软件。选择哪种方式来制作效果图，你可以根据具体的情况来做决定。

WP主题开发02：wordpress主题开发流程

任何企业，在生产产品时，都会有一个操作流程或生产流程。比如服装企业，他们会首先通过时装设计师设计出服装样式效果图片，然后，会叫工厂的打板人员根据设计图来打出一个样板，接着会放到工厂里，让服装工人根据板样来制作服装，制作好后，还会对服装进行熨烫、绞边等等操作。我们开发wordpress主题模板，同样也是需要有一个流程的，尤其是IT公司里团队开发时。流程的好处是：可以让不同特长的员工分工合作，达到最好的效率。

下面，我们一起来看看wordpress主题开发的流程有哪些吧。

第一步：美工设计wordpress主题模板的效果图。

在我们开发wordpress主题模板前，我们需要先知道，这个模板到底长得是一个什么样子，也就是说，我们的开发，要有一个目标，然后按着这个目标来进行一步一步地开发。当然，我们可以通过文本来描述网站的样子。但是最直观的，当然是网站的效果图了。

?通过效果图，我们就知道这个网站长成什么样子，头部是什么个样子，底部是个什么样子，中间主体又是个什么样子，这些都可以一目了然。在企业里，一般都会由美工去设计这个效果图。如果是个人的话，如果懂平面设计软件，也是可以轻松弄出来的。我们常用来设计的软件一般是photoshop。当然，也有其它的绘图软件。

第二步：对效果图进行切图操作。

wordpess主题的效果图设计好后，我们接下来就要对它进行切图的操作。其实，就我个人而言，在常规开发中，这个切图步骤是可有可无的。对于一个wordpress主题开发的高手来说，他们也许只需要看着效果图来开发就可以了。当然，对IT企业来说，切图还是有必要的，因为把效果图切成小图后，前端就可以直接把这些小图放到前端页面上展示，可以直观地让客户看到效果。切图软件的选择，我们可以选择photoshop来进行，photoshop就带有切刀工具。

第三步：根据效果图编写静态模板。

切完图后，我们就进入到第三个流程——编写静态模板。wordpress主题的静态模板编辑是一个必须的流程，这个过程是逃不掉的。这个流程中，我们会把切图切下来的小图片，通过HTML代码来进行组合布局，达到第一步中的效果图的效果。这样，我们就可以在浏览器中观看到它的网页版的效果了。静态模板虽然不是真正意义上的wordpress主题模板，但是，它已经让网站的轮廓可以通过浏览器就可以查看，这样，我们就可以把模板的静态展示，给客户观看，提出意见。然后不断完善，达到客户的需求。

第四步：把静态模板转换成wordpress动态模板。

这一步是正式把效果图演变成真正的wordpress主题模板。在我们做好了静态模板后，我们就可以根据它的布局，来使用wordpress程序所提供的函数来调用数据库中的数据，让前端的页面的数据不再是死数据——一成不变。我们的网站需要的是，只要后台发表了文章，后台的数据就要做出相应的变化，这就是动态网站优势。如：顶部导航菜单，我们就可以在后台进行设置，然后，在wordpress主题的动态模板中，通过 wp_nav_menu()函数来调用，就可以在前台页面的顶部展现。

第五步：安装动态模板到网站。

一般情况下，我们都会在本地电脑中，一边开发wordpress动态模板，一边对它进行测试。所以，在我们写完wordpress动态模板后，我们对它的测试工作也同时完成了。当然，你仍然可以在本地环境中对它进行多次的测试。

这时，我们可以直接在我们的服务器上的网站上来安装我们开发好的wordpress主题模板了。安装wordpress主题很简单，可以通过2种方式来安装：1、直接通过FTP软件把我们开发好的wordpresss主题模板文件上传到网站根目录下的/wp-content/themes/ 目录下；2、也可以先把wordpress主题模板的所有文件压缩成一个zip后缀的压缩文件，然后在wordpress网站后台的主题菜单中去上传安装。如果正确安装wordpress主题，可以参阅锐锋堂相关的文章，里面有详细的解说。

通过上面的介绍，我们了解到，我们在开发wordpress主题模板时，全经哪几个流程。只要我们按照这个流程来认真操作，就会有效减少出错的机率。就算出现错误，我们也可以在最短的时间内，找到是在哪个流程中出现了错误，对于企业来说，就很容易找到出错的当事人，就可以有针对性地进行修补，可见，开发流程还是非常重要的。

WP菜鸟建站17：wordpress主题的导航菜单怎样设置？

一般情况下，每一个网站都会有自己的头部导航菜单，wordpress网站也是一样。在我们为wordpress网站安装好主题后，主题一般都会提供这种菜单导航功能，当然，也有一些极少数的极个性的主题，它没有菜单功能，而是把导航菜单写死了，不需要我们在wordpress网站的后台对它进行设置。但是，作为一个合格的wordpress主题开发者，是一定要为自己的主题添加导航菜单功能的。那么，我们怎样设置wordpress网站的导航菜单呢？

第一步、进入wordpress导航菜单的设置页面。

进入到wordpress网站后台后，找到左侧的“外观”，点击它，这里我们可以看到它的下方有一个“菜单”选项。点击这个“菜单”，右侧内容栏会展示菜单设置页面。

第二步、创建一个菜单。

在我们还没有创建菜单的时候，左侧的“添加菜单项”的选项们是灰色的。右侧是创建菜单表单。如下图：

我们在右侧的“菜单结构”中填写“菜单名称，然后保存，就创建好了一个菜单。只是还是一个没有任何内容的菜单。如下图：

第三步、为这个菜单添加菜单项。

我们要为这个创建好的空菜单添加菜单项，所以，我们要从左侧的“添加菜单项”勾选一些选项添加到这个空菜单中。

1、添加“首页”菜单项。

点击展开左侧的“自定义链接”，填写“首页”链接的URL地址，再填写“链接文本”，这里我们填写的是“首页”这两个字。如下图：

再点击“添加到菜单”按钮，就添加到右侧的空菜单中，如下图：

2、添加“分类目录”。

点击展开左侧菜单项中的“分类目录”，我们先勾选“瘦腿、瘦腰、瘦脸”，

然后点击“添加到菜单”按钮，这几个分类目录名就添加到右侧的空菜单中了，如下图：

第四步、保存菜单。

给空菜单添加好菜单项后，我们再给这个菜单勾选在前面页面显示的位置（有的主题没有这个选项），比如：我们这里勾选了“第一导航菜单”（如下图），

?然后点击“保存菜单”，这样，我们就创建成功一个wordpress导航菜单。当然，一个wordpress主题一般不会只有一个导航菜单，除了头部菜单外，还有底部导航菜单，也有可能会有侧边导航或移动端导航菜单。这要看wordpress主题开发者是怎样设想的了。好了，wordpress导航设置就介绍到这里，谢谢参阅。