WP笔记

通过程序定制Contact Form 7表单一例

Contact Form 7是一款好用的表单插件,由来已久,口碑甚好。使用Contact Form 7时,通常是在后台创建两套模版:表单模版和邮件模版,模版可以使用HTML和shortcode。本文介绍如何借助这些功能动态的生成表单元素和邮件模版,让用户填写表单时可以动态增加数据,而不仅限于模版预定义的数据。

继续阅读通过程序定制Contact Form 7表单一例
WP笔记

如何去除WordPress脚本和样式表的版本号

WordPress中使用wp_enqueue_script()和wp_enqueue_style()引入js脚本和css样式表时,会生成一个版本号,如果你不亲自指定,版本号会是WordPress的版本号,比如3.4.2。版本号有好处,可以强制浏览器更新脚本,但有些SEO检测工具会认为带有版本号是非静态化的表现,那么这里有一个去除版本号的方法。

继续阅读如何去除WordPress脚本和样式表的版本号
WP笔记

WordPress编辑器在Firefox下很卡的解决方法

禁用firefox硬件加速

我的Firefox一直更新,目前是Firefox 16.0.1,最近用Firefox编辑文章,发现WordPress的默认编辑器TinyMCE卡的不行,输入文字时经常键盘敲出去好几个字符,编辑器中的文字才一个一个的蹦出来,删除文字更是痛苦,经常删多。总体感觉就像在用SSH连接一个非常慢的host敲命令一样。

继续阅读WordPress编辑器在Firefox下很卡的解决方法
WP笔记

覆盖WordPress Site URL

WordPress的常规设置中有两项是针对站点地址的,分别是WordPress地址(Site URL)和站点地址(Home URL),这两项存储在wp_options表中,下面的代码可以在不更改数据库的情况下覆盖掉这两项设置。

继续阅读覆盖WordPress Site URL
WordPress教程

创建WordPress后台选项界面(五)—— 在后台使用Ajax

WordPress进阶教程

依然以CC Comment插件为例,展示如何在WordPress后台使用Ajax。CC Comment插件允许在后台设置->常规选项卡中填写抄送的邮箱,现在要使用Ajax方式验证填写的邮箱是否合法。

步骤概述:

  • 创建验证email的功能
  • 创建以Ajax方式发送数据的脚本,写在外部js文件中
  • 引入外部js文件
  • 注册Ajax的action和callback

功能描述:

在设置->常规中填写CC Comments的抄送email时,当鼠标点击到input之外的地方,就会开始验证,验证时先显示Checking email…,如果验证成功则显示Email OK,一切过程不需要刷新页面

检查email

继续阅读创建WordPress后台选项界面(五)—— 在后台使用Ajax
WP笔记

FitVids.JS —— 让视频响应屏幕尺寸变化

使用Android手机查看的效果

在制作快速响应式网站时,文字、图片等元素都可以很容易的响应屏幕尺寸的变化,唯独视频比较麻烦。比如通过embed方式加载优酷、土豆甚至YouTube视频时,使用max-width:100%的方式不能保证视频在任何设备上都能跟随屏幕尺寸缩放,这时可以借助js脚本来实现,这就是今天要介绍的FitVids.JS

继续阅读FitVids.JS —— 让视频响应屏幕尺寸变化
WordPress教程

创建WordPress后台选项界面(四)—— 选项添加到现有管理界面

WordPress进阶教程

我们要保存的数据是一个email地址,除了单独为其创建一个管理界面的方式外,还可以选择将这字段加入到现有的管理界面中,例如设置->常规(Settings->General)中。

如果你没有cc_comment.php,请返回创建WordPress后台选项界面(三)下载

方法概述:

  1. 删除cccomm_option_page()和添加菜单的代码
  2. 创建一个函数,用来输出需要注册的字段的HTML结构
  3. 使用add_settings_field()函数将这个字段加入到设置->常规下
继续阅读创建WordPress后台选项界面(四)—— 选项添加到现有管理界面
WordPress教程

创建WordPress后台选项界面(三)—— 使用Settings API存取数据

