如何让登录按钮在用户登录时更改为图标
How to I get the login button to change to an icon when a user is signed in?
在我的主页的标题中,我有一个登录按钮,可以打开一个模式并成功允许用户登录,但一旦用户登录,我希望现有的登录按钮更改为字形图标并保持字形图标,除非用户注销。怎么能做到这一点呢?P.S. 我正在使用Wordpress,Woocommerce和Twitter Bootstrap。
.HTML:
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
<!-- button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#signup" id="login-btn">LOG IN</button>
<!-- Modal -->
<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- modal Header -->
<div class="modal-header">
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png" class="login-logo" width="80" height="auto">
<button type="button" class="close"data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<button type="submit" class="btn btn-default center-block" id="to-login">LOG IN</button>
<a href=""><p class="forgot-pass">Forgot password?</p></a>
<p class="signup">Don't have an account? Sign up quickly <a href="">here</a>.</p>
</form>
</div>
</div>
</div>
</div>
<?php else : ?>
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
使用wordpress is_user_logged_in函数
在您的情况下,您可以使用这个
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
<!-- button trigger modal -->
<?php if ( is_user_logged_in() ) { ?>
<!----you icon here---->
<?php } else { ?>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#signup" id="login-btn">LOG IN</button>
<?php } ?>
<!-- Modal -->
<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- modal Header -->
<div class="modal-header">
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png" class="login-logo" width="80" height="auto">
<button type="button" class="close"data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<button type="submit" class="btn btn-default center-block" id="to-login">LOG IN</button>
<a href=""><p class="forgot-pass">Forgot password?</p></a>
<p class="signup">Don't have an account? Sign up quickly <a href="">here</a>.</p>
</form>
</div>
</div>
</div>
</div>
<?php else : ?>
<img src="http://localhost:8888/devo-wordpress/wp-content/uploads/2016/04/DEVO2.png">
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
相关文章:
- Javascript更改图标
- 使用acess代币登录Facebook,并通过网络应用程序离线发布
- 单击更改图标并通过javascript添加一个css类
- 尝试使用Phonegap进行php登录
- Facebook登录按钮没有'不能在Firefox上工作
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 使用javascript反复检查用户在facebook上的登录状态
- 如何更改角度谷歌地图上的集群图标
- Firebase-登录时获取url
- BrowserId登录请求在文档加载时被调用
- 通过iframe登录到远程站点
- simpleweather js天气图标
- Jquery Modal表单登录与AJAX-ASP经典上的IE 9
- 更改图层中单个矢量特征的图标
- 如何使用js自动登录
- 我尝试在登录脚本中使用ajax,但页面不会重定向
- 如何仅在首次登录时显示弹出窗口
- 如何检查用户已经登录facebook
- Facebook登录不适用于iOS的应用内浏览器
- 如何让登录按钮在用户登录时更改为图标