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

1,788 阅读15分钟

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

前言

烈日当空, 张大胖的同事都在午休, 大胖小心翼翼的敲着键盘, 时不时挠挠头. 路过的微风无意间穿过他的镜框,看向电脑屏幕.

哦, 原来是他朋友介绍了个私活, 开发一个生物科研行业官网, 在技术群讨论(吹水)呢.

这可难为大胖了, 大胖可不会前端.

正准备在群里招募前端队友呢, 群里的网友 Raka 提醒到, 大胖你去了解下 WordPress 吧, 不需要什么技术就可以搞出非常OK的官网.

大胖随即开始了 WordPress 的征途!

在这里插入图片描述

搞官网为什么选 WordPress ?

官方网站(office website),简称官网,是指政府机构、社会组织、团队、企业或者个人在互联网中所建立的具有公开性质独立网站。

官网的功能抽象的分为 4 种

  • 信息公告,行业新闻,团队展示,产品展示 (zf,企业,NGO团体,科研团队相关公告)
  • 博客记录 (用Vlog,Blog,Clog记录变化)
  • 营销转化 (借助广告进行营销漏斗, 用在线支付/线下引流提高客户成交量)
  • 保证获取信息的国际性,正确性,及时性 (国际化,联系方式,联系地址,文章引用追溯)

在软件开发领域中官网被划分为CMS领域, 即内容管理系统(英语:content management system,缩写为 CMS)是指在一个合作模式下, 用于管理工作流程的一套制度。该系统可应用于手工操作中,也可以应用到电脑或网络里。作为一种中央储存器(central repository), 内容管理系统可将相关内容集中储存并具有群组管理、版本控制等功能。版本控制是内容管理系统的一个主要优势。

接下来分析手机巨头某米的官网.

在这里插入图片描述

从首页看到页面被划分为了3块

  • 导航栏
    • Logo
    • 各产品线外链
  • 页面内容
    • 多张静态图片
    • 动态Banner图
  • 页脚
    • 各项服务文字链接
    • 备案信息, 公示信息

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

在这里插入图片描述

从首页看到页面被划分为了3块

  • 导航栏
    • 各产品线外链
    • 面包屑
  • 页面内容
    • CSS,JS玩命渲染巨多图片
  • 页脚
    • 产品展示切换
    • 声明和说明
    • 备案信息, 公示信息

某米系官网综合分析

  • 某米官网
    • 从功能上看某米官网聚焦于各产品线产品引流以及国际化, 而营销转化多放在了二级页面. 设计类似与 hao123 的导航网站.
    • 从技术上看主要基于 Nuxt.js SSR 渲染页面 (可能基于某米封装的 MIFE 服务器), Js,CSS,图片等的静态资源基于Nginx代理. 一些需要经常改变的内容比如 页脚的公示信息与网站的国际化则基于接口获取。
    • 猜测如果要对非接口内容进行修改需要程序员重新发包.

在这里插入图片描述

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

microsoft 新闻网站综合分析

在这里插入图片描述 从首页看到页面被划分为了4块

  • COVID-19 信息
  • 导航栏
    • 各产品线外链
    • 公司信息
    • Logo
    • 搜索
    • 购物车
  • 页面内容
    • 公司新闻
    • 科技新闻
    • 查看更多
  • 页脚
    • 关注我们
    • 分享此页面
    • 各项服务文字链接
    • 网站公示信息

从上述网站中不难发现CMS领域的网站, 大多被分为3块 导航栏, 页面内容, 页脚, 在点击首页进入二级页面后, 只有页面内容发生改变, 其余的原封不动. 如果CMS网站的万变不离其宗, 那么低代码甚至无代码就在情理之中了. 而 WordPress 就满足了低代码低要求.

  • WordPress优点
    • 免费,安全,友好
    • 支持编辑器自定义网站
    • 编辑器版本控制
    • 网站质量好 (Lighthouse 4项指标均优于一般网站)
    • 设计,运维步骤简单
    • 安全,简单的管理网站内容
    • 生态齐全,近万插件/模版可供选择
  • WordPress缺点
    • 无法做出独一无二的炫酷网站
    • 运营人员要求高
    • 借助模版很难做出创新
    • 绝大多数生态都是外国人开发的,可能会遇到水土不服的情况 在这里插入图片描述

