WordPress

服务器域名准备

提前购买服务器

购买注意事项

  • 购买时记得提前认证个人信息

  • 2核4g即可

服务器管理平台

  • 购买后进入服务器管理平台：例如阿里云，轻量应用服务器

域名购买

记得提前注册个人信息

域名注意注意事项

  • 购买后要网站备案通过
  • 通过后在进行域名解析
  • 解析完毕后可以用域名打开网站

宝塔面板：宝塔Linux

设置服务器root登录

  • 设置完毕后要重启服务器
  • 重启完毕即可使用root访问服务器，接下来准备安装宝塔

宝塔Linux

安装

  • 官网：https://www.bt.cn/new/index.html

  • 找到自己使用的Linux面板，复制安装脚本后准备进行安装

  • 在服务器连接操作面板中粘贴路径，回车下载。连接面板可以使用Xshell

保存面板信息

  • 下载要等待2-3分钟，下载完毕后一定要保存面板账户登录信息，在记录下面板端口数字，放行端口
  • 在服务器管理平台上的防火墙内放行端口

放行端口

  • 点击添加规则，在端口范围内输入端口号即可

登录宝塔

  • 在获取的用户基本信息中获取第一个外网连接地址，进入这个路径即可

  • 进入后要输入登录账号密码，这两个信息也保存在了面板账户登录信息中

  • 进入后要下载最新的套件(数据库之类的)

  • 此时进度结束，准备工作结束，进入网站制作

创建WordPress网站

在宝塔界面中添加创建站点

  • 填写站点信息

下载WordPress安装包

  • 下载官网：https://cn.wordpress.org/download/

  • 下载后将安装包上传解压即可

  • 解压完毕后进入wordpress文件，剪切全部内容，粘贴到它的上一级目录
    ，也就是和自己域名一致的那个路径

配置WordPress

  • 进入我们的公网也就是我们的域名对应的地址，或者说是我们的网页

  • 此时就可以配置数据库，但是一定要记住设置的数据

  • 设置完数据库后，接下来要配置页面的后端账号

进入后端页面

  • 只需要在我们的网址上，例如我的域名是itcast,此时我只需要输入地址itcast/wp-admin即可进入后台

网站备案

备案前准备

  • 在阿里云中查看域名实名认证通过后才能备案

开始备案

  • 个人注册此时需要下载阿里云app完成资料上传，按照提示完成即可
  • 等待几天后会收到阿里云的核验短信，此时按照短信，前往指定地址，填写短信核验。耐心等待3-15天即可通过。

域名解析

  • 本质就是让用户能找到服务器

  • 在阿里云的后台中，找到自己的域名，最后方有解析选项，进行解析

  • 选择新手引导

  • 主域名和www.二级域名，并输入公网ip

添加SSL证书

网站伪静态

  • 静态：绝对路径，点击时就是固定路径跳转

  • 动态：相对路径：网页会根据访问者的请求，从服务器数据库里筛选访问者想要的内容显示到访问者的浏览器上

  • 打开宝塔面板

  • 在WordPress设置中，将连接改为文章名

  • 验证：随机在页面中打开一个地址，如果路径是文章名的格式即可成功

模板

  • 推荐两款

  • Astra：华丽但是很慢

  • GeneratePress：简洁

下载Elementor插件

下载方案

下载插件

  • 但是当使用模板时，会提示是否选择Elementor。当然也可以在插件中直接下载。

下载后完善

  • 插件使用完毕后，默认字体设置是谷歌，国内可能不显示，建议取消默认字体

网站页面UI优化设计

制作网站LOGO和网站配色

色调设置

  • 参考网站（有很多网页UI，可以用来参考）：https://themeforest.net/
  • 当选择一种色调后建议LOGO图片之类的色调均统一起来

LOGO抠图和裁剪

添加页眉

上传LOGO图片

  • 在编辑页面选择自定义

  • 点击标题处的铅笔符号，可以修改标题

  • 在此处上产站点图标和站点的LOGO

  • 在这些位置都可设置站点内容

网站底部设置备案号

  • 免费版的主体是没有编辑底部的设置，此时需要用代码来进行修改
add_filter( 'generate_copyright','tu_custom_copyright' );
function tu_custom_copyright() {
    ?>
    © <script>document.write(new Date().getFullYear());</script> 你的网站域名或标题 • <a href="http://beian.miit.gov.cn/" target="_blank">你的ICP备案号</a>
    <?php
}
  • 将代码添加到外观中：外观主体编辑器，选择functions.php文件，在页面最底部添加代码


推荐的插件

文章编辑插件

  • 经典编辑器

  • Yoast SEO: 可以编辑当我们搜索出来时的预览内容

Element插件的使用

addons拓展插件

安装addons，Emement的拓展插件

  • 配置addons，无脑下一步即可

查询主色调编号

Elementor模板

  • 直接在主体中搜索下载即可

更换背景图片

添加Post Grid模块

  • 该模块来源于Elementor的组件addtion
  • 该模块可以添加一些好看的分栏：这些组件内含有要发布的文章

创建新的页面

  • 当你页面有导航栏的时候就需要去设置这些导航栏的页面了
  • 在wordpress的后台直接设置增加新的页面

