上海WordPress网站建设、微信小程序开发、H5页面设计制作

置顶文章:这些年来我们已经积累了几十家客户,两百多个由我们独立完成的项目案例。团队虽小,能量却很大,我们一直把工作室JennyStudio作为一家正规公司运营着,把每一个项目当作自己的孩子一样培育。长期承接外包项目,若你有WordPress相关的建站需求,微信小程序开发需求、H5页面设计制作需求,请移步JennyStudio上海网站建设

我们尤其专长基于WordPress的各种类型的网站开发,和大部分靠WordPress吃饭的公司不同的是: 查看详细 »

WooCommerce网店促销,给促销价格添加自定义名称

双十一快要到了,接到客户的临时需求,是为他们的WooCommerce网店大促销做一些小修改。其中一个修改是给设置了促销价格的商品添加价格注释,就像以下这个样子。

很简单的一个需求,利用woocommerce_get_price_html这个钩子就能实现,代码如下:

1
2
3
4
5
6
function brain1981_change_product_html( $price_html, $product ) {
	if( $product->is_on_sale() ) {
		$price_html.='<span style="display:block;font-size:12px;font-weight:normal;color:#c98c4b;">双十一活动折扣</span>';
	}
	return $price_html;
}

查看详细 »

WordPress自定义文章类型和自定义分类共用同一个根路径slug

在WordPress中如果注册一个自定义文章类型(Custom Post Type),并且为同时为这个类型注册一个自定义分类法(Custom Taxonomy),两者使用同一个根slug,访问这个类型的页面就会发生404报错。

这个slug具体指什么呢?举例说明:
https://www.my-site.com/product/123.html
https://www.my-site.com/product/term-name

以上URL分别作为product类型页面的详情页和分类列表页,URL中的product就是根slug。在使用register_post_type注册product文章类型的时候,代码体现为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_action('init', 'create_product_post_type', 0);
function create_product_post_type() {	
	register_post_type('product', array(
		'label' => 'Products',
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'rewrite' => array('slug' => 'product'), //注意此行
		'supports' => array('title','editor','thumbnail'),
		'labels' => array (
			'name' => 'Products',
			'singular_name' => 'Product',
			'menu_name' => 'Products'
			)
		)
	);
}

注意第11行的rewrite参数,就为此自定义类型指定了根slug,即形成如下url:
https://www.my-site.com/product/123.html 查看详细 »

使用WP Super Cache予取予求地刷新指定页面静态缓存

WP Super Cache是我一直以来都在使用的超级缓存插件,他可以帮我们的网站快捷的打开静态缓存,从而大大提高访问速度,节约服务器资源。本人切身感受,同一台服务器,在所有的WP网站都启用静态缓存,并且把图片视频字体等静态资源存入CDN后,服务器的利用率可以提高80%甚至更多。这款插件的设置技巧,搜索引擎上能找到一大堆,本文就不重复了。

本文讨论在某些应用场景下,如何有效地刷新单个页面的缓存。举个例子,一些博客网站有点赞功能,点赞的数据一般我们会作为一个文章自定义字段存储在数据库中,而页面上显示的赞数是在静态缓存页面里的,访客新点了一个赞,数据库里面的那个数字是+1了,但缓存过的页面并不会刷新这个数字,你按多少次F5都没用。

这时候我们就需要手动刷新一下显示这个赞数的页面静态缓存。访客不能进入网站后台,他自己如何刷新页面静态缓存呢? 查看详细 »

把WooCommerce产品购买数量的选项改为下拉菜单

WooCommerce产品数量的选项如图所示,这是一个HTML5的数字输入框,代码表现为

<input type="number" id="***" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" placeholder="" inputmode="numeric">

这样的输入框可以让用户输入任意数字,直接把一定数量的产品加入购物车。但在一些场合下,用户其实还是更希望有个下拉菜单形式的输入框,从而可以直接选择想要购买的数量。这种场合比较适用于购买数量不多,或者日常库存不多的产品,比如不超过20件的情况。因为如果数量一多,恐怕整个屏幕高度都不够下拉列表的数字显示,反而会对用户造成更大的不方便。

下来菜单其实就是一个select元素,替换掉原来的数字框,在商品页面的前后页面表现是这样的:

查看详细 »

WooCommerce产品页面中添加用户自定义字段(product add-on),并使其影响价格

给WooCommerce产品页面添加自定义字段,并使其影响价格,在很多电商的场景中会需要这个功能。注意这里强调的是用户自定义字段,而非我之前写的 博客 介绍的产品自定义字段,两者不是一个东西。
举几个例子:

  • 卖T-Shirt的网站开通自定义产品的业务,比如让用户在产品页面输入希望印在T-Shirt上的文字。由于输入的文字是随机的,不可能预先设定好产品变量满足需求,只能在产品页面上添加让用户可以自己填写的字段。用户输入文字,即代表产品有定制部分,价格会在基础款式的基础上增加一些。
  • 刻字服务,提供一个字段让用户输入姓名,根据姓名的字数生成新的价格。
  • 蛋糕定制,允许用户填写自己的祝福语在蛋糕上,根据祝福语的长度生成新的价格。
  • 单个产品添加注释字段。我之前写过给订单增加额外注释字段的文章,但如果用户需要对订单内每个产品写需求注释,则用这个功能会更好。
  • 其他,诸如贺卡定制、各种礼物、工艺品、日用品定制等等,都可能需要这个功能…

