Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[询问]关于 Wordpress 的 H2 H3 H4 H5 H6 标题格式的情况 #385

Closed
StarryVoid opened this issue Jun 23, 2021 · 5 comments
Closed

Comments

@StarryVoid
Copy link

StarryVoid commented Jun 23, 2021

问题描述

1、CSS顺序
首先目前的情况下,H2的CSS顺序(其他的类似)
bootstrap .h2 h2 {}
kratos.min.css h2 {}
kratos.min.css .k-main .details .article .content h2 {}
custom.css .k-main .details .article .content h2 {}
kratos.min.css .k-main .details .article .content h2:not(:first-child) {}

关于这项,首先前几个版本的 CSS 顺序结构,没有这个not,其次custom因为精准匹配是最后加载的
现在多了个not,而且还带了三个css配置。
目前的标题CSS变化已经覆盖了原生的标题,而且 古腾堡(Gutenberg)编辑器中的 所有标题元素 和实际样式均不一致

出于个人想法,有没有什么方式,能 锁定 不要这些 H2 H3 H4 H5 H6 的标题变化?
每次都重新调节UI。调完了下个版本直接加塞就很糟心。总不能直接每个元素都来一遍硬锁 -!important 吧?
版本号检索,是3.2.10新增的1a93f16

2、Custom文件夹的覆盖问题
在Wordpress的更新中,直接会覆盖 custom.css custom.js custom.php
这个问题很麻烦,更新按钮的点击意味着每次都需要 SSH 上服务器还得用高权限账户调整theme目录的文件
所以询问一下,wordpress 更新代码中有什么更优的办法可以实现不覆盖么?

例如
采用 wordpress 自带的子主题方案然后全 import 进来。

Theme Name: kratos_theme_custom
Template: kratos
@import url("../kratos/style.css");

3、H4 H5 标题问题
目前的正文 字体大小为 16 (kratos.min.css ol,p,ul)
H1 标题 的大小为 34 ,正常H5是 40(bootstrap 2.5rem)
H2 标题 的大小为 28 ,正常H5是 32 ,古腾堡是 39(bootstrap 2rem)
H3 标题 的大小为 20 ,正常H5是 28 ,古腾堡是 25(bootstrap 1.75rem)
H4 标题 的大小为 16 ,正常H5是 24 ,古腾堡是 20(bootstrap 1.5rem)
H5 标题 的大小为 14 ,正常H5是 20 ,古腾堡是 16(bootstrap 1.25rem)
首先 我们都知道标题的含义是大于正文的,现在等于直接废掉了四个标题。
而使用标题的有 目录,有SEO会根据标题来计算。
所以标题的使用肯定没法避免,但是标题的CSS连正文都不如,甚至更小,这个标题是有问题的吧?

4、似乎是release的版本号写错了
https://github.com/vtrois/kratos/releases/tag/v3.3.2
3.3.2 not 3.2.2

环境信息
PHP 版本:7.4.20
Kratos 版本:3.3.0
WordPress 版本:5.7.2
User Agent 信息:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36

@n0099
Copy link
Contributor

n0099 commented Jun 24, 2021

  1. 由于您一次提出了多个问题,建议修改issue标题
  2. :not(:first-child)是在 165cd78 中增加的
    再往前在文章不同级别标题样式优化 #229 中增加了“h2特色标题”并稍微增加了h1~6字号,但h5 h6仍然小于正文字号(h4才一样大)
    Gutenberg编辑器可视化预览时并不加载主题的style.css所以预览也就图一乐
  3. 由于wordpress更新主题是直接rm -r themes/current-theme/*再解压新主题zip,所以我不认为custom目录是可以持久化的主题更改方式,毕竟custom.php只是加载顺序靠后的functions.php,这跟使用wp子主题没有区别,况且wp子主题可以持久化(更新父主题不影响子主题文件),也可以修改(或者说是覆盖,必须先复制一份到子主题再改)其他任意父主题文件(只要路径重名且父主题require/include时使用get_template_directory()而不是__DIR__
    https://github.com/vtrois/kratos/blob/261402720a7b80fd56484a4954c870722fc207b0/functions.php#L45
    https://github.com/vtrois/kratos/blob/e1dd18e7ba3d2b2fd263099e08918a62d5af18fc/inc/theme-core.php#L70

2.5 但是kratos对子主题的兼容性并不太好
根据https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

In the past, the common method was to import the parent theme stylesheet using @import inside style.css. This is no longer the recommended practice, as it increases the amount of time it takes style sheets to load. Plus it is possible for the parent stylesheet to get loaded twice.
The ideal way of enqueuing stylesheets is for the parent theme to load both (parent’s and child’s), but not all themes do this. Therefore, you need to examine the code of the parent theme to see what it does and to get the handle name that the parent theme uses. The handle is the first parameter of wp_enqueue_style().

If the parent theme loads both stylesheets, the child theme does not need to do anything.

但不幸的是kratos并不会自动加载子主题的主style.css(),所以我们必须使用第二种

If the parent theme loads its style using a function starting with get_template, such as get_template_directory() and get_template_directory_uri(), the child theme needs to load just the child styles, using the parent’s handle in the dependency parameter.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

对于kratos就是:

add_action('wp_enqueue_scripts', fn() => wp_enqueue_style('child-style', get_stylesheet_uri(), ['bootstrap', 'kratos'], wp_get_theme()->get('Version')));

['bootstrap', 'kratos'] deps参数表示子主题的style.css必须在bootstrap.min.css及kratos.min.css之后加载(即html中的顺序)

3.我也十分反对3.3对h1~6 css的修改,这影响了许多文章的排版效果,甚至还让#229 中引入h2特色标题的左对齐没有紧贴文章内容左边框(margin-left应该有-20px而不是-16)

4.where?

@StarryVoid
Copy link
Author

StarryVoid commented Jun 25, 2021

感谢 @n0099 的解答。
关于第2.5 项,我自己在尝试使用后,发现不加载 custom.php 想问一下是需要额外在 function 中引用加载一下么?

seatonjiang added a commit that referenced this issue Jun 25, 2021
@seatonjiang
Copy link
Owner

@n0099 @StarryVoid 特色二级标题这里已经修复了,custom 在下个版本会去掉,改为子主题的形式,文章页面的字号问题需要再讨论一下再修改。

@n0099
Copy link
Contributor

n0099 commented Jun 25, 2021

@n0099 @StarryVoid 特色二级标题这里已经修复了,custom 在下个版本会去掉,改为子主题的形式,文章页面的字号问题需要再讨论一下再修改。

建议直接revert

@n0099
Copy link
Contributor

n0099 commented Jun 25, 2021

感谢 @n0099 的解答。
关于第2.5 项,我自己在尝试使用后,发现不加载 custom.php 想问一下是需要额外在 function 中引用加载一下么?

#385 (comment)

毕竟custom.php只是加载顺序靠后的functions.php

使用了子主题就不需要再使用父主题的custom.php,您只需要把custom.php内容复制到子主题functions.php下效果便是一样的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants