[WordPress] 如何优雅地给文章的配图添加阴影效果

Intro

不知道你有没有到一个细节,我博客里面的文章配图都是有阴影效果的。

增加了阴影效果的配图会更加有立体感,和文字一起更加和谐。

那么问题来了,如何给配图添加阴影效果呢?

你可能想到了用Wordpress插件

一般情况下,Wordpress的这类插件需要后端PHP把整个照片载入内存,接着使用ImageMagick库直接修改图片,增加阴影效果,顺便浪费我的EC2 CPU积分

然而,作为一个资深(也就是老的意思)的程序员,上面安装插件的方法不够优雅,而且太overkill了。

所以,建议您使用舒适达抗敏感牙膏CSS3 box-shadow

这个效果的浏览器兼容性也很高:≈95%

Show you the code

/* 我这个版本的Wordpress默认会给图片添加“.is-style-default” class */
/* "> image" 的意思是,只选择上面的class直属img标签 */
.is-style-default > img {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
}

把上述代码添加到style.css文件最后面。

你需要去到主题的源文件编辑器,才能修改文件,比如: https://you-domain.com/wp-admin/theme-editor.php?file=style.css&theme=twentyseventeen

⚠️请注意,我使用的是Wordpress 5.3.2 twentyseventeen 2017年主题,这个主题的样式文件是style.css。不同的主题,样式文件名可能不同哦。

这个是写文章时的图片配置页。is-style-default类就是这里默认生的。

完。

本文写作耗时约40分钟。

Google Search Console 域名更改迁移服务

突然发现adamliu.net还可以注册,我当然不能错过.net这个元老级域名

本来我网站的域名是adamdev.net,而且已经在Google Search Console注册,这样就可以优化google对网站的收录。

如果换了域名,也就是说原本Google收录的记录都会无效,所以我尝试找了找,万万没想到Google Search Console有域名更改服务。

Google Search Console 域名更改

你需要把新旧两个域名都在这里添加。然后在 “Settings” 选择 “Change of Address”

“Change of Address” 需要你完成两个步骤:

  1. 在旧域名HTTP服务器添加301跳转到新域名
  2. 新旧域名都需要在Google Search Console验证(通过添加TXT DNS记录)
以上是“Change of Address”失败的画面,301重定向一定要配置好。

给我的Apache添加301重定向

我这个站使用的是Bitnami WordPress Stack搭建的。

# apache config
sudo vi /opt/bitnami/apache2/conf/bitnami/bitnami.conf

# 添加如下内容到XML根节点
<VirtualHost *:80>
ServerName adamdev.net
DocumentRoot /opt/bitnami/apache2/htdocs
Redirect permanent / https://adamliu.net
</VirtualHost>

# 重启apache 即可生效
sudo /opt/bitnami/ctlscript.sh restart apache

完。

[教表弟搭博客系列] 使用阿里云国际版一键式安装WordPress

哪个男/女孩不想拥有一个有独立域名的博客网站呢?

这篇文章将介绍如何试用阿里云国际版一键安装Wordpress。

阿里云国际版提供云服务器ECS免费试用一年,有1 vCpu和1 GRam,性能完全足够。

⚠️⚠️注意⚠️⚠️

管理台都是统一的域名: https://console.aliyun.com (左上角可以选择切换区域)

创建阿里云账户

可以在这里注册:https://www.alibabacloud.com/referral?referralCode=dkdhn6

以上链接有我的推荐码哦。

注册过程中支付方式可以信用卡或者paypal。其中信用卡不能试用虚拟卡,但是paypal可以试用虚拟卡。

创建云服务器(ECS)

使用下面链接,一键傻瓜式创建云服务器。

https://www.alibabacloud.com/zh/campaign/free-trial

点击“开始试用”之后,请选择Ubuntu 18.04 64-bit。之后就可以去ECS控制台查看实例。

一些阿里云ECS和AWS EC2不同的地方:

  • 阿里云的ECS市场Wordpress版本很低(4.x),太旧了。建议使用下面提供的Bitnami WordPress一键安装包。
  • 注意,阿里云的登陆用户为root,安全起见应该要create一个普通用户。
  • 这里一键创建的云服务默认是使用密码登陆SSH的,如果你要用密钥,需要先创建然后绑定到这个实例。

登陆阿里云云服务器

你可以选择使用密码或者密钥文件SSH登陆云服务器。

Window需要安装额外的SSH客户端,点我去官方下载页面

安装Wordpress

以下为bitnami一键安装包:

wget https://downloads.bitnami.com/files/stacks/wordpress/5.3.2-3/bitnami-wordpress-5.3.2-3-linux-x64-installer.run
chmod +x ./bitnami-wordpress-5.3.2-3-linux-x64-installer.run
sudo ./bitnami-wordpress-5.3.2-3-linux-x64-installer.run
执行上面的命令后,你会进入wordpress的安装过程。
以上为wordpress的后台登陆配置。

完成后即可在浏览器输入IP地址打开。比如:http://47.75.67.33/

更改路径网站路径

你会发现你的wordpress 网址是:http://47.75.67.33/wordpress

如何把网址的 “wordpress”子目录去掉?

cd /opt/wordpress-5.3.2-3/apps/wordpress
./bnconfig --appurl /

#如果你不是 root user 要这样弄
sudo ./bnconfig --disable_banner 1 

参考

去掉bitnami Label

你发现wordpress网址右下角有个bitnami logo,别人做开源也不容易,然后我们还是要把它去掉。

有个bitanami logo在右下角。
cd /opt/wordpress-5.3.2-3/apps/wordpress
./bnconfig --disable_banner 1 

#如果你不是 root user 要这样弄
sudo ./bnconfig --disable_banner 1 

设置阿里云月度费用预警

虽然这个云服务是可以免费试用一年的。但是还是怕不小心就用了很多钱?请跟我来设置阿里云月度费用预警

请先进入账户总览页面:https://billing.console.aliyun.com/#/account/overview
设置“预警值”,如果达到了就会有邮件通知。

怕服务器被黑了不知道?

怕服务器被黑了自己不知道?设置CPU监控警报。

进入你的在云服务器实例详情页面。
创建警报规则,这些其实都是DevOps的日常。
设置通知方式。这样貌似就能睡个安稳觉了。

配置云服务器安全组(WIP)