WooCommerce产品用户自定义字段,英文翻译叫做“WooCommerce product add-on”,在产品页面上可以这样表现:
WooCommerce产品用户自定义字段
我们可以同时添加多个字段,也可以用select、radio、checkbox,datepicker,甚至是file uploader做自定义字段。

要实现这个功能,市面上已经有不少插件了,在官方插件市场上搜一下“WooCommerce product add-on”关键词,就能找到不少同类插件。我测试过过几款,发现功能都差不多,它们也都有免费版和收费版两个版本。一般来说,这类插件的免费版提供各种常规类型的自定义字段,收费版则提供一些特殊类型的自定义字段。另外如果你需要通过这些字段影响商品价格,这个功能我没有在免费版里见过,都需要购买付费版实现。付费版价格在39 – 69美元之间,看上去并不贵。但我的原则仍然是能不用插件就不用,需要用户自定义字段的场景,实际上字段都不多,这个功能不复杂,完全可以自己写出来。 查看详细 »

如何让网页的某些部分内容不被谷歌收录?

如果要阻止搜索引擎索引网站的某个页面,只要将此页面路径添加到robots.txt中。本文要讨论的不是这个,而是要让搜索引擎在收录该页面的时候,不收录这个页面上特定部分的内容。这样做有什么意义呢?举例说明:

比如在JennyStudio网站上,我们对案例页面增加了一段文字说明,这段文字呈现在正文之前,搜索引擎收录该案例页面的时候这段文字会被正文先读取,导致搜索结果的摘要部分显示了这段文字,影响收录效果。而且我们每个案例页面都有这段文字,大量重复段落内容的出现也在另一方面不利于搜索效果,所以我打算不让搜索引擎收录此段文字。

查看详细 »

2021年WordPress的市场份额继续飞速上涨

唠点软话题,非技术范畴的。

以下图片是今年1月和8月的网站CMS市场份额对比图。这个统计是整个互联网的网站所使用的各家CMS(内容管理系统)的占比,简单拿排名第一的WordPress来说,就是在2021年8月,全网有42.4%的网站是基于WordPress搭建的,这是一个几千万的数量级。上下对比则可以看到WordPress在7个月内又多占了接近3%的份额,而3%已超过排名第三的Joomla当前的总份额了,WP的涨势仅用了7个月就吃掉了第三名以后任何一家的总份额,非常惊人。这不是一个野鸡统计表,它来自于w3techs.com,链接点此

这对于一直在使用WordPress建站的我们来讲,也是有很大的激励作用的。虽然我们并不卖主题和插件,不怎么靠WordPress原生的生态吃饭,但每每看到有优秀的网站是使用WordPress搭建的时候,内心就很受鼓舞。
查看详细 »

LNMP1.7更新Let’s Encrypt SSL证书失败的解决方法

最近发现去年安装LNMP1.7的两台云主机,无论是自动续期还是手动输入命令安装Let’s Encrypt SSL证书都不成功。输入lnmp ssl add命令后按提示操作,报错信息是这样的:

搜了一遍网络,原因应该是这个 https://github.com/acmesh-official/acme.sh/wiki/Change-default-CA-to-ZeroSSL

解决方式是运行以下命令后再安装证书即可:

/usr/local/acme.sh/acme.sh --set-default-ca --server letsencrypt

LNMP安装Jemalloc,配置MySQL内存优化

Jemalloc是一款服务器内存优化组件,在LNMP环境的安装包中可以选择安装。一般来说一台服务器上运行3-5个访问量不大的WordPress网站是绰绰有余的,所以很长一段时间里,我并没有特意研究过服务器内存优化,每次装LNMP的时候会选择不安装。

最近碰到一台服务器内存吃得很厉害,无论怎么调php-fpm配置都降不下来,不时还来个502报错。摆在面前的只有2个选项了,要么服务器升级加内存,要么试试内存优化工具再压榨一下服务器性能。于是抱着尝试心态试试Jemalloc。

安装jemalloc

yum install jemalloc

查看详细 »

LNMP定期自动备份MySQL数据库到阿里云OSS详细步骤

研究了一下项目运维中自动备份数据库到阿里云OSS的步骤,记录一下阿里云后台和服务器的一系列操作。

阿里云后台准备工作

进入阿里云对象存储OSS后台,先开一个Bucket,命名为“brain-backup-db”。因只是做备份数据库用,所以存储类型选最便宜的“归档存储”即可,其他选项用不着的就都不开。关于费用,本文最后一节会做介绍。
创建OSS Bucket
OSS Bucket列表

然后进入这个Bucket的概览页面,找到外网访问的Endpoint,记录下来。

如果你的ECS和OSS是在同一地区的,也可以根据实际网络情况,这里的Endpoint选第二或第三个,存储速度飞快。特别说明,一般购买阿里云ECS,默认网络是经典网络,也就是说同区域的ECS数据备份到OSS上,大部分情况下可以选绿框圈出的那个;跨区域或者用的是非阿里云ECS服务器的,则选红框圈出的。

查看详细 »