FILEEM

POWER OF DREAM

搭建一个wordpress 新闻站点 并提供文章列表链接API供APP调用

架设思想:使用国外服务器,将子域名news.example.com用作wordpress,配置完成以后使用certbot一键申请ssl证书并开启自动续期,同时使用Hide My WP进行站点后台伪装。然后修改WP文件,做一个API。

这篇文章分成几个章节来介绍:

一、准备工作:选择一家ISP;
二、LEMP基础配置,用于nginx代理和wordpress业务;
三、wordpress站点安装和配置;
四、安装certbot申请ssl证书完成配置。

一、准备工作:选择一家ISP

此案例使用Vultr的5刀一个月的1核1G洛杉矶线路Ubuntu 18.04 x6主机,如果你要用同样的话,可以顺便点下图,使用我的图片邀请链接注册,帮我贡献一个邀请任务,谢过:
《搭建一个wordpress 新闻站点 并提供文章列表链接API供APP调用》

对了,有个50美金的优惠券,不知道你看到的时候还有没有效:https://www.vultr.com/?ref=8152414-4F 这羊毛不薅白不薅。

《搭建一个wordpress 新闻站点 并提供文章列表链接API供APP调用》

下载并打开electerm,https://github.com/electerm/electerm/releases 这是一个开源免费的SSH连接服务器工具,用于服务器管理。下载解压后,点击左边菜单列表中的齿轮图标(设置)书签新建书签主机地址填入您的服务器IP,用户名填入root,点击密码,粘贴实例面板中的密码。点击最下方的保存并连接即可连接到此服务器。

服务器连接成功后,会显示如下页面:
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-66-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Thu Dec 6 09:08:18 UTC 2019

  System load:  0.0               Processes:           81
  Usage of /:   9.3% of 24.55GB   Users logged in:     0
  Memory usage: 12%               IP address for ens3: 124.248.166.31
  Swap usage:   0%


59 packages can be updated.
28 updates are security updates.


root@vultr:~# 

别忘了,域名或二级域名A记录指向服务器公网ip。

二、LEMP基础配置,用于nginx代理和wordpress业务

WordPress需要一个Web服务器,一个数据库和PHP才能正常运行。所以需要设置LEMP堆栈(Linux,Nginx,MySQL和PHP),同时,Nginx也会用于让服务器支持wordpress。

注意,如果是使用root账号不用加sudo,非root账号才需要加sudo。

开始安装配置Nginx Mysql php certbot吧!

sudo add-apt-repository ppa:certbot/certbot
sudo apt update
sudo apt install nginx mysql-server-5.7 php-fpm php-mysql  php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip python-certbot-nginx -y

配置mysql

sudo mysql_secure_installation
sudo mysql

添加一个数据库的root账户密码,记得修改代码中的password为你的密码。

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

使之生效

FLUSH PRIVILEGES;

新建一个数据库用于wordpress,wordpress改成你要的名字

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

新建该数据库的管理员账号,wordpress改成你的数据库名,wordpressuser改成你想要的管理员名,password改成你的数据库密码

GRANT ALL ON wordpress.* TO 'wordpressuser'@'localhost' IDENTIFIED BY 'password';
FLUSH PRIVILEGES;

退出mysql

exit

配置php和nginx

新建一个Vhost文件并进行配置,example.com改成你的主域名

sudo nano /etc/nginx/sites-available/example.com

按以下配置设置Vhost文件,按上下键选择修改,完成后按 ctrl+o 再按 enter 确认修改,要退出的话按 ctrl+x

#不罗嗦,先把反向代理写好了。

server {
#example.com改成你要设置的wordpress目录
        root /var/www/example.com;
        index index.php index.html index.htm index.nginx-debian.html;
#example.com改成你的主域名
        server_name example.com;

        location = /favicon.ico { log_not_found off; access_log off; }
        location = /robots.txt { log_not_found off; access_log off; allow all; }
        location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
        expires max;
        log_not_found off;
        }

        location / {
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        }

        location ~ /\.ht {
                deny all;
        }

    listen 80;

}

