如何使站点标题可点击并链接回主页

我正在尝试使标题的站点标题可点击并链接回主页。（例如，google.com - 如果您点击google徽标，则会返回到google主页。）我已将所有正确的代码添加到了我的header.php中，但它仍然不允许我单击网站标题。有没有人看到任何错误或有任何解决方案？提前致谢。如何使站点标题可点击并链接回主页

我的header.php

<?php 
 
/** 
 
* 
 
* 
 
* 
 
*/ 
 

 
?> 
 
<!DOCTYPE html> 
 
<html <?php language_attributes(); ?>> 
 
<head> 
 
<meta charset="<?php bloginfo('charset'); ?>"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
 

 
<?php wp_head(); ?> 
 
</head> 
 

 
<body <?php body_class(); ?>> 
 
<div id="ht-page"> 
 
<header id="ht-masthead" class="ht-site-header"> 
 
<div class="ht-container ht-clearfix"> 
 
<div id="ht-site-branding"> 
 
<?php 
 
if (function_exists('has_custom_logo') && has_custom_logo()) : 
 
the_custom_logo(); 
 
else : 
 
if (is_front_page()) : ?> 
 
<h1 class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
 
<?php else : ?> 
 
<p class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></p> 
 
<?php endif; ?> 
 
<p class="ht-site-description"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('description'); ?></a></p> 
 
<?php endif; ?> 
 
</div><!-- .site-branding --> 
 

 
<nav id="ht-site-navigation" class="ht-main-navigation"> 
 
<div class="toggle-bar"><span></span></div> 
 
<?php 
 
wp_nav_menu(array( 
 
'theme_location' => 'primary', 
 
'container_class' => 'ht-menu ht-clearfix' , 
 
'menu_class' => 'ht-clearfix', 
 
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
 
)); 
 
?> 
 
</nav><!-- #ht-site-navigation --> 
 
</div> 
 
</header><!-- #ht-masthead --> 
 

 
<div id="ht-content" class="ht-site-content ht-clearfix">

我的CSS

/*-------------------------------------------------------------- 
 
## Header 
 
--------------------------------------------------------------*/ 
 

 
#ht-masthead{ 
 
    background: #FFF; 
 
    height: 70px; 
 
    border-bottom: 1px solid #eee; 
 
    z-index: 99; 
 
    transition: height 0.3s ease; 
 
    -moz-transition: height 0.3s ease; 
 
    -webkit-transition: height 0.3s ease; 
 
    position: fixed; 
 
    text-align: center; 
 
    width: 0 auto; 
 
    margin-right: 38px; 
 
    width: 100%; 
 
} 
 
.ht-site-title{ 
 
font-family: 'futura_tbold'; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
letter-spacing: 6px; 
 
     line-height: 1; 
 
    margin-bottom: 8px; 
 
    margin-top:5px; 
 
    margin-left: 75px; 
 
    text-align: left; 
 
    float: left; 
 

 
    padding: 15px 0; 
 
transition: padding 0.3s ease; 
 
-moz-transition: padding 0.3s ease; 
 
-webkit-transition: padding 0.3s ease; 
 
} 
 

 
.ht-site-title a{ 
 
text-decoration: none; 
 
color: #000; 
 
} 
 
.ht-site-description{ 
 
\t color: #EEE; 
 
\t margin: 0; 
 
\t font-size: 15px; 
 
\t font-style: italic; 
 
\t line-height: 1; 
 
} 
 

 
.ht-site-description a{ 
 
\t color: #333; 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 
/*-------------------------------------------------------------- 
 
## General 
 
--------------------------------------------------------------*/ 
 
#ht-content { 
 
    padding-top: 200px; 
 
} 
 
.ht-section { 
 
    padding: 60px 0; 
 
    background: #FFF; 
 
} 
 

 
.ht-section-title-tagline { 
 
    margin-bottom: 60px; 
 
    text-align: center; 
 
} 
 

 
.ht-section-title { 
 
    font-weight: 400; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    font-size: 36px; 
 
    width: 60%; 
 
    margin: 0 auto 15px; 
 
} 
 

 
.ht-section-title:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.ht-section-tagline { 
 
    font-size: 20px; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 

 
#ht-page { 
 
    width: 100% !important; 
 
    margin: 0 auto; 
 
    max-width: 100% !important; 
 
    overflow: hidden !important; 
 
} 
 

 

 
/*-------------------------------------------------------------- 
 
## Menus 
 
--------------------------------------------------------------*/ 
 

 
#ht-site-navigation { 
 
    position: absolute; 
 
    width: 100%; 
 
    padding: 15px 0; 
 
    transition: padding 0.3s ease; 
 
    -moz-transition: padding 0.3s ease; 
 
    -webkit-transition: padding 0.3s ease; 
 
    float: right; 
 
} 
 

 
.ht-sticky #ht-site-navigation { 
 
    padding: 17px 0; 
 
} 
 

 
.ht-main-navigation .ht-menu {} 
 

 
.ht-main-navigation ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding-left: 0; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.ht-main-navigation li { 
 
    float: left; 
 
    margin-left: 30px; 
 
} 
 

 
.ht-main-navigation a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    font-size: 15px; 
 
    font-family: 'Raleway', sans-serif; 
 
    line-height: 36px; 
 
    padding: 0 15px; 
 
    font-weight: 600; 
 
    letter-spacing: 2px; 
 
    padding-bottom: 40px; 
 
} 
 

 
.ht-main-navigation ul ul { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    background: #FFF; 
 
    min-width: 200px; 
 
right:0; 
 
    z-index: 999; 
 
    padding: 8px; 
 
    margin-top: -21px; 
 
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05); 
 
    height:300px; 
 
    transform: scaleY(0); 
 
    -webkit-transform-origin: top; 
 
    -moz-transform-origin: top; 
 
    transform-origin: top; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
