WordPress主题框架UnderStrap教程

许多开发wordpress主题的朋友都要用到bootstrap,对于一些刚刚学会wordpress主题开发的新手来说,如何在wordpress主题中集成bootstrap可能对他们还不熟悉,而且每次开发一个新的主题都要重复设定header、Footer、Siderbar这些,那么有没有这样一个框架式的东西,自动集成bootstrap, 有基本的header、Footer、Siderbar呢?还真有!

今天我们将要介绍的这款Wordpress主题框架UnderStrap就可以完全满足您的需求,从它的名称也可以看出,under指的是它集成了wordpress的Underscores主题,strap指它集成了bootstrap。

它的特色功能包括:

  • 具有自定义面板功能,可以直接从WordPress自定义面板添加自定义代码。
  • 附带Font Awesome 4.6+字体图标套件,有超过600个免费(MIT许可证)图标供你使用。
  • 完美兼容Automattic的各种插件。
  • 支持WooCommerce插件。
  • UnderStrap是一个父主题,集成了一个子主题,供您开发自己的主题。
  • 可以很轻松地翻译成其它语言,默认情况下附带英语和德语语言文件。
  • 根据GNU通用公共许可证v2发布,UnderStrap可以免费用于与此许可证兼容的个人和商业项目。
  • 附带内置小部件滑块和基本设置。 基于Bartosz Wojciechowski的Owl Carousel 2。

 

一、安装

官方网址:https://understrap.com/

下载地址:https://github.com/understrap/understrap

后台启用之后的效果:

二、设定widgets

看上面的主题好像有点简单,没关系,我们可以通过widgets(小部件)来丰富它。

这个主题包含五个主要小部件区域:两个侧边栏小部件,一个全尺寸“英雄”小部件和主要内容上方和下方的两个动态小部件区域。

可以在后台的“外观–小工具”这里进行设置。

三、设定Jumbotron

代码如下:

<div class="jumbotron py-5 jumbotron-fluid bg-primary text-white" style="border-top: 1px solid rgba(255,255,255,.1);">
<div class="container py-5">
	<div class="row">
		<div class="col-md-7">
			<h1 class="display-3">Sample Jumbotron</h1>
			<p class="lead">Welcome to the UnderStrap demo site. <br/>UnderStrap is a WordPress theme framework and starter theme which incorporates Bootstrap 4 into WordPress.</p>
			<a class="btn btn-success btn-lg py-3" href="https://gumroad.com/l/CQrW" style="padding-left:80px; padding-right:80px;" target="_blank">Download now</a><br/>
			<a class="btn btn-sm btn-link text-white-50" href="https://github.com/holger1411/understrap"  target="_blank" role="button">Visit Github</a>
			<a class="btn btn-sm btn-link text-white-50" href="https://understrap.com"  target="_blank" role="button">Visit understrap.com</a>
	    </div>
	</div>
</div>
</div>

效果展示:

当然,我们也可以直接百度Bootstrap Jumbotron, 然后找到相应的代码,粘贴上来,比如这个

<div class="jumbotron">
    <div class="container">
		<h1>欢迎登陆页面!</h1>
        <p>这是一个超大屏幕(Jumbotron)的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">学习更多</a></p>
    </div>
</div>

效果展示:

四、其他设置:
footer直接用文本区块就可以了。
Top Full也直接放入文字区块就可以了。

五、效果展示

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
没有账号? 忘记密码?