响应式WordPress主题 Hueman使用教程

我的网站于2014年7月7日在cnohost asia的KT空间出问题以来,已经经过了一个多星期仍未恢复。因为疏忽,搬到KT空间也没怎么备份数据,一直苦等官方能尽早恢复,我也好拿回数据,但是网站[主管]TBRM却告诉要做好数据丢失的准备。。。昨天空间是恢复了,数据果真没了!!真的很后悔,没办法,只好拿以前备份的数据重新建站了。以前的数据也是只到2014年5月30日的,5月30日到7月的数据尽失,损失惨重!我对免费空间也是无力爱了,于是 狠心决心购买了三年的bluehost空间,专心做网站,也不担心空间,也不担心流量了。只是以后要更加留意数据的备份了~~

是以重见天日记。

hueman是我非常喜欢的一个主题,之前一直使用知更鸟的hotnews主题,使用久了,难免审美疲劳,换换主题,也能换换心情。我最喜欢莫过于主题自带的字体,阅读起来非常的漂亮。但是难处就在于该主题功能非常的强大,不亚于fouceful主题,又该主题是英文,也给使用者带来一定的难度。我建议先模仿官方的演示布局设置,再逐渐的改进,达到熟能生巧。我也把使用过程中的解决的问题记录在这里,也许能帮助到更多爱好这款主题的人~~

1、Follow – 自定义Social Links功能

Hueman支持自定义社交网络链接 ,也是一大特色。

Theme Options,在Social Links点击Add New,Title填写社交网络链接名称,比如“QQ”、“点击这里给我发消息”等;

Icon Name ,点击后面的view all ,选择icon图标,比如,我要添加新浪微博,就在Brand Icons区找到新浪的图标,点击即可找到代码,fa-weibo,

在Icon Name 填入fa-weibo

Link处填写社交网络地址,比如QQ的“QQ在线状态地址”、新浪微博地址

其他根据需求选择图标颜色,是否在新窗口打开等。

记得完成的时候一定要保存,点击右下角的 Save changes!!

扩展:如何改变主题左右侧边栏的 Follow: 和 More: ?

编辑sidebar.php / sidebar-2.php ,

2、左侧边栏只显示Recent Posts、Most Popular

我们要做出和官方演示一样的左侧,只需要把小工具 AlxTabs里的Recent Comments、Tags下的勾取消就可以了。

在小工具页面,把 AlxTabs 拖到primary,把Recent Comments、Tags下的勾取消。

3、左侧边栏 Discover

到这里,你明白,又是同上,在小工具页面,把AlxPosts 拖到 primary ,Title填写 Discover ,Show thumbnails 打勾,Items to show填 1 ,Category选择音频所在的分类,其他的按需设置。

All you need to get an audio file to play in this js player is to select audio format, and paste the direct link to either a .MP3/.MP4 and .OGG file in a custom field.

写文章,形式选择音频(audio format),在文章框下面看到Format:Audio, 然后就可以.MP3/.MP4或 .OGG 两个选择其一填入链接地址。

上传、设定特色图像

4、首页幻灯上方文字 The Magazine. What’s new?

找到Theme Options的blog处,在Heading处填写The Magazine.

Subheading,此处填写What’s new?

即可实现

5、开启特色文章滑动

Theme Options,Blog, Featured Posts,勾选Include featured posts in content area,

Featured category指定要显示的分类目录;不选择一个类别,它会从所有类别显示您的最新帖子。

Featured Post Count 精选文章要显示的最大数。设置为1,它不会显示任何滑块脚本;将它设置为0以禁用。

精选文章滑动效果

在 /inc/featured.php 更改 slideshow: false 为 true。

改变延时设定时间单位为毫秒。

参考:[resolved] Slider Automatic Change

6、右侧边栏What’s Hot?

小工具页面,把AlxPosts拖到secondary,title填写“What’s Hot?”,其他按需定制。

7、右侧边栏Discussion

官方演示右边的侧边栏 Discussion 是带有缩略图头像的,怎么实现的呢?

原来,还是要使用到主题自带的小工具“AlxTabs”。

在小工具页面,把 AlxTabs 拖到 secondary

Title填写 Discussion

只保留 Recent Comments 的两个勾,其他的勾全部取消。即,Enable recent comments、Show avatars 打勾,其他的都取消。

参考:[resolved] Thumbnails not showing up


页脚友情链接分列显示

我把友情链接放在了页脚的地方,由于使用的是默认的链接小工具,放上去就是一列显示,很占地方,修改成分列显示。

文章参照:wordpress免插件侧边栏两列分列显示通用代码

外观-编辑,在 样式表 (style.css) 最后添加以下代码:

/* 链接显示两列*/
.widget_links ul{
display:block;
overflow:hidden;
}
.widget_links ul li{
float:left;
}
/* 链接显示两列*/

如何把横幅广告放在特色展示(featured slider)和最新文章之间(latest posts)?

编辑 /inc/featured.php

在下面代码之后添加:

</div><!--/.featured-->

如何在头部logo处添加广告位

在后台控制面板,外观Theme Options > Sidebars, 添加一个新的区域(Create Sidebars):

(设定这个域的名字是header-ads)点击“铅笔”样式的按钮,输入

title :header-ads
Sidebar ID:sidebar-header-ads

填完后,记得保存!!

然后在小工具页面就出现了header-ads

把文本拖入,填写广告代码

在主题的 header.php 找到

<div class="container group">
<div class="container-inner">
<?php if ( ot_get_option('header-image') == '' ): ?>
<div class="group pad">
<?php echo alx_site_title(); ?>
<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>

在其下方加入

<?php dynamic_sidebar('header-ads'); ?>

完成!!


推荐插件:

Q2W3 Fixed Widget —WordPress侧边栏小工具固定滑动插件

Margin Top: 10px ;Margin Bottom: 600px ;Refresh interval: 1500milliseconds ;Screen Max Width:0 px

Crayon Syntax Highlighter — wordpress代码高亮插件,直接在文章编辑里面插入方便

wp auto top — 返回顶部,查看评论的小工具

显示位置:右;相对网页正中间线距离:720 PX

WP-PostViews:WordPress 浏览数统计插件

admin

大家好!欢迎光临我的个人博客,本博主要是学习和记录自己生活、学习中发生的点点滴滴的过程,很高兴可以把自己的废话和一点点的经验拿出来和网友分享,最大的愿望就是能构共同学习,共同进步。

27 Responses

  1. 骤雨打新荷说道:

    才看到,原来数据丢失了,对做站的人来说,这是最难过的事了。
    也希望好友将我的友情链接加上哈,我早加上你的链接了,一直相信你的站点会恢复!

    • admin说道:

      非常抱歉,因为数据丢失造成友情链接也还是旧的数据,现在已经加上贵站链接。

      非常感谢您对望星湖畔的支持与厚爱。

  2. shit!我说怎么好久一段时间没法打开呢我也丢过一次数据,国内某收费的空间,没备份 艹

  3. hua说道:

    看起来版面有点乱

  4. xiaobao说道:

    你好,请问该怎样在文章中插入各大视频网站的视频啊,谢了

    • admin说道:

      1、新建文章,“形式”选择“视频”。2、文本框下面就会出现Format:Video。3、各大视频网站都有代码的,把代码复制到Video Embed Code。ok 了!

  5. 新手说道:

    你好 近期评论 和标签什么去掉

  6. utyi5说道:

    什么才能把文章只发到左右边栏~~~~~还有图相什么上传~~~~

  7. 执念说道:

    我也用这个主题了

  8. eric说道:

    你好,我装了hueman推荐的缩略图插件,使用的时候都提示成功,但是媒体库没有增加新图片,首页也没有显示缩略图。这个怎么解决?在此先谢过

  9. 你好,我问一下缩略图有办法支持外链图片么,我的旧文章全是用的外链图片

  10. piwu说道:

    不知道是不是 主题是不是自己获取第一张图片

  11. raykim说道:

    hi~您好~我根据您的教程一个一个研究着呢,我有一个问题,就是整个主题中能不能适用微软雅黑字体啊?怎么适用呢?

    • admin说道:

      主题自带的几款字体都是谷歌字体,其实也蛮不错的,如果要使用微软雅黑字体可自行修改自带CSS文件~~

  12. Andy说道:

    视频文件已经按照你说的去编辑,但是页面只能显示视频的画面,但是点击播放按钮,却无法播放

  13. xiaok说道:

    请教一下插入视频如何调到跟页面宽度一样?

  14. 体贴说道:

    风格化如何

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据