Products
GG网络技术分享 2025-03-18 16:13 0
想让我们的客户在千里之外初步看到wordpress主题的大致效果,效果图虽然比较漂亮,但是,更加直观而灵动的,是让客户在浏览器中看到wordpress主题的大致效果,毕竟,客户最终的需求是在网站上展示wordpress主题模板的效果的。而开发一个wordpress主题模板,并不是一个可以快速完成的工作,尤其是那些功能强大的wordpress主题模板,它会涉及到很多方面的东西,所以,在开发初期,我们不可能做到,让客户看到动态网页的效果。
所以,在初期,我们只能叫前端工程师把切图通过HTML和CSS代码来组合,编写成一个wordpress的静态代码模板,这样的好处有2点:
1、可以让客户更加直观地看到wordpress主题放到网站上的效果;
2、可以减去wordpress主题的后端工程师编写HTML静态代码的工作,可以全身心地放在PHP动态代码的编写上。
那么,前端工程师应该怎样编写wordpress主题的静态代码模板呢?
一:按照wordpress主题的一些常规规范来编写。
我就曾经碰到这样的一个情况,前端工程师把wordpress静态代码模板给我后,我就碰到几处地方,用wordpress的函数不太好弄出相同的效果。比如:顶部导航菜单。wordpress提供的wp_nav_menu()这个创建菜单的函数,它创建出来的菜单列表代码如下:
<li id="menu-item-7164" class="menu-item "><a target="_blank" href="/">首页</a></li>
<li id="menu-item-7152" class="menu-item "><a target="_blank" href="/">wordpress企业模板</a></li>
<li id="menu-item-7153" class="menu-item "><a target="_blank" href="/">wordpress CMS主题</a></li>
或者是直接用a 标签:
<a target="_blank" href="/">首页</a>
<a target="_blank" href="/">wordpress企业模板</a>
<a target="_blank" href="/">wordpress CMS主题</a>
可是,前端工程师给我的静态模板的代码却是用div来做菜单列表的标签,如下:
<div class="menu-item "><a target="_blank" href="/">首页</a></div>
<div class="menu-item "><a target="_blank" href="/">wordpress主题模板</a></div>
<div class="menu-item "><a target="_blank" href="/">wordpress门户主题</a></div>
虽然,我们通过一些相关的代码处理,也能用上,但是,这要花费我们的开发时间。我们用wordpress程序做网站的目的不就是冲着它开发方便而且快速吗?如果每一次后端工程师都要处理这此事情,就会影响整个开发进度。所以, 前端工程师在开发wordpress静态模板时,一定要按wordpress的相关规范来开发。
二:根据效果图有针对性地开发几个前端静态模板。
前端开发人员,一般情况下只需要根据美工提供的效果图来进行开发静态模板。而美工设计效果图时,也是根据网站的一般需求而来。一个网站,正常情况下,主要包括:网站首页、网站分类目录页面、网站文章详情页面、一些独立页面(如:关于我们)、网站的搜索页面。当然,有些网站还有其它的一些页面。但,主要的页面就这几种吧。所以,前端工程师要编写如下几个静态模板:
1、网站首页的静态代码模板;
2、文章列表页的静态模板;
3、文章详情页的静态模板;
4、单页面的静态模板;
5、搜索页面的静态模板;
6、tag标签页的静态模板;
当然,以上是常规的页面静态模板。不同的客户有不同的需求。比如:企业网站,他们的网站可能需要产品展示列表页、产品销售页面、公司的促销活动单页面等等,这些页面,可能又是另外的一种页面布局。所以,也要为它们编写好相应的静态模板。
总之,wordpress主题的静态代码模板编写,只需要注意以上2大点就可以。毕竟,wordpress主题开发的重点是在动态代码的编写上,客户的需求,大多都会在wordpress主题的动态代码模板中体现出来。所以,我们会花更多的时间在wordpress主题动态模板上。
WordPress有很多自带的函数和标签,在WordPress建站的过程中,经常会忘记,抽空整理了一些常用的模板和函数汇总,简单,快速,复制/粘贴,这个页面列出用于创建,更新和维护。接下来小编为大家总结一下WordPress主题开发时需要基本模板及常用函数知识。
基本模板文件
文件名描述
style.css主题样式文件
index.php首页模板文件
header.php头部模板文件
single.php单篇文章模板文件
archive.php存档/分类模板文件
searchform.php搜索表单模板文件
search.php搜索模板文件
404.php404模板文件
comments.php留言模板文件
footer.php底部模板文件
sidebar.php侧边栏模板文件
page.php静态页面模板文件
front-page.php静态首页模板文件
tag.php标签存档模板文件
category.php分类存档模板文件
头部函数
函数名描述
<?phpsite_url();?>站点根链接
<?phpwp_title();?>文章或者静态页面标题
<?phpbloginfo(‘name’);?>站点名称
<?phpbloginfo(‘description’);?>站点描述
<?phpget_stylesheet_directory();?>样式文件所在目录
<?phpbloginfo(‘stylesheet_url’);?>样式文件链接
<?phpbloginfo(‘pingback_url’);?>pingback链接
<?phpbloginfo(‘template_url’);?>模板文件所在目录链接
<?phpbloginfo(‘version’);?>WordPress版本
<?phpbloginfo(‘atom_url’);?>atom链接
<?phpbloginfo(‘rss2_url’);?>rss2链接
<?phpbloginfo(‘url’);?>网站根链接
<?phpbloginfo(‘html_type’);?>html版本
<?phpbloginfo(‘charset’);?>字符集
导航菜单
默认导航菜单
<?phpwp_nav_menu();?>
指定的导航菜单
<?phpwp_nav_menu(array(‘menu’=>‘ProjectNav’));?>
基于分类的导航
<ulid=”menu”>
<li<?phpif(is_home()){?>class=”current-cat”<?php}?>>
<ahref=”<?phpbloginfo(‘home’);?>”>Home</a></li>
<?phpwp_list_categories(‘title_li=&orderby=id’);?>
</ul>
基于页面的导航
<ulid=”menu”>
<li<?phpif(is_home()){?>class=”current-page-item”<?php}?>>
<ahref=”<?phpbloginfo(‘home’);?>”>Home</a></li>
<?phpwp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>
</ul>
模板函数
函数名描述
<?phpthe_content();?>文章内容
<?phpif(have_posts()):?>检查是否有文章
<?phpwhile(have_posts()):the_post();?>显示文章
<?phpendwhile;?>结束循环
<?phpendif;?>结束判断
<?phpget_header();?>头部模板内容
<?phpget_sidebar();?>侧边栏模板内容
<?phpget_footer();?>底部模板内容
<?phpthe_time(‘m-d-y’);?>显示时间,格式为:’08-18-07′
<?phpcomments_popup_link();?>显示到文章留言的链接
<?phpthe_title();?>文章标题
<?phpthe_permalink();?>文章链接
<?phpthe_category();?>文章分类
<?phpthe_author();?>文章作者
<?phpthe_ID();?>文章ID
<?phpedit_post_link();?>文章编辑链接
<?phpwp_list_bookmarks();?>友情链接列表
<?phpcomments_template();?>留言模板内容
<?phpwp_list_pages();?>所有页面列表
<?phpwp_list_categories();?>所有分类列表
<?phpnext_post_link(‘%link’);?>下一篇文章链接
<?phpprevious_post_list(‘%link’);?>上一篇文章链接
<?phpget_calendar();?>显示文章日历
<?phpwp_get_archives();?>存档链接列表
<?phpposts_nav_link();?>上一篇和下一篇文章链接
<?phprewind_posts();?>重回开头开始第二个循环
主循环
基本循环
<?phpif(have_posts()){?>
<?phpwhile(have_posts()){?>
<?phpthe_post();?>
<?php//custompostcontentcodefortitle,excerptandfeaturedimage?>
<?php}//endwhile?>
<?php}//endif?>
其他函数
函数名描述
/%postname%/自定义固定链接
<?phpinclude(TEMPLATEPATH.‘/x’);?>从模板文件夹加载文件
<?phpthe_search_query();?>搜索表单返回的值
<?php_e(‘Message’);?>返回翻译之后的文本
<?phpwp_register();?>注册链接
<?phpwp_loginout();?>登录/登出链接
<!–nextpage–>将文章那个内容分页
<!–more–>截断文章内容,并创建到全文的链接
<?phpwp_meta();?>管理元链接
<?phptimer_start();?>开始计时(header.php)
<?phptimer_stop(1);?>停止计时(footer.php)
<?phpechoget_num_queries();?>显示生成当前页面所需的查询数
页面判断函数
函数名称用法说明
is_home()<?phpif(is_home())?>true为首页,false为第二页判断是否为第一页
is_paged()<?phpif(is_paged())?>当页面为第二页时,?paged=2
is_single()<?phpif(is_single())?><?phpif(is_single(2))?>文章id<?phpif(is_single(‘标题’))?>文章标题是否为文章单一页面,如要针对特定文章时,可在()中加入文章的ID参数,或标题文字
is_page()<?phpif(is_page())?><?phpif(is_page(2))?>分页id<?phpif(is_page(‘标题’))?>分页标题是否为分页,与单一页面用法相同,在()中可再针对个別的分页ID与标题作判断
is_category()<?phpif(is_category())?><?phpif(is_category(2))?>分类id<?phpif(is_category(‘标题’))?>分类标题<?phpif(is_category(array(6,7)))?>分类id为6、7<?phpif(is_category(array(6,7,’minwt’)))?>分类id为6、7或minwt是否为分类,()中可输入分类ID与名称,再个別作判断
is_archive()<?phpif(is_archive())?>是否为存档页面
is_search()<?phpif(is_search())?>是否为搜索面
is_404<?phpif(is_404())?>是否为找不到画面404
is_tag()<?phpif(is_tag())?>是否为标签页面
is_date()<?phpif(is_date())?>是否为日期存档页面
is_year()<?phpif(is_year())?>是否为年份存档页面
is_month()<?phpif(is_month())?>是否为月份存档页面
is_day()<?phpif(is_day())?>是否为天存档页面
Demand feedback