Wordpress摘要相关开发

主题开发时又出现使用more标签显示摘要与使用excerpt摘要相关filter出现混淆的问题。

Wordpress主题开发中有两种显示摘要的方法,一种是利用more标签<!--more-->,该方法需要作者在文章适当位置中插入该标签;另一种是正宗的摘要使用函数the_excerpt显示,该方法既可以在文章编辑页面中填入,也会自动生成摘要。

第一种方法可以在调用函数the_content时通过传入参数来定义“阅读更多”链接样式,而与excerpt摘要相关filter完全无关。

第二种方法可以使用多种filter进行“阅读更多”链接定义,使用excerpt_length来定义自动生成摘要的长度(系统默认为55),使用excerpt_more定义自动生成摘要时“阅读更多”链接的样式,使用get_the_excerpt定义手动添加摘要时“阅读更多”链接的样式。

WordPress相关轻博客主题开发经验

轻博客类型的主题已经是现今个人站的设计风尚,不少大型设计博客站点也投入轻博客风格的怀抱,典型的就是Smashing Magzine,其站点的样式充分体现了目前实用类博客的结构设计思路,其结构可归纳为:

导航栏 nav.toplevel

主内容区 div#container > div.sidebar+div.main(fluid)

博客导航区 div#wpsidebar

底部功能区 div#footer

实际上,设计时需要正确理解轻博客的意图,要知晓该风格主题定制性一般不如博客。sidebar功能中小工具功能不可能充分发挥(一般除广告外,只能放置一到两个widget,否则就会拥挤),menu的功能一般也归放到边栏sidebar展示,而很少像以前一样出现在站点中间位置。(网站Smashing Magzine即放到边栏的博客导航区)

本站的最新设计就尽量在经典博客与轻博客风格中寻找一种平衡,但是设计出发点总是信息的有效传达。设计博客的关键在于阅读体验好,在于查找内容方便,所以目前sidebar还是使用了多个widget,menu也仍然放在站点中间。

轻博客主题的另一大特色就是Responsive design,即一次设计必须能够自适应多种阅读终端设备。虽然本人很早就接触过这些内容,但只在本站制作过程中才真正开始使用这些内容。个人感觉自适应设计最关键的技术点在两个地方:一个是字体大小的安排,一个是media query的安排。

字体的大小安排在目前的主题中有两种风格,一种是默认主题twentyeleven中使用的em组织方式,另一种是最新默认主题twentytwelve中使用的rem组织方式。前一种方式的问题主要是使用em为单位需要叠加计算字体大小(可以使用body{font-size:62.5%;}将默认的1em=16px调整为10px,这样计算就方便一些),布局使用的margin或padding也都必须使用百分比或em,故而比较复杂,但是浏览器兼容较好。后一种方法使用了CSS3中加入的rem单位,即相对于根标签html的字体大小,最新默认主题twentytwelve中即使用html{ font-size: 87.5%;}将默认的1rem=16px调整为14px,于是其他所有属性如margin等都以14px=1rem为标准进行编写。但是可惜的是该单位ie8以下都不认识,所以还是必须用px进行兼容,于是还是必须写出body { font-size: 14px; font-size: 1rem;}这样的代码来。

media query的安排必须了解各个阅读终端的屏幕尺寸,下面这个视频对了解苹果系列产品的分辨率及尺寸很有帮助。本站选择了800px与480px两个分界线,来分别对应平版终端(通常需要处理的是竖着拿的情况)与手机终端(横竖都必须处理)。



有关响应式设计与开发可以参考这篇文章

正确理解Wordpress设置API

Wordpress设置API使用起来并不算太方便,很多地方都容易混淆,因此在本人读懂并改写了主题相关的设置类之后,就想把相关容易混淆的地方详细说明一下。

函数register_settingsettings_fields为一组,它们之间使用参数option_group进行关联,另外函数register_setting注册了get_option函数所需要的参数option_name。这两个函数一个用于注册设置信息,一个用于显示设置信息(实际即一组hidden属性的input标签,显示时使用参数option_group)。

函数add_settings_sectionadd_settings_fieldadd_[theme或options]_page为一组,它们之间使用参数menu_slug进行关联,由该参数可知这些函数只与某个特别的page相关,用于注册表单展示信息。使用函数do_settings_sections来渲染展示表单(显示时使用参数menu_slug)。

关于settings的状态栏使用<?php settings_errors(); ?>,该函数即可显示黄色的状态栏。更多状态栏相关开发参考这个链接

 

