技术冲浪: 拥抱 WordPress 官网时代

2022-10-12 01:14 来源：读者提供作者：网友发布浏览：16

核心提示长文警告, 阅读本文至少需要30分钟, 开卷有益.前言烈日当空, 张大胖的同事都在午休, 大胖小心翼翼的敲着键盘, 时不时挠挠头. 路过的微风无意间穿过他的镜框,看向电脑屏幕.哦, 原来是他朋友介绍了个私活, 开发一个生物科研行业官网, 在

长文警告, 阅读本文至少需要30分钟, 开卷有益.

前言烈日当空, 张大胖的同事都在午休, 大胖小心翼翼的敲着键盘, 时不时挠挠头. 路过的微风无意间穿过他的镜框,看向电脑屏幕.哦, 原来是他朋友介绍了个私活, 开发一个生物科研行业官网, 在技术群讨论呢. 这可难为大胖了, 大胖可不会前端.正准备在群里招募前端队友呢, 群里的网友 Raka 提醒到, 大胖你去了解下 WordPress 吧, 不需要什么技术就可以搞出非常OK的官网. 大胖随即开始了 WordPress 的征途!从首页看到页面被划分为了3块

导航栏

Logo
各产品线外链

页面内容

多张静态图片
动态Banner图

页脚

各项服务文字链接
备案信息, 公示信息

分析二级页面中的某米MIUI官网.

MIUI官网

从功能上看MIUI官网聚焦于流畅的展示产品特性, 设计类似与 iphone 手机官网.
从技术上看主要基于 Next.js 服务器代理 webpack 打包后的 React 进行 CSR 渲染, 图片托管自tencent-COS, 除了数据上报没有用任何接口.
猜测如果要对任何内容进行管理需要程序员重新发包.

microsoft 新闻网站综合分析运维 WordPress

我们必须先部署了 WordPress 才能使用它, 部署的方式无处左右有 3 种办法

官方云托管

https://
wordpress.org/hosting
优点

十分钟后, 您就可以得到一个 wordpress
随着网站的流量增长, 轻松扩展服务
运维要求低, 不需要太多计算机知识
有官方技术支持

缺点

年收费 400 - 1000 RMB, 因为只能部署 WordPress 这个价格不算特别便宜
不能利用已有的IT资源

基于已有的IT资源部署

https://
make.wordpress.org/host
ing/handbook/server-environment
优点

一天后, 您就可以得到一个 wordpress
价格便宜
自定义程度高

缺点

部署麻烦
不安全, 如果是部署在内网容易引起攻击

Docker 容器部署

https://
hub.docker.com/_/wordpr
ess
优点

一个小时后, 您就可以得到一个 wordpress
部署方便
升级维护方便

缺点

mysql db 部署在容器中, 不太稳定
需要部署环境能安装 docker, win server 2012 之类的服务器部署麻烦

官方云托管这种部署方式就跳过了, 只需用钞能力点几下鼠标即可。

各平台包管理器命令行安装

# win winget 
winget serach phpwinget install xxxx# centos yum
yum -y install gcc gcc-c++yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpmyum install http://rpms.remirepo.net/enterprise/remi-release-7.rpmyum -y install yum-utilsyum-config-manager --enable remi-php74yum -y install php php-mcrypt php-devel php-cli php-gd php-pear php-curl php-fpm php-mysql php-ldap php-zip php-fileinfo

验证是否安装成功

php -vWordPress MySQL 安装基于已有的mysql5.7 数据库, 创建给 wp 用的数据库以及用户. WordPress 反向代理服务 Nginx 安装

Nginx

推荐使用, 部署方便

WinServer 标配的闭源Web服务器, 问题太多且使用麻烦, 不推荐

Apache

太老了, 不好维护, wp固定链接配置麻烦, 不推荐

Win Nginx 配置

下载 nginx 安装包https://nginx.org/download/nginx-1.22.0.zip

开启 Win 80/443 对外端口
基于 nssm 将 nginx.exe 注册为开启自启

部署 WordPress

下载 nginx https://wordpress.org/latest.zip将安装包解压到nginx/html 目录配置 wp-config.php

define
;
define
;
define
;
define
;
define
;
define
;
define
;
define
;

基于 nssm 将 php-cgi.exe 注册为开启自启

php-cgi.exe -b 127.0.0.1:9000 -c php.ini

Nginx 配置