example.com改成你的主域名

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

测试nginx是否有错,如果有错根据提示修改。

sudo nginx -t

重新载入nginx

sudo systemctl reload nginx

重启php

sudo systemctl restart php7.2-fpm

三、wordpress站点安装和配置

在临时目录下载wordpress压缩包

cd /tmp
curl -LO https://wordpress.org/latest.tar.gz

解压缩

tar xzvf latest.tar.gz

将模板复制并改名为正式的配置文件

cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php

将临时目录的wordpress复制到你的网站目录,example.com改成你的主域名

sudo cp -a /tmp/wordpress/. /var/www/example.com

指定权限

sudo chown -R www-data:www-data /var/www/example.com

生成一段salt用于wordpress安装

curl -s https://api.wordpress.org/secret-key/1.1/salt/

打开wordpress配置文件,在相应字段填入你的数据库、用户名、密码、salt

sudo nano /var/www/example.com/wp-config.php

好,现在访问你的主域名,在网页上配置你的wordpress。

如果想要https,需要继续往下配置ssl。

四、安装certbot申请ssl证书完成配置

使用Certbot自动完成SSL证书申请和配置,Certbot会自动修改你的nginx配置文件,替换example.com和forum.example.com为你的域名和二级域名。

sudo certbot --nginx -d example.com 

按照英文的提示配置吧。

完成以后进入下一步。

证书使用周期有限,需要设置certbot自动续约证书:

sudo certbot renew --dry-run

配置WP

改主题

现在您可能会想要自定义您的页面主题。WP提供了无数的开发者免费开发的主题可以使用。
在外观-主题中,点击添加新主题,这里我建议大家可以用WordStar这个主题,搜索,安装、启用。这个主题比较技术范。

使用API

最新版本的WP自带了 WP REST API 接口,可以直接调用。

《搭建一个wordpress 新闻站点 并提供文章列表链接API供APP调用》

例如要返回分类为27(新闻)的10条文章列表标题、发布日期和链接:/wp-json/wp/v2/posts?categories=27&_fields=title,link,date&per_page=10

api长这样:

[{"date":"2018-11-11T11:35:44","link":"https:\/\/example.com\/jsdelivr-free-public-cdn-acceleration-service","title":{"rendered":"jsDelivr \u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u514d\u8d39\u516c\u5171 CDN \u52a0\u901f\u670d\u52a1"}},{"date":"2018-11-11T09:21:39","link":"https:\/\/example.com\/github-corners","title":{"rendered":"GitHub Corners \u6302\u89d2\u94fe\u63a5"}},{"date":"2018-11-10T21:58:39","link":"https:\/\/example.com\/for-only-30-minutes-install-discourse-and-wordpress-on-the-same-device","title":{"rendered":"\u4ec530\u5206\u949f\uff0c\u5728\u540c\u4e00\u53f0\u8bbe\u5907\u5b89\u88c5discourse\u548cwordpress"}},{"date":"2018-09-25T14:53:12","link":"https:\/\/example.com\/secure-nginx-with-let-s-encrypt-on-ubuntu-16-04","title":{"rendered":"\u4f7f\u7528certbot\u81ea\u52a8\u7533\u8bf7\u7eed\u671fSSL\u8bc1\u4e66\uff08Ubuntu\uff09"}}]

如果要在引入的API中只显示指定的文章,则建立一个分类 重要 或 公告 在分类中查看此分类编号 替换掉示例中的5即可。

详细参考这篇文档:https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/

伪装站点

您可能不想让大家知道您使用的什么后台,为了安全。

那就在设置-常规中,修改掉 又一个WordPress站点 之类的描述,同时在 固定链接设置 中,选择 文章名 保存。

高级修改需要启用 Hide My WP 插件,

在插件-安装插件中 搜索 Hide My WP 现在安装 -启用。

在启用 Hide My WP前,请一定要根据提示修改nginx文件,否则会报错。将Hide My WP伪静态文件地址追加到nginx index的下一行,保存重启nginx即可。

