专业WORDPRESS主题设计制作

WordPress菜单图标CSS怎么添加?安装WP导航图标字体插件(wordpress 菜单)

发布于: 2022-11-03

1 如何使用图标字体?

  • 2 注意事项

 

新媒体人做SEO就是在给网站优化和提升用户体验。

你可以在WordPress网站上,添加图标字体,非常美观,支持响应式设计的WP主题模板。

图标字体和小图像格式的图标不同:

  • 支持视网膜显示.
  • 可以无限放大。
  • 将导航菜单上的项目分别个性化为Icon字体。

具体效果图,可查看我们网站的导航菜单。

如何使用图标字体?

第 1 步:安装插件

  • WP后台 → 插件 → 安装插件 → 搜索“Font Awesome 4 Menus”,下载并安装并启用;
  • 你也可以直接在网站上下载,然后上传后通过FTP上传或安装。

第 2 步:寻找图标字体

点此前往 图标字体官方网站

打开图标字体官方网站,找到我们需要的图标 ▼

search-home-font-awesome

  • 你可以在单击图标时显示的 <i class =“fa fa-home”> </ i>复制 fa fa-home。
  • 如果主页图标名称为home,那么我们需要在 “菜单CSS类” 中输入 fas fa-home

第 3 步:菜单输入CSS类字体图标

  • WP后台 → 外观 → 菜单,进入菜单设置页面。
  • 选择并编辑一个菜单项,
  • 在CSS类中,粘贴我们刚刚复制的图标字体名称(fa fa-home) ▼

font-awesome-home

  • (其他图标的操作是相同的)
  • 最后点击保存可以。

注意事项

如果在编辑菜单项面板中没有CSS类,则可以打开右上角的 “显示选项”,并在显示菜单的高级属性中,选中“CSS类” ▼

menu-css-class

  • 当然,这个图标字体库不限于在导航菜单中使用,只要将相应的图标代码添加到主题模板的相应位置即可。

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress菜单图标CSS怎么添加?安装WP导航图标字体插件》,对您有帮助。

WordPress如何调用二级/多级导航栏自定义菜单?(wordpress网站设置菜单)

发布于: 2022-11-03

1 第一步、WordPress菜单注册

  • 2 第二步、WordPress菜单调用
  • 3 第三步、设置菜单
  • 4 制作wordpress多级菜单导航栏
  • 5 WordPress菜单CSS样式

 

很多网络营销人选择用WordPress来建站,但是有些主题的导航栏,不支持二级/多级菜单,不满意可尝试手动添加、修改主题的菜单样式。

修改要从header.php开始,该模板文件里面一个重要的功能就是菜单的显示了。

如果用代码调用分类作为菜单也可以,但是不方便对菜单项排序。

有子分类的目录也不好处理,所以也想像别人的主题一样,给我的主题添加自定义菜单功能。

要给新制作的主题添加菜单自定义功能, 也不是很难的事情,主要有2个步骤。

第一步、WordPress菜单注册

要使用菜单,先要进行注册,打开主题下面的functions文件,追加下面代码 ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>
  • 如果主题下面没有functions.php文件,就新建一个,把上面代码复制进去保存即可。

登录WordPress后台,依次进入“外观 ”→“菜单”。

如能看到下面的画面,就说明注册成了 ▼

wordpress-menu_1

以上注册了2个菜单:

  1. 一个顶部菜单 Top Menubar。
  2. 一个主菜单 Main menubar 。

第二步、WordPress菜单调用

菜单注册之后就可以在主题模板文件中调用了,把下面的代码放到header.php文件中,想显示菜单地方就可以调用了。

在header.php文件里,调用“顶部菜单”▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

在header.php文件里,调用“主菜单”▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

<?php wp_nav_menu(array(‘theme_location’ => ‘menu_navi’)); ?>

在footer.php文件里调用“底部菜单”▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

第三步、设置菜单

菜单注册好了,菜单的显示位置也在主题文件中定义好了,就可以在WordPress后台新建菜单项目。

然后,把新建的菜单项目指定给注册的菜单,建议对应的关系 ▼

wordpress-menu_2

制作wordpress多级菜单导航栏

现在让我们来谈谈制作WordPress多级菜单方法:

首先删除你自己的WordPress主题的functions文件中的原始菜单代码。

或直接添加此代码 ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
  • 注意:必须在<?php ?>在外面添加。

然后找到主题调用菜单的PHP代码,如果它是原始的,通常会是这样 ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

将其删除,并更换为 ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>
  • 注意:确保此代码不包含其他div,否则它将受外部div的限制。

下一步是添加下拉JS函数代码,并将以下代码添加到主题的JS文件中 ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

WordPress菜单CSS样式

最后,CSS风格美化。

具体应该是什么样的效果,充分发挥你的想象力,CSS可以做到 ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}
  • 将以上CSS代码,添加到主题的 style.css 文件并保存起来。

保存之后,刷新你的网站前台页面,就可以看到效果了,是不是很简单?

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress如何调用二级/多级导航栏自定义菜单?》,对您有帮助。

TAG列表 wordpress最新最热TG汇集,掌握wordpress热线内容
wordpress代码在线运行Shortcodes Ultimate插件Easy WP Cleaner插件critical automatic updateswordpress cdnRedis加速缓存插件wp-json漏洞Shortcodes UltimateWordPress违禁词检查WordPress超级菜单织梦采集侠wordpressbootstrap自适应布局去除tag标签urlwordpress博客如何使用禁用 xmlrpc.phpWordPress显示运行数据库WordPress外链特色图片主机壳WordpressWordPress站内搜索排除某些类别的文章Rich Snippets结构化数据Jetpack站点加速器CDN图像缓存xmlrpc.php攻击安装WordPress插件Image Sizes插件WP-No-Tag-Base插件WordPress过滤敏感词插件Wordfence Security插件扒站怎么改wordpress主题wp-json链接Mega Menu插件网站添加CDNWordPress网站安全防WordPress滤敏感词过滤插件CWP控制面板转KLOXO-MR谷歌 SEOwp-json优化WordPress打开界面WordPress页脚页眉插件wordpress表单跳转修改wordpress登录地址百度熊掌号WordPress tag模版wp-json防止数据被采集wordpress小图标不显示All In One WP SecurityWordPress广告词检测WP SMTP插件wordpress安全防护WordPress自定义页眉robots.txt禁止访问http://www.fandutaoci.cn怎么制作wordpress模板保护robots.txtFooter and Post Injections插件隐藏WordPress后台登录地址Jetpack插件CWP开启Redis缓存wordpress DropboxWordPress调试模式WordPress站内搜索排除所有页面h5自适应布局BackWPup插件wordpress如何制作单页wordpress更换域名图标不显示wordpress文章卡片样式Avada主题演示wordpress感谢页面Better Search Replace插件WordPress官网制作Pretty Links Pro插件wordpress打开是代码WordPress自动备份隐藏WordPress代码内版本号wordpress Post ViewsWordPress菜单自定义图标nameCheap最新优惠码WordPress网站恶意代码WordPress虚拟主机伪静态WordPress页脚加载JSxmlrpc.php漏洞Avada主题wordpress文章浏览数量统计namechep续费优惠码WordPress文章描文本WordPress网站防护WP SMTP插件设置Awesome SupportDropbox上传失败wordpress常规设置namechep域名优惠码wordpress漏洞修复wp-json安全设置Markdown here插件WP插件优化head代码WP安全登录插件推荐Featured Image From URLrobots.txt安全设置WordPress大气的样式wordpress描文本WordPress tag
服务电话:
0533-2765967

微信 13280692153