wordpress中用代码实现网站后台登录界面美化效果功能 -wordpress教程

吾爱互联

                                <b>[文章目录]</b>
                                <ul id="index-ul">
<li>第一步：在你所安装的主题的根目录下创建一个文件夹，名字为login</li>
<li>第二步：在login文件夹下创建一个样式文件login.css文件</li>
<li>第三步：还是在此文件下创建一个文件夹images这是存入图片的</li>
<li>第四步：添加后台登录样式代码</li>
<li>第五步：在网站后台functions.php函数文件里加载这个样式即可</li>
<li>添加欢迎语和版权信息代码如下：</li>
</ul>
                        </div>
同学们大家好，今天<span style="color: #ff00ff; font-size: 14pt;"><strong><span style="color: #ff00ff;">吾爱互联</span></strong></span>将与大家分享如何用纯代码的形式去美化网站后台登录界面效果功能
先把效果图放上
如图所示
<img class="aligncenter size-full wp-image-979" src="http://www.wpjiaocheng.com/wp-content/uploads/2014/09/网站后台登录界面.jpg" alt="wordpress中用代码实现网站后台登录界面美化效果功能" width="746" height="466" />
有些同学在使用这个程序后台登录的时候会感觉有点不是很好看，有点个性化，那就需要自己来添加代码设计一下啦
具体的方法如下：
<h2 id="title-0">第一步：在你所安装的主题的根目录下创建一个文件夹，名字为login
那当然你也可以取其它的名字，只是叫法不一样，但是其实现的功能是一样的，明白
<h2 id="title-1">第二步：在login文件夹下创建一个样式文件login.css文件
<h2 id="title-2">第三步：还是在此文件下创建一个文件夹images这是存入图片的
也就是你的网站后台登录时的图片logo，你把自己的图片入到这里就可以了
<h2 id="title-3">第四步：添加后台登录样式代码
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="comment">/*The CSS code By www.wpjiaocheng.com*/</span></li>
<li>* {margin:0; padding:0;}</li>
<li class="alt">html {background:none;}</li>
<li>body.login {position:relative; background:#fff url('images/loginbg.png') left top repeat-x; font-family:Tahoma, Arial, sans-serif; min-width:960px; width:expression_r(document.body.clientWidth < 960? <span class="string">"960px"</span>:<span class="string">"auto"</span>);}</li>
<li class="alt">img {border:0;}</li>
<li>#login {width:960px; margin:0 auto;}</li>
<li class="alt">.login h1 a {margin:126px auto 0px; background:url(images/logo.gif) no-repeat; width:185px; height:62px;}</li>
<li>.login form {float:none; width:70%; border:none; margin:0; box-shadow:none; background:none; margin:40px auto 0; clear:both; padding:0; overflow:hidden;}</li>
<li class="alt">#login form p {float:left; display:inline;}</li>
<li>.login form .forgetmenot {clear:both; padding-top:5px;}</li>
<li class="alt">.login label {float:left; padding:5px; display:inline; margin-left:40px; font-size:13px; color:#000; margin-right:10px;}</li>
<li>.login form .input {border:1px solid #D3D3D3; color:#555; padding:5px; font-size:12px; width:260px; margin:4px 0 0 0; background:none; box-shadow:none; height:28px; line-height:28px;}</li>
<li class="alt">.login form .forgetmenot label {color:#666;}</li>
<li>#login form p.submit {float:right; padding:3px 10px; }</li>
<li class="alt">#login form p.submit .button-primary{color:#fff; font-size:12px; border:1px solid #555; display:inline; margin-right:36px; background:url(images/rep1.png) repeat-x scroll 50% 50% transparent; box-shadow:none;}</li>
<li>.login #nav,#backtoblog {display:inline; width:45%; text-align:center; float:left;}</li>
<li class="alt">.login #nav a,.login #backtoblog a {text-decoration:none;}</li>
<li>.login .message {width:70%; text-align:center; margin:0 auto;}</li>
<li class="alt">#footer {clear:both; width:960px; margin:0 auto; padding-top:60px; color:#999; font-size:11px; font-family:Arial;}</li>
<li>#footer a {color:#999;}</li>
<li class="alt">#footer .copyright {width:70%; text-align:center; margin:0 auto;}</li>
<li><span class="comment">/*The CSS code By www.wpjiaocheng.com*/</span></li>
</ol>
</div>
<h2 id="title-4">第五步：在网站后台functions.php函数文件里加载这个样式即可
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="keyword">function</span> custom_login() {</li>
<li><span class="func">echo</span> '<link rel=<span class="string">"stylesheet"</span> type=<span class="string">"text/css"</span> href=<span class="string">"'.get_bloginfo('template_directory'). '/login/login.css"</span> />';</li>
<li class="alt">}</li>
<li>add_action('login_head', 'custom_login');</li>
</ol>
</div>
保存文件，更新即可
注意点：
<h2 id="title-5">添加欢迎语和版权信息代码如下：
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt">add_filter('login_headerurl', 'my_login_url_local');</li>
<li><span class="keyword">function</span> my_login_url_local() {</li>
<li class="alt"><span class="keyword">return</span> get_bloginfo('url');</li>
<li>}</li>
<li class="alt"><span class="keyword">function</span> custom_headertitle ( <span class="vars">$title</span> ) {</li>
<li><span class="keyword">return</span> '欢迎来到'.get_bloginfo('name');</li>
<li class="alt">}</li>
<li>add_filter('login_headertitle','custom_headertitle');</li>
<li class="alt"><span class="keyword">function</span> custom_login_message () {</li>
<li><span class="func">echo</span> '<div id=<span class="string">"footer"</span>><div <span class="keyword">class</span>=<span class="string">"copyright"</span>>'.__('Template By <a href=<span class="string">"http://www.wpjiaocheng.com"</span> target=<span class="string">"_blank"</span>>wpjiaocheng.com</a>').'</div></div>';</li>
<li class="alt">}</li>
<li>add_action('login_footer','custom_login_message');</li>
</ol>
</div>
好了，最后看一下上面效果图，就是那个样式了，如果感觉还是不好看，自己还是可以通过样式自己来处理，好吧