运维 WordPress

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

  • 官方云托管
    • wordpress.org/hosting
    • 优点
      • 十分钟后, 您就可以得到一个 wordpress
      • 随着网站的流量增长, 轻松扩展服务
      • 运维要求低, 不需要太多计算机知识
      • 有官方技术支持
    • 缺点
      • 年收费 400 - 1000 RMB, 因为只能部署 WordPress 这个价格不算特别便宜
      • 不能利用已有的IT资源
  • 基于已有的IT资源部署
    • make.wordpress.org/hosting/han…
    • 优点
      • 一天后, 您就可以得到一个 wordpress
      • 价格便宜
      • 自定义程度高
    • 缺点
      • 部署麻烦
      • 不安全, 如果是部署在内网容易引起攻击
  • Docker 容器部署
    • hub.docker.com/_/wordpress
    • 优点
      • 一个小时后, 您就可以得到一个 wordpress
      • 部署方便
      • 升级维护方便
    • 缺点
      • mysql db 部署在容器中, 不太稳定
      • 需要部署环境能安装 docker, win server 2012 之类的服务器部署麻烦

官方云托管

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

www.zhihu.com/question/46…

zhuanlan.zhihu.com/p/375842458

在这里插入图片描述

基于已有的IT资源部署

构建 WordPress 需要 PHP + Nginx/IIS/Apache + MySQL 环境.

WordPress PHP 安装

php7.4 是WP的主流运行环境, 以下教程基于各平台的包管理器工具安装。

Web Platform Installer 安装

www.microsoft.com/web/downloa… 在这里插入图片描述

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

# win winget (示意)
winget serach php
winget install xxxx

# centos yum
yum -y install gcc gcc-c++
yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
yum -y install yum-utils
yum-config-manager --enable remi-php74
yum -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 -v

WordPress 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('WP_CACHE', true);
define( 'DB_NAME', 'mysql-dbname' );

/** Database username */
define( 'DB_USER', 'mysql-username' );

/** Database password */
define( 'DB_PASSWORD', 'mysql-password' );

/** Database hostname */
define( 'DB_HOST', 'localhost' );

/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

define( 'FS_METHOD', 'direct' );
  • 基于 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_types
    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
    text/javascript application/javascript application/x-javascript
    text/x-json application/json application/x-web-app-manifest+json
    text/css text/plain text/x-component
    font/opentype application/x-font-ttf application/vnd.ms-fontobject
    image/x-icon;
  gzip_disable "MSIE [1-6]\.(?!.*SV1)";

  ssl_buffer_size 4k;

	ssl_session_cache   shared:SSL:50m; 
	ssl_session_timeout 4h;


    server {
        listen       80;
        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:\nginx\html;
        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 ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
		  expires 30d;
		  access_log off;
		}
		
		location ~ .*\.(js|css)?$ {
		  expires 7d;
		  access_log off;
		}
		location /nginx_status {
		  stub_status on;
		  access_log off;
		  allow 127.0.0.1;
		  deny all;
		}
		
		location ~ ^/(\.user.ini|\.ht|\.git|\.svn|\.project|LICENSE|README.md) {
		  deny all;
		}
	}

}

在这里插入图片描述

Docker 容器部署

当前演示环境版本:

  • MacOS 10.15
  • docker v20.10.13
  • docker-compose v2.3.3
  • php 7.4
  • mysql 5.7
  • apache 2
  • wordpress 6.0.1
mkdir mysql-5.7
mkdir wordpress-php7.4
vim docker-compose.yml
# 复制粘贴以下内容
version: '3.4'
services:
   db:
     image: mysql:5.7
     volumes:
       - ../mysql-5.7:/var/lib/mysql
     restart: on-failure
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
   wordpress:
     depends_on:
       - db
     image: wordpress:php7.4
     ports:
       - "80:80"
     restart: on-failure
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
     docker-compose up -d  volumes: 
       - ../wordpress-php7.4:/var/www/html

