README

WordPress 开发者主题。

入门

安装

安装 Sleek 最简单的方法是使用 wp cli。假设您已经下载并安装了 WordPress，只需运行

# Move to project folder
$ cd /path/to/my/wordpress-site/

# Install Sleek
$ wp theme install https://github.com/powerbuoy/sleek/archive/master.zip

# Move to Sleek folder
$ cd wp-content/themes/sleek/

# Install PHP dependencies
$ composer install

# Install front-end dependencies
$ npm install

# Download Fontello icons
$ npm run fontello

# Build assets
$ npm run build

# Activate Sleek:
$ wp theme activate sleek

开发

在开发期间运行

$ npm run dev

这会监视更改并构建带有源映射的非最小化资源。

要构建用于生产，运行

$ npm run build

这不会监视，会进行最小化处理，并且不包含任何源映射。

文件夹结构

themes/sleek/             # → Sleek root
├── lang/                 # → Translations
│   └── admin             # → Translations of strings used only inside the admin
│   │   └── sv_SE.po      # → Swedish translation of admin strings
│   └── sv_SE.po          # → Swedish theme translation
├── modules/              # → Modules
│   ├── */                # → A folder indicates a module with both a class and one or more templates
│   └── *.php             # → A single file module, template only
├── post-types/           # → Post Types
│   └── *.php             # → Each file represents a post type
├── src/                  # → Front-end code and assets
│   ├── assets/           # → Fonts, images, icons etc
│   ├── js/               # → JavaScript
│   │   └── app.js        # → JS entry point, should import all other JS
│   └── sass/             # → SASS
│       └── app.scss      # → SASS entry point, should import all other SASS
├── dist/                 # → Webpack bundled app.js and app.css as well as assets (don't touch, don't commit)
├── vendor/               # → PHP dependencies installed by composer (don't touch, don't commit)
├── node_modules/         # → Front-end dependencies installed by NPM (don't touch, don't commit)
├── .gitignore            # → Files and folders to ignore during git commits
├── .prodignore           # → Files and folders to ignore during deploy
├── composer.json         # → Specify PHP dependencies here using composer (related: composer.lock)
├── package.json          # → Specify front-end dependencies here using NPM (related: package-lock.json)
├── webpack.config.js     # → Webpack build script
├── fontello.js           # → Builds fontello icons
├── style.css             # → WordPress Theme config (don't touch)
├── editor-style.css      # → CSS to add to WP admin WYSIWYG
└── *.php                 # → WordPress templates: https://developer.wordpress.org/themes/basics/template-files/

前端代码

所有 CSS 和 JS 都位于 src/。

JavaScript

JS 的入口点是 src/js/app.js。从这里您应该导入所有其他 JS。全局导入有效，因此您可以取消注释

////////////////
// Import our JS
import './*.js';

来自动导入 js/ 文件夹中的所有其他 JS 文件。所有 JS 都通过 babel 运行，因此您可以自由使用现代代码。

app.js 顶部的巨大代码块与 SleekUI 相关。如果您不想使用它，可以安全地删除所有这些内容。

Vue

Sleek 支持 Vue 组件。取消注释最后一部分代码，并在那里导入您的 Vue 组件；

////////////////////////
// Import Vue Components
import ToDo from './todo.vue';

// Init Vue on all [data-vue] elements
document.querySelectorAll('[data-vue]').forEach(el => {
	new Vue({
		el: el,
		components: {
			'todo': ToDo
		}
	});
});

然后您可以在页面上的任何 [data-vue] 元素中使用 Vue 组件；

<div data-vue>
	<todo></todo>
	<my-other-component></my-other-component>
	<etc></etc>
</div>

CSS / SASS

SASS 的入口点是 src/sass/app.scss。您应该从那里导入所有其他 SASS。SASS 不仅通过 SASS 本身运行，还通过 PostCSS，以及 autoprefixer、custom-media 和 custom-selectors，因此您可以自由使用它们。

Sleek 附带 SleekUI，您可以在 src/sass/config.scss 中对其进行配置。或者您可以完全删除它。

图标

图标是从 Fontello 下载的。只需将您想要的图标添加到 src/icons.json（使用 fontello.com 并选择 "Download webfont" -> "Get config only"）。要下载图标，可以运行 npm run fontello。当您运行 npm run build 和 npm run dev 时也会下载图标。

fontello 命令还会创建一个 src/sass/icons.scss 文件，该文件包含所有图标相关的 CSS 类以及每个图标的 SASS 混合和变量，因此您可以这样做

.my-element::before {
	@include icon($icon-star);
}

Sleek 包