Post Series插件(更名为SimplePostSeries)正式发布

Post Series插件改名为Simple Post Series正式在Wordpress插件官网发布,可以自由下载使用

Simple Post Series为Wordpress增加按照专题管理文章并展示的功能,集所有类似插件功能之所长,设置选项完善。

融合所有类似插件的相关功能:

  • *可以在文章编辑页面通过按钮与面板添加shortcode以展示某个专题下的文章列表,支持文章与页面,
  • *可以设置自动在文章页或主页上显示某个专题下的文章列表,可以设置展示摘要或缩略图,
  • *可以在管理员文章管理页面上对某个专题进行筛选,文章管理更加方便,
  • *2.0最新版支持文章拖拽添加到专题的功能,页面特别参考eg-series插件。
    专题文章的拖动管理页面,这是极其方便的管理页面,用户可以在该页面上自由拖动文章到某个专题,或是删除某个专题下的文章,或是改变文章的排序等。

待完善:(BUG列表)

1.页面无法在专题展示中列出

Description

simple-post-series allows you to insert series short code for displaying a bunch of posts in the same serie.
This plugin allows to include posts into series, to create, delete or rename series. It also includes widgets and shortcodes to display list of series, or the list of posts belonging to the series of the current post.

With this plugin, you can:

    • Add / Delete a post from a serie,
    • Create / Rename / Delete series,
    • Display the list of series in a post, or display this list in sidebar, with widgets for exemple,
    • Filter posts by a special serie in your admin post managent page,
    • Automatically insert the list of posts of a specific serie, without using shortcode.
      simple-post-series is TinyMCE Integrated. That means you don’t need to learn the shortcode syntax. The plugin add a button in the tinymce toolbar. You just have to click on this button, choose parameters/options, and click insert. That’s all, the shortcode will be insert into your post with the right parameters.

You can find latest source code in github project.

This plugin is enlighted by Tuts+ and their Sessions. You can find a very helpful cource in NetTuts+ to figure out how this plugin works in Wordpress.

Installation

  1. Uzip the simple-post-series.zip folder.
  2. Upload the simple-post-series folder to your /wp-content/plugins directory.
  3. In your WordPress dashboard, head over to the Plugins section.
  4. Activate Post Series.

Usage

simple post series adds two administration pages, a widget and shortcode.

Customize your theme

simple-post-series uses now a specific taxonomy to implement series. It means

    • You can build / customize a specific page in your theme to display the content of a serie.
      You can customize your theme by creating page like ‘taxonomy-series.php’ which overrides default archive page to display the content of a serie.
      A sample archive page template is located in ‘[simple-post-series]/template/taxonomy-series.php’ and you can freely modified it and place in your own theme.

Administration pages

  • * Series gives ability to change or rename series,
  • * Settings/Post Series contains all options of the plugin. In this page, you can activate the auto display feature.

Shortcodes

To display the list of series: [series options], with the following options:

  • * id of the series. Default ‘ ‘,
  • * slug of the series. Default ‘ ‘,
  • * title of the list. Default ‘ ‘,
  • * limit: number of series to display in the list. Default: -1 to display all series,
  • * show_future: displays unpublish posts in the series. Default: on,
  • * class_prefix: of the list section. Default ‘post-series’.

Screenshots

  1. Post Editing page: TinyMCE integration and additional metabox to quickly choose or add a serie 加入专题设置模块,
  2. List of posts in a serie 在文章页面展示专题列表,
  3. Easily manage series 拖拽管理专题下所属文章,
  4. TinyMCE window to choose shortcodes options, and insert shortcodes 文章编辑方便插入short code,
  5. Insert short code in edit post 插入short code的结果,
  6. Options page 插件设置页面,

Changelog

= 2.1 =

  • New: Fix bugs and improve code robustion

= 2.0 =

  • New: Add admin series bulk edition page for drag and drop posts to serie

= 1.3 =

  • New: Add option to choose where to display lists
  • New: Add option to choose to display excerpt
  • New: Add option to choose to display thumbnail

= 1.2 =

  • New: Add series filter in admin’s edit.php
  • New: optional load of the stylesheet
  • New: sample archive page for displaying series taxonomy in custom theme

= 1.1 =

  • New: add widget for post series with many options

= 1.0 =

  • Plugin released. Everything is new! Have to change name from post-series to simple-post-series.

WordPress专题系列文章管理插件Post Series发布