.ht-sticky .ht-main-navigation ul ul { 
 
    margin-top: 17px; 
 
} 
 

 
.ht-main-navigation ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
    margin: 0 0 0 8px; 
 
    border-top: 0; 
 
} 
 

 
.ht-sticky .ht-main-navigation ul ul ul { 
 
    margin-top: 0; 
 
} 
 

 
.ht-main-navigation ul ul a { 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
    color: #444; 
 
    line-height: 1.5; 
 
    padding: 7px 25px; 
 
    font-size: 12px; 
 
text-align: left; 
 
} 
 
.ht-main-navigation ul ul li:first-child { 
 
    padding-top: 15px; 
 
} 
 
.ht-main-navigation ul ul li { 
 
    float: none; 
 
    margin: 0 0 5px; 
 
} 
 

 
.ht-main-navigation ul ul li:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.ht-main-navigation ul li:hover > ul { 
 
    opacity: 1; 
 
    transform: scaleY(1); 
 
} 
 

 
.page-template-home-template .ht-main-navigation .current_page_item > a, 
 
.page-template-home-template .ht-main-navigation .current-menu-item > a, 
 
.page-template-home-template .ht-main-navigation .current_page_ancestor > a, 
 
.home.blog .ht-main-navigation .current_page_item > a, 
 
.home.blog .ht-main-navigation .current-menu-item > a, 
 
.home.blog .ht-main-navigation .current_page_ancestor > a { 
 
    background: none; 
 
    color: inherit; 
 
} 
 

 
.ht-main-navigation li:hover > a, 
 
.page-template-home-template .ht-main-navigation li:hover > a, 
 
.home.blog .ht-main-navigation li:hover > a, 
 
.ht-main-navigation .current_page_item > a, 
 
.ht-main-navigation .current-menu-item > a, 
 
.ht-main-navigation .current_page_ancestor > a, 
 
.page-template-home-template .ht-main-navigation .current > a, 
 
.home.blog .ht-main-navigation .current > a { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.site-main .comment-navigation, 
 
.site-main .posts-navigation, 
 
.site-main .post-navigation { 
 
    margin: 0 0 15px; 
 
    overflow: hidden; 
 
} 
 

 
.comment-navigation .nav-previous, 
 
.posts-navigation .nav-previous, 
 
.post-navigation .nav-previous { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.comment-navigation .nav-next, 
 
.posts-navigation .nav-next, 
 
.post-navigation .nav-next { 
 
    float: right; 
 
    text-align: right; 
 
    width: 50%; 
 
}

来源

2017-06-10 user6738171

你在网站标题中使用了什么？纯文本或自定义徽标。我看到自定义徽标'the_custom_logo（）'没有链接到home_url –

只是纯文本 - 我的WordPress站点名称 – user6738171

我不知道，如果你的意思是点击选项卡的标题或制作标题标记可点击。
如果你的意思是让标题标签点击，然后尝试下面的代码片段：

header { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 100%; 
 
    cursor: pointer; 
 
}

<header onclick="alert('Clicked')"></header>

如果你想使标签可点击的标题，你的运气了。
这是不可能的。

来源

2017-06-10 19:59:36 user36456453765745

现场示例：[http://jsfiddle.net/4qx7r95s/1/](http://jsfiddle。 net/4qx7r95s/1 /） – user36456453765745

我只希望网站标题可以点击并链接回主页。例如google.com，如果你点击谷歌徽标，它会将你带回谷歌主页。 – user6738171

如果你想有一个文本链接，使用A HREF，如果你想要一个图像链接，把img标签在标签

* { 
 
    padding-bottom: 10px; 
 
}

<a href="https://google.com">Google!</a> 
 

 
<a href="https://google.com"> 
 
    <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> 
 
</a>

注：链接在这里不会工作由于片段thingy

来源

2017-06-10 20:54:10

如何使站点标题可点击并链接回主页

回答

相关问题