title: 使用docker+WordPress開發(fā)企業(yè)官網編輯中
category: Web
tag: WordPress
date: 2019-07-17

主標題：使用docker+wordpress開發(fā)企業(yè)官網

因為已經對docker熟悉了，直接進入正題，講解的節(jié)奏會快一些垃杖，如果你不熟悉docker和docker-compose辜贵，可以參考第四部分 Docker 微服務教程--阮一峰

開發(fā)流程

配置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

在開發(fā)階段攒盈，我們盡可能少地使用外部資源抵拘，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 #創(chuàng)建并開啟容器
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數據庫。~~

調整網站設置

接下來蔬捷，發(fā)布幾篇文章垄提，設置幾個欄目，先把內容撐起來周拐。企業(yè)網站铡俐，大部分都是靜態(tài)展示頁，核心還是專題頁速妖。這里為了展示高蜂，說一下我的設置，這部分信息已經脫敏罕容，大家都一樣备恤。

點擊文章 -- 分類目錄，這個地方就是設置分類的地方了锦秒。我們添加新分類目錄露泊，設置中文名，路徑名旅择，父級關系：

欄目設置

有了大概的目錄結構惭笑，剩下的就是完善了，一般都是提前規(guī)劃好欄目結構生真。

接下來就是填入一些文章占位沉噩。wp的編輯器已經更新了，現在的編輯器應該是更符合結構化存儲和展示了

復制粘貼新聞柱蟀，發(fā)布川蒙。

發(fā)現網址不是我們期望的格式，進入設置--固定鏈接长已，修改設置 /%category%/%post_id%.html/ 這樣就是按照欄目路徑設置了畜眨，更清晰明確昼牛。

(yekyi shi %postname%.html)

一些零碎工作完成之后，就是開發(fā)WordPress模板了康聂。

wp模板結構

你可以看這里：官方文檔主題開發(fā)

主題贰健，除了圖片和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 生成靜態(tài)頁，也可以加 cdn

category thumalis 等

theme

twentynineteen 模板

倉庫 wp-dev-env 快速起一個開發(fā)環(huán)境

php文件

文章頁标锄，列表頁

先切圖顽铸。倉庫可以 tonglu 搜到