ar foundation
We’ve all heard of frameworks that combine the power of Twitter Bootstrap and WordPress. Many developers use these frameworks and boilerplates to speed up development with their custom WordPress themes. What a lot of people don’t realize is that there are boilerplates and frameworks for ZURB Foundation 5 as well.
我们都听说过结合Twitter Bootstrap和WordPress功能的框架。 许多开发人员使用这些框架和样板通过其自定义WordPress主题加快开发速度。 很多人没有意识到的是，还有ZURB Foundation 5的样板和框架。
Let’s take a look at getting started with Foundation and WordPress.
让我们看一下Foundation和WordPress的入门。
There are a lot of resources out there that will help you get started. The first thing you need to decide, is whether you’re going to use an existing boilerplate, or if you are going to combine Foundation 5 and WordPress yourself. Combining WordPress and Foundation 5 can be a tremendous amount of work, and considering that many other developers have already done it, it would be much easier to try their boilerplate first, and customize it for your needs.
有很多资源可以帮助您入门。 您需要决定的第一件事是，是否要使用现有的样板，还是要自己结合Foundation 5和WordPress。 将WordPress和Foundation 5结合起来可能需要大量工作，并且考虑到许多其他开发人员已经做到了，因此首先尝试他们的样板并根据您的需要进行自定义会容易得多。
Some of these starter themes in frameworks are more complicated than the others. It’s important that you take a look at the documentation before downloading any of these and getting started.
框架中的某些入门主题比其他主题更复杂。 在下载任何文档并开始使用之前，请务必阅读文档，这一点很重要。
Let’s take a look at a few Foundation 5, WordPress Blank Themes and Biolerplates to get you started.
让我们看一些基础5，WordPress空白主题和Biolerplates来帮助您入门。
FoundationPress by OleFrederik (FoundationPress by OleFrederik)
There are a lot of existing websites that use this framework. There may be a slight learning curve when developing a theme using this framework. A few things are required before you can get started with development. For example, it is recommended that you install Grunt, Bower and Node.js. It is also recommended that you handle your CSS with SASS. If you’re not familiar with these scripts and methods, this may be a little advanced for you.
有许多现有的网站都使用此框架。 使用此框架开发主题时，可能会有轻微的学习曲线。 在开始开发之前，需要做一些事情。 例如，建议您安装Grunt，Bower和Node.js。 还建议您使用SASS处理CSS。 如果您不熟悉这些脚本和方法，那么这对您可能有点高级。
接头 (JointsWP)
JointsWP is a blank WordPress theme built from a combination of Foundation and WordPress. What I like about this boilerplate is that it makes it easier for developers to get started. They recommend that you use the SASS version, and they are nice enough to provide the CSS version as well. If you understand WordPress and CSS, it can make it easy to get started, because you don’t have to learn anything new to get up and running.
JointsWP是由Foundation和WordPress组合而成的空白WordPress主题。 我喜欢这个样板，它使开发人员更容易上手。 他们建议您使用SASS版本，它们也足够提供CSS版本。 如果您了解WordPress和CSS，就可以轻松上手，因为您无需学习任何新知识即可启动和运行。
遐想 (Reverie)
Reverie is a framework that makes it easy to get started with developing WordPress themes with Foundation. They also give you the option of using the SASS version, or a version using vanilla CSS. One of the standout features of this framework is that they offer support for theme customization. Reverie also comes standard with features for pagination and custom WordPress menus.
Reverie是一个框架，可让您轻松开始使用Foundation开发WordPress主题。 它们还为您提供使用SASS版本或使用香草CSS的版本的选项。 该框架的突出特点之一是它们为主题自定义提供支持。 Reverie还标配有分页和自定义WordPress菜单功能。
新框架 (Nouveau Framework)
If you want a streamlined starter theme without bloated code, Nouveau is the framework for you. You can either use SASS or regular CSS to style your theme. Nouveau is meant to be a starting point for your WordPress projects, all built on the Foundation 5 framework.
如果您想要精简的入门主题而又没有肿的代码，那么Nouveau是适合您的框架。 您可以使用SASS或常规CSS设置主题样式。 Nouveau旨在成为您的WordPress项目的起点，这些项目都是基于Foundation 5框架构建的。
编辑基于基金会的WordPress主题 (Editing A Foundation Based WordPress Theme)
You may be a little intimidated at the thought of editing of a WordPress theme based on the Foundation framework. However, it’s important to keep in mind that the framework is in place to make things easy to edit. The key to Foundation and WordPress is understanding how your theme is structured. The structure of a site built in HTML and one built with WordPress are no different. The PHP of WordPress is translated into html by the browser. You still use divs the same way, and you use the same classes you would in Foundation. If you need to look at Foundation’s documentation, you can access it here.
您可能对基于Foundation框架编辑WordPress主题的想法感到有些害怕。 但是，请务必牢记框架已经到位，以使事情易于编辑。 Foundation和WordPress的关键是了解主题的结构。 用HTML构建的网站和使用WordPress构建的网站的结构没有什么不同。 WordPressPHP由浏览器翻译成html。 您仍然以相同的方式使用div，并且使用与Foundation中相同的类。 如果需要查看Foundation的文档， 可以在此处访问 。
为什么要基金会？ (Why Foundation?)
We all know the other frameworks that are available, but Foundation has some of the best support. Zurb has been working on responsive design from the start, and with each new version they make even more improvements. Foundation competes well against Bootstrap, in the fact that it is modular in the way it is built.
我们都知道可用的其他框架，但是Foundation提供了一些最好的支持。 Zurb从一开始就致力于响应式设计，并且对于每个新版本，Zurb都会做出更大的改进。 Foundation与Bootstrap竞争很好，因为它在构建方式上是模块化的。
The normal Foundation starter theme is based on a 12 column structure, meaning that you have the ability to create a layout with columns that are based on any multiple that makes up the total of 12. This gives you a lot of flexibility in how your build your site.
普通的Foundation入门主题基于12列结构，这意味着您可以使用基于以12为总倍数的任何列创建布局，这为您提供了很大的灵活性您的网站。
With WordPress, it’s no different. You create the same structure you would in an html website, but you add the PHP components that make up a WordPress theme. The way you work with WordPress doesn’t change. You are simply working with an easy-to-use structure, that gives you a lot of flexibility, while giving you the power to build a beautiful, responsive WordPress site.
使用WordPress，没有什么不同。 您创建的结构与在html网站中创建的结构相同，但是您添加了组成WordPress主题PHP组件。 使用WordPress的方式不会改变。 您只是在使用易于使用的结构，这为您提供了很大的灵活性，同时使您能够构建漂亮的，响应Swift的WordPress网站。
基金会的组成部分 (Foundation’s Components)
You can get as advanced with your WordPress theme as you’d like. Building on top of the Foundation 5 framework, you can code your own WordPress site like you would any other. You can implement several popular features from Foundation, giving users the ability to customize their site. Let’s take a look at a few key components of Foundation that make it appealing for WordPress developers.
您可以根据自己的喜好使用WordPress主题。 建立在Foundation 5框架之上，您可以像其他任何人一样编写自己的WordPress网站。 您可以从Foundation实施一些流行的功能，从而使用户能够自定义其网站。 让我们看一下Foundation的一些关键组件，这些组件对WordPress开发人员具有吸引力。
画布外导航 (Off-Canvas Navigation)
Mobile menus and hideaway menus can keep distracting links away from content until your website visitor is ready to interact with them. Also, you can use this to tuck away lesser-used features. With this feature, you could hide a secondary menu on your site, all controlled via the menu section of the WordPress Admin.
移动菜单和隐藏菜单可以使链接远离内容，直到您的网站访问者准备好与它们进行交互为止。 另外，您可以使用它来隐藏较少使用的功能。 使用此功能，您可以在站点上隐藏一个二级菜单，全部通过WordPress Admin的菜单部分进行控制。
轨道滑块 (Orbit Slider)
If you want to build a custom slider, you could use Foundation’s Orbit Slider as a base. You could code your own features such as headlines and captions. Also, the images could be pulled from the media library of WordPress.
如果要构建自定义滑块，则可以使用Foundation的Orbit滑块作为基础。 您可以编写自己的功能，例如标题和标题。 同样，可以从WordPress的媒体库中提取图像。
形式 (Forms)
Foundation has laid some great groundwork for forms. If you’re collecting email addresses or any other important information, you could combine the beauty and validation of Foundation with the database from WordPress to store user information however you wish.
基金会为表格奠定了良好的基础。 如果您正在收集电子邮件地址或任何其他重要信息，则可以将Foundation的功能和验证与WordPress的数据库相结合，以存储所需的用户信息。
面包屑 (BreadCrumbs)
Foundation has a breadcrumbs component, which you can enable to help users navigate your blog, or other sections of your website. Giving visitors the ability to take a step back when they navigate too deeply can be a real plus.
Foundation有一个面包屑组件，您可以启用它来帮助用户浏览您的博客或网站的其他部分。 使访问者在导航得太深时能够退后一步是一个真正的优势。
Flex视频 (Flex Video)
Responsive design wouldn’t be complete without the implementation of flexible video options. You have the ability to make your videos more appealing, by fitting the device they’re being used on. This is much better than having a set size and having viewers scroll, pinch and zoom to try and make it fit.
如果没有灵活的视频选项，响应式设计将是不完整的。 通过安装视频所用的设备，您可以使视频更具吸引力。 这要比设置大小并让观众滚动，捏和缩放来使其适应要好得多。
显示模态 (Reveal Modal)
As much as everyone says they hate pop-ups, they work. You can’t deny the numbers. Foundation has a reveal modal that you can specify with an ID. This gives you a ton of flexibility on your own site to trigger a pop-up when a user does something specific. You can have different pop-ups, depending on what a user clicks, catering sign up forms and propositions to be user specific. If you’re going to use a pop-up, you might as well maximize its effectiveness.
正如每个人都说的那样，他们讨厌弹出式窗口，但它们却可以工作。 您不能否认数字。 Foundation有一个显示模式，您可以使用ID指定它。 当用户执行特定操作时，这为您提供了很大的灵活性，可以在您自己的站点上触发弹出窗口。 您可以具有不同的弹出窗口，具体取决于用户单击的内容，提供的注册表单和针对特定用户的提议。 如果您要使用弹出式窗口，则最好使它发挥最大的作用。
结论 (Conclusion)
Combining the power of WordPress and Foundation into one powerhouse could be the solution your business needs. The best thing about everything we mentioned is that it eliminates the need for plugins. Many designers and developers utilize plugins to add all of these features to their site. If you implement them with Foundation, it’s integrated with the theme. You’ll end up with a more lightweight theme that actually creates less server requests. Your site will load faster, and the entire user experience can be customized.
将WordPress和Foundation的功能整合到一个强大的系统中可能是您的业务需要的解决方案。 关于我们所说的一切，最好的事情是它消除了对插件的需求。 许多设计人员和开发人员都使用插件将所有这些功能添加到他们的网站。 如果使用Foundation实施它们，它将与主题集成在一起。 最后，您将获得一个更轻量级的主题，该主题实际上创建了更少的服务器请求。 您的网站将加载得更快，并且可以自定义整个用户体验。
附加阅读 (Additional Reading)
If you’d like further information about Foundation 5, take a look at some of the other articles recently published on SitePoint about this powerful framework:
如果您想了解有关Foundation 5的更多信息，请查看最近在SitePoint上发表的有关此强大框架的其他一些文章：
ar foundation
6603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