本人第二个WordPress个人制作插件Post Series也完成了。功能是显示一个系列文章的列表,需求很常见,但是搜到的插件要么功能过于复杂,要么就得收费

当然这个插件主要的展示代码逻辑也是来自一个Nettuts+教程《Adding Post Series Functionality to WordPress With Taxonomies》,但是本人将其发扬光大,为其加入了编辑器按钮及界面,还加入插件设置界面以及相应小工具,而且可以设置自动在文章页面展示系列文章列表,彻底省去添加short code的烦恼。

目前可定制性算是够强,下一步是参考其他Series插件继续完善一些功能。当然目前的第一步是发布到WordPress官网供大家下载。

首先是学习免费插件EG-Series

优点:其同样支持编辑器按钮(支持系列文章展示short code与展示所有系列的short code),可以用拖放的方式管理系列下的文章,为管理员导航栏增加菜单。居然使用的各种short code及tax设置都与本人写的通用。。。要好好学习。。。

缺点:默认样式很一般,勉强可以用

其次是参考免费插件Organize Series,其可以升级为付费版,只有付费版才支持short code与custom post type

优点:普通版可以完整设置展示的template(全部HTML代码都可以更改,这个定制性过强)设置使用默认css样式表,可以为系列添加特色图标,为文章管理页面加上系列一栏(展示系列名称与文章数目),可以进行filter筛选,同样可以为文章自动添加系列展示等(设置使用checkbox input可以学习),可以改变文章在系列中的序数(比较麻烦)。

缺点:默认样式很丑,默认展示位置很诡异,根本不适用,果然是逼人用付费版啊。

优化点Todo:

  1. 文章管理页面加上系列的filter,系列支持特色图标
  2. 设置是否使用默认css样式表,其他都改用checkbox来展示
  3. 增加系列展示的各种设置,如是否显示thumbnail或excerpt
  4. 增加系列内的导航,增加show all按钮
  5. 系列展示可以使用list或select,改变sort order
  6. 拖放的方式管理(同时可以参考收费插件)*
  7. 设置short code的名称*
  8. 设置自动展示的页面类型与位置及样式设置*
  9. 增加更多的模板编码*
  10. 设置界面分为几个section*

Post Switch插件发布

本人终于发布了首个WordPress个人制作插件Post Switch,该插件可以很方便的切换正在编辑的文章。主要是本人发现在WordPress后台修改同一分类下面的文章时,需要不断切换到“所有文章”界面再切换回“修改文章”界面,颇为不便,于是就想在“修改文章”界面添加一个选项栏可以选择同一个分类下面的任意文章进行切换。写完插件用起来个人感觉也还不错,至少目前满足了个人需求。

post-switch 显示

插件使用后的“编辑文章”界面,增加了Post Switch功能块

post-switch screenshot 2

Post Switch功能块,上面可以选择分类,下面可以选择文章进行切换

取英文名倒是费了些神,写英文的说明文档也很痛苦,说明本人英文还需要加强。插件项目的托管使用了Github,于是也捎带熟悉了Git的使用,感觉确实很好用。无奈WordPress官方却使用SVN,怎么把这两个结合起来还需要继续研究。同时后续准备加强分类的选项,除了文章所属分类外还准备显示分类的父分类,这样能够进行编辑切换的文章就更多更容易查找了。

WordPress官方提交插件的地址也十分难找,居然在个人管理界面里面都没有,这里也顺便给出吧:插件提交地址

Post Switch插件下载:

Github项目地址

WordPress官方地址

filter的使用

WordPress开发中action与filter的使用是一个重要的部分,相比action来说filter这个概念更难理解,如果能够完全理解filter,action就根本不是问题。本人也是在开发主题的过程中终于完全理解,于是立即记录分享一下。

filter概念就如名字表示的那样用于过滤输出的内容,相关API很简单,基本就是add_filterapply_filters两个函数。add_filter用于向filter的tag上注册函数,apply_filters则是触发filter的tag从而运行注册在其上的所有函数。

开始本人不理解为何开发需要使用filter时不需要使用apply_filters进行触发反而只在使用add_filter注册函数,如果你也有相同的疑问,那么看下面这个本人碰到的实际例子:

现在需要根据主题设置修改body上class属性的内容,于是可以定义一个函数注册到tag名为body_class的filter上:

