查看环境

Mac本地搭建WordPress网站用于开发 - 图1

修改nginx配置文件

Mac本地搭建WordPress网站用于开发 - 图2

红线是nginx的文件地址
Finder —-> shift + command + G 找到nginx，修改配置文件
一开始是根据某位大哥的文章改的，网址自取 https://segmentfault.com/a/1190000002556269
但是改了以后，还是打不开wordpress，后来麻烦了可爱的后端小哥哥
在nginx文件下，新建conf.d和global

Mac本地搭建WordPress网站用于开发 - 图3

在conf.d/下，新建文件default.conf，配置default.conf：

  1. server {
  2.         # 端口
  3.         listen       8000 default_server;
  4.         # listen       [::]:80 default_server;
  5.         # 访问的域名
  6.         # server_name  localhost;
  7.         # 默认网站根目录（www目录）
  8.         root  /users/skywen_cp/Documents/work/wordpress-skywen-site;
  9.         index index.php index.html;
  11.         location / {
  12.             try_files $uri $uri/ /index.php?$query_string;
  13.         }
  15.       location ~ \.php$ {
  16.             # 设置监听端口
  17.             fastcgi_pass   127.0.0.1:9000;
  18.             # 设置nginx的默认首页文件(上面已经设置过了，可以删除)
  19.             fastcgi_index  index.php;
  20.             # 设置脚本文件请求的路径
  21.             fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
  22.             # 引入fastcgi的配置文件
  23.             include        fastcgi_params;
  24.             fastcgi_intercept_errors on;
  25.         }
  26.     }

同样在conf.d/下，新建文件mywordpress.conf，配置mywordpress.conf：

  1. server {
  2.   server_name mywordpress;
  3.   root /users/skywen_cp/Documents/work/wordpress-skywen-site; #自定义，如/var/www/mywordpress
  5.   index index.php;
  7.   include global/restrictions.conf;
  8.   include global/wordpress.conf;
  9. }

在global/下，新建文件restrictions.conf，配置restrictions.conf：

  1. # Global restrictions configuration file.
  2. # Designed to be included in any server {} block.</p>
  3. location = /favicon.ico {
  4.   log_not_found off;
  5.   access_log off;
  6. }
  8. location = /robots.txt {
  9.   allow all;
  10.   log_not_found off;
  11.   access_log off;
  12. }
  14. # Deny all attempts to access hidden files such as .htaccess, .htpasswd, .DS_Store (Mac).
  15. # Keep logging the requests to parse later (or to pass to firewall utilities such as fail2ban)
  16. location ~ /\. {
  17.   deny all;
  18. }
  20. # Deny access to any files with a .php extension in the uploads directory
  21. # Works in sub-directory installs and also in multisite network
  22. # Keep logging the requests to parse later (or to pass to firewall utilities such as fail2ban)
  23. location ~* /(?:uploads|files)/.*\.php$ {
  24.   deny all;
  25. }

在global/下，新建文件wordpress.conf，配置wordpress.conf：

  1. # WordPress single blog rules.
  2. # Designed to be included in any server {} block.
  4. # This order might seem weird - this is attempted to match last if rules below fail.
  5. # http://wiki.nginx.org/HttpCoreModule
  6. location / {
  7.   try_files $uri $uri/ /index.php?$args;
  8. }
  10. # Add trailing slash to */wp-admin requests.
  11. rewrite /wp-admin$ $scheme://$host$uri/ permanent;
  13. # Directives to send expires headers and turn off 404 error logging.
  14. location ~* ^.+\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
  15.        access_log off; log_not_found off; expires max;
  16. }
  18. # Uncomment one of the lines below for the appropriate caching plugin (if used).
  19. #include global/wordpress-wp-super-cache.conf;
  20. #include global/wordpress-w3-total-cache.conf;
  22. # Pass all .php files onto a php-fpm/php-fcgi server.
  23. location ~ [^/]\.php(/|$) {
  24.   fastcgi_split_path_info ^(.+?\.php)(/.*)$;
  25.   if (!-f $document_root$fastcgi_script_name) {
  26.     return 404;
  27.   }
  28.   # This is a robust solution for path info security issue and works with "cgi.fix_pathinfo = 1" in /etc/php.ini (default)
  30.   include fastcgi.conf;
  31.   fastcgi_index index.php;
  32. #   fastcgi_intercept_errors on;
  33.   fastcgi_pass php;
  34. }

重启nginx

  1. sudo nginx -s reload

本地安装mysql

  1. brew install mysql

第一次安装失败（原因：网不好），重复命令再来一次

Mac本地搭建WordPress网站用于开发 - 图4

安装成功，显示如下

Mac本地搭建WordPress网站用于开发 - 图5

开启mysql

无数次失败（啥都不懂）之所以 >mysql -uroot 会失败，是因为 命令错误

Mac本地搭建WordPress网站用于开发 - 图6

正确命令

  1. brew info mysql

Mac本地搭建WordPress网站用于开发 - 图7

正确命令

  1. mysql.server start
  2. mysql -uroot

Mac本地搭建WordPress网站用于开发 - 图8

创建数据库

创建数据库wordpress

  1. [mysql> create database wordpress;

注意 每句命令一定要加分号！！！

查看数据库

  1. [mysql> show databases;

修改数据库的密码

  1. [mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123';

退出

  1. [mysql> exit;

结果显示

Mac本地搭建WordPress网站用于开发 - 图9

问题踩点

1、创建第二个wordpress项目的时候，想在mysql创建第二个数据库的时候，报错：
ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password:YES)
解决方法：找到mysql的my.cnf文件 ，在最后添加一句 skip-grant-tables

2、连接数据库时报错：Can ‘t connect to local MySQL server through socket ‘/tmp/mysql.sock ‘(2) “;
原因：mysql服务没启动（应该mysql.server start）还有其他可能，这里尚未遇到，先不说明

填写数据库的参数

访问localhost:8000/index.php，链接自动跳转wordpress的安装网页，
Mac本地搭建WordPress网站用于开发 - 图10

nginx配置

如果填写完以后，跳转了403网页，就表示数据库是连上了，但是nginx配置错误了
正确配置如下（缺少红框的内容）：

Mac本地搭建WordPress网站用于开发 - 图11

重启nginx

  1. sudo nginx -s reload

开启php-fpm

开启php-fpm，才能访问wordpress后台

  1. sudo php-fpm

访问网站

修改数据库的表 xxx_posts将前面两个字段的地址改为本地地址，访问localhost:8000/wp-admin，从后台的官网入口，进入官网

Mac本地搭建WordPress网站用于开发 - 图12

启动mysql

  1. mysql.server start

启动fpm

  1. sudo php-fpm

开启网站

浏览器 localhost:8000/wp-admin

修改主题

首先选择主题文件，开启热启动（样式实时更新）

  1. npm run start

注意点

1.在 sass/mystyles.scss 中写自己的样式
2.functions.php添加bulma样式库
wp_enqueue_style( “mystyles”, get_template_directory_uri() . ‘/css/mystyles.css’, array(), _S_VERSION );
3.如果样式没变，一定要清缓存！！！