如何在Genesis主题中加载自定义CSS样式表

如何在Genesis主题中加载自定义CSS样式表

如何在Genesis主题中加载自定义CSS样式表

  Genesis 提供了数十种可能性来定制和个性化您的网站,是允许集成自定义样式表。此功能使您可以将网站的设计提升到一个新的水平。

  实际上,使用自定义样式表可以让您修改网站的设计和内容布局,而无需触及或编辑原始主题的样式。这反过来有助于保持您的 CSS 结构化、w3c 验证,最重要的是允许您理解元素而不会弄乱代码。

  推荐:什么是Genesis Framework主题框架

Genesis主题自定义CSS样式表好处

Genesis主题自定义CSS样式表好处
如何在Genesis主题中加载自定义CSS样式表

  下面我将介绍在创世框架中加载自定义样式表的一些好处。

  • 可以修改内容、侧边栏、页脚、页眉或简单地修改宽度。
  • 为不同的服务或插件添加样式支持。可以轻松地自定义它呈现相关帖子的方式。
  • 可以添加不同的下载集、信息按钮和社交网络图标。
  • 可以使用 font-awesome 添加视网膜就绪图标。
  • 可以自由使用几乎任何自定义网络字体。

  推荐:[最新版]YellowPencil插件免费下载WordPress可视化CSS样式编辑器插件

在Genesis主题框架中添加自定义样式表

在Genesis主题框架中添加自定义CSS样式表
如何在Genesis主题中加载自定义CSS样式表
add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
	wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/custom.css', array(), PARENT_THEME_VERSION );
}

  上面我介绍了您必须添加到主题的 function.php 文件中的代码片段。上面的代码将帮助您加载一个名为 custom.css 的外部样式表以及您的主要和其他 css 文件。

  推荐:如何将自定义CSS添加到WordPress网站

替换注意Style.Css

  现在为了添加加载外部样式表,必须创建一个新的 custom.css 文件并将其上传到主题目录中。例如 http://yourblog.com/wp-content/themes/your-genesus-child-theme/custom.css 。

add_filter( 'stylesheet_uri', 'custom_replace_default_style_sheet', 10, 2 );
function custom_replace_default_style_sheet() {
	return CHILD_URL . '/custom.css';
}

  如果你想替换你的主要CSS样式表,请使用上面的代码。此代码段将不允许加载您的主 css,而是加载 custom.css 并要求网络浏览器执行其所有样式。

  推荐:Genesis主题移动菜单删除Menu菜单文本

总结

  以上是晓得博客为你介绍的怎么在Genesis主题中加载自定义CSS样式表的全部内容,可以使用文件管理器或任何 FTP 程序将此文件上传。完成后可以从 wordpress 主题编辑器区域编辑文件。

  推荐:Genesis主题建站教程

给文章评分

Claude、Netflix、Midjourney、Chatgpt Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
Kinsta-free-hosting主机
Kinsta-free-hosting主机
Elementor可视化创建WordPress网站
Elementor可视化创建WordPress网站
滚动至顶部