根据url匹配显示不同的按钮

Question

在wordpress网站上，我想显示"按钮一"；当url不包含"/en/"；路径和显示"；按钮二"；当url包含"/en/"；。

按钮‘html看起来像这样：

<a href="https://www.google.com"class＝"；microwidget btn迷你按钮头-元素-按钮-1在桌面上显示">按钮一<span>lt/a>

<a href="https://www.yahoo.com"class＝"；microwidget btn迷你按钮头-元素-按钮-2显示在桌面上">按钮二<span>lt/a>

我一直在尝试这种方法的许多变体：

<script type="text/javascript">
if(window.location.href.indexOf("/en/") > -1) {
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-1 show-on-desktop").style.display = 'none';
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-2 show-on-desktop").style.display = '';
} else {
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-1 show-on-desktop").style.display = '';
document.getElementsByClassName("microwidget-btn mini-button header-elements-button-2 show-on-desktop").style.display = 'none';
}
</script>

但什么都没发生，在控制台上我得到了

未捕获的类型错误：document.getElementsByClassName(…([0]未定义

谢谢

Answer 1

您可以使用JavaScript检查url是否包含类似的特定语言

document.addEventListener("DOMContentLoaded", function() {
if(window.location.href.indexOf("/en/") > -1) {
// en page
// Show button 2
document.getElementById('button-one').style.display = 'none';
document.getElementById('button-two').style.display = 'flex';
} else {
//Show button 1
document.getElementById('button-one').style.display = 'flex';
document.getElementById('button-two').style.display = 'none';
}
});

请注意，我更改了你的html代码。我添加了一个id属性和样式标签，显示：none作为默认

<a href="https://www.google.com" id="button-one" class="microwidget-btn mini-button header-elements-button-1 show-on- desktop" style="display:none" >Button one</span></a>
<a href="https://www.yahoo.com" id="button-two" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" style="display:none">Button two</span></a>

Answer 2

您可以使用此wordpress代码进行

global $wp;
$currenturl =  home_url( $wp->request )

$find= '/en';
if (strpos($currenturl, $find) !== false) {
?>
<a href="https://www.google.com" class="microwidget-btn mini-button header-elements-button-1 show-on-desktop" >Button one</span></a>
<?php 
}else{
?>
<a href="https://www.yahoo.com" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" >Button two</span></a>
<?php 
}

Answer 3

您可以使用WordPress代码：

function callback_function(){
$uri = $_SERVER['REQUEST_URI'];
if (str_contains($uri, '/en/')) {
?>
<a href="https://www.google.com" class="microwidget-btn mini-button header-elements-button-1 show-on-desktop" >Button one</span></a>
<?php
}else{
?>
<a href="https://www.yahoo.com" class="microwidget-btn mini-button header-elements-button-2 show-on-desktop" >Button two</span></a>
<?php
}
}
add_action('init','callback_function');