WordPress文章字段查询meta_query各种高级用法列举

WordPress meta_query 高级用法

WordPress在get_posts或WP_Query方法中,活用meta_query,可以变换出无数种高级检索,是WordPress的入门技能。

最简单的用法,查询自定义字段“post_color”值为“red”的文章

$arr = array(
	'post_type', => 'post',
	'meta_key' => 'post_color',
	'meta_value' => 'red'
);
$myPosts = new WP_Query( $arr );

引入meta_compare参数,查询自定义字段“post_color”值不为“red”的文章

$arr = array(
	'post_type', => 'post',
	'meta_key' => 'post_color',
	'meta_value' => 'red',
	'meta_compare' => '!='
);
$myPosts = new WP_Query( $arr );

推荐写法

下面开始进阶用法,首先要换一种写法,把所有自定义字段相关的参数都打包到meta_query参数中,效果和上面一段一样:

$arr = array(
	'post_type', => 'post',
	'meta_query'=> array(
		'key' => 'post_color',
		'value' => 'red',
		'compare' => '!='
	)
);
$myPosts = new WP_Query( $arr );

查看详细 »

WordPress不用插件实现多张特色图片/缩略图Featured Images

WordPress的文章、页面或者自定义文章类型开启特色图片,通过注册这个类型时,在support中添加参数“thumbnail”实现,比如:

register_post_type('My CPT', array(
	'label' => 'my_cpt',
	'description' => '',
	'public' => true,
	'show_ui' => true,
	'show_in_menu' => true,
	'capability_type' => 'post',
	'hierarchical' => false,
	'rewrite' => array('slug' => 'product'),
	'query_var' => true,
	'supports' => array('title','editor','thumbnail') //这里有了thumbnail就能为my_cpt这个类型添加缩略图
	)
);

这个缩略图有没有可能变成多张呢?比如这样:

查了老半天,WordPress本身并没有提供多张特色图片的API,但这个功能完全可以通过自定义字段实现。本文即是这个原理 查看详细 »

基于WordPress的微信小程序支付功能开发

我在2018年的时候总结过一篇微信小程序支付功能开发与踩坑经验总结,当时因为网上相关文档和资源的缺乏,文章获得了很多关注和转载,并且也有很多人指出了其中的不足。主要不足之处就在于那篇文章把所有的签名字串封装都放到了前端,也就是小程序里,通过JS实现,其中还涉及到了商户key这样的敏感字段,因此是不安全的。不过在3年前微信本身对这块也没有做很严格的限制,比如我把对“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求放在小程序里,那时候照样是能运行的。

近期,把小程序的基础库改成近期版本后,我发现“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求已经不能放在小程序里了,即使此域名已经加入到request安全域名下也无效,微信那边会自动把你加入的这个域名过滤掉。这就表示一系列的请求必须放到服务器上完成了。因此我重新整理了一下后端的代码,PHP版本的。并且因为我的微信小程序都是基于WordPress做后端的,索性把自定义的接口这块也缝合过来。

当前最新版调试通过:

打包代码如下: 查看详细 »

WordPress JWT认证授权方式测试调研和开发心得

本文接上回WordPress OAuth 1.0认证方式测试调研,研究JWT认证方式。

JWT,全称JSON Web Token。在WordPress应用场景中,客户端通过JSON格式发送登录信息到WordPress网站,网站返回用户的基本信息,附带一串token给客户端;客户端在下次请求写入数据的时候,在请求头上带上这一串token作为用户标识就可以了。由于token是从网站发来的,客户端不需要做任何的数据处理,只要存储一下这一串token就可以了,很便捷。因为这种便捷性,国内用微信小程序或其他客户端连接WordPress的项目,大部分都是用JWT实现的,如果我说的不对请留言指正:)

使用JWT,先安装插件:JWT Authentication for WP REST API

然后在WP的根目录下修改wp-config.php,增加以下两行配置,开启JWT接口:
define('JWT_AUTH_SECRET_KEY', 'abcdefg...'); //填个复杂点随机字符串
define('JWT_AUTH_CORS_ENABLE', true);

以上准备工作完成,接下来回到Postman测试发送请求。

1. 发送用户名和密码的JSON格式到 https://www.mysite.com/wp-json/jwt-auth/v1/token

返回数据中,除了邮箱、用户名和全名外,注意第一行的token,需要在客户端存储一下,安全起见,推荐存在客户端的后端,尽量不放在前端。 查看详细 »

WordPress OAuth 1.0认证授权方式测试调研

这两天有新项目需要用到站外登录WP,操作WP网站的数据,之前在一些小项目中,通过Rest API操作网站数据,我都是通过Basic认证的。Basic认证有一个安全方面的缺点,就是每次发送请求,都需要把用户名和密码base64编码到请求的header里。这样就得在站外存储WP网站的用户名密码,如果在站外没有做好安全,不小心泄露这个登录信息,就会造成安全问题。为了规避这种漏洞,我的方式是在WP站内建一个秘密用户,只分配用得到的权限,用户在站外请求我的Rest API,如果要写数据,我用一个中转的节点,加上这个秘密用户的用户名密码组成的header去请求数据。当然,这当中还要加上识别用户的业务逻辑,比如用手机号码做用户字段,这就不另外展开了…

所以我重新考虑OAuth认证方式,谷歌了不少资料,网上大家比较公认的是这一篇:https://code.tutsplus.com/tutorials/wp-rest-api-setting-up-and-using-oauth-10a-authentication–cms-24797
如果你也研究过OAuth和Rest API,你应该也看过这篇文章或者它的翻译版本。

