改进 WordPress 文章样式,实现一键复制到微信公众号无需修改即可发布

我在「WordPress果酱」公众号写文章的习惯,都是先在我爱水煮鱼博客上写好文章之后,再一键复制到微信公众号发布的。

但是由于复制的时候一些样式会莫名其妙丢失,所以还是需要在微信公众号后台做一下样式调整,非常费时费力。

所以今天就花了一个上午的时间,针对微信公众号编辑器,调整了一下博客文章的样式,实现了一键复制到微信公众号无需任何修改即可。😎

标题样式

首先我把标题的样式改了一下,之前是标题下面一条线,感觉有点难看,现在改成这个样子,感觉明显高级多了。

图片样式

如上图所示,把文章中的图片都设置了 6px 半径的阴影效果,这样图片有点发光的效果,比较好看。

表格样式

技术类的文章会比较多用到表格,我针对微信公众号,特别优化了一下表格的显示:

流量单价
0GB-10GB(含)免费
10GB-10TB(含)0.21元/GB
10TB-50TB(含)0.16元/GB
50TB-100TB(含)0.14元/GB
100TB-1PB(含)0.13元/GB
大于1PB0.12元/GB

文章字体

如果仔细看,可以看到整个文章的字体变得比较细,这个主要为了方便阅读,这个字体整个效果看起来会清爽很多。我看到很多技术类的公众号,都是使用这个字体列表,我是直接抄过来的,看起来效果真的不错。

body{
	font-family: Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, "Open Sans", "Helvetica Neue", "sans-serif";
}

代码样式

技术性的文章怎么可能少的了代码呢,所以代码样式是非常重要的,我也是做了很多的优化,如果上面文章字体的代码样式效果,怎么样,我再去搞一段 PHP 代码演示一下:

add_action('plugins_loaded', function(){	// 所有插件都已经加载
	if(!did_action('wpjam_loaded')){		// 确保已加载 WPJAM Basic 插件
		return;
	}

	$fields	= [
		'seo_title'			=> ['title'=>'SEO标题',	'type'=>'text',	'class'=>'large-text',	'placeholder'=>'不填则使用标题'],
		'seo_description'	=> ['title'=>'SEO描述',	'type'=>'textarea'],
		'seo_keywords'		=> ['title'=>'SEO关键字','type'=>'text',	'class'=>'large-text']
	];

	wpjam_register_post_option('seo', [
		'title'			=> 'SEO设置',	// 自定义选项标题
		'context'		=> 'side',		// 显示在文章编辑页的侧边
		'list_table'	=> true,		// 后台文章列表页也支持弹窗设置
		'page_title'	=> 'SEO设置',	// 文章列表点击弹窗的标题
		'fields'		=> $fields
	]);
});

怎么样,效果很不错吧,你可以把手机调到暗黑模式,试试,也是蛮不错的。


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。