长文警告, 阅读本文至少需要30分钟, 开卷有益.
烈日当空, 张大胖的同事都在午休, 大胖小心翼翼的敲着键盘, 时不时挠挠头. 路过的微风无意间穿过他的镜框,看向电脑屏幕.
哦, 原来是他朋友介绍了个私活, 开发一个生物科研行业官网, 在技术群讨论(吹水)呢.
这可难为大胖了, 大胖可不会前端.
正准备在群里招募前端队友呢, 群里的网友 Raka 提醒到, 大胖你去了解下 WordPress 吧, 不需要什么技术就可以搞出非常OK的官网.
大胖随即开始了 WordPress 的征途!
官方网站(office website),简称官网,是指政府机构、社会组织、团队、企业或者个人在互联网中所建立的具有公开性质独立网站。
官网的功能抽象的分为 4 种
在软件开发领域中官网被划分为CMS领域, 即内容管理系统(英语:content management system,缩写为 CMS)是指在一个合作模式下,
用于管理工作流程的一套制度。该系统可应用于手工操作中,也可以应用到电脑或网络里。作为一种中央储存器(central repository),
内容管理系统可将相关内容集中储存并具有群组管理、版本控制等功能。版本控制是内容管理系统的一个主要优势。
接下来分析手机巨头某米的官网.
从首页看到页面被划分为了3块
分析二级页面中的某米MIUI官网.
从首页看到页面被划分为了3块
从上述网站中不难发现CMS领域的网站, 大多被分为3块 导航栏, 页面内容, 页脚, 在点击首页进入二级页面后, 只有页面内容发生改变, 其余的原封不动.
如果CMS网站的万变不离其宗, 那么低代码甚至无代码就在情理之中了.
而 WordPress 就满足了低代码低要求.
我们必须先部署了 WordPress 才能使用它, 部署的方式无处左右有 3 种办法
这种部署方式就跳过了, 只需用钞能力点几下鼠标即可。
https://www.zhihu.com/question/46145688/answer/2525194091
https://zhuanlan.zhihu.com/p/375842458
构建 WordPress 需要 PHP + Nginx/IIS/Apache + MySQL 环境.
php7.4 是WP的主流运行环境, 以下教程基于各平台的包管理器工具安装。
Web Platform Installer 安装
https://www.microsoft.com/web/downloads/platform.aspx
各平台包管理器命令行安装
# 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
基于已有的mysql5.7 数据库, 创建给 wp 用的数据库以及用户.
Win Nginx 配置
下载 nginx 安装包
https://nginx.org/download/nginx-1.22.0.zip
部署 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' );
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;
}
}
}
当前演示环境版本:
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的代理服务
- https://hub.docker.com/r/bitnami/wordpress-nginx/tags
# 创建wordpress环境
docker-compose up -d
完成后访问 http://localhost 即可看到wordpress引导页面
基于WP(WordPress)设计一款网站大体分为 4 步
以下引导页为 wordpress:php7.4 docker 镜像部署
访问 您的wp地址:端口号/wp-admin/install.php?step=1 进入引导页
选择语言为中文简体
设置好后点击安装WordPress
之后安装成功, 会有提示, 点击登录.
更改语言为简体中文, 输入用户密码, 点击记住我, 后登录到wp管理后台
进入WP管理后台
进入 wp 主题外观中, 点击安装主题
搜索 zakra 主题, 点击安装
查看主题效果, 点击查看站点
这是主题未适配前的效果, 通过配置可以让网站变得更漂亮
zakra 主题 分为pro 与 free 版, 以下演示基于 free 版。
打开zakra教程
https://docs.zakratheme.com/en/article/how-to-change-the-content-of-demos-126y8xg/
主题可定制为 7 点
生物科研行业官网设计大纲
访问 您的wp地址:端口号/wp-admin/themes.php?page=zakra-options 进入文档
基于官方教程, 简单适配模版后的页面效果. 选择适合您业务的模版至关重要。
可以通过倒入模版demo, 获取更多配置选项。
访问 您的wp地址:端口号/wp-admin/themes.php?page=demo-importer&browse=all 进入demo 列表
您也可以自定义多套模版, 最后选取最适合您业务到模版来设计.
更多设计技巧推荐观看该频道. https://www.youtube.com/watch?v=cTHC7mMjGHU
文章与页面是wordpress的二级页面格式
两者不同点
创建一个文章 点击写文章
写好之后, 新建并挂载公司一览分类 , 点击发布
创建一个页面
点击新建页面
挂载分类/文章/页面到导航栏
点击左侧添加列表, 将文章,分类,页面挂载到导航栏下, 选中显示位置
这一步要在配置完, 大多数配置项与页面设计, 比如模版适配, 文章/页面设计等。
网站运营关系到网站能否被更多人熟知, 一般分为以下三个方面.
加载速度关系到网站的打开率, 如果一个网站完全加载需要三秒, 估计就没有多少人愿意来用, 基本上在网络畅通的情况下一秒钟内要加载网页内容. 而SEO则是线上用户借助搜索引擎检索网站的入口, SEO 做的不好, 就会陷入无人问津的结果. 运营活动作为活跃用户与网站交互的一个途径, 我们能借助活动让用户在网站上停留更久.
基本上网站的运营都是基于插件来完成, 无需太多编程技巧.
网站加载资源分为 图片以及网页脚本资源, 而兼容性则是需要依靠多个浏览器多个分辨率访问测试, 并制定运营标准, 定时备份。
图片资源使用 EWWW Image Optimizer 压缩
网页脚本资源使用 autoptimize 压缩
https://wordpress.org/plugins/autoptimize
自动优化使优化您的网站变得非常容易。它可以聚合、缩小和缓存脚本和样式,默认在页眉中注入 CSS,但也可以内联关键 CSS 并将聚合的完整 CSS 推迟,将脚本移动和推迟到页脚并缩小 HTML。
为网站装上 WP Super Cache 缓存
SEO 全称Search Engine Optimization, 就是搜索引擎优化, 我们要让网站更好的被搜索引擎检索,并且主动去申报给搜索引擎。
我从接触 WP 到实际部署上线 WP 网站, 没有写过一行PHP代码, 但是因为安装插件修改过
很多PHP配置文件与其他中间件配置, 自定义程度高低根据不同模版。 由此看来技术力要求是比较低的, 一般的运维人员是完全可以搞定的,
如果对页面要求比较高, 对CSS与PHP进行少量编辑即可, 一般情况是不需要的。
其实这个问题也可以理解为低代码平台需要程序员吗?我个人觉得还是需要的, 比如微软的新闻网站
可能模版是制作不出来的, 可能是微软自己研发的WP模版, 甚至也贡献了不少WP插件, 这种情况就需要PHP程序员了。
如果您只是作为一个大众化的官网肯定是不需要的,如果要做类似与MIUI官网的效果, 随着复杂程度指数增加, 模版是提供不了的.
学习并使用WP对程序员是很有必要的, 我们学习WP的架构思路用在适合的场景, 才能更快更简单的解决我们遇到的需求.
像猫咪一样, 永远保持好奇!