目的:为了更新自己的微信公众平台,增加菜单栏直接访问网站的功能,决定将之前用的twentyten模版改成twentytwelve模版。
改变模版过程中有如下几个心得:
- 本来想直接做成响应式布局,但是时间紧迫,加上刚开始走了一段弯路,就决定在主页面上分成PC版显示和手机端显示。
- twentyten不支持随屏幕更改页面尺寸,所以刚开始用该模版做好手机端后页面调试后才发现无法根据屏幕调整大小,后面才转到twentytwelve模版。
- 本次改版应用了bootstrap编缉布局,布局过程需要注意的是减少与twentytwelve布局的冲突,尽量不改变twentytwelve的siderbar布局,只在局部更改。此次只重做了home.php和category板块,其他的保持原功能不变。
- 初次使用了less编写css文件,发现还是很方便,特别是用了sublime text中的less2css插件,可更快速生成min.css文件。
- wordpress在4.1版本中新增了wp_mobile()函数,可直接检测出设备是PC端还是mobile端,这样可以根据不同环境加载不同css文件。
- 正式开始应用了html5的新增的标记,如<article>、<section>、<nav>等。
- 用get_stylesheet_directory_uri()获取child theme的style.css文件所在路径,这样就可在child theme中方便添加自己的css和js文件。
- wordpress新增了the_posts_pagination()分页函数,可直接进行分页,具体用法如下:
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上页', 'twentytwelve' ),
'next_text' => __( '下页', 'twentytwelve' ),
'screen_reader_text' => ' ',
) );
'mid_size' => 2,
'prev_text' => __( '上页', 'twentytwelve' ),
'next_text' => __( '下页', 'twentytwelve' ),
'screen_reader_text' => ' ',
) );
该函数呈现出的样式不是采用<ul><li>列出分页码,而是利用了<div>标记,bootstrap中的navigation类不能完好的改变该列表样式。
get_category_parents()可用作面包屑导航
<?php echo get_category_parents( $cat, true, ' » ' ); ?>
wp_list_categories()可只显示指定的子目录列表。
<?php wp_list_categories('orderby=id&title_li= &order=desc&show_count=1&use_desc_for_title=0&child_of=41'); ?>