如何用字体真棒图标替换默认的 wordpress 导航栏链接文本? [英] How to replace default wordpress navbar link text with font awesome icons?
问题描述
所以我对 WP 还是很陌生,虽然我对 WP 导航栏有一些经验,但这是相当独特的.我正在尝试在 wp 生成的导航中注入字体真棒图标.
基本上,当我在 wp 中创建菜单时: <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) );?>
WP 将为我生成:
有没有办法使用 ACF,或者 wp_admin 或其他地方的东西,能够用 2 个不同的字体很棒的图标替换链接文本(特别是上面例子中的home"和listen")?
像这样:
<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>
请注意:我不能(除非有人有更好的方法)为每个链接使用 fas fa-play-circle
类(就像在 wp_admin 菜单编辑器中一样),因为这会将它放在锚,这会没问题,除了我已经在锚元素上使用 :before
和 2 个样式的 :before
伪不'一起玩得很好.
另外,我想要一个图标的功能(颜色、悬停等),所以使用 css 背景也是不行的.
甚至不确定这是否可能,但我希望如此!提前致谢!
您可以使用 preg_replace
.简而言之,我们定义一个匹配的 $search
参数,然后将其替换为我们想要的.
这里我们将搜索>>Home<
和>Listen<
.
Listen</',//... 等等.//... 等等.];$替换 = ['><i class="fas fa-play-circle"></i><',//... 我们对 Home 的替代'><i class="fas fa-drum"></i><',//...我们对Listen的替代//... 等等.];$subject = preg_replace( $search, $replace, $subject );返回 $subject;};};ob_start('wp_custom_fontawesome_nav');});?>
将其放在 function.php
文件中的某个位置.
了解详情
preg_replace
@ https://www.php.net/manual/en/function.preg-replace.php
So I'm pretty new to WP, and while I have some experience with the WP navbar, this is rather unique. I'm trying to inject font awesome icons within the nav that wp generates.
Basically, when I create the menu in wp with: <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
WP will generate for me:
<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>
Is there a way to use ACF, or something in wp_admin or elsewhere to be able to replace the link text (specifically "home" and "listen" in above example) with 2 different font awesome icons?
Like this:
<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>
As a note: I cannot (unless someone has a better way) use the fas fa-play-circle
classes per link (like in the wp_admin menu editor), as that places it on the anchor, which would be fine, except I'm already using :before
's on the anchor element and 2 styled :before
pseudo's don't play nice together.
Also, I want the functionality (color, hover, etc) of an icon, so using css background is out as well.
Not even sure if this is possible, but I hope so! Thanks in advance!
You can use preg_replace
. In short, we define a matching $search
parameter, then we replace it with what we want.
Here we will search for >Home<
and >Listen<
.
<?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' );
} ); ?>
Place that in somewhere in your function.php
file.
Learn more
preg_replace
@ https://www.php.net/manual/en/function.preg-replace.php
这篇关于如何用字体真棒图标替换默认的 wordpress 导航栏链接文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!