README

WordPress 启动主题，集成了 Bootstrap 4 框架和 Webpack Encore。
SEO 优化友好 😉

描述

Markup，类似于 _s，是用于在 Wordpress 中开发主题的基础主题。它使用命名空间构建，这为我们提供了更大的灵活性。另一方面，Markup 已经集成了 Bootstrap 4，因此您无需麻烦地将 Bootstrap 4 集成到主题中。为了管理和优化前端依赖项，使用了 Webpack Encore，这是由 Symfony 创建的 Webpack 包装器，简化了 Webpack 的使用。

要求

要开始使用 Markup，您必须确保

• php >= 7.0
• Composer
• Node.js >= 14.x
• Yarn

安装

在您的计算机上安装 Composer，并在安装后，在您的 Wordpress 项目根目录中运行命令 composer require codevelopers/markup。Composer 将自动将 Markup 安装到 wp-content/themes 文件夹。

主题结构

themes/markup/                  # → Markup root folder
├── assets/                     # → Translation files
│   ├── fonts/                  # → Fonts files processed by Webpack
│   ├── images/                 # → Statics image files processed by Webpack
│   ├── scripts/                # → Javascript files processed by Webpack
│   ├── styles/                 # → Scss files processed by Webpack
│   │   ├── mixins/             # → Mixins used in scss files
│   │   ├── _404.scss           # → 404 page styles
│   │   ├── _alert.scss         # → Bootstrap alerts custom styles
│   │   ├── _archive.scss       # → Archive pages styles
│   │   ├── _button_.scss       # → Buttons styles
│   │   ├── _container.scss     # → Containers styles
│   │   ├── _fonts.scss         # → Html root element responsive font size
│   │   ├── _footer.scss        # → Site footer styles
│   │   ├── _form.scss          # → Forms styles
│   │   ├── _image.scss         # → Image elements styles, like logos, brands and others
│   │   ├── _link.scss          # → Links styles
│   │   ├── _loop.scss          # → WordPress loop styles, like regular posts and custom posts
│   │   ├── _modal.scss         # → Bootstrap modals custom styles
│   │   ├── _nav.scss           # → Site navigation elements styles
│   │   ├── _page.scss          # → WordPress pages styles
│   │   ├── _paginator.scss     # → Pagination elements styles
│   │   ├── _section.scss       # → Section elements styles
│   │   ├── _sidebar.scss       # → Sidebars styles
│   │   ├── _single.scss        # → Single template styles
│   │   ├── _table.scss         # → Table elements styles
│   │   ├── _title.scss         # → Heading elements styles
│   │   ├── _variables.scss     # → Bootstrap variables override
│   │   ├── _vendor.scss        # → External libraries styles
│   │   ├── editor-styles.scss  # → Editor styles
│   │   ├── login.scss          # → Admin login styles
│   │   └── main.scss           # → This file includes all the _*.scss files
│   └── assets.json             # → Manifest file used by Webpack
├── external/                   # → External php libraries
├── helpers/                    # → Helpers functions used by template files
├── hooks/                      # → Custom and WordPress Hooks
├── languages/                  # → Translation files
├── template-parts/             # → Template parts
├── 404.php                     # → Template file
├── comments.php                # → Template file
├── composer.json               # → Composer file
├── footer.php                  # → Template file
├── functions.php               # → Theme bootloader
├── header.php                  # → Template file
├── index.php                   # → Template file
├── package.json                # → Node.js dependencies and scripts
├── page.php                    # → Template file
├── postcss.config.js           # → Used by Webpack
├── searchform.php              # → Template file
├── sidebar.php                 # → Template file
├── single.php                  # → Template file
├── style.css                   # → Theme meta information
├── template-full-width.php     # → Template Full Width
└── webpack.config.js           # → Webpack Encore configuration

functions.php 文件

此文件负责包含外部库、辅助函数和钩子。在 helpers 和 hooks 文件夹中，您可以找到一些 php 文件。如果您想创建一个新的钩子，您可以使用 hooks 文件夹中的现有文件，或者创建一个新的文件。对于辅助函数也是如此。您应该考虑，在创建新的辅助函数或钩子文件时，您必须在 functions.php 文件中分别引用它，在 functions.php 文件中定义了 $helpers 或 $hooks 数组。

钩子

您可以在 hooks 文件夹中找到一些在 php 脚本中定义的钩子。如上所述，您自己的钩子可以在现有的钩子文件中定义，或者您可以创建一个新的钩子。

辅助函数

Markup 提供了一些辅助函数，这些函数可以帮助您在开发新主题时解决常见的代码问题。包含辅助函数的辅助文件必须具有唯一的命名空间，以避免与其它文件或库中的函数和常量冲突。辅助文件位于 helpers 文件夹中。与钩子一样，您可以在现有的辅助文件中编写新的辅助函数。如果您愿意，您还可以创建一个具有唯一命名空间的文件以避免冲突。您还可以在钩子文件中使用辅助函数作为模板标签。请随意创建您可以在代码的任何部分使用的辅助函数。

自定义查询

您可以在 query.php 辅助文件内部创建自定义查询，并将这些函数调用到代码的任何部分。

自定义模板标签

您可以在 template_tags.php 辅助文件内部创建模板标签，并在任何模板文件中调用这些函数。

模板部分

在 template_tags.php 辅助文件中定义了一个名为 get_template_part 的辅助函数，该函数与 WordPress 的核心函数 get_template_part 使用相同的参数，用于包含位于 template-parts 目录中的模板部分。请记住，get_template_part 辅助函数会自动将 template-parts 目录名称添加到第一个 $slug 参数中，因此您只需要传递模板部分的名称。

安装前端依赖

要安装前端依赖，您必须安装 Yarn，然后在主题目录中运行以下命令

• yarn install

使用 Webpack Encore 编译资源

前端库安装完成后，您必须在主题目录下运行 yarn dev 命令来编译资源。如果您愿意，可以在开发过程中运行 yarn watch，因为 Webpack 可以监视文件变化并重新编译。在部署到生产环境之前，您必须运行 yarn production。

帮助我们跳过在这个项目上的工作