پرېستان بلوگىنىڭ سول ئۈستى تەرىپىدىكى Admin دېگەن خەتنى كۆردۈڭلارمىكىن، ئەگەر ئېھتىياتسىزلىقتىن بېسىپ قويغان بولسىڭىز ئەنسىرەپ كەتمەڭ، ئۇ دەل بۈگۈن مەن سۆزلىمەكچى بولغان باشبەتتە تۇرۇپ بلوگ باشقۇرۇش سۇپىسىغان كىرش رايونى. خېلە كۈنلەرنىڭ ئالدىدا «jQuery ئارقىلىق سەكراپ چىقىدىغان رامكا ياساش» ناملىق يازمامدا مۇشۇ ھەقتە ئازراق چۈشەنچە بەرگەن، ئەگەر قىززىققۇچىلار بولسا ئېچىپ كۆرۈپ باقساڭلار بولىدۇ.
ئاۋال تۆۋەندىكى رەسىمدىن 3 خىل ھالەتتىكى شەكلىنى كۆرۈپ بېقىڭلار.

ئۈستىدىن ئاستىغان، باشبەتتىكى پارول كىرگۈزۈشتىن بۇرۇنقى ھالىتى، باشبەتتىكى پارول كىرگۈزۈپ بولۇنغاندىن كىيىنكى ھالىتى ۋە يازما بېتىدىكى پارول كىرگۈزۈپ بولۇنغاندىن كىيىنكى ھالىتى. باشبەت بىلەن يازما بېتىنىڭ پەرىقلىق يېرى دەل «يازما تەھرىرلەش» كۆنۇپكىسىدا. ئۇنداقتا بىز باشلاپ كېتەيلى.

كود قىسىمى

سىز تۆۋەندىكى كودنى ھۆججەت نامىنى login.php قىلىپ ساقلاڭ، ھەم ئۇسلۇب ھۆججىتىنىڭ ئىچىگە قويۇڭ ( دېمەكچى style.css دېگەن ھۆججەتنىڭ يېنى).

 type="submit" id="layerBtn" value="Admin" />

 id="layer">
        
         class="tips-angle diamond">>
         id="layer_left">
               if (!(current_user_can('level_0'))){ ?>
                 action="/wp-login.php" method="r: #a11;">"ID" />
                     type= style="direction:ltr;" name="log" id="log" value="" size="20" placeholder="ID" />  type="password" style="direction:ltr" name="pwd" id="pwd" placeholder="Password"/>  type="submit" name="submit" value="Send" class="button" />  type="hidden" name="redirect_to" value="" /> >  } else { ?>  id="layer_text">  href="">چېكىنىش>  href="/wp-admin/">باشقۇرۇش>  if(is_single()){ ?>  edit_post_link('تەھرىرلەش'); ?>  } ?> >  }?> >  href="javascript:void(0)" title="" id="close">Close> >  type="text/javascript"> $(document).ready(function(){ $('#layerBtn').click(function(){$('#layer').fadeIn();}); //弹出层 $('#close').click(function(){$('#layer').fadeOut();}); //关闭层 }); >   type="text/css">/*Css qisimi bashlandi, Xalighanche ozgerting. For Prestan.net*/ #layerBtn{left:10px;top:10px;position:absolute;border:none;color:#fff;background:none;cursor:pointer} #layer{padding:5px;z-index:100;width:350px;height:25px;background:#EDF9D7;border:1px solid #8CAC52;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:absolute;top:50px;left:10px;margin:0;display:none;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7} #layer input{width:95px;height:24px;border:1px solid #CBCDCD;margin:5px;padding:0 5px;background:#F8FCCE;float:left} #layer .button{width:50px;height:26px;line-height:23px;margin-top:5px;border:none;font-family:Arial;font-size:15px;background:#8CAC52;color:#FFF;cursor:pointer} #layer #close{margin:5px 10px 0 0px;border:none;padding:2px 0px 0 0;width:50px;height:24px;line-height:23px;position:absolute;top:0;right:0;font-family:Arial;font-size:15px;color:#fff;background:#FF6149;cursor:pointer} #layer_left{margin:0;padding:0;position:absolute;top:0px;left:5px} #layer #layer_text{} #layer #layer_text a{float:right;padding:0 5px 0 5;width:80px;height:26px;line-height:26px;margin:5px 0 0 5px;border:none;font-family:Alpida Unicode System;font-size:15px;background:#8CAC52;color:#FFF;cursor:pointer} /*Qir chiqirish uchun yezildi. For Prestan.net*/ .diamond{-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand')";filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand' );-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)} :root .diamond{filter:none\9} .tips{position:absolute;background:#EDF9D7;border:1px solid #8CAC52;padding:10px} .tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#EDF9D7;border-left:1px solid #8CAC52;border-top:1px solid #8CAC52;top:-5px;top:-6px\9;left:10px} >

css نى مەن قوشۇپ قويدۇم، سىز ئايرىم قوشۇپ يۈرمىسىڭىزمۇ بولىدۇ، ئەگەر ئۆزگەرتىمەن دېسىڭىز خالىغانچە ئۆزگەرتىڭ.

2-قەدەمدە، login.php نى تارتىپ ئېلىپ چىقىش

دېمەكچى، Admin دېگەن خەتنى (login.php نىڭ ئىچىدىكى Admin دېگەن خەتنى خالىغانچە ئۆزگەرتسىڭىز بولىدۇ) بلوگىڭىزنىڭ مەلۇم جايىغا ئورۇنلاشتۇرۇش دېمەكچى.

مەن بلوگىمنىڭ سول ئۈستى تەرەپكە ئورۇنلاشتۇردۇم، يەنى تۆۋەندىكى كودنى header.php نىڭ ئىچىگە قويدۇم.

 include(TEMPLATEPATH . '/login.php'); ?>

بۇيەردە مەن يەنە ئازاق چۈشەنچە بېرىپ ئۆتەي

2-قەدەمدىكى كودنى خالىغان ئورۇنغا قويساڭلار بولمايدۇ، مەسىلەن مەن تاللىغان ئورۇن ئەڭ ئۈستىدىكى يېشىل رەڭلىك ئورۇن، ئۇ ئورۇننىڭ ID سى بولسا main_top# شۇڭا مەن header.php نىڭ ئىچگە تۆۋەندىكىدەك ئورۇنلاشتۇردۇم. تۆۋەندىكى كودقا تەپسىلى قاراڭ.

 id="main_top">
   class="wrapper">
     id="top_manu"> wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>>
     id="top_search"> include(TEMPLATEPATH . '/topsearch.php'); ?>>
  >
   include(TEMPLATEPATH . '/login.php'); ?>
>

ئاخىرىدا style.css نى ئېچىپ main_top# نىڭ خاسلىقىغا position:relative نى قوشۇپ قويدۇم، بولمىسا نورمال چىقماسلىقى مۇمكىن. يەنى تۆۋەندىكىدەك.

#main_top{position:relative;}

بۇ ئۇسۇل بەك تەسمۇ ئەمەس ئىدى، يېزىپ بولۇپ ئۇقۇپ باقسام ھەجەپ تەس بىلىنىپ كەتتا، ئەگەر سىز تەپسىلى ئوقۇغان بولسىڭىز چۇقۇم قىلالايسىز، قىلالمىسىڭىز ئىنكاس ئارقىلىق سۇئال سوراڭ.