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

长文警告, 阅读本文至少需要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
• 推荐使用, 部署方便
• IIS
• 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程序员了。