# 配置cpu个数worker_processes  4;events {worker_connections  65535;multi_accept on;  }http {  proxy_hide_header X-Powered-By;  proxy_hide_header Server;  include mime.types;  default_type application/octet-stream;  server_names_hash_bucket_size 128;  client_header_buffer_size 32k;  large_client_header_buffers 4 32k;  client_max_body_size 1024m;  client_body_buffer_size 10m;  sendfile on;  tcp_nopush on;  keepalive_timeout 120;  server_tokens off;  tcp_nodelay on;  fastcgi_connect_timeout 300;  fastcgi_send_timeout 300;  fastcgi_read_timeout 300;  fastcgi_buffer_size 64k;  fastcgi_buffers 4 64k;  fastcgi_busy_buffers_size 128k;  fastcgi_temp_file_write_size 128k;  fastcgi_intercept_errors on;  #Gzip Compression  gzip on;  gzip_buffers 16 8k;  gzip_comp_level 6;  gzip_http_version 1.1;  gzip_min_length 256;  gzip_proxied any;  gzip_vary on;  gzip_typestext/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xmltext/javascript application/javascript application/x-javascripttext/x-json application/json application/x-web-app-manifest+jsontext/css text/plain text/x-componentfont/opentype application/x-font-ttf application/vnd.ms-fontobjectimage/x-icon;  gzip_disable "MSIE [1-6].";  ssl_buffer_size 4k;  ssl_session_cache   shared:SSL:50m;   ssl_session_timeout 4h;server { listen80; server_name  www.xxxx.cn xxxx.cn;rewrite ^$ https://${server_name}$1 permanent; }    server { listen 443 ssl http2; server_name www.xxx.cn xxxx.cn;keepalive_timeout   70;    ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";   add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;   ssl_protocols TLSv1.1 TLSv1.2;   add_header X-Content-Type-Options nosniff;  add_header X-Xss-Protection 1;  add_header X-frame-Options DENY;   ssl_prefer_server_ciphers on;# 配置你的nginx/html根目录 root C:nginxhtml; index index.php; # 配置你的nginx证书目录 ssl_certificate C:/nginx/cert/8236454_xxxx_cn_nginx/8236454_xxxx.cn.pem; ssl_certificate_key  C:/nginx/cert/8236454_xxxx_cn_nginx/8236454_xxxx.cn.key;  location = /favicon.ico { log_not_found off; access_log off; }  location = /robots.txt { allow all; log_not_found off; access_log off; } location / { try_files $uri $uri/ /index.php $args; } # 配置代理 php 服务 location ~ .php$ { try_files $uri =404; fastcgi_pass 127.0.0.1:9000; fastcgi_index   index.php; fastcgi_param script_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } location ~ .*.$ {  expires 30d;  access_log off;}location ~ .*. $ {  expires 7d;  access_log off;}location /nginx_status {  stub_status on;  access_log off;  allow 127.0.0.1;  deny all;}location ~ ^/ {  deny all;}  }}

部署后的注意事项

迁移WP项目

使用 all-in-one-wp-migration, 建议使用低版本插件
https://
github.com/d0n601/All-I
n-One-WP-Migration-With-import

定时备份WP

使用 UpdraftPlus 插件
https://
themeforwp.net/archives
/updraftplus/

设计 WordPress

基于WP设计一款网站大体分为 4 步

引导页
模版适配
文章/页面编写
验证效果

引导页以下引导页为 wordpress:php7.4 docker 镜像部署访问您的wp地址:端口号/wp-admin/install.php step=1 进入引导页选择语言为中文简体更改语言为简体中文, 输入用户密码, 点击记住我, 后登录到wp管理后台模版适配进入 wp 主题外观中, 点击安装主题查看主题效果, 点击查看站点打开zakra教程

https://

docs.zakratheme.com/en/

article/how-to-change-the-content-of-demos-126y8xg/

主题可定制为 7 点

全局
标题
内容
页脚
WooCommerce
菜单
附加 CSS

返回到外观 - 主题列表点击zakra主题上的自定义可以通过倒入模版demo, 获取更多配置选项。

访问您的wp地址:端口号/wp-admin/themes.php page=demo-importer&browse=all 进入demo 列表写好之后, 新建并挂载公司一览分类 , 点击发布

挂载分类/文章/页面到导航栏

调整好导航栏后, 点击保存菜单, 看看导航栏效果运营 WordPress 网站运营关系到网站能否被更多人熟知, 一般分为以下三个方面.

