长文警告, 阅读本文至少需要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 之类的服务器部署麻烦
官方云托管
这种部署方式就跳过了, 只需用钞能力点几下鼠标即可。
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引导页面
部署后的注意事项
- 迁移WP项目
- 使用 all-in-one-wp-migration, 建议使用低版本插件
- github.com/d0n601/All-…
- 定时备份WP
- 使用 UpdraftPlus 插件
- themeforwp.net/archives/up…
设计 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的二级页面格式
两者不同点
- 页面
- 适合不经常改变的内容, 比如联系方式
- 不显示发表时间, 作者
- 不可挂载分类
- 文章
- 适合经常修改的内容, 比如博客
- 显示发表时间, 作者
- 可挂载分类
创建一个文章 点击写文章
写好之后, 新建并挂载公司一览分类 , 点击发布
创建一个页面 点击新建页面
写好之后, 点击发布
挂载分类/文章/页面到导航栏
点击左侧添加列表, 将文章,分类,页面挂载到导航栏下, 选中显示位置
调整好导航栏后, 点击保存菜单, 看看导航栏效果
验证效果
这一步要在配置完, 大多数配置项与页面设计, 比如模版适配, 文章/页面设计等。
- 查看网站信息正确性
- 查看网站各页面动效, 信息, 字体正确与否
- 查看浏览器的兼容性
- 如果使用了小众图片格式, 可能主流浏览器不兼容, 比如 Safari 浏览器不支持webp格式
- 请打开Safari 浏览器/Chrome 浏览器/火狐浏览器进行兼容性测试, 这三个主流浏览器内核已经能覆盖您客户的绝大多浏览器.
- 查看第三方服务的鲁棒性
- wp一些插件依赖的服务,可能会被墙掉, 请退出管理员后, 按F12查看全部网络请求
- 比如Google字体等
- 借助第三方插件测试网站
- Lighthouse 是一个开源的自动化工具,用于提高 Web 应用程序的性能、质量和正确性。
- chrome.google.com/webstore/de…
- 每次新增插件, 修改配置后, 及时使用Lighthouse进行测试。
运营 WordPress
网站运营关系到网站能否被更多人熟知, 一般分为以下三个方面.
- 加载速度与客户端兼容性
- SEO
- 运营活动
加载速度关系到网站的打开率, 如果一个网站完全加载需要三秒, 估计就没有多少人愿意来用, 基本上在网络畅通的情况下一秒钟内要加载网页内容. 而SEO则是线上用户借助搜索引擎检索网站的入口, SEO 做的不好, 就会陷入无人问津的结果. 运营活动作为活跃用户与网站交互的一个途径, 我们能借助活动让用户在网站上停留更久.
基本上网站的运营都是基于插件来完成, 无需太多编程技巧.
加载速度与客户端兼容性
网站加载资源分为 图片以及网页脚本资源, 而兼容性则是需要依靠多个浏览器多个分辨率访问测试, 并制定运营标准, 定时备份。
-
图片资源使用 EWWW Image Optimizer 压缩
- 使用 EWWW IO,您可以从任何插件优化所有现有图像,然后让 EWWW IO 自动处理新图像上传。
- wordpress.org/plugins/eww…
-
网页脚本资源使用 autoptimize 压缩
-
自动优化使优化您的网站变得非常容易。它可以聚合、缩小和缓存脚本和样式,默认在页眉中注入 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的架构思路用在适合的场景, 才能更快更简单的解决我们遇到的需求.
像猫咪一样, 永远保持好奇!