网站搭建及优化规划_csdn凯特林奇遇记-CSDN博客

本文链接：https://blog.csdn.net/qq_41653249/article/details/149233809

学习模块总结

模块一：网站搭建

模块二：网站SEO

Wordoress模板修改培训、主题结构学习、Wordpress 插件使用、主题修改、后台操作等指导；
域名、服务器购买解析指导；
网站上线流程指导
多语种站点部署
基础html css 学习
通过Ai配合对网站修改
通过phpstudy，warmserver等部署本地服务器环境

文章及产品发布基础规则
关键词挖掘、关键词部署
SEO分析工具的使用
产品内容编写基础知识(素材，段落，元素标签，TDK等)
内链外链部署
网站结构化的部署
站长工具的使用
网站提高收录
如何做博客页面

概念1：WordPress 是什么

WordPress 最初发布于 2003 年，现已成为世界上最受欢迎的 CMS，今天已有超过 6000 万个网站在使用它。

WordPress是一个开源的内容管理系统（CMS）。常见的还有帝国CMS，织梦CMS 等

通过wordpress可以创建博客，商业网站，电子商务商店，移动的应用程序和会员网站等任何类型的网站。

wordpress官方下载地址：Wordpress官网； WordPress中文官网

下图为Wordpress 默认系统文件

概念2：什么是WordPress的主题

WordPress 主题（Theme）是一个包含页面布局、样式、颜色、字体等元素的模板文件集合。主题决定了网站的前端设计（如颜色、字体、排版、页面结构等），而无需修改核心代码。主题可以一键切换，让同一个网站瞬间呈现完全不同的风格。

常见的主题类型

类型	说明	示例
传统主题	使用PHP模板文件（如`header.php`, `footer.php`）构建。	Twenty Twenty（默认主题）
区块主题	基于WordPress区块编辑器（Gutenberg）设计，可视化操作更强。	Twenty Twenty-Four
框架主题	提供基础代码框架，需搭配子主题（Child Theme）使用。	Genesis Framework
拖拽主题	集成页面构建器（如Elementor、Divi），可视化拖拽设计。	Astra、Divi

Wordpress 提供了大量的主题，包括免费的和一次性付费终身使用的。

如一些主流的主题Astra,主题提供了很多免费的网站demo,只需引入需要的模板即可搭建网站。

更多主题可以通过主题深林了解：官网 https://themeforest.net/

概念3:html 文件

HTML（HyperText Markup Language，超文本标记语言） 是用于创建网页的标准标记语言。

html文件直观看是以“.html”或“.htm”拓展名结尾的文件。

Html文件是平时我们所说的静态网页文件，文件其内容是html源码。直接浏览器就能打开浏览的超文本文件。

下图是未经修改的模板源文件

内容：

HTML 文件的基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <script src="script.js"></script>
</body>
</html>

HTML vs. WordPress 主题文件

HTML 文件	WordPress 主题文件
静态网页，直接由浏览器解析	动态模板（如`header.php`），需PHP处理
独立运行，无数据库依赖	依赖MySQL数据库获取内容
扩展名 `.html`	扩展名 `.php`（如`index.php`）

WordPress 主题中的模板文件（如index.php）本质是PHP+HTML混合文件，通过PHP动态生成HTML内容。

HTML 文件的常见用途

定义网页结构
- 标题（<h1>到<h6>）、段落（<p>）、列表（<ul>, <ol>）。
嵌入多媒体
- 图片（<img src="image.jpg">）、视频（<video>）、音频（<audio>）。
创建超链接
- <a href="https://example.com">链接文本</a>。
表单交互
- 输入框（<input>）、按钮（<button>）、提交表单（<form>）。

第一节：WordPress的文件组成

在开始制作WordPress主题之前，首先要了解WordPress主题到底由哪些文件构成，清楚WordPress程序是怎样与主题文件连接的。

WordPress默认主题default文件夹下的常规模板文件：

index.php       网站的主页
header.php	    定义网站的页头（<head> 部分和顶部导航栏）。
footer.php	    定义网站的页脚（版权信息、底部导航等）。
single.php	    单篇文章的显示模板。
page.php	    单独页面的模板（如“关于我们”）。
archive.php	    分类、标签、作者等存档页的模板。
search.php	    搜索结果页的模板。
404.php	404     错误页的模板。
front-page.php	自定义首页（优先于home.php）。
home.php	    博客文章列表页（默认首页）。

一个有效的 WordPress 主题至少需要以下两个文件：

文件作用

文件	作用
`style.css`	定义主题的元信息（名称、作者、版本等）和核心CSS样式。文件头部必须有注释声明： `css<br>/<br>Theme Name: 主题名称<br>Author: 作者名<br>Version: 1.0<br>/<br>` `（下面介绍html 文件时会细说）`
`index.php`	主题的默认模板文件，如果其他模板文件（如`single.php`）不存在，WordPress 会回退到该文件。

style.css

定义主题的元信息（名称、作者、版本等）和核心CSS样式。文件头部必须有注释声明：
css<br>/*<br>Theme Name: 主题名称<br>Author: 作者名<br>Version: 1.0<br>*/<br>

（下面介绍html 文件时会细说）

index.php 主题的默认模板文件，如果其他模板文件（如single.php）不存在，WordPress 会回退到该文件。

（当一个包含index.php 和style.css 的文件放在Wordpress 的Themes时，就会被Wordpress识别为一个主题）

功能与扩展文件

文件	作用
`functions.php`	主题的功能扩展文件，用于添加自定义代码、注册菜单、支持小工具等。
`screenshot.png`	主题缩略图（显示在后台主题列表中）

下图是一个修改后的wordpress的主题文件

其中 css fonts images js 是较为常见的文件

文件夹	主要作用	常见文件类型	调用方式
`CSS`	存放样式表文件，控制网站外观和布局	`.css`（如 `style.css`, `responsive.css`）	通过 `wp_enqueue_style()` 在 `functions.php` 中加载
`fonts`	存放自定义字体文件，增强网站排版	`.woff2`, `.woff`, `.ttf`	通过 `@font-face` 在 `style.css` 中引入
`images`	存放静态图片资源（如LOGO、背景图）	`.png`, `.jpg`, `.svg`	在模板文件中用 `get_template_directory_uri()` 调用路径
`js`	存放JavaScript脚本，实现交互功能	`.js`（如 `main.js`, `ajax.js`）	通过 `wp_enqueue_script()` 在 `functions.php` 中加载