function theme_layout_classes( $existing_classes ){
$options = get_theme_options(); //get_theme_options函数可以获得相应主题设置
$current_layout = $options[‘theme_layout’]; //这里得到相应主题使用的布局设置
return array_merge( $existing_classes, $current_layout );//返回增加了设置的class内容
}
add_filter( ‘body_class’, ‘theme_layout_classes’ );//将我们定义的函数注册到tag名为body_class的filter上

这样当调用body_class()函数时(该函数通常在header.php中使用用于输出body的class内容:&lt;body &lt;?php body_class(); ?&gt;&gt;)就会调用我们定义的这个函数,从而将原定输出的class内容加上$current_layout 。

但如果现在需要在显示page时根据page的特殊布局设置覆盖主题的默认布局设置,我们应该如何处理呢?

由于已经把主题设置的class内容加进去了,再使用filter把内容减去就比较困难。实际上解决方法应是将新增的内容进行整体替换,于是我们修改函数theme_layout_classes为:

function theme_layout_classes( $existing_classes ){
$options = get_theme_options(); //get_theme_options函数可以获得相应主题设置
$current_layout = $options[‘theme_layout’]; //这里得到相应主题使用的布局设置
$classes = apply_filters( ‘theme_layout_classes’, $current_layout ); //这里实际我们定义了一个新的filter tag
return array_merge( $existing_classes, $classes );//返回增加了的内容
}
add_filter( ‘body_class’, ‘theme_layout_classes’ );//将我们定义的函数注册到tag名为body_class的filter上

可以看到我们通过apply_filters实际定义了一个新的filter tag,这样我们只要将新函数注册到这个tag上就能够整体替换新增的内容。
于是我们再注册一个函数:

function page_layout_classes( $existing_classes ) {
global $post;
$current_page_layout = esc_attr(get_post_meta($post->ID, ‘page_layout’, true));//获得page的特殊布局设置
if (! empty($current_page_layout) ){ //如果存在特殊设置,则返回这个内容
return $current_page_layout;
}else{
return $existing_classes; //否则还是返回原有内容
}
}
add_filter( ‘theme_layout_classes’, ‘page_layout_classes’ );//将这个函数注册到我们定义的theme_layout_classes上,以实现替换新增内容的功能

这样在调用theme_layout_classes时又会因为apply_filters( 'theme_layout_classes', $current_layout );触发调用page_layout_classes函数,注意page_layout_classes函数第一个参数$existing_classes这里会被赋值为$current_layout,于是就能用page的特殊设置覆盖主题的默认设置。

通过这个例子我们知道产生之前疑问的关键是调用函数body_class()时实际上里面就有调用apply_filters( 'body_class')进行filter的触发(出自get_body_class:wp-includes/post-template.php),当然我们不需要再进行触发,只需要使用add_filter将我们的函数注册即可。

tag与category的使用与自定义标签的设计

WordPress中存在两种类型的分类:一种是tag,另一种是category。这两种分类的区别在于: category通常是有层次的,而tag是平行平等的。

一些著名博客如Smashing Magzine以及Nettut+是如何安排使用tag和category的呢?

最新Smashing Magzine主题是轻博客类型,完全放弃有层次的category,而全部采用平等的tag。

而传统博客类型的Nettut+基本采用category,其URL结构为/articles/javascript或是/tutorials/ 。tag用来标记类型如video或tips,该主题甚至可以结合两者进行查询。

WordPress中可以使用函数register_taxonomy注册自定义标签,区分是category类型还是tag类型的关键就是参数hierarchical。

wp_enqueue_script与wp_enqueue_style相关函数的使用

很多主题都未使用WP系统提供的api来引用额外脚本与样式表,而是在前端页面代码中加入或是在某些函数中输出。就最终结果来讲其实影响不大(当然如果使用wp_minify这个插件来进行站点性能优化,可能会出现某些js代码或样式表遗漏的状况),但这会给代码管理上带来困难,特别是当你需要修改这些外部引用代码位置的时候。

其实WP提供了wp_register_style,wp_register_script,wp_enqueue_style,wp_enqueue_script四个函数来简化额外样式表与JS代码脚本的引用。

前面两个用于向WP注册引用信息,后面两个用于真正插入样式或脚本。实现待补充。

特别需要注意的是wp_enqueue_script使用时必须在调用wp_header函数之前,否则注册时wp_register_script是否在尾部加入的参数设置不会起到效果,甚至会影响wp_enqueue_style的插入地点,变为一律在最后调用函数的位置处插入脚本与样式表,这对样式来说问题就比较大咯。

本站总访问量