以上 docker-compose.yml 配置的目录挂载了 mysql db 文件与apache 目录, 这里推荐使用 nginx 作为wordpress的代理服务

# 创建wordpress环境
docker-compose up -d 

完成后访问 http://localhost 即可看到wordpress引导页面 在这里插入图片描述

部署后的注意事项

设计 WordPress

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

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

引导页

以下引导页为 wordpress:php7.4 docker 镜像部署

访问 您的wp地址:端口号/wp-admin/install.php?step=1 进入引导页

选择语言为中文简体

在这里插入图片描述

  • 站点标题: 出现在您的网页标签上, 一般为公司名, 产品名
  • 用户名: 管理员登录名称
  • 密码: 自动生成到管理员登录密码
  • 您的电子邮箱地址: 用来接受WP或者第三方插件推送的邮件
  • 对搜索引擎的可见性: 是否允许被游客通过Baidu,Google等引擎检索. 如果是内部网站大可不必.

设置好后点击安装WordPress

之后安装成功, 会有提示, 点击登录. 在这里插入图片描述 更改语言为简体中文, 输入用户密码, 点击记住我, 后登录到wp管理后台 在这里插入图片描述

进入WP管理后台

在这里插入图片描述

模版适配

进入 wp 主题外观中, 点击安装主题

在这里插入图片描述

搜索 zakra 主题, 点击安装

在这里插入图片描述

查看主题效果, 点击查看站点

在这里插入图片描述

这是主题未适配前的效果, 通过配置可以让网站变得更漂亮

zakra 主题 分为pro 与 free 版, 以下演示基于 free 版。

在这里插入图片描述

打开zakra教程 docs.zakratheme.com/en/article/…

主题可定制为 7 点

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

返回到 外观 - 主题列表 点击zakra主题上的自定义 在这里插入图片描述

生物科研行业官网设计大纲

  • 设计风格
    • 网站色调为蓝色与白色为主
    • 简洁, 简单
  • 置顶栏 会议通知,联系方式
  • 导航栏
    • logo. 公司名称, slogan
    • 公司一览, 科研成果, 行业新闻, 联系我们,线上会议
    • 搜索
  • 首页内容
    • banner 图, 引导图
  • 页面详情
    • 文章
    • 侧拉栏为文章推荐
  • 页脚信息为备案信息, 行业信息, 联系我们。

访问 您的wp地址:端口号/wp-admin/themes.php?page=zakra-options 进入文档

基于官方教程, 简单适配模版后的页面效果. 选择适合您业务的模版至关重要。

在这里插入图片描述

可以通过倒入模版demo, 获取更多配置选项。

访问 您的wp地址:端口号/wp-admin/themes.php?page=demo-importer&browse=all 进入demo 列表

在这里插入图片描述

您也可以自定义多套模版, 最后选取最适合您业务到模版来设计.

更多设计技巧推荐观看该频道. www.youtube.com/watch?v=cTH…

文章/页面编写

文章与页面是wordpress的二级页面格式

两者不同点

  • 页面
    • 适合不经常改变的内容, 比如联系方式
    • 不显示发表时间, 作者
    • 不可挂载分类
  • 文章
    • 适合经常修改的内容, 比如博客
    • 显示发表时间, 作者
    • 可挂载分类

创建一个文章 点击写文章

在这里插入图片描述

写好之后, 新建并挂载公司一览分类 , 点击发布

在这里插入图片描述

创建一个页面 点击新建页面

写好之后, 点击发布 在这里插入图片描述

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

在这里插入图片描述

点击左侧添加列表, 将文章,分类,页面挂载到导航栏下, 选中显示位置

在这里插入图片描述

调整好导航栏后, 点击保存菜单, 看看导航栏效果 在这里插入图片描述

验证效果