更新导航连接

  • 当然新版本的WordPress已经不需要以链接的形式为导航标签赋值，而是以直接在导航栏对应的分栏下选择要跳转的页面即可。
  • 在导航标签上选择前往的页面
  • 创建新的页面后需要设置导航链接，实现页面的跳转

  • 在编辑页面中获取页面的链接

添加表单

表单的添加与设置

  • 添加插件wp forms

  • 添加表单

  • 表单提交设置

  • 邮箱设置

将表单放置到网页页面

简码设置：较麻烦

  • 复制表单的短代码

  • 使用Elementor修改页面

  • 将刚才的简码粘贴到区域框即可

直接WpForms元素添加

  • 直接添加一个WpForms元素

若表单邮件收不到，去关闭防垃圾邮件

  • 编辑要修改的表单

回复注意

  • 因为表单信息是自己设置的邮箱代为回复的，所以真正想要回复对方时，要从对方发来的信息中获取

联系表单与地图

  • 添加地图，但是国内用户打不开，直接百度地图截个图上传就完了

自定义表单实现效果

  • 自定义CSS代码：wordpress页面，自定义，自定义css代码即可

调整移动端页面编辑样式

  • 直接右键检查，或者Ctrl+shitf+i，查看移动端的样式

  • 在Elementor中设置样式

添加页眉

  • 设置页眉
  • 页眉样式
  • 页眉的三行


  • 设置页眉：主题选择Astra
  • 可以添加各种各样的样式，其中HTML可以添加HTML样式的代码
  • 添加菜单，但是要先创建菜单
  • 创建菜单：输入菜单名称点击创建后才可以进行添加页面，当然在添加选项内还可以添加链接等其他内容

服务条款和隐私政策

隐私政策

  • 生成这些服务的小工具网址：bidewang.co/privacy

  • 选择为网站生成

  • 选择要收集的用户的个人信息和用户通过什么联系我们



  • 生成隐私条款后复制隐私条款，加入到你想要添加的页面中

  • 添加方法:添加一个html元素，直接将代码复制到生成的方框内

  • 转换为区块

服务条款

  • 生成服务条款的工具：https://www.termsandconditionsgenerator.com/

  • 填写自己的信息，在填写位置和省份下一步生成即可

  • 再创建一个新的页面添加内容即可，步骤与隐私政策一致，不在说明。但是一定记得将自动生成的内容中那些不适合的话删除掉

添加页脚

页脚：以及设置备案号的第二种简单方式

  • 创建新的菜单，关联页面

  • 页脚的设计与页眉极其相似。

  • 在导航栏添加菜单

  • 如果出现导航对不齐的情况可以在设置中自己编辑边距

  • 设置备案号

修改样式

#colophon .widget-title{
	color:#888888!important;
	font-size:18px!important;
	
}


//菜单标题
.footer-widget-area{
	color:#888888!important;
	
}

//菜单链接
#colophon a{
	color:#fbfdfc!important;
	
}

//网站主色调
#colophon a:hover{
	color:#72c5cc !important;
	
}
  • 当需要增加分割线，比如将版权声明和菜单分开时需要设置分割线，可以按照下方设置

英文文章设置

  • 强烈推荐英文文章修改建议插件：grammarly extension 但是国内下载难搞，所以得了吧

chatGPT

区块编辑器

  • 编辑文章页面时很好用：Colum元素

    uploading-image-241893.png

修改字体大小和样式

  • 修改整个网站的样式可以在前台的自定义的全局中设置，修改局部可以用编辑器单独修改

将文章优先显示在首页

  • 记得下载Addtions拓展插件
  • 在后台中启用元素：Post Grid,启用后别忘记保存

外网电商项目：略

电商设置商品内容

  • 下载WooCommerce插件

宝塔SSL证书申请https但是仍然显示不安全解决方案

  1. 申请SSL证书后先重启

    Nginx
  1. 重启完毕后，到服务器后台的安全组中，删除443端口，在重新添加，不行就吧22端口也重新添加一下
  1. 最后清除浏览器的缓存，在重新加载一下即可。
  • 注意：强制开启https没必要，重新域名解析更没必要！

双语网站搭建

WEGLOT插件：

wordpress后台访问太慢或者php内存溢出

禁止加载谷歌资源等

  • wordpress中大量资源来自于Google，而且这些资源加载不出来，白白浪费运行内存
  • 找到下面文件夹wp-includes/script-loader.php，将方法代码进行更改，将字段fonts.googleapis.com替换为fonts.useso.com
$open_sans_font_url="//fonts.googleapis.com/css?family1=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";

禁止加载头像

  1. 关闭仪表板不需要的内容资源

改进PHP内存以及关闭PHP前端报错信息

改进PHP内存

  • 增加php内存，到文件根目录下的wp-config.php文件中增加一行代码即可，内存自己定义
define( 'WP_MEMORY_LIMIT', '256M' );

关闭报错信息

  • 找到下方文件位置：搜索define(‘WP_DEBUG’, true);当然也可能使false，搜索到后用下方代码对其进行替换
ini_set('display_errors','Off');

ini_set('error_reporting', E_ALL );

define('WP_DEBUG', false);

define('WP_DEBUG_DISPLAY', false);

posted @ 2023-12-12 15:48  未翻身的咸鱼  阅读(46)  评论(0)    收藏  举报