加载速度与客户端兼容性
SEO
运营活动

加载速度关系到网站的打开率, 如果一个网站完全加载需要三秒, 估计就没有多少人愿意来用, 基本上在网络畅通的情况下一秒钟内要加载网页内容. 而SEO则是线上用户借助搜索引擎检索网站的入口, SEO 做的不好, 就会陷入无人问津的结果. 运营活动作为活跃用户与网站交互的一个途径, 我们能借助活动让用户在网站上停留更久.

基本上网站的运营都是基于插件来完成, 无需太多编程技巧.加载速度与客户端兼容性网站加载资源分为图片以及网页脚本资源, 而兼容性则是需要依靠多个浏览器多个分辨率访问测试, 并制定运营标准, 定时备份。

图片资源使用 EWWW Image Optimizer 压缩

使用 EWWW IO，您可以从任何插件优化所有现有图像，然后让 EWWW IO 自动处理新图像上传。
https://
wordpress.org/plugins/e
www-image-optimizer

网页脚本资源使用 autoptimize 压缩

https://
wordpress.org/plugins/a
utoptimize
自动优化使优化您的网站变得非常容易。它可以聚合、缩小和缓存脚本和样式，默认在页眉中注入 CSS，但也可以内联关键 CSS 并将聚合的完整 CSS 推迟，将脚本移动和推迟到页脚并缩小 HTML。

为网站装上 WP Super Cache 缓存

https://
themeforwp.net/archives
/wp-super-cache/
这一步是最重要的, 访问WP展示的数据都是基于数据库查询, 启用缓存后改为修改时重新生成缓存, 查询时使用缓存.
此插件从您的动态 WordPress 博客生成静态 html 文件。
生成 html 文件后，您的网络服务器将提供该文件，而不是处理相对更重和更昂贵的 WordPress PHP 脚本。

SEOSEO 全称Search Engine Optimization, 就是搜索引擎优化, 我们要让网站更好的被搜索引擎检索，并且主动去申报给搜索引擎。

all-in-one-seo-pack

https://
wordpress.org/plugins/a
ll-in-one-seo-pack/
AIOSEO 让正确设置 WordPress SEO 变得容易。
我们的智能 WordPress SEO 设置向导可帮助您根据您独特的行业需求优化网站的 SEO 设置。

google-analytics-for-wordpress

https://
wordpress.org/plugins/g
oogle-analytics-for-wordpress/
借助 MonsterInsights，我们可以“毫不费力地”在 WordPress 中正确设置 Google Analytics。

是的，您只需单击几下即可启用所有高级 Google Analytics（分析）功能。

运营活动

wpforms-lite 在网站上基于表单让用户进行报名,获取资料等活动.

https://
wordpress.org/plugins/w
pforms-lite/
WPForms 允许您在几分钟而不是几小时内为您的网站创建漂亮的联系表格、反馈表格、订阅表格、付款表格和其他类型的表格！

wpstream 在网站上进行产品发布直播,像苹果发布会一样.

https://
wordpress.org/plugins/w
pstream/
无论您使用的是笔记本电脑、手机还是 GoPro，在您的网站上进行直播和流式传输视频从未如此简单。您需要复杂而复杂的实时流媒体设置的日子已经一去不复返了。提供免费观看、按次付费和订阅直播。

HUBSPOT ALL-IN-ONE 在网站上与您的客户交互

https://
wordpress.org/plugins/l
eadin/
当然，Hubspot的WordPress插件包括表单和弹出窗口，但这只是冰山一角。在使用简单的拖放接口开发表单和弹出窗口的能力之上，Hubspot将收集您在WordPress网站上的任何形式的提交，并自动将这些导线添加到CRM中，因此您可以开始培养它们立即进入忠诚的客户。

PS: 用 WordPress 后需要程序员吗 我从接触 WP 到实际部署上线 WP 网站, 没有写过一行PHP代码, 但是因为安装插件修改过很多PHP配置文件与其他中间件配置, 自定义程度高低根据不同模版。由此看来技术力要求是比较低的, 一般的运维人员是完全可以搞定的, 如果对页面要求比较高, 对CSS与PHP进行少量编辑即可, 一般情况是不需要的。

其实这个问题也可以理解为低代码平台需要程序员吗？我个人觉得还是需要的, 比如微软的新闻网站可能模版是制作不出来的, 可能是微软自己研发的WP模版, 甚至也贡献了不少WP插件, 这种情况就需要PHP程序员了。