修改主题

此处以推荐的WordStar为例

常规的换LOGO 改菜单和不显示评论列表、最新文章列表名字修改、显示数量、显示时间等挂件显示,可以在外观-自定义的菜单 主页显示 站点身份中修改

如果要换LOGO,记得把logo用PS改成提示的200x39px,把LOGO放在透明像素的中间。

如果想修改页面底部版权内容,则点击外观-主题编辑器 编辑 footer.php 末尾<p id="site-generator" class="site-info centertext footer-copy">以下的几行分别是版权,主题作者等信息,可以插入统计代码等。

如果想修改文章页面,不显示作者信息以及评论框。则在末尾<div class="author-info前一行插入php注释<?php /**,在</article>前插入注释结束标记:

     */
?>

然后在if (comments_open()前插入注释标记/*,在{comments_template();}后插入注释结束标记:*/

如果想要修改页面连接颜色等,则修改 style.css

将其所有内容复制到写字本之类的地方搜索:#007acc 这是WordStar的链接颜色,默认蓝色,批量替换为你的,HTML颜色表可以参考https://www.w3school.com.cn/html/html_colors.asp

搜索:#0f8bda 这是搜索等按钮的颜色,批量替换为你的。

搜索:#38a4e8 这是搜索等按钮鼠标滑过时的颜色,批量替换为你的,和按钮普通状态颜色不一样但比较接近效果较好。

搜索:#D13210 这是鼠标指上链接聚焦时变成的颜色,默认红色,批量替换为你的,应该和连接颜色有较大区别,效果比较好。

搜索:#c00 这个是评论中的红色,如果启用了评论的话,安全起见,批量替换为和上面的鼠标指上链接聚焦时变成的颜色一样。

搜索:#1b52a7 这个应该是默认的文字版logo的颜色,批量替换为你的。

搜索:#3b5998 这是文章页面链接的颜色,批量替换为你的。

搜索:#24a5dc 这是作者信息的颜色,如果启用了的话,安全起见,批量替换为你的。

替换好以后覆盖style.css

您也可以将以下代码复制到外观-自定义-额外CSS中,修改相关颜色后保存。

mark, ins, .tagcloud a:hover, .tagcloud a:focus {
    background: #439D7A;
}

a ,.site-footer ul.footer-nav li a, .post-navigation a:hover .post-title, .post-navigation a:focus .post-title,.entry-title a:hover, .entry-title a:focus,.entry-footer a:hover, .entry-footer a:focus, .entry-meta a:focus, .entry-meta a:hover,
.page-links a:hover, .page-links 
.comment-metadata a:hover, .comment-metadata a:focus, .pingback .comment-edit-link:hover, .pingback .comment-edit-link:focus,.comment-reply-link,.comment-reply-link:hover, .comment-reply-link:focus,.required ,.site-info a:hover, .site-info a:focus { color: #439D7A; }

 .widget_calendar tbody a {
    background-color: #439D7A;
}
.tagcloud a:hover, .tagcloud a:focus {
    border-color: #439D7A;
}

a:hover, a:focus, a:active { color: #e3745b; }
.button, button, input[type="submit"], input[type="reset"], .comment-form input.submit, .comment-reply-link {
    background: #4ea382;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, .comment-form input.submit:hover, .comment-reply-link:hover { background: #5cab8c; }
.comment-reply-title small a:before {
    color: #e3745b;
}
#masthead .site-branding a {
    color: #43ac6a;
}
#main .hentry.post-content .entry-meta a:hover {
    color: #3b5998;
}
.author-info .author-metas a.posts {
    background: #24a5dc;
}
#masthead .site-header-menu li.current_page_item a, #masthead .site-header-menu li.current-menu-item a, #masthead .site-header-menu li.current-post-ancestor a, #masthead .site-header-menu li.current-menu-parent a, #masthead .site-header-menu li.current-post-parent a {
    color: #439D7A!important;
}

点赞