这一步要在配置完, 大多数配置项与页面设计, 比如模版适配, 文章/页面设计等。

  • 查看网站信息正确性
    1. 查看网站各页面动效, 信息, 字体正确与否
  • 查看浏览器的兼容性
    1. 如果使用了小众图片格式, 可能主流浏览器不兼容, 比如 Safari 浏览器不支持webp格式
    2. 请打开Safari 浏览器/Chrome 浏览器/火狐浏览器进行兼容性测试, 这三个主流浏览器内核已经能覆盖您客户的绝大多浏览器.
  • 查看第三方服务的鲁棒性
    1. wp一些插件依赖的服务,可能会被墙掉, 请退出管理员后, 按F12查看全部网络请求
    2. 比如Google字体等
  • 借助第三方插件测试网站
    1. Lighthouse 是一个开源的自动化工具,用于提高 Web 应用程序的性能、质量和正确性。
    2. chrome.google.com/webstore/de…
    3. 每次新增插件, 修改配置后, 及时使用Lighthouse进行测试。

在这里插入图片描述

运营 WordPress

网站运营关系到网站能否被更多人熟知, 一般分为以下三个方面.

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

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

基本上网站的运营都是基于插件来完成, 无需太多编程技巧.

加载速度与客户端兼容性

网站加载资源分为 图片以及网页脚本资源, 而兼容性则是需要依靠多个浏览器多个分辨率访问测试, 并制定运营标准, 定时备份。

  • 图片资源使用 EWWW Image Optimizer 压缩

  • 网页脚本资源使用 autoptimize 压缩

    • wordpress.org/plugins/aut…

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

  • 为网站装上 WP Super Cache 缓存

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

SEO

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

  • all-in-one-seo-pack
    • wordpress.org/plugins/all…
    • AIOSEO 让正确设置 WordPress SEO 变得容易。我们的智能 WordPress SEO 设置向导可帮助您根据您独特的行业需求优化网站的 SEO 设置。
  • google-analytics-for-wordpress
    • wordpress.org/plugins/goo…
    • 借助 MonsterInsights,我们可以“毫不费力地”在 WordPress 中正确设置 Google Analytics。是的,您只需单击几下即可启用所有高级 Google Analytics(分析)功能。

运营活动

  • wpforms-lite 在网站上基于表单让用户进行报名,获取资料等活动.
    • wordpress.org/plugins/wpf…
    • WPForms 允许您在几分钟而不是几小时内为您的网站创建漂亮的联系表格、反馈表格、订阅表格、付款表格和其他类型的表格!
  • wpstream 在网站上进行产品发布直播,像苹果发布会一样.
    • wordpress.org/plugins/wps…
    • 无论您使用的是笔记本电脑、手机还是 GoPro,在您的网站上进行直播和流式传输视频从未如此简单。您需要复杂而复杂的实时流媒体设置的日子已经一去不复返了。提供免费观看、按次付费和订阅直播。
  • HUBSPOT ALL-IN-ONE 在网站上与您的客户交互
    • wordpress.org/plugins/lea…
    • 当然,Hubspot的WordPress插件包括表单和弹出窗口,但这只是冰山一角。在使用简单的拖放接口开发表单和弹出窗口的能力之上,Hubspot将收集您在WordPress网站上的任何形式的提交,并自动将这些导线添加到CRM中,因此您可以开始培养它们立即进入忠诚的客户。

PS: 用 WordPress 后需要程序员吗?

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

其实这个问题也可以理解为低代码平台需要程序员吗?我个人觉得还是需要的, 比如微软的新闻网站 可能模版是制作不出来的, 可能是微软自己研发的WP模版, 甚至也贡献了不少WP插件, 这种情况就需要PHP程序员了。 如果您只是作为一个大众化的官网肯定是不需要的,如果要做类似与MIUI官网的效果, 随着复杂程度指数增加, 模版是提供不了的.

学习并使用WP对程序员是很有必要的, 我们学习WP的架构思路用在适合的场景, 才能更快更简单的解决我们遇到的需求.

像猫咪一样, 永远保持好奇!

在这里插入图片描述