• 售前

  • 售后

热门帖子
入门百科

WordPress 实现简朴的企业网站

[复制链接]
123456868 显示全部楼层 发表于 2021-8-15 19:17:12 |阅读模式 打印 上一主题 下一主题
Berita是一个专为此类需求设计的免费theme。较之于同类产品,它同时为了增长定制化程度还改造了wp体系,利用上更类似插件。只要把握简单的html+css,就可以随意对页面进行改造。灵活度和拓展性在同类中是佼佼者。
下图是我昨天利用WP+ berita改造的网站。(这个网站主要是为了方便演示,里面的部门icon和图片有版权问题,请勿直接利用)


这是berita官网的demo


在此处下载我改造过的版本。(修改了css,header.php以及图片文件)
此处下载官方原版。官方所在:http://bizzartic.com/bizzthemes/berita/download/
我缩小了原版的header区域高度,在search框上方增长了一组url。添加了一些底栏版块的样式。
详细怎样利用berita的插件体系,我会在下面详细说明流程。并放出我的代码。
————————————————————————————————————————————————————
首先,像安装所有theme一样,解压包放置在wp-content/themes,并在WP左侧菜单 Appearance - Themes 里启用该theme。
接下来看见的界面是如许的。。。空空如也。不要扫兴。还有大量的定制化和手写代码工作要做。


在左侧菜单的Appearance里可以发现多了一项Berita Theme Options .这就是定制体系。如下图。我做了粗略的说明。

Berita简单的工作原理:

一个简单的企业站是有一部门静态页面和一部门动态页面来共同构成的。诸如about us ,contact us ,service, feature, customs 之类不常常变动的页面直接写成静态html页面。 news,case 之类会必要更新维护的动态部门利用CMS体系来生成。
Berita 利用WP里的pages 来制作静态页面,用posts来制作动态部门。实际上pages和posts都利用同一个编辑器,在编辑代码时没有什么差别。
以是下面先来创建一些pages,一些posts和几个categories,来作为“构筑质料”。
有了质料,我们就可以组建首页了。
第一步:设置LOGO


在此处设置Logo图片。假如勾选Show Blog Title+Tagline,则logo图片不再生效,而直接表现blog title和tagline的文本。
第二步:首页导航。

创建完pages后,导航上会直接出现链接。可以在Berita Theme Options 去掉你不盼望表如今导航上的page。
在Blog Section Settings 设置一个放在导航上的post 分类。链接到Categories页面。实用于”公司新闻”或者“产品的blog”
这里只允许设置1个。体系发起创建一个Category 名叫 BLOG ,然后把别的所有分类都设为它的子分类。这种做法适合想给blog加个首页的用户。

还可以设置在footer区表现的文字导航

还可以设置多级导航。在edit page的时间,将右侧的的Attributes - Parent 设为对应页面,就可以在导航里自动出现
  1. <img height="82" alt="" src="https://img.jbzj.com/do/uploads/allimg/100124/21210512.jpg" width="214" align="right" />我在搜索框上方加了几个about | contact的入口。在Appearance - Editor - header.php里可以修改链接和文本。在<div id=”search-spot”>下方加上
  2. <p><a href=”http://clentrust.com/about” title=”About us”>About</a> | <a href=”http://clentrust.com/contact” title=”contact us”>contact</a> | Join</p>
复制代码
第三步:首页的滚动推荐区(Front Slider)。

Berita体系中,这部门也是利用Pages来完成的。创建几个pages,有无title都可以。
然后如下图中设置page的id及排序。
这个区域的高度可以在Pick Height里设置,页面中高出该高度的部门不会表现。

下面的代码各人可以直接利用:注意要更换img时,要把class 改为class=”fr” (也就是float right的意思,完成图片的右浮动)
  1. <div class=”slider-post”><a title=”Sample Slider Page”><img class=”fr” title=”1″ src=”http://clentrust.com/wp-content/uploads/2009/11/1.jpg” alt=”1″ width=”350″ height=”250″ /></a>
  2. <div class=”slider-title”>Sample Slider Page</div>
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<a class=”btn” href=”#”>view more</a></div>
复制代码
第四步:底栏的3个版块。

在Appearance-Widgets菜单里,我们可以发现左边的可选widget窗体多了好几个以Bizz开头的。
右侧的Current Widget也从单一的Sidebar,增长了6组Footer。

Front Footer: 控制静态页面(首页和pages)底栏的3个版块区域
                                                上一页12 下一页 阅读全文

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作