css - 将现有的bower foundation+scss网站转换成wordpress主题

标签 css wordpress sass zurb-foundation bower

我目前正在尝试习惯使用基础框架和 scss 之间的组合,两者都由推荐给我的基础 cli 自动生成。

在建立了一个小网站之后,我现在正试图将它转换成一个 WordPress 主题,我目前对这个程序知之甚少,但我完全不知道什么文件以及我应该如何将我的 scss 从WordPress 的基础 cli。

熟悉 Foundation cli 文件结构的人可以帮助我吗? 提前感谢大家的时间和关注。

最佳答案

我的建议是使用类似 FoundationPress 的东西,一个 Foundation 6 WordPress 主题。 Foundation 也有一个不错的 WordPress 列表 starter themes .这可能会帮助您更多地了解 WordPress 的一般模板层次结构,以便您可以尝试继续前进并处理您构建的内容。

转换的斗争将归结为与 WordPress 模板层次结构保持一致并使所有部分都动态化。使用 Sass 不需要做太多事情 - 您仍然会像在转换之前构建它时一样加载相同的样式表并进行编译。

这是一个很好的资源 making a WordPress theme .你基本上需要一个 style.css 来定义你的主题,header.php 文件来加载持久导航,还需要定义一个点来加载脚本/样式(header.php 中的 wp_head()),footer.php出于与 header.php(wp_footer() 在 footer.php 中)相同的原因,functions.php 使用 wp_enqueue_style 加载样式,index.php 作为默认页面模板.

这是一个很好的基础,但理解WordPress Template Hierarchy也很重要。比较基金会新闻甚至TwentySeventeen模板层次结构应该有助于理解它是如何工作的。希望此信息可以帮助您指明正确的方向!

关于css - 将现有的bower foundation+scss网站转换成wordpress主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43189902/

相关文章:

php - 如何在具有特定颜色的前 10 个条目的表中显示记录

jquery - 如何将边距添加到文本框的背景图像?

apache - 无法安装网站网络 - Wordpress 和 XAMPP

wordpress - 如何在重定向页面上访问联系表 7 提交的数据?

javascript - Jest 和 SCSS 变量

webpack - Angular CLI 6 自定义 Webpack SCSS 加载器

html - 如何减少打破文本的标签/跨度/p 之间的空间?

javascript - compass/咖啡可以做到这一点吗?另一种方法?

css - 这是什么? (Wordpress 主题中的未知框)

css - 在 scss 的计算中使用媒体查询