自定義WordPress登陸背景

一開始使用的插件來修改的admin的背景登陸界面，後來wordpress更新到了4.5.2之後和插件不相容，是以直接将插件delete掉了。

又換回了原始的登陸界面， 但是怎麼看都不順眼…于是用jQuery庫來實作了一個簡易的自定義登陸界面。

關于如何具體修改Wordpress登陸界面，大家可以移步：如何自定義WordPress的登入頁面（Logo/連結/文本）

這個界面，就像你看到的一樣，背景圖檔使用了bing桌面的api，每天保持新心情~（fighting）

效果：

食用方法：

下載下傳：Github

将css、js、image檔案夾複制到主題目錄下。

将

functions.php

的内容複制到主題

functions.php

的?>之前。

/更改登入界面
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login.css" />'."\n";
echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";
}
add_action('login_head', 'custom_login');

//Login Page Title
function custom_headertitle ( $title ) {
//return get_bloginfo('name');
}
add_filter('login_headertitle','custom_headertitle');

//Login Page Link
function custom_loginlogo_url($url) {
return esc_url( home_url('/') );
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

//Login Page Footer
function custom_html() {
echo '<div class="footer">'."\n";
echo '<p>Copyright &copy; '.date('Y').' All Rights | <a href="https://blog.mayuko.cn" target="_blank" rel="external nofollow"  target="_blank">Hades</a></p>'."\n";
echo '</div>'."\n";
echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/resizeBg.js"></script>'."\n";
echo '<script type="text/javascript">'."\n";
echo 'jQuery("body").prepend("<div class=\"loading\"><img src=\"'.get_bloginfo('template_directory').'/images/login_loading.gif\" width=\"58\" height=\"10\"></div><div id=\"bg\"><img /></div>");'."\n";
echo 'jQuery(\'#bg\').children(\'img\').attr(\'src\', \''.get_bloginfo('template_directory').'/images/bing.php\').load(function(){'."\n";
echo ' resizeImage(\'bg\');'."\n";
echo ' jQuery(window).bind("resize", function() { resizeImage(\'bg\'); });'."\n";
echo ' jQuery(\'.loading\').fadeOut();'."\n";
echo '});';
echo '</script>'."\n";
}
add_action('login_footer', 'custom_html');
           

因為這個效果是使用jQuery庫來實作的，是以說，如果主題自帶jQuery庫的話，大家将

echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";
           

注釋掉就可以啦。

退出wp的登入，就可以檢視到效果啦。