文件管理 · 2023年12月9日

wordpress登录页|如何创建一个自定义的WordPress登录页面

『壹』 如何自定义WordPress的登录页面

//自定义登录页面的LOGO图片function my_custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.png) !important; } </style>';}add_action('login_head', 'my_custom_login_logo');以上代码是定义登陆的页面的logo的,logo的位置位于主题根目录下的images目录下 //自定义登录页面的LOGO链接为首页链接add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));将Logo的链接改为网站首页链接。如果想修改成其它链接,可以使用以下代码。 //自定义登录界面LOGO链接为任意链接function custom_loginlogo_url($url) { return 'http://www.slmwp.com'; //修改URL地址}add_filter( 'login_headerurl', 'custom_loginlogo_url' );//自定义登录页面的LOGO提示为网站名称add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));自定义为网站名称,如果想定义为其它名称,可以用下面的代码。 //自定义登录页面LOGO提示为任意文本function custom_loginlogo_desc($url) { return '你要定义的文本信息'; //修改文本信息}add_filter( 'login_headertitle', 'custom_loginlogo_desc' );自定义登录框内容 //在登录框添加额外的信息function custom_login_message() { echo '<p>欢迎来到'.get_bloginfo('name').',请登录后下载本站资源</p><br />';}add_action('login_form', 'custom_login_message');自定义底部内容 //自定义底部信息function custom_html() { echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>';}add_action('login_footer', 'custom_html');自定义CSS //添加自定义CSSfunction custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login_style.css" />';}add_action('login_head', 'custom_login');上面的css代码路径为主题根目录下的css目录

『贰』 如何创建一个自定义的WordPress登录页面

通过WordPress内置的挂钩(Hook),在主题的 functions.php 添加一些简单的代码,即可完成自定义修改,所有的操作都不需要修改WordPress核心文件,即使升级WordPress版本,也不会丢失效果。

自定义Logo图片

制作一个名为 login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。

自定义Logo链接

将Logo的链接改为网站首页链接:

将Logo的链接改为任意链接:

自定义Logo提示信息(tltle)

自定义为网站名称:add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

自定义为网站名称:add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

自定义为其他任何文本:

//自定义登录页面LOGO提示为任意文本2.function custom_loginlogo_desc($url) {33 . return 'WordPress大学'; //修改文本信息54.add_filter( 'login_headertitle', 'custom_loginlogo_desc' ); //自定义登录页面LOGO提示为任意文本

自定义登录框内容

//在登录框添加额外的信息function custom_login_message() { echo '<p>欢迎来到'.get_bloginfo('name').',请登录后下载本站资源</p><br />';}add_action('login_form', 'custom_login_message');

自定义底部内容

//自定义底部信息function custom_html() { echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>';}add_action('login_footer', 'custom_html');

自定义CSS

要更加灵活地修改登录页面的显示样式,建议添加一个自定义的CSS文件,然后查看登录页面的源代码的html结构,撰写自己的CSS样式。你可以使用下面的代码引入自己的CSS,注意修改代码中的css地址,以下调用的是主题根目录下的login_style.css://添加自定义CSSfunction custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/login_style.css" />';}add_action('login_head', 'custom_login');。如果觉得帮到你的话请及时采纳谢谢!

『叁』 如何自定义WordPress的登录页面

方法如下:1.设计一个引人注目的登录标志默认的WordPress登录标志由尺寸为80*80的“WordPress”字符组成。现在需要用设计的标志来代替默认的,应该事先将一个存储格式为.png 的标志图像保存到“登录”文件夹中,注意图片尺寸可以和默认的一样也可以自定义。然后要在functiond.php文件的底部加上如下代码:标志应该具有较强吸引力和较高的清晰度。此外,它最好和网站相关并且能告诉用户网站是一个怎样的网站。2.改变标志图像的URL如果想要改变标志图像URL并让它不再链接到WordPress主页,可以采取如下操作。需要使用如下示例代码去更换网站URL。也可以通过对上面的代码做一个小的改动来更改标题标签,具体代码如下:3.定制一个独特的样式表完成图像标志定制之后,你需要进行样式表的定制。首先,要创建一个login_stlye.css 文件然后在一个喜欢的编辑器中打开它 。现在在新建的文件中加入如下代码。这些代码能够帮助定制背景图片的尺寸和颜色,登录标签和登录表单。里面包含的参数仅供参考,可以根据自己的需要进行更改。事实上,为了让改动生效,还要把下面的代码添加到functions.php文件中.使用插件使用代码来定制一个令人满意的登录页面是一种比较刻板的方法。有的人可能会觉得这样比较麻烦也不想花费心思去做。这种情况的话,一些WordPress插件可能会帮上你的忙,例如Custom Login, A5 Custom Login Page和 MS Custom Login。接下来我们就给大家仔细介绍一下这三种插件。Custom Login用于登录屏幕定制,用户Hask密钥登录、邮件用户名登录和两步认证。这款插件已经被评为最受欢迎的用来自定义WordPress登录页面的插件之一。A5 Custom Login Page提供给想要把登录页面设计到最好的用户。这款插件能够帮助设计引人注意的标志和你想要的页面风格。此外,这款插件的开发者允许用户在插件上复制粘贴整个样式表。MS Custom Login能够帮助设计登录标志,背景图片,登录按钮的颜色等等。更重的是通过它你也可以使用一系列的登录表单尺寸。