WordPress进阶教程

创建WordPress后台选项界面(二)—— 保存数据一节中,使用wp nonce和update_option()等方式存取数据,与WordPress数据库进行交互。这看起来有点复杂,有没有更简单的方式呢?这就是本节要介绍的WordPress Settings API

WordPress Settings API会自动处理nonce field、update_option的操作,我们要做的就是告诉这个API,要保存什么字段。

本节使用的方法步骤概述:

  1. 使用register_setting()注册要存储的字段
  2. 使用settings_fields()函数在表单输出nonce等信息
  3. 去掉第二节表单中处理数据的部分,因为Settings API将会负责这些操作
继续阅读创建WordPress后台选项界面(三)—— 使用Settings API存取数据
WordPress教程

创建WordPress后台选项界面(二)—— 保存数据

WordPress进阶教程

在创建WordPress后台选项界面(一)一文中,我们为CC Comments plugin创建了一个后台选项界面,界面里除了标题和描述外没有其它信息。本文将描述如何添加表单并保存数据到WordPress数据库。

在WordPress数据库中保存数据,有两种方式:

  1. 创建自定义数据表
  2. 保存到wp_options表中
继续阅读创建WordPress后台选项界面(二)—— 保存数据
WordPress教程

创建WordPress后台选项界面(一)

WordPress进阶教程

WordPress后台选项是我们定制站点的重要方法,本文介绍如何在设置(Settings)菜单下创建一个简单的后台界面

创建后台界面,要分三步走:

  1. 创建一个function,用来输出界面的HTML结构
  2. 创建一个function,将后台选项界面的菜单链接加入到WordPress后台菜单,在本例中,要加入到设置菜单下
  3. 用Hook功能将上述两个function链入WordPress的执行过程
继续阅读创建WordPress后台选项界面(一)
WP笔记

Responsive主题Anaximander试用

Anaximander

最近非常迷恋简洁+Responsive的主题,于是找了一款名叫Anaximander的主题在自己的博客试用了一下,主题来自designisphilosophy.com,这款主题的特色包括:

  • Responsive Design,意味着用任何尺寸的屏幕看都没问题
  • 集成jQuery Masonry,首页为瀑布流样式
  • 支持Flexslider,可以将置顶文章显示为幻灯片
  • Google Font
  • Social Icon
继续阅读Responsive主题Anaximander试用
WordPress主题开发

快速响应的Web设计案例大全

Greenbelt Festival

快速响应的Web设计,英文叫做Responsive Web Design。用户访问web的设备种类繁多,可以是手机、平板或者笔记本,屏幕尺寸不一,快速响应的Web设计就是为了让用户无论用何种尺寸屏幕访问网站,都能获得最佳体验。网页会根据屏幕尺寸自行调整,适应不同屏幕。

今天向大家介绍的是一个网站——MediaQueri.es

该站展示的网页全部符合Responsive Web Design的标准,如果你想找点灵感,这里绝对不容许错过。

下面是一些案例展示

继续阅读快速响应的Web设计案例大全
WP笔记

WordPress代码:获取置顶文章并循环显示

wordpress functions

WordPress中的置顶文章(Sticky posts)用途多多,当首页幻灯片,或者固定显示在某些显眼的位置,既然置顶必然是重要的。

本文介绍的内容是一段WordPress代码,用来获取置顶文章并循环显示

<?php 
// 获取置顶文章代码
$sticky = get_option( 'sticky_posts' ); //获得所有置顶文章的id
$args = array( 
	'numberposts' => 6, // 最多获取6篇置顶文章
	'post__in'  => $sticky
);
$postQuery = get_posts($args);

//循环输出置顶文章					
foreach( $postQuery as $post ) : setup_postdata($post);
	?>
	<p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( 'echo=0' ); ?>" rel="bookmark"><?php the_title(); ?></a></p>
	<?php 
	if ( has_post_thumbnail() ) {
		the_post_thumbnail();
	}	
endforeach; 
?>
继续阅读WordPress代码:获取置顶文章并循环显示