Sleek 由几个提供不同功能的 composer 包组成。

Sleek ACF

以多种方式改进 ACF，例如更美观的灵活内容标题、折叠的灵活内容布局、更美观的关系字段等。

主题支持

sleek/acf/hide_admin

启用隐藏 ACF 管理员。

sleek/acf/fields/redirect_url

启用 redirect_url 字段。

钩子

不适用

函数

Sleek\Acf\generate_keys($fields, $prefix)

在 $fields 中每个 name 属性旁边生成一个 key 属性。该 key 将采用 {$prefix}_{$name} 的形式。

类

不适用

Sleek 归档过滤器

添加了使用 GET 参数在归档中过滤帖子的功能

• ?sleek_filter_tax_{taxonomy_name}[]={term_id}
  只显示属于 {term_id} 的 {taxonomy_name} 中的帖子。
• ?sleek_filter_meta_min_{meta_field_name}[]={value}
  只显示具有（数值）{meta_field_name} 的帖子，该值为至少 {value}。
• ?sleek_filter_meta_max_{meta_field_name}[]={value}
  只显示具有（数值）{meta_field_name} 的帖子，该值为最多 {value}。
• ?sleek_filter_meta_{meta_field_name}[]={value}
  只显示具有 {meta_field_name} 且正好等于 {value} 的帖子。

主题支持

sleek/archive_filter

启用上述功能。

钩子

不适用

函数

不适用

类

不适用

Sleek存档元数据

钩入 the_archive_title() 和 the_archive_description() 函数以提供更好的搜索结果文本、删除前缀等。

还添加了一个新的 Sleek\ArchiveMeta\the_archive_image()（在没有 ACF 的情况下，仅适用于用户存档（使用头像））。

如果与 Sleek\PostTypes 的设置页面一起使用，the_archive_image() 返回设置页面上的图片。

主题支持

不适用

钩子

不适用

函数

Sleek\ArchiveMeta\get_the_archive_image($size)

以 <img> 形式返回可能的存档图片。

Sleek\ArchiveMeta\get_the_archive_image_url(size)

返回可能的存档图片 URL。

Sleek\ArchiveMeta\the_archive_image(size)

渲染可能的存档图片。

Sleek\ArchiveMeta\the_archive_image_url(size)

渲染可能的存档图片 URL。

类

不适用

Sleek 清理

清理大量不必要的 WordPress 内容，如内联表情符号代码、相册标记等。

主题支持

sleek/cleanup/disable_comments

在整个网站上完全禁用评论。

sleek/cleanup/comment_form_placeholders

向评论表单字段添加占位符。

钩子

不适用

函数

不适用

类

不适用

Sleek 核心

添加大量主题支持，包括翻译文件、排序列表等。

主题支持

sleek/disable_jquery

禁用前端（不在管理内部）的 jQuery。注意，这可能会破坏一些插件。

sleek/jquery_cdn

从 CDN（code.jquery.com）包含 jQuery。

sleek/get_terms_post_type_arg

为 get_terms 添加对 post_type 参数的支持，使其只返回与该帖子类型关联的术语。

sleek/disable_theme_editor

禁用主题编辑器。

sleek/classic_editor

禁用 Gutenberg 并在所有地方启用经典编辑器。

sleek/nice_email_from

更改使用 wp_mail() 时的默认电子邮件和名称，使用站点名称和管理员电子邮件而不是 "WordPress"。

sleek/disable_404_guessing

禁用 WordPress 在遇到 404 时的疯狂猜测：[https://core.trac.wordpress.org/ticket/16557](https://core.trac.wordpress.org/ticket/16557)

钩子

sleek/jquery_version

返回类似 "3.4.1" 的 jQuery 版本以更改它。

sleek/meta_viewport

设置自定义 meta_viewport 而不是默认的 width=device-width, initial-scale=1.0。

函数

不适用

类

不适用

Sleek 自定义徽标

钩入 the_custom_logo() 并渲染以下之一

1. 在管理员中选择的自定义徽标
2. 在 dist/assets/site-logo.svg 中找到的 SVG 徽标
3. 在 dist/assets/site-logo.png 中找到的 PNG 徽标
4. 仅输出站点名称

还允许向 get_custom_logo() 传递参数数组；the_custom_logo(['inline_svg' => true, 'append' => '-small']) 将渲染为内联 SVG 的 dist/assets/site-logo-small.svg。

最后，它还将链接类名称从 custom-logo-link 更改为 site-logo。

主题支持

不适用

钩子

不适用

函数

the_custom_logo($args)

这是原生的 WordPress the_custom_logo()，但我们添加了 $args 参数，这使得您可以选择 inline_svg（true/false）和 append（附加到 site-logo 文件名的字符串）。

类

不适用

Sleek 相册

改进了与媒体和相册相关的输出，如默认相册标记、将带标题的图片包裹在 figure/figcaption 中、删除相册 CSS 等。

主题支持

sleek/oembed/youtube 和 sleek/oembed/vimeo

将 YouTube 和/或 Vimeo 嵌入包裹在带缩略图和标题的 figure 中，并使用它们各自的 API，以便单击缩略图播放或暂停视频。

sleek/gallery/slideshow

创建幻灯片而非相册。相册选择的列数将是每页的幻灯片数。需要 SleekUI。

钩子

不适用

函数

不适用

类

不适用

Sleek Google Maps

为管理员添加“Google Maps API密钥”设置，如果非空，将在页面上添加Google Maps API并带有googleMapsInit回调。同时将Google Maps密钥发送到ACF，以便ACF地图正常工作。

还将添加SLEEK_GOOGLE_MAPS_API_KEY JavaScript变量到页面上。

主题支持

不适用

钩子

不适用

函数

不适用

类

不适用

简洁的Google搜索

建设中

简洁图像尺寸

注册WordPress图像尺寸的实用函数。

主题支持

不适用

钩子

不适用

函数

Sleek\ImageSizes\register($width, $height, $crop, $additionalSizes)

使用传递给函数的维度覆盖WordPress内置的缩略图大小（缩略图、中等、中等尺寸和大尺寸），例如：Sleek\ImageSizes\register(1920, 1080, ['center', 'center']);其中大尺寸将是1920x1080，medium_large将是其75%，medium是50%，thumbnail是25%。

还接受一个第四个参数，$additionalSizes，允许您以不同的名称注册更多尺寸；

Sleek\ImageSizes\register(1920, 1080, ['center', 'center'], [
	'portrait' => ['width' => 1080, 'height' => 1920, 'crop' => ['center', 'top']],
	'square' => ['width' => 1920, 'height' => 1920],
]);

每个附加尺寸将注册为{$name}_large、{$name}_medium_large（75%）、{$name}_medium（50%）和{$name}_thumbnail（25%）

Sleek\ImageSizes\get_image_sizes($width, $height)

辅助函数，用于register()。

类

不适用

简洁登录

改进登录界面，隐藏订阅者管理员栏，并在登录后将他们重定向到主页。

主题支持

sleek/login/styling

覆盖默认WordPress登录页面样式，并使用主题样式。

sleek/login/require_login

要求整个网站（内网）登录。

钩子

不适用

函数

不适用

类

不适用

简洁菜单

通过删除ID和冗余类清理菜单HTML。同时修复了帖子类型和分类存档上的活动类。

主题支持

不适用

钩子

不适用

函数

不适用

类

不适用

简洁模块

在/modules/中创建类来创建模块。

主题支持

sleek/modules/add_new_module_preview

在点击“添加模块”时启用模块的截图和描述。

sleek/modules/global_modules

启用“全局模块”（WIP）。

sleek/modules/inline_edit

启用灵活模块的行内编辑。

sleek/modules/module_preview

在管理员中启用模块预览。

过滤器

sleek/modules/global_modules(array $modules)

在此处返回一个模块名称数组以启用它们作为全局模块。

sleek/modules/dummy_field_value($value, $field, $module, $template, $level)

从这里返回$value，在用虚拟数据渲染字段时使用该值。

sleek/modules/fields(array $fields, $moduleName, $args)

在添加之前过滤ACF字段以供模块使用。这允许您一次将“全局”字段添加到多个模块中。

操作

待办...

函数

Sleek\Modules\render($module, $fields, $template)

使用（可选）字段$fields（或ACF位置，如术语、选项页面或设置为null以从get_the_ID()获取字段）使用（可选）模板$template渲染模块$module。

Sleek\Modules\render_flexible($area, $id)

使用（可选）$id作为ACF位置，在灵活内容区域$area中渲染灵活模块。

Sleek\Modules\get_module_fields(array $modules, $layout, $withTemplates)

获取所有$modules的ACF字段，并使用布局$layout（tabs、accordion、normal或flexible）。可选地为每个模块组提供一个Template下拉菜单使用$withTemplates = true。

Sleek\Modules\render_dummies(array $modules)

使用虚拟数据渲染所有$modules。

类

Sleek\Modules\Module

扩展此类以创建一个模块。

Module::init()

此方法在每次页面加载时调用一次。允许您添加钩子或执行与您的模块相关的任何操作。请注意，无论模块是否在当前页面上使用，它都会运行。

Module::fields()

从此处返回ACF字段数组，并将它们添加到模块中。

Module::data()

从此处返回一个数组，其中每个数组属性都将可用于模块模板。

Module::get_field($name)

返回从fields()返回的任何字段的值。在data()内部非常有用，用于检查模块配置。

简洁通知

在设置中添加Sleek设置以在站点上显示各种通知。

主题支持

光洁/通知/cookie_consent

将“Cookie同意”消息添加到网站中。同时，在“设置 -> 光洁”中添加一个文本区域来自定义消息。

光洁/通知/outdated_browser_warning

将“过时浏览器”警告添加到网站中。同时，在“设置 -> 光洁”中添加一个文本区域来自定义警告。

钩子

光洁/通知/cookie_consent

过滤cookie同意消息。只有当管理员设置中没有输入消息时才会运行。

光洁/通知/outdated_browser_warning

过滤浏览器警告。只有当管理员设置中没有输入警告时才会运行。

函数

不适用

类

不适用

光洁帖子类型

通过在/post-types/中创建类来创建帖子类型。

主题支持

不适用

钩子

光洁/帖子类型/field_group

在添加帖子类型之前过滤ACF字段组。

光洁/帖子类型/fields

在添加帖子类型之前过滤ACF字段。

光洁/帖子类型/archive_fields

在添加存档设置之前过滤ACF字段。

函数

Sleek\PostTypes\get_file_meta()

返回/post-types/中所有文件的信息（内部使用）。

类

Sleek\PostTypes\PostType

通过扩展此类来创建帖子类型。

PostType::init()

此方法在每次页面加载时调用一次。允许您添加钩子或执行与您的帖子类型相关的任何操作。

PostType::config()

在此处返回帖子类型配置数组。该数组直接传递给register_post_type。一些额外的属性也在此处可用

taxonomies

这是一个WordPress原生属性，但与调用register_post_type()不同，在此处设置的任何分类法如果不存在，则将自动创建。

has_single

将其设置为false以禁用帖子类型的单页。

hide_from_search

隐藏帖子类型从搜索中，没有内置函数排除搜索的副作用。

has_settings

将其设置为false以不为帖子类型添加“设置”页面。

has_archive

如果此设置为false，设置页面将为空；如果不为false，则将包含“标题”、“图像”和“描述”。

PostType::fields()

从此处返回一个ACF字段数组，并将它们添加到帖子类型中。

PostType::sticky_modules()

返回一个模块名称数组，并将它们添加到帖子类型中。使用Sleek\Modules\render('name-of-module')渲染粘性模块。

PostType::flexible_modules()

返回一个模块名称数组，并将它们添加到名为flexible_modules的可变内容字段中。可以使用关联数组创建多个可变内容字段；

[
	'left_column' => ['text-block', 'text-blocks'],
	'right_column' => ['related-posts', 'recent-comments']
]

使用Sleek\Modules\render_flexible('flexible_modules')或Sleek\Modules\render_flexible('left_column')等渲染可变模块字段。

PostType::sticky_archive_modules()

返回一个模块名称数组，并将它们添加到帖子类型的设置页面中。使用Sleek\Modules\render('name-of-module', 'mycpt_settings')渲染粘性模块。

PostType::flexible_archive_modules()

返回一个模块名称数组，并将它们添加到帖子类型设置页面上的名为flexible_modules的可变内容字段中。此处也可以使用关联数组。

使用Sleek\Modules\render_flexible('flexible_modules', 'mycpt_settings')在设置页面上渲染模块。

光洁设置

在管理员中添加一个选项页面（设置 -> 光洁），其中包含两个字段：head_code和foot_code，允许您将任意HTML添加到<head>和</body>之前。还提供了一个简单的API来添加更多设置字段到选项页面。

主题支持

不适用

钩子

不适用

函数

Sleek\Settings\add_setting($name, $type, $label)

向选项页面添加新的设置字段。

流畅\设置\get_setting($name)

获取设置的值。

类

不适用

流畅TinyMCE

改进TinyMCE编辑器。

主题支持

sleek/tinymce/disable_colors

禁用更改文本颜色的功能。

sleek/tinymce/clean_paste

通过删除不想要的HTML元素和属性来清理粘贴的HTML。

钩子

sleek/tinymce/clean_paste_disallowed_elements

过滤不允许粘贴的HTML元素列表。

sleek/tinymce/formats

在WYSIWYG编辑器的“格式”菜单中添加或删除元素。默认情况下，“按钮”和“幽灵按钮”被添加。

函数

不适用

类

不适用

流畅工具

由流畅内部使用的实用函数。请查看代码以获取文档。