一开始我觉得跟着上面那篇tutsplus上的教程跑一遍就好了,也没必要特意写这篇文章去总结。然而实际操作过程还是踩坑了,所以需要自己记录一下,复盘一下跑通OAuth1.0的过程。本文无代码,都是测试截图。
查看详细 »

填坑 – 关于H5 video标签在各版微信浏览器内的兼容问题

四年前因为开发视频H5的时候踩坑,我写过一篇博客《关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题》。时隔多年,因为微信更新多次,这个坑应该是早已平了(如果还有请留言告知)。由于在那篇博客文末给的腾讯官方解决方案链接也已经失效,在此还是记录一下目前最通用的解决方案吧。

<video id="myVideo" src="..." poster="..." preload="no" autoplay="autoplay" loop="loop" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true">
	<source src="..." type="video/mp4" />
	<img src="..." />
</video>

video标签的关键属性和作用

  • webkit-playsinline / playsinline:iOS端默认视频只要一运行就会全屏播放,这个属性允许视频播放不弹全屏,维持在页面原位置播放;
  • x5-video-player-type=”h5″:解除微信浏览器内video自家播放器的绑定;
  • x5-video-player-fullscreen=”true”:是否支持全屏,如果设置为false则在微信浏览器里全屏那个标记不出现,一直维持video标签的尺寸播放视频;
  • x5-video-orientation=”portraint” 视频方向,portraint为竖屏,landscape是横屏,x5-video-player-type=”h5″有效;
  • x-webkit-airplay=”true”:iOS的airplay功能,一般用于投屏到大屏幕上,这个在H5场景下其实用不着

查看详细 »

WordPress网站不安全总是被黑,有哪些安全策略?

知乎原答:https://www.zhihu.com/question/385295712/answer/1666754670

用WordPress开发的网站,如果被黑,99%都是没有升级造成的。这既包含了主程序更新,也包括插件和主题更新

主程序更新

WP主程序一定要保持最新,这是个老生常谈的话题了。WP作为市场占有第一的CMS,是有无数黑产盯着的,但是WP又是升级更新最频繁的CMS,每个月都有小到0.0.1的版本号升级,有时候还有多次,多是给安全打补丁。这就形成了一个有趣的现象:

最不安全的CMS:旧版本的WordPress
最安全的CMS:最新版的WordPress
查看详细 »

我用WordPress建站,为什么不用Elementor、The 7、Avada、Divi之类的主题和插件


我们去年有一个项目就是接手一个WordPress + Elementor做的企业站,而且是一家英国公司做的。客户嫌英国人后期服务响应太佛系,跟不上他们的需求,经过对我们工作室的一番了解后,就把网站全部包给我维护了。

原本我有个原则是不接烂尾项目,因为怕陷入“祖传代码”。不过看了下这个网站发现没有任何技术含量,除了一些css,英国人愣是一行自己的前后端代码都没写,所有的页面都是靠Elementor一格一格的“设置”出来的。加上客户付钱爽快,我就接下这活了。正好,用这个机会把整个网站都熟悉了一遍,了解了页面上每个模块是怎么通过后台,不写代码的实现出来的。这个网站给我的感受有两点,应该就是Elementor构建起的网站普遍的感受:

1. 速度慢

前端还好,这只是个企业展示站,用静态化+CDN优化下,普通用户访问速度还能接受。后端则是慢得很。当然我知道如果光用Elementor,这速度也不至于慢到不能接受,但尝试过多语言(WPML)+ Elementor的人应该不多吧? 这速度就能刷新我的承受下限了。WPML的大查询量+Elementor无数细碎的设置读取,对后台的影响是很成问题的。这个网站的数据量也一直在增加,因为速度变得不可维护的日子会越来越近。 查看详细 »

WordPress前端,自制拖放区域上传文件的轮子

上个月写过一篇WordPress通过Rest API自定义附件上传接口,那篇文章主要介绍了如何打通前后端,利用Rest API保存“抓取”已知URL的文件。不过在更多的情况下,我们还是需要通过自己的表单上传文件。正好这个月有个项目,有个表单需要拖放文件到指定区域里,提交表单的时候上传文件。如果我用Gravity Forms给的文件上传域,它只有原生的点击选取本地的文件组件,并没有拖放选取文件的组件,所以这里就需要造一个轮子了。

先说结果,最后实现出来是这样子的:
WordPress前端,自制拖放区域上传文件的轮子

文件拖到区域上方,区域会变色;拖入后区域内显示文件名,判断文件格式和尺寸是否合规;点击清除,会重置区域。


查看详细 »

Yoast SEO插件恢复使用Meta Keywords的方法

Meta Keywords,其实就是SEO页面基本3要素“TDK”中的最后一个“K” – Keywords。在页面上大致表现为这样一行代码:

<meta name="keywords" content="关键词1, 关键词2, 关键词3" />

其实TDK已经是一个过时的概念了,因为这个Keywords关键词在各大搜索引擎的作用已经被清零。所以在几年前,老牌的WordPress SEO插件Yoast SEO就已经取消了对页面上Meta Keywords的支持,具体为什么,可以移步看一下这篇文章:https://yoast.com/meta-keywords/

并且,Yoast连相关的钩子都去掉了,见这里:https://github.com/Yoast/wordpress-seo/issues/8775

但是我们国内建站行业中,有很多半吊子的SEOer,仍然把TDK这个概念奉为圭臬;也有一些网站站长自作聪明,动不动就在页面上堆砌十几个关键词。而我们用最好的SEO插件Yoast SEO,因为早已经摒弃了这个设置,所以是无法给页面添加Meta Keywords的。那么在无法说服这些客户的情况下,如何给页面添加这些关键字呢?我还是琢磨出了一点办法。 查看详细 »