换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。
与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。
不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。
下面说一下集成到主题的方法:
一、下载上传
下载并解压后得到 awesome 文件夹,整体上传到 WordPress 主题目录。
二、主题集成
编辑 WordPress 当前主题目录下 functions.php 文件,在<?php 之后添加如下代码:
//集成图标字体功能 include("awesome/main.php");
最后保存即可。
三、图标使用
图标字体的使用,相信大部分 Begin 用户都已经熟知了。对于首次使用的用户,张戈博客还是继续介绍下好了!
先贴一下效果截图,了解一下图标字体是个什么东东:
其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。
理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加 class 来添加即可。
比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:
<i class="fa fa-weixin"></i>
而我们想要更多的图标,就需要到官方的图标库里面去查找了:
http://fortawesome.github.io/Font-Awesome/icons/
找到自己中意的图标后,点击打开即可得到相应的标签 class 了!
那如何使用到 WordPress 导航菜单呢?
很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,所以我如下填写:
保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。
如果发现点开菜单没有 CSS 类栏位怎么办?
很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上 CSS 类即可:
如果发现点击【显示选项】没动静怎么办?
看来你的 WordPress 也是升级 4.2 了。解决办法见张戈博客之前的分享【修复 WordPress 4.2 问题】
四、更多折腾
好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈!
不过,有心的朋友可能发现了,这个图标字体的 CSS 文件达到 20 多 kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下 CSS 文件。
打开 awesome 文件夹,编辑 css 文件夹下的 font-awesome.min.css 文件,删除没用到的图标 css 定义即可。
不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下 CSS 美化工具,将其格式化之后再来编辑!
不过 CSS 前面引入字体和公用样式代码记得要保留,如下所示
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
好了,本文就分享到这里,喜欢折腾的朋友可以试试看。
原来可以这样修改,之前一直都想改但是一直都不知道在哪里修改,对WP研究不够
:razz: 非常非常涨姿势了!
几天没来了,还得精简,那个文件可以第三方托管,在引用不影响的把
这缓存太厉害了吧,首页还显示有评论的,到这就看不到了。
恩,从邮箱进到文章页面就可以看到,直接进入文章就是看不到的,缓存确实厉害,主要原因还是因为直接看文章后面没有类似/comment-page-1/#comment-12319的东东
右下角和评论工具条都有刷新评论功能,居然没人发现和使用。
说明这个功能太不显眼了。。
主要是给自己用,没必要显眼。
鸟哥新主题对于一般人来说贵啦一点点,如果定价低一点用的人绝对多
我觉得用的人多了反而不太好,就像xiu主题,提起这个xiu主题,大多数的人的反应就是很多人用,早就烂大街啦。 :???:
这个萝卜白菜了,如果主题自带有图标字体的话,可以自己替换相关字体文件和css代码了,一句话,勤动手! :idea:
好厉害的样子
哈哈,因为小雨我自己试过啦,自己用的xiu主题官方图标字体感觉太少了,替换xiu主题默认图标字体为Font Awesome:替换xiu主题默认图标字体为Font Awesome
Jager的确是技术流大师,又搜藏一篇。。
话说,只要加载一下那个矢形字体不就可以了吗。。
文章分享的是插件的代码版,不是每个人都听得懂你在说什么。插件一直都是有市场的,没必要钻牛角尖。
能分享下侧边栏微信图标显示二维码吗,跪求!
Jager博客我经常来看,总是有一些有牛逼的技术
谢谢分享好文章 搜来的
赞一个,之前我用百度sitemap插件,造成发表文章出错,坐等张大侠出代码
好东西,已经收藏
写教程的都是大牛啊,不过写教程就要写得这么详细,让原本不懂操作的也能看明白了。
群伟伟博客前来支持下,欢迎博主回访,同时也欢迎各大博主前来我的网站做客,你懂得。
真给力,已经用上了,谢谢博主! :wink:
真心好东西,谢谢分享了。
具体是哪个目录下面呢。我都试了一遍了。没反应
放到主题目录,begin主题就放到begin文件夹下
并不是放了就有效果,麻烦仔细看文章,按照文章做。
是知更鸟这个模板目录下面么?但是我我放也不好使。调用函数也放好了