修改WordPress后台的登录界面的插件很多,但大部分都有很多我用不到的功能,会浪费资源,设置也不那么直观,所以决定用写代码的方式来实现。
修改wordpress后台界面的效果
用代码修改WordPress后台的登录界面
在主题functions.php
文件中或者使用Code Snippets插件添加自定义代码:
class Sola_Custom_Admin_Login{ private static $instance = null; public static function get_instance(){ if( self::$instance == null ){ self::$instance = new self(); } return self::$instance; } function __construct(){ add_filter( 'login_title', [$this, 'login_title'], 10,2 ); add_filter( 'login_headerurl', [$this, 'login_headerurl'] ); add_filter( 'login_headertext', [$this, 'login_headertext'] ); add_action( 'login_head', [$this, 'login_styles'] ); } // 浏览器标题,默认带有WordPress字样 function login_title( $login_title, $title ){ return $title .' - '. get_bloginfo( 'name' ); } // logo的链接,默认链接到WordPress function login_headerurl(){ return site_url(); } // a标签里的文字,logo是a标签的背景 function login_headertext(){ return ''; } // 通过css修改页面样式 function login_styles(){ ?> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%09%2F*%20%E5%AE%9A%E5%88%B6%E9%A1%B5%E9%9D%A2%E8%83%8C%E6%99%AF%20*%2F%0A%09body%7B%0A%09%09background-color%3A%20%23333333%3B%0A%09%09background-image%3A%20url(%22data%3Aimage%2Fsvg%2Bxml%2C%253Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'100%2525'%20height%3D'100%2525'%20viewBox%3D'0%200%20800%20400'%253E%253Cdefs%253E%253CradialGradient%20id%3D'a'%20cx%3D'396'%20cy%3D'281'%20r%3D'514'%20gradientUnits%3D'userSpaceOnUse'%253E%253Cstop%20offset%3D'0'%20stop-color%3D'%25237DDD7F'%2F%253E%253Cstop%20offset%3D'1'%20stop-color%3D'%2523333333'%2F%253E%253C%2FradialGradient%253E%253ClinearGradient%20id%3D'b'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'400'%20y1%3D'148'%20x2%3D'400'%20y2%3D'333'%253E%253Cstop%20offset%3D'0'%20stop-color%3D'%25239FDDAF'%20stop-opacity%3D'0'%2F%253E%253Cstop%20offset%3D'1'%20stop-color%3D'%25239FDDAF'%20stop-opacity%3D'0.5'%2F%253E%253C%2FlinearGradient%253E%253C%2Fdefs%253E%253Crect%20fill%3D'url(%2523a)'%20width%3D'800'%20height%3D'400'%2F%253E%253Cg%20fill-opacity%3D'0.4'%253E%253Ccircle%20fill%3D'url(%2523b)'%20cx%3D'267.5'%20cy%3D'61'%20r%3D'300'%2F%253E%253Ccircle%20fill%3D'url(%2523b)'%20cx%3D'532.5'%20cy%3D'61'%20r%3D'300'%2F%253E%253Ccircle%20fill%3D'url(%2523b)'%20cx%3D'400'%20cy%3D'30'%20r%3D'300'%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E%22)%3B%0A%09%09background-attachment%3A%20fixed%3B%0A%09%09background-size%3A%20cover%3B%0A%09%7D%0A%09%2F*%20%E4%BF%AE%E6%94%B9Logo%20*%2F%0A%20%20%20%20.login%20h1%20a%7B%0A%20%20%20%20%20%20%20%20background-image%3A%20url(http%3A%2F%2Flocalhost%2Fwordpress%2Fwp-content%2Fuploads%2F2022%2F03%2Flogo.svg)%3B%0A%20%20%20%20%20%20%20%20height%3A%2046px%3B%0A%20%20%20%20%20%20%20%20width%3A%20160px%3B%0A%20%20%20%20%20%20%20%20background-size%3A%20contain%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20%E6%8E%A7%E5%88%B6%E7%99%BB%E5%BD%95%E8%A1%A8%E5%8D%95%E7%9A%84%E5%AE%BD%E5%BA%A6%E5%92%8C%E8%83%8C%E6%99%AF%20*%2F%0A%20%20%20%20%23login%7B%0A%20%20%20%20%20%20%20%20width%3A%20480px%3B%0A%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20.login%20form%7B%0A%20%20%20%20%20%20%20%20background%3A%20rgba(255%2C255%2C255%2C.25)%3B%0A%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20%E6%8E%A7%E5%88%B6%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E5%92%8C%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%20*%2F%0A%20%20%20%20.login%20label%7B%0A%20%20%20%20%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23000%3B%0A%20%20%20%20%7D%0A%20%20%20%20.login%20input%5Btype%3D%22text%22%5D%2C%20%0A%20%20%20%20.login%20input%5Btype%3D%22password%22%5D%7B%0A%20%20%20%20%20%20%20%20border-radius%3A%200%3B%0A%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23000%3B%0A%20%20%20%20%20%20%20%20background%3A%20none%3B%0A%20%20%20%20%20%20%20%20margin-bottom%3A%2024px%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23login%20input%5Btype%3D%22submit%22%5D%7B%0A%20%20%20%20%20%20%20%20background%3A%20%23507551%3B%0A%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20padding%3A%200%2024px%3B%0A%20%20%20%20%20%20%20%20border-radius%3A%200%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23login%20input%5Btype%3D%22submit%22%5D%3Ahover%7B%0A%20%20%20%20%20%20%20%20background%3A%20%233c583d%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20%E6%8E%A7%E5%88%B6%E5%AF%86%E7%A0%81%E5%AD%97%E6%AE%B5%E7%9A%84%E5%B0%8F%E7%9C%BC%E7%9D%9B%E5%9B%BE%E6%A0%87%E7%9A%84%E9%A2%9C%E8%89%B2%20*%2F%0A%20%20%20%20%23login%20.button.button-secondary%7B%0A%20%20%20%20%20%20%20%20color%3A%2350575e%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20a.privacy-policy-link%7B%0A%20%20%20%20%20%20%20%20color%3A%20%2350575e%3B%0A%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20%E8%AF%AD%E8%A8%80%E5%88%87%E6%8D%A2%E5%99%A8%E7%9A%84buton%E6%A0%B7%E5%BC%8F%20*%2F%0A%20%20%20%20.language-switcher%20input%5Btype%3D%22submit%22%5D%7B%0A%20%20%20%20%09background%3A%20%23507551%3B%0A%20%20%20%20%09border%3A%20none%3B%0A%20%20%20%20%09padding%3A%200%2024px%3B%0A%20%20%20%20%09border-radius%3A%200%3B%0A%20%20%20%20%09color%3A%20%23fff%3B%0A%20%20%20%20%7D%0A%20%20%20%20.language-switcher%20input%5Btype%3D%22submit%22%5D%3Ahover%7B%0A%20%20%20%20%09background%3A%20%233c583d%3B%0A%20%20%20%20%09color%3A%20%23fff%3B%0A%20%20%20%20%7D%0A%20%20%20%20%40media%20(min-width%3A%20500px)%7B%0A%20%20%20%20%20%20%20%20.login%20%23nav%2C%20.login%20%23backtoblog%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-left%3A%200%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.login%20form%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2048px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <?php } } Sola_Custom_Admin_Login::get_instance();