为WordPress 3.0的自定义菜单链接添加栏目图标

WordPress database error: [Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8mb4_unicode_ci,COERCIBLE) for operation '=']
SELECT target.post_id, sum(target.weight * log(47 / least(47, freqs.freq))) as score FROM wp_wp_rp_tags as target, (SELECT label, count(1) as freq FROM wp_wp_rp_tags WHERE label IN ('A_menu', 'A_advanc', 'A_screen', 'A_properti', 'A_li', 'A_class', 'A_cm', 'A_javascript', 'A_code', 'A_30', 'A_alt', 'A_jqueri', 'A_css', 'A_titl', 'A_wordpress', 'P_????', 'C_wordpress', 'P_wordpress') GROUP BY label ) as freqs WHERE target.post_id NOT IN ('4') AND target.label=freqs.label AND target.label IN ('A_menu', 'A_advanc', 'A_screen', 'A_properti', 'A_li', 'A_class', 'A_cm', 'A_javascript', 'A_code', 'A_30', 'A_alt', 'A_jqueri', 'A_css', 'A_titl', 'A_wordpress', 'P_????', 'C_wordpress', 'P_wordpress') AND target.post_id NOT IN ( SELECT post_id FROM wp_wp_rp_tags WHERE label IN ('C_黑历史') ) GROUP BY target.post_id ORDER BY score desc, target.post_id desc LIMIT 10;

WordPress 3.0 为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance(外观)-》 Menus(菜单)面板里我们可以看到自定义菜单的设置,首先点击“Creat Menu”,再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少,这时点击屏幕左上角的“Screen Options(屏幕参数)”,把“Show advanced menu properties(显示高级菜单属性)”里的项目全部勾选,我们就可以看到更多的参数。以本文题图为例,为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class,这样在前台调用菜单时,这些项目将拥有一个自定义的 CSS Class,接下来我们可以通过 CSS 为这些项目加上图标。

#header ul.navigation li a.home {
background:url("images/home.png") no-repeat 0 1px transparent;
}
#header ul.navigation li a.about {
background:url("images/about.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.advertise {
background:url("images/advertise.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.archive {
background:url("images/archive.png") no-repeat 1px 2px transparent;
}
#header ul.navigation li a.contact {
background:url("images/contact.png") no-repeat 0 3px transparent;
}

在 WordPress 3.0 之前的版本里,我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值,再为它加上一个和 title 值相同的 Class,在 jQuery 里可以这样写:
$('ul.navigation li a').addClass(function() {
return $(this).attr('title');
});
});

  1. No comments yet.

  1. No trackbacks yet.

:) more »
 

要用空手杀人时、身体的哪部位是弱点必须牢牢记在心里。不过、若情况允许请尽量使用道具。
KIKKA