-
- Nous allons installer un panneau coulissant jQuery dans WordPress.
- Si vous souhaitez une aide ou des renseignements complĂ©mentaires, n’hĂ©sitez pas Ă laisser un commentaire, je vous rĂ©pondrai dans des dĂ©lais raisonnables.
-
-
-
( Télécharger le pakage : Sliding_login_panel_jquery.zip )
-
- Toutes les explications (en anglais) sur le site de l’auteur, Web-kreation.com (copier / coller l’url dans votre navigateur)
http://web-kreation.com/wordpress/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
Installation
1. Vous avez (ci-dessus) tĂ©lĂ©chargĂ© et dĂ©compressĂ© l’archive « Sliding_login_panel_jquery.zip »
2. Vous ouvrez le dossier /images/ et uploadez le contenu dans le dossier /images/ de votre thème :
wp-content/themes/votre-theme/images/
3. Vous ouvrez le dossier /js/ et uploadez le contenu dans le dossier /js/ de votre thème :
wp-content/themes/votre-theme/js/
- Nota, si (côté serveur de votre hébergeur) vous ne trouvez pas un dossier /js/ vous uploadez le dossier avec son contenu dans (votre-theme) :
wp-content/themes/votre-theme/
4. Vous vous rendez dans l’administration de WordPress (Apparence –> Editeur), et Ă©ditez le fichier header.php
- Trouvez ces lignes :
-
<?php wp_head(); ?> </head> <body>
-
- Avant de passer Ă l’Ă©tape suivante, recopiez la ligne <body> d’origine.
Vous remplacez les lignes ci-dessus, par :
-
<?php wp_head(); ?>
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="<?php bloginfo('template_url'); ?>/js/slide.js" type="text/javascript"></script>
</head>
<body>
<!-- Panel -->
<div id="toppanel">
<?php
global $user_identity, $user_ID;
// If user is logged in or registered, show dashboard links in panel
if (is_user_logged_in()) {
?>
<div id="panel">
<div class="content clearfix">
<div class="left border">
<h1>Welcome back <?php echo $user_identity ?></h1>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Dashboard</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Go to Dashboard</a></li>
</ul>
</div>
<div class="left narrow">
<h2>My Account</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Global Dashboard</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Edit My Profile</a></li>
<?php if ( current_user_can('level_1') ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comments</a></li>
<?php endif ?>
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
</ul>
<?php if ( current_user_can('level_10') ) : ?>
<h2>Appearance</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Themes</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Theme Editor</a></li>
</ul>
<?php endif ?>
</div>
<?php if ( current_user_can('level_2') ) : ?>
<div class="left narrow">
<h2>Posts</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Post</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Edit Posts</a></li>
<?php if ( current_user_can('level_3') ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Tags</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categories</a></li>
<?php endif ?>
</ul>
<?php if ( current_user_can('level_10') ) : ?>
<h2>Plugins</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Install a Plugin</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Plugin Editor</a></li>
</ul>
<?php endif ?>
</div>
<?php endif ?>
<?php if ( current_user_can('level_2') ) : ?>
<div class="left narrow">
<?php if ( current_user_can('level_3') ) : ?>
<h2>Pages</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Page</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Edit Pages</a></li>
</ul>
<?php endif ?>
<h2>Library</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Library</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Add New</a></li>
</ul>
<?php if ( current_user_can('level_3') ) : ?>
<h2>Users</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Author & Users</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Add New</a></li>
</ul>
<?php endif ?>
</div>
<?php endif ?>
<?php if ( current_user_can('level_10') ) : ?>
<div class="left narrow">
<h2>Settings</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Writing</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Reading</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discussion</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Media</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacy</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Miscellaneous</a></li>
</ul>
</div>
<?php endif ?>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<!-- Logout -->
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Show Dashboard</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
<?php
// Else if user is not logged in, show login and register forms
} else {
?>
<div id="panel">
<div class="content clearfix">
<div class="left border">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/articles/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="<?php bloginfo('url') ?>/wp-login.php" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
<a class="lost-pwd" href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a>
</form>
</div>
<div class="left right">
<?php if (get_option('users_can_register')) : ?>
<!-- Register Form -->
<form name="registerform" id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="user_login"><?php _e('Username') ?></label>
<input class="field" type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
<label class="grey" for="user_email"><?php _e('E-mail') ?></label>
<input class="field" type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
<?php do_action('register_form'); ?>
<label id="reg_passmail"><?php _e('A password will be e-mailed to you.') ?></label>
<input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Register'); ?>" class="bt_register" />
</form>
<?php else : ?>
<h1>Registration is closed</h1>
<p>Sorry, you are not allowed to register by yourself on this site!</p>
<p>You must either be invited by one of our team member or request an invitation by email at <b>info {at} yoursite {dot} com</b>.</p>
<!-- Admin, delete text below later when you are done with configuring this panel -->
<p style="border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;margin-top:10px;color:white"><em>Note: If you are the admin and want to display the register form here, log in to your dashboard, and go to <b>Settings</b> > <b>General</b> and click "Anyone can register".</em></p>
<?php endif ?>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<!-- Login / Register -->
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
<?php } ?>
</div> <!--END panel -->
-
- Vous remettez le <body> d’origine que vous avez prĂ©cĂ©demment mis de cĂ´tĂ©.
5. Vous vous rendez dans l’administration de WordPress (Apparence –> Editeur), et Ă©ditez le fichier style.css
- Vous copiez et collez tout en bas du fichier, le CSS ci-dessous :
-
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 130%; /* font-size set to 130% for the default Kubrick WordPress theme */
}
#panel {
width: 100%;
height: 280px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
text-align: left;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
text-align: left;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel ul {
margin: 0 0 5px 0;
padding: 0;
line-height: 1.6em;
list-style: none;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
margin-bottom: 25px;
padding: 0 15px;
border-right: 1px solid #333;
min-height: 220px;
}
#panel .content .border {
border-left: 1px solid #333;
}
#panel .content .narrow {
width:120px !important;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
/* Panel Tab/button */
.tab {
background: url(images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: white;
}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}
-
Aucun commentaire pour le moment.