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导航设置就介绍到这里,谢谢参阅。