WP资源海
评论16字数 903阅读3分0秒阅读模式
问题1
wordpress 外观 自定义 额外 CSS，这里面的css是保存在数据库哪个位置的，又是如何引入到前端页面中的？
问题1解答
在WordPress中，通过“外观” -> “自定义” -> “额外 CSS”添加的自定义 CSS 是保存在数据库中的 wp_options 表里。具体来说，它被存储在 option_name 为 custom_css_post_id 的选项中，该选项指向 wp_posts 表中的一个特定的 post_id，对应的 post_type 为 custom_css。
详细解释：
- 存储位置:
- 当你在“自定义” -> “额外 CSS”中添加自定义 CSS 时，WordPress 会在
wp_posts表中创建一个新的custom_css类型的帖子（post），并将你的自定义 CSS 保存到这个帖子中。这个帖子的内容会存放在post_content字段中。 - 与此同时，WordPress 会在
wp_options表中存储一个option_name为custom_css_post_id的选项，这个选项的值就是上述custom_css类型帖子的post_id。
- 引入方式:
- 当一个页面被请求时，WordPress 会根据当前主题和
wp_options中custom_css_post_id的值，找到对应的custom_css类型的帖子，并将其中的 CSS 内容注入到页面的<head>部分。 - 具体来说，WordPress 使用
wp_add_inline_style()函数将这些自定义的 CSS 代码内联到主题的主样式表中，确保它们在前端页面中正确生效。
总结
通过“外观” -> “自定义” -> “额外 CSS”添加的 CSS 被存储在 wp_posts 表中，post_type 为 custom_css。前端页面加载时，这些 CSS 会通过 WordPress 内部机制动态地注入到页面中。
问题2
启用了子主题以后，父主题设置的额外 CSS不见了，前台页面也不能引入了
问题2解答
在启用子主题后，父主题的“自定义” -> “额外 CSS”不再自动应用于子主题，这是因为 WordPress 将每个主题的自定义 CSS 作为独立设置存储。因此，当你切换到子主题时，子主题的自定义 CSS 设置是独立的，并且默认情况下是空的，这导致了父主题的额外 CSS 不再被应用到前端页面。
解决方法：
- 手动复制父主题的自定义 CSS:
- 你可以回到父主题，将在“自定义” -> “额外 CSS”中添加的 CSS 复制下来。
- 然后切换到子主题，在子主题的“自定义” -> “额外 CSS”中粘贴这些 CSS 代码。
- 在子主题的
style.css中引入父主题的自定义 CSS:
- 如果你希望在子主题中保留父主题的所有自定义 CSS，可以将这些 CSS 代码直接添加到子主题的
style.css文件中。 - 编辑子主题的
style.css文件，将父主题中的自定义 CSS 代码粘贴到文件末尾。
- 通过子主题的
functions.php加载父主题的自定义 CSS:
- 你也可以通过在子主题的
functions.php文件中添加代码，手动加载父主题的自定义 CSS。
function enqueue_parent_custom_css() {
$parent_custom_css_post_id = get_option('custom_css_post_id');
if ($parent_custom_css_post_id) {
$parent_custom_css = wp_get_custom_css();
wp_add_inline_style('parent-style', $parent_custom_css);
}
}
add_action('wp_enqueue_scripts', 'enqueue_parent_custom_css');这段代码会在前端页面加载父主题的自定义 CSS。确保 parent-style 是你父主题样式表的句柄（handle）。
注意：
上述方法的第一种适合简单场景，而第三种方法对于需要动态加载父主题自定义 CSS 的情况更为灵活。
评论