Css 如何用字体图标替换默认wordpress导航栏链接文本?
所以我对WP还很陌生,虽然我对WP导航栏有一些经验,但这是相当独特的。我正试图在wp生成的导航中注入令人敬畏的字体图标 基本上,当我在wp中创建菜单时,使用:Css 如何用字体图标替换默认wordpress导航栏链接文本?,css,wordpress,wordpress-theming,navbar,Css,Wordpress,Wordpress Theming,Navbar,所以我对WP还很陌生,虽然我对WP导航栏有一些经验,但这是相当独特的。我正试图在wp生成的导航中注入令人敬畏的字体图标 基本上,当我在wp中创建菜单时,使用: WP将为我生成: <div class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-15&q
WP将为我生成:
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-15">
<a href="localhost_link/frontpage" aria-current="page">Home</a>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
<a href="localhost_link/blog/">Listen</a>
</li>
</ul>
</div>
有没有一种方法可以使用ACF或wp_admin中的某个东西或其他地方来用两个不同的字体图标替换链接文本(在上面的示例中特别是“主页”和“收听”)
像这样:
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-15">
<a href="localhost_link/frontpage" aria-current="page"><i class="fas fa-play-circle"></i></a>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
<a href="localhost_link/blog/"><i class="fas fa-play-circle"></i></a>
</li>
需要注意的是:我不能(除非有人有更好的方法)使用每个链接的fas fa play circle
类(就像在wp_admin菜单编辑器中),因为这会将它放在锚上,这会很好,除非我已经在锚元素上使用了:before
:styled:before
pseudo's不能一起玩得很好
另外,我想要一个图标的功能(颜色、悬停等),所以使用css背景也是不可能的
甚至不确定这是否可能,但我希望如此!提前谢谢 您可以使用
preg\u replace
。简而言之,我们定义一个匹配的$search
参数,然后用我们想要的替换它
在这里,我们将搜索>主页
收听<?php /** * do_action( 'wp_loaded' ) * This hook is fired once WP, all plugins, and the theme are fully loaded and instantiated. * @link https://developer.wordpress.org/reference/hooks/wp_loaded/ */ add_action( 'wp_loaded', function() { function wp_custom_fontawesome_nav( $subject ) { if( ! is_admin() ) { $search = [ '/>Home</', // ... >Home< with the brackets, to be sure to target the right Home word '/>Listen</', // ... etc. // ... etc. ]; $replace = [ '><i class="fas fa-play-circle"></i><', // ... Our replacement for Home '><i class="fas fa-drum"></i><', // ... Our replacement for Listen // ... etc. ]; $subject = preg_replace( $search, $replace, $subject ); return $subject; }; }; ob_start( 'wp_custom_fontawesome_nav' ); } ); ?>