[教程]从零WordPress菜单栏开发-图标添加


前言

进阶教程,不适合萌新,但适合开发中的萌新。月宅教你从无到有,来完成一个完整的导航栏,但不包括CSS样式。


教程一

拿到一个什么都没有的空主题,想要在后台拥有菜单栏按钮,那么就必须先注册这个挂件。在functions.php文件下添加。如果你的网站拥有这些菜单,那么添加,如果只需要头部,那么就这一个头部菜单。

//注册菜单栏
 register_nav_menus( array(
 'header_menu' => '头部菜单' ,
 'header_right_menu' => '头部右侧菜单' ,
 'footmenu1' => '底部菜单1' ,
 'footmenu2' => '底部菜单2',
 'footmenu3' => '底部菜单3',
 ) );

教程二

已经拥有了菜单按钮后,需要输出该菜单栏,如果你已经编写好了CSS样式,那么直接插入到ul中,月宅的自己写的导航栏已经用CSS写好了样式与二级菜单,只需要把这行代码插入ul中就可以输出li标签。

 <?php wp_nav_menu( array( 'menu' => 'header_menu', 'depth' => 0) );?>

教程三

目前已经拥有了菜单栏添加的地方,也有了首页顶部导航栏,那么接下来是需要图标。我们需要下载官方图标库。到http://fontawesome.io/进行下载。然后将css、fonts、less、scss上传到主题文件夹中。如果你不需要字体,那么只需要输出css,如月宅自己的地址。

	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/ico/css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/ico/css/font-awesome.min.css">

教程四

然后我们到这里http://fontawesome.io/icons/ 点开需要的图标,接着到刚刚的菜单栏下,直接写在名字前面即可。例如:

<i class="fa fa-circle-o-notch" aria-hidden="true"></i>关于↓

 

版权声明:
作者:月宅
链接:https://xn--09st1ywm8a.com/5521.html
来源:月宅酱
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>