---

title: 使用docker+WordPress开发企业官网 编辑中
category: Web
tag: WordPress
date: 2019-07-17

---

主标题：使用docker+wordpress开发企业官网

因为已经对docker熟悉了，直接进入正题，讲解的节奏会快一些，如果你不熟悉docker和docker-compose，可以参考第四部分 Docker 微服务教程--阮一峰

开发流程

配置docker-compose

如果你安装了docker，应该就默认安装了docker-compose ，试一下：

docker-compose -v
# ==> docker-compose version 1.23.2, build 1110ad01

因为众所周知的原因，需要确保docker的仓库使用的国内仓库。

mac 上 进入设置 daemon设置修改 registry，阿里云和腾讯云都提供了仓库镜像站，你也可以尝试 DaoCloud 推出的docker镜像站

下载所需文件

趁着有空先下载这俩 images

docker pull mysql:5.7 wordpress:latest

在开发阶段，我们尽可能少地使用外部资源，mysql数据库+WordPress本地。

安装WordPress

新建项目目录，这里不要顺手敲 npm init！这次和node没关系。

新建 docker-compose.yml 作为配置文件，最小化文件大概这样：

version: "2"
services:
    mysql:
        image: mysql:5.7
        environment:
            - MYSQL_ROOT_PASSWORD=123456
            - MYSQL_DATABASE=wordpress
        volumes:
            - ./mysql/data:/var/lib/mysql
        ports:
            - "3306:3306"

    web:
        image: wordpress:latest
        links:
            - mysql
        environment:
            - WORDPRESS_DB_PASSWORD=123456
        ports:
            - "127.0.0.1:9998:80"
        working_dir: /var/www/html
        volumes:
            - "./html:/var/www/html/"

几个需要嘱咐的点：

• volumes是共享文件夹的意思，这意味着我们把wp和sql文件都放到本地了，不会因为停止服务丢失信息
• ports 先对外接口，映射对内接口

万事俱备，起！

docker-compose up

补充，对于docker-compose 命令很简单：

docker-compose up #创建并开启容器
docker-compose up -d # 后台起
docker-compose down #停止并移除 容器 网络 镜像和volumes数据卷

docker-compose start #启动服务
docker-compose stop # 停止服务
# 其他略

等到console信息跑完了，就可以打开浏览器访问了，我这里是127.0.0.1:9999

看截图：

20190717143027

注意：

如果你没有看到选择语言的页面，那可能是遇到了奇怪的问题，需要修改 wp文件里的wp-config.php查找或者新增：define('WPLANG', 'zh_CN'); ，然后重启服务。有的时候没有出现这条命令，很奇怪。

接下来按照提示设置即可。

占位，我这里需要修改配置，我想访问SQL数据库。

调整网站设置

接下来，发布几篇文章，设置几个栏目，先把内容撑起来。企业网站，大部分都是静态展示页，核心还是专题页。这里为了展示，说一下我的设置，这部分信息已经脱敏，大家都一样。

点击 文章 -- 分类目录，这个地方就是设置分类的地方了。我们添加新分类目录，设置中文名，路径名，父级关系：

栏目设置

有了大概的目录结构，剩下的就是完善了，一般都是提前规划好栏目结构。

接下来就是填入一些文章占位。wp的编辑器已经更新了，现在的编辑器应该是更符合结构化存储和展示了

复制粘贴新闻，发布。

发现网址不是我们期望的格式，进入设置--固定链接，修改设置 /%category%/%post_id%.html/ 这样就是按照栏目路径设置了，更清晰明确。

(yekyi shi %postname%.html)

一些零碎工作完成之后，就是开发WordPress模板了。

wp模板结构

你可以看这里：官方文档主题开发

主题，除了图片和js，还有三部分文件：

• 样式 sytle.css
• 函数文件 functions.php
• 模板文件，从数据库里调取数据

样式

style.css 必须有注释，注释也是格式的，提取出来用来描述主题信息。

我贴一段官方出的最新专题的代码 主题29：

/*
Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

这些是必须的，用来展示主题时候有用。无外乎

Theme Name, Theme URI, Author, Author URI, Description等等

函数文件

functions.php

放很多常用的函数。默认加载

composer php的包安装工具。使用了 mustcache

一些配置，要启用的主题功能，定义模板文件的函数

模板文件

其他的都一般，如果存在 single-{post-type}.php 文件，就可以自定义页面模板了

基本模板

style.css + index.php

其他的模块文件，可以通过 get_header() 等方法引入

<?php get_footer(); ?>

---

post page attament

wp-includes wp-admin 不需要直接修改

直接中在 wp-content

插件和主题

wp-cache 生成静态页，也可以加 cdn

category thumalis 等

theme

twentynineteen 模板

仓库 wp-dev-env 快速起一个开发环境

php文件

文章页，列表页

先切图。仓库可以 tonglu 搜到

category

homepage 首页

<?php
  /*Template Name: Homepage*/
  
 ?>

get_conetnt()

list 两种

使用的pug

body.class = {{body_class}}

poedit 国际化