首页 W生活谷 A心生活 X地生活 N生活帮
主页 > A心生活 >[教学]WordPress手机版布景开发指南 >

[教学]WordPress手机版布景开发指南

使用智慧型手机上网的人越来越多,倘若网站没有手机版布景或是样式,那幺对于使用行动装置的朋友来讲,或许不是太方便,因为手机版的画面解析度、尺寸与一般PC电脑不同,若直接套用浏览,体验效果并不好。而WordPress在手机布景主题(WordPress Mobile Themes)其实有很多外挂可以相容,但是若你不喜欢别人的样式,那可以试着自己来做做看。

想要开发WordPress手机版布景主题,首先你必须了解WordPress整体版型架构与一些函数该如何使用,若这点不太清楚,可能开发上会有点麻烦。不过大家不用太担心,因为手机版的布景主题开发,主要针对几个页面就可以了,而且开发上并不会太困难,因为在手机版上实在是可以捨弃掉太多东西了,製作手机版的重点就是要「浏览舒适」。

最近香肠才自己改完手机版布景主题,虽然画面上并没有经过什幺特别设计,但主要还是让WordPress网页内容可以在手机有一个比较适合的大小,让访客透过行动装置浏览器还可以有较相应的尺寸与排版让他可以一目了然,若没有特别作手机版、行动版的布景主题,那浏览上则须一直将网页放大才可以看到文章内容,浏览上一整个很辛苦。

现在让我们进入WordPress手机版布景开发教学吧!不过在此要提醒一下大家,这部分的教学其实只是给大家一个方向,至于详细的语法香肠无法完整的在文章内说明,因此本篇文章主要是设定在对WordPrrss布景主题已经有开发过、改过的朋友,算是进阶一点的使用者浏览后通常就知道该怎幺开发手机版布景了,不过在此同时,我也希望让没开发过布景主题的朋友,对于手机版有一个基础概念。

教学目录

    手机版布景需要哪些页面?手机版宽度文章列表呈现样式内文版面手机版侧边栏、页尾不要放置留言区网站顶部该放些什幺?需要做HTML5、SEO优化吗?放Google AdSense广告赚钱安装手机版外挂

一、手机版布景需要哪些页面?

在WordPress布景主题题中,一般我们需要使用到的档案大概15个上下,不过我们製作手机版,香肠建议可以精简到12个(档案+资料夹),以方便手机布景开发,这些档案如下:

images目录:图片目录404.php:错误页面archive.php:文章彙整、分类页、标籤页footer.php:网站页尾functions.php:自订函式库header.php:网站顶部index.php:首页page.php:网誌分页screenshot.png:布景主题缩图sidebar.php:网站侧边栏,不过手机版我们要放分类和分页清单。single.php:内文style.css:样式表

如果你想要精简,其实可以少到剩下五个档案,但是不建议,因为这样你必须在index.php内做关于分类、标籤页、内文页、文章彙整页等判断,比较麻烦。(不建议)

style.css:网页样式index.php :首页、分类页、标籤页、内文页、文章彙整页page.php:网誌分页header.php:网页顶部footer.php:网页底部

二、手机版宽度(全站设定)

更动样式:style.css更动版型:index.php、archive.php、footer.php、header.php、page.php、sidebar.php、single.php

关于布景主题的详细写法与程式码不再本篇讨论範围,写法基本上跟一般的布景是一样的做法,只是在呈现样式上我们需要注意。在「版面整体宽度」,建议设定100%,这样在行动装置上,可以依照不同的尺寸有不一样的相容性,例如我们调整为手机板会看到适合手机板的样式。

[教学]WordPress手机版布景开发指南

如果调整成平板之类的,则可以看到以下画面,整体画面会拉宽,不会因为本身是手机板,而当平板存取的时候还是小框框。这应该是有点自适应网页(Responsive Web Design)的概念。

[教学]WordPress手机版布景开发指南

三、文章列表呈现样式(首页、彙整页、分类页、标籤页)

更动样式:style.css更动版型:index.php、archive.php

因为手机、平板等行动装置因为画面比PC桌上型电脑小,所以在文章清单的呈现上,最好是清楚明了,以列表式为佳,而且不要有内容摘要,最好是一张图搭配标题与发表时间,抓出文章图片香肠是使用「timthumb」而非用内建的特色图片,当然您也可以使用特色图片。至于页码功能可以直接套用桌面版或是变成大按钮的设计。

这样的呈现方式也可以针对文章彙整页面、分类页、标籤页套用相同设计,而在WordPress布景主题结构中,如果没有category.php、tag.php,版面的设定将转直接套用archive.php的样版,因为我们要做到呈现上都相同,所以不必多去定义分类或是标籤页,直接在archive.php彙整页面内加入即可。

[教学]WordPress手机版布景开发指南

四、内文版面

更动样式:style.css更动版型:single.php

内文版面的设计,我们也是要做成缩放的(前面已经提到),这样在平板或是手机都可以有自适应网页的效果。在内文的下方(如右图),您可以加入社群分享按钮,例如Facebook粉丝团、Line分享按钮等等,但在香肠建议各家的按钮都可以不要装,但是一定要安装Line按钮。

原因在于如果你放了各式各样的社群按钮,例如Facebook讚按钮、Plurk、Twitter、Google+等等,但是这些大部分都有相应的APP可以浏览,一般使用者比较少会透过手机浏览器登入这些服务,那幺要按个讚或是推特一下,不就要额外登入,换句话说,会透过这些按钮分享文章的人会很少。

不过Line按钮是针对手机去做设计的,简单说他只有在手机上发挥效益,反倒是在电脑版上面此按钮完全无用,因此香肠会建议你安装Line按钮在文章的下方,方便访客看了觉得不错、想分享,可以很快地透过Line按钮连结Line APP 做分享。在Line按钮的下方,我们可以放置文章所属分类与发表时间,至于标籤因为放了会很杂,基本上是不建议。

[教学]WordPress手机版布景开发指南  [教学]WordPress手机版布景开发指南

五、手机版侧边栏、页尾

更动样式:style.css更动版型:sidebar.php、footer.php

因为手机版的画面小,其实在手机版上根本没有什幺侧边栏可言,反倒是将侧边栏排到文章清单下方、页尾上方。在手机版上要做侧边栏,建议你只要在里面放上「分类」、「页面」连结,能的话最好搭配缩放的JQuery特效,让需要的访客自行点开查看有哪些分类。

在文章页尾,建议放个「切换为桌面版」以及「回顶端」按钮,方便使用者快速回到最上端以及如果觉得看手机版画面太小,可以切换为桌面版查看较大的版本。

[教学]WordPress手机版布景开发指南

六、不要放置留言区

更动样式:style.css更动版型:single.php

没错,你没有看错,内文区的留言框不见了?因为手机版本身画面就不大,手机输入也不比电脑版来的好用,所以我们将留言区拿掉了,针对手机使用者的设计就是「纯浏览」资讯,需要进一步的讨论,使用者可以点选「网页版」切换回去即可留言。

[教学]WordPress手机版布景开发指南

七、网站顶部该放些什幺?

更动样式:style.css更动版型:header.php

在网页的顶部,一般我们会放置RSS、Ping/trackback等等,在标籤中我们只需要放置:网站标题、网页编码、viewport、样式表、RSS、Google分析追蹤码、JQuery(有使用才放),其余皆可以省略不放,SEO优化那些可以不必摆在这个地方。

[教学]WordPress手机版布景开发指南

八、需要做HTML5、SEO优化吗?

关于WordPress手机版布景主题是否需要使用HTML5或者是SEO优化?基本上,这一部分是可以省略的,如果你要优化当然是最好的,将网页优化到最佳状态这是建议的。但是若你没有多余的时间,在手机版上面基本上我们只要让他可以正常的浏览、不要出错、速度快即可,其他多余的东西可以不必。

因为手机版的判断是透过User Agent,所以在搜寻上其实他们找的还是一般的网页PC版,因为只要User Agent 符合手机版、平板才会切换到手机版布景,其他一律显示桌面版布景,所以使用者可以不必担心手机版要不要HTML5或是做好SEO,除非你真的很闲或者是网页有使用HTML5特效才去做HTML5和SEO,不然以最快最方便的写法并符合W3C标準就可以了。

九、放Google AdSense广告赚钱

更动样式:style.css更动版型:single.php、archive.php、index.php、page.php

如果你网站本身有使用网路广告赚钱等服务,在手机版上香肠只建议放置有位手机设计的广告,其余桌面版的广告请不要拿到手机版来塞,因为会破坏製作手机版的目的,他会拉宽整体面版变得很怪。目前手机版有支援的Google AdSense,其他家不太清楚。至于广告的摆放,你可以参考以下文章把广告塞进去吧XD。

Post Layout 在WordPress任意位置加上广告代码如何在WordPress首页文章中间摆广告?

十、安装手机版外挂

当做完以上的动作后,千万别忘记安装WordPress手机版外挂,透过手机版外挂「Mobile theme switch」,安装此外挂后设定一下你的手机版布景,当使用者点进来后,就会看到符合手机或是行动装置的样式啰!

[教学]WordPress手机版布景开发指南



上一篇: 下一篇:

相关推荐