WordPress: passo a passo como criar seu próprio login

Neste tutorial vamos ver como criar um procedimento de login pessoal, também usando a funcionalidade Ajax via jQuery . ). Existem várias maneiras de personalizar o login do WordPress, por exemplo, o uso de ganchos e filtros ( add_action() , add_filter() ). Aqui vamos usar um procedimento de baixo nível, embora haja ainda interfaces para o kernel do WordPress. Além disso, vamos tentar validar um usuário através da Dupla-mail / senha.

Por que criar seu próprio login?

  • Em alguns contextos pode retornar uitle ter o máximo controle na página de login, a propor um layout personalizado aos nossos usuários registrados. Você também pode aprimorar a página com informações úteis, um logo do clássico "Esqueceu a senha?"
  • Para permitir o acesso através do e-mail (como no exemplo discutido aqui) em vez de user_login padrão WordPress
  • Para ser capaz de introduzir um painel de login na barra lateral do nosso blog
  • E, finalmente, ter um esqueleto - e uma idéia - uma grande Plugin : D

Ambiente

Em nosso tutorial / exemplo vamos trabalhar na raiz de uma pasta dentro do WordPress mylogin . . Criamos dois arquivos php dentro desta pasta: index.php e logon.php . O primeiro irá conter a nossa interface de login com todas as funções JavaScript / jQuery que precisamos. O segundo arquivo, logon.php , conterá o código para validação do usuário. e una cartella images . Em seguida, crie uma pasta css e dentro deste arquivo layout.css e pasta de images . Dentro da pasta imagens inserir um clássico Ajax loader: criá-lo on-line AjaxLoad.info . No final você deve ter:

  • MyLogin
    • index.php
    • logon.php
    • Alimentar
      • Layout.css
      • imagens
        • ajax-loader.gif

index.php

, email e password: Este arquivo mostra a forma de acesso através de um form com dois campos input de e-mail e senha:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" > <html Xmlns = "http://www.w3.org/1999/xhtml">
<head>
equiv = "Content-Type" content = "text/html; charset=utf-8" /> <meta Http-equiv = content = "Content-Type" "text / html; charset = utf-8" />
myLogin Demo </ title > <title> MyLogin Demonstração </ title>
"text/javascript" src = "http://www.google.com/jsapi" > </script> <script Type = "text / javascript" src = "http://www.google.com/jsapi"> </ script>
"text/javascript" > google . load ( "jquery" , "1.2.6" ) ; </script> <script Type = "text / javascript"> google. Load ("jquery", "1.2.6") </ script>
"text/javascript" > <script Type = "text / javascript">
<! -
google setOnLoadCallback. (
function () {
/ / Coloca o foco na primeira entrada, quando a página é
/ / Carregado
"mylogin" ] . email . focus ( ) ; . formulários documento ["MyLogin"] e-mail focus ()..;
}
);

/ **
* Mostrar informações de erro / aviso em nosso
* Formulário de login
* /
str ) { showError function (str) {
) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; . $ ('Div # error') Html ('<h2>' + str + '</ h2>') slideDown ().;
}

/ **
* Validação dos dados fornecidos no formulário de login. Se todos os
* É correto, os dados serão enviados para o logon.php página
* Através de Ajax
*
* @ Autor Giovambattista Fazioli
* E-mail @ @ g.fazioli undolog.com
* @ Web http://www.undolog.com
* /
checkLogin function () {
document . forms [ "mylogin" ] ; var f = documento formas ["MyLogin"].;
^ ( [ \w - ] + ( ? : \ . [ \w - ] + ) * ) @ ( ( ? : [ \w - ] + \ . ) * \w [ \w - ] { 0 , 66 } ) \ . ( [ a - z ] { 2 , 6 } ( ? : \ . [ a - z ] { 2 } ) ? ) $ / i ; __filter var = / ^ ([\ w -] + (:. \ [\ w -] +) *) @ ((:?. [\ w -] + \) * \ w [\ w -] {0 , 66}) \.? ([a - z] {2, 6} (:. \ [a - z] {2})) $ / i;
/ /
) . slideUp ( SlideUp $ ('div # erro "). (
function () {
/ /
f . email . value == '' ) { if (f. email. =='') valor {
) ; showError ('Você não inseriu \' email ');
focus ( ) ; f. email focus ().;
; return false;
}
! __filter . test ( f . email . value ) ) { if (! __filter. testar (e-mail f. valor.)) {
) ; showError ('O campo de e-mail é inválido');
select ( ) ; f. email select ().;
focus ( ) ; f. email focus ().;
; return false;
}
f . password . value == '' ) { if (f. senha. =='') valor {
) ; showError ('Você digitou a senha');
focus ( ) ; f. senha focus ().;
; return false;
}
) . show ( 'slow' ) ; $ ('Div # ajax-loader') Show ('slow').;
) . css ( 'cursor' , 'wait' ) ; $ ('Body') Css ('cursor', 'esperar').;
/ / Envio de dados via Ajax POST logon.php
'logon.php' , { email : f . email . value , password : f . password . value } , Mensagem $ ('logon.php', {e: Email f. Valor, senha:.. Senha f.}. Value,
data ) { function (dados) {
) . hide ( 'slow' ) ; . $ ('Div # ajax-loader') Hide ('slow');
) . css ( 'cursor' , 'default' ) ; $ ('Body') Css ('cursor', 'default').;
data ) { switch (dados) {
: caso '0 ':
/ / Acesso permitido
href = 'http://mioblog.com/' ; .. documento localização href = 'http://mioblog.com/';
break;
: case '-1':
) ; showError ('Access Denied e-mail ou senha incorreta.');
break;
: case '-2':
) ; showError ("Dados errados: tentativa de hack ');
break;
}
}
);
/ / Enviar cut-off
; return false;
}
);
; return false;
}

/ / ->
</ Script>
rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> < elo rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "tela de projeção," />
</ Head>

<body>
"login" > Id = <div "login">
"logo" >< h1 title = "myLogin" >< span > myLogin </ span ></ h1 ></ div > <div Id = "logo"> <h1 title = "mylogin"> <span> MyLogin </ span> </ h1> </ div>
"error" style = "display:none" >< h2 >...</ h2 ></ div > Id = <div "error" style = "display: none"> <h2> ...</ h2> </ div>
"mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <form Id = nome = "mylogin" "mylogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())">
"100%" border = "0" cellspacing = "8" cellpadding = "4" > <table Width = "100%" border = cellspacing = "0" cellpadding = "8" "4">
<tr>
"right" >< label for = "email" > email :</ label ></ td > <td Align = "right"> <label para "email"> = E-mail: </ label> </ td>
input type = "text" name = "email" id = "email" /></ td > <td> <input Type = name = "text" "email" id = "email" /> </ td>
</ Tr>
<tr>
"right" >< label for = "password" > password :</ label ></ td > <td Align = "right"> <label para "password"> = Password: </ label> </ td>
input type = "password" name = "password" id = "password" /></ td > <td> <input Type = name = "password" "password" id = "password" /> </ td>
</ Tr>
<tr>
"2" align = "center" >< input type = "submit" name = "send" id = "send" value = "Invia" /></ td > <td Colspan = "2" align = "center"> <input type = name = "submit" "send" id = "send" valor = "Submit" /> </ td>
</ Tr>
</ Table>
"ajax-loader" style = "display:none" >< img src = "css/images/ajax-loader.gif" /></ div > <div Id = estilo "ajax-loader" = "display: none"> <img src = "css / images / ajax-loader.gif" /> </ div>
</ Form>
</ Div>
</ BODY>
</ Html>

Nota: o arquivo index.php , como você pode ver dando uma olhada no código, você também pode ser um arquivo HTML normal. No entanto, no caso em que um dia queremos inserir algum trecho de código php, nós preparamos a extensão do arquivo.

A parte que você precisa de Javascript permite que você:

  • Executar uma série de controlos de e-mail e campos de senha (ver também Validar e-mail em Javascript e PHP )
  • Envio de bloco (em submit) automática e usa Ajax via jQuery para enviar os dados para POST para a página logon.php

Layout.css

O layout que você pode corrigi-lo como achar melhor. Proponho uma versão fácil de personalizar como desejar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
, Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
12px font-size: 12px
}
div {# tabela log
32px 0 0 0 ; margin: 32px 0 0 0;
}
div {erro #
8px auto margin: 8px Car
}
div # erro h2 {
block ; display: block;
#fc3 ; background: # FC3;
1px solid #f60 ; border: 1px solid # F60;
12px ; padding: 12px;
16px ; font-size: 16px;
#a50 ; color: # a50;
}
div # ajax-loader {
/ * Para mudar, dependendo do tipo de
Ajax Loader que você baixou
* /
220px ; width: 220px;
0 auto ; margin: 0 auto;
}

logon.php

vista in precedenza. A página logon.php é chamado diretamente a partir da página usando Ajax index.php visto antes. Na versão apresentada aqui não existem controlos sobre a "validade" dos dados passados ​​com o POST, uma simples verificação é feita de "presença" através da função isset() . No entanto, uma vez que o JavaScript é mais suscetível a várias modificações, você também pode adicionar um controle de servidor adicional / php. Ver a este respeito Classes un'indirizzo Javascript e PHP para validar e-mail

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/ **
* Funciona de login de um usuário e senha via e-mail Wordpress
*
* @ Autor Giovambattista Fazioli
* E-mail @ @ g.fazioli undolog.com
* @ Web http://www.undolog.com
* /

isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if ( isset ($ _POST ['email']) & & isset ($ _POST ['password'])) {
/ / Invoke bootstrap WordPress
( '../wp-config.php' ) ; @ Require_once ('.. / wp-config.php');
( '../wp-includes/pluggable.php' ) ; @ Require_once ('.. / wp-includes / pluggable.php');
( '../wp-includes/registration.php' ) ; @ Require_once ('.. / wp-includes / registration.php');

0 ; $ Erro = 0;

/ / Me conectar ao banco de dados
mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ Db = @ mysql_connect (DB_HOST, DB_USER, db_password);

/ / Select id DB
$db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db = 0!) mysql_select_db (DB_NAME);

/ / Get ID e seu endereço de e-mail que você USER_LOGIN
"SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` id `,` USER_LOGIN `FROM` wp_users
$_POST [ 'email' ] . "'" ; ONDE USER_EMAIL `` = '"$ _POST ['.']."' E-mail";

mysql_query ( $q ) ; $row = mysql_fetch_array ( $wp_r ) ; $wp_n = mysql_num_rows ( $wp_r ) ; $ Wp_r = mysql_query ($ q); $ row = mysql_fetch_array ($ wp_r) $ wp_n = mysql_num_rows ($ wp_r);
$wp_r ) ; mysql_free_result ($ wp_r);

/ / Encontrado
$wp_n > 0 ) { if ($ wp_n> 0) {
wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; Wp_authenticate $ resultado = ($ _POST ['email'], $ _POST ['password']);
! is_wp_error ( $result ) ) { if (! is_wp_error ($ result)) {
[ "ID" ] , true ) ; wp_set_auth_cookie ($ row ["id"], true);
, $row [ "user_login" ] ) ; do_action ('wp_login', $ row ["USER_LOGIN"]);
; echo "0";
"-1" ; Else} echo "1";
{ Else {}
; echo "1";
}
{ Else {}
; echo "-2";
}

Este código faz um login semelhante ao feito com o sistema WordPress. É interessante notar que a primeira coisa a fazer é incluir o kernel do WordPress para que você possa usar algumas de suas funções. Desta forma, estará em vigor um "pedaço" do WordPress. Sendo um arquivo processado via Ajax, este resrituisce três valores: 0, -1 e -2, respectivamente:

  • ok, faça o login permitido
  • nome de usuário ou senha está incorreta
  • Tentativa de hacking?

24 comentários para "WordPress: passo a passo como criar seu próprio login"

  1. 24 de outubro de 2008 Sniper Wolf :

    Excelente guia! Parabéns pela clareza e rapidez com que você se expressa ;)

  2. 24 de outubro de 2008 EmaWebDesign :

    Além das melhorias ou a utilidade, vamos enfrentá-lo, personalizá-lo é sempre divertido e agradável ;)

  3. 25 de outubro de 2008 Alexander :

    Oi!
    Eu estou no meio de criar meu primeiro blog usando WordPress.
    Eu tenho um pouco de conhecimento de programação web linquaggi, scripts e SQL.
    No entanto, não ter experiência com CMS, encontrei-me em frente ao incómodo de ligar uma caixa de login para acessar os membros privados.
    Lendo o artigo eu entendi a funcionalidade de arquivos e fiz tudo ao pé da letra, a criação de arquivos e pastas na raiz do meu espaço na web no arquivo FTP, incluindo o "ajax-loader.gif" (I estado que o meu provedor é Netsons) .
    Neste ponto, como exibir o LOGIN barra lateral? O que mais devo fazer?

    Obrigado antecipadamente pelas respostas!

  4. 26 de outubro de 2008 Giovambattista Fazioli :

    @ Sniper Wolf: Thank you! : D É sempre bom que alguém reconhece o esforço ...

  5. 26 de outubro de 2008 Giovambattista Fazioli :

    @ EmaWebDesign: exatamente a mesma coisa ... Eu queria escrever nas razões, mas eu vejo que você é percebido de forma igual, sem dizer explicitamente para : D

  6. 26 de outubro de 2008 Giovambattista Fazioli :

    @ Alexandre: o login para ver o interior da extremidade dianteira do seu blog, você suffciente você joga através, com as modificações necessárias para o layout, o conteúdo do arquivo "index.php", inserindo, por exemplo, na "sidebar". O importante é respeitar a lógica da operação, mas o FORM campo com INPUT (e-mail e senha), basicamente você pode colocá-lo onde quiser.
    Se você deseja inseri-lo na "sidebar" em WordPress, por esemopio, basta editar o arquivo link "sidebar.php" na sua pasta tema.

  7. 10 de novembro de 2008 david:

    Olá! Desculpa a ignorância sobre o assunto .. mas eu precisaria inserir um formulário de registro no meu site .. feito em flash. Sem saber de programação php você saberia me alguns conselhos? E 'coisa complexa? Obrigado!

  8. 10 de novembro de 2008 Giovambattista Fazioli :

    @ David: Se você falar de "formulário de inscrição" eu penso imediatamente que você tem que interagir de alguma forma com o servidor, tais como registro de usuários em um banco de dados MySQL. Se assim, você, infelizmente, são forçados a usar uma "linguagem" no lado do servidor, como PHP, ASP, etc ... O front-end, no entanto, que o form de inscrição, você pode conseguir em Flash e HTML. Isto, em última instância, faz nada mais do que "enviar" dados para o servidor que realiza a gravação, usando PHP, ASP, etc ...
    A coisa em si não é "complexo", mas se você não sabe um programa "mínimo" poderia pelo menos ser difícil.

  9. 18 de dezembro de 2008 luciano:

    Olá ... parabéns pelo site e pelo exemplo ...
    Eu não entendi uma coisa ... o formulário chamado logon.php postar o arquivo que faz a consulta e retorna um resultado ... mas onde está o "chamador" logon.php index.php leva os valores que lhe envia?
    obrigado!

  10. 18 de dezembro de 2008 Giovambattista Fazioli :

    @ Luciano:

    mas onde está o "chamador" logon.php index.php leva os valores que lhe envia?

    São tomadas a partir mesma forma que o usuário preenche os dados, isto é, quando você digitar o seu nome de usuário e senha.

  11. 31 de janeiro de 2009 Santino Bivacqua :

    Interessante, eu usatoi embora um pouco "mais" jQuery ...
    Por exemplo, você poderia usar em vez de:

    1
    2
    3
    document. forms [ "mylogin" ] ; var f = documento formas ["MyLogin"].;
    / / E então
    f. password . value ; f. senha var = valor de senha.;

    uma mais "simples:

    1
    $ ( '#idInputPassword' ) . val ( ) ; var password = $ ('# idInputPassword') val ().;

    aliás jQuery por:
    "LASS DO ESCREVER MAIS ...." ;) bem significa algo : D

  12. 31 de janeiro de 2009 Giovambattista Fazioli :

    @ Santino Bivacqua:

    Mas eu teria usado um pouco "mais" jQuery

    Eu pensei que você, também. No entanto, o acesso aos campos de um form é bastante simples (e rápido) sem o uso de jQuery. Não é o que há para ser otimizado, neste caso, no entanto o acesso a:

    1
    document. forms [ 'mylogin' ] ; var f = documento formas ['MyLogin'].;

    é do tipo array / index, e depois mais rapidamente:

    1
    ) . val ( ) $ ('Input # idInputPassword'). Val ()

    jQuery, de fato, tem de "scroll" ao redor do DOM para interceptar o primeiro ' input corretamente. Certamente este não é um caso crítico, pois o DOM (top) pequeno, e então você pode usar um acesso fácil jQuery ou a funcionalidade básica do Javascript.
    Mas você está certo, é útil escrever menos : D Além disso, se você quiser aplicar algum efeito jQuery você é forçado a usar o seu monitor :)

  13. 31 de janeiro de 2009 Santino Bivacqua :

    Lamentamos, mas não sei como funciona internamente jQuery, mas acho que se você usar o id, iniciando com o jQuery entender e usar document.getElementById('id') para que jQuery não está fluindo todos os nós até encontrar o que ele necessidade é o motor do navegador javascript é responsável por fornecer os dados ... ..
    …. talvez seja apenas se você indicar o nome de um tipo de classe $('.class') , porque não há equivalente getElementByClassName .... infelizmente

    Em qualquer caso, um ou outro, é só para ter uma forma única para o programa, pois eu sei que a maioria não usa 'métodos do DOM, muito mais "prolixo jQuery ... Vou te dar um exemplo, tente escrever com métodos do código DOM para remover uma linha de uma tabela, com apenas jQuery:

    1
    ) . remove ( ) ; // Col DOM è poco piu' complesso.... $ ('# IdRow'). Remove () / / Quando o DOM é um pouco mais "complexo ....
  14. 31 de janeiro de 2009 Giovambattista Fazioli :

    @ Santino Bivacqua: direito :) id se você está absolutamente certo ... seria interessante teste de corrida em ... quase ... : D

  15. 24 mar 2009 Trafico Web :

    es muy bueno el wordpress, mas não a forma que ele encontrado bajar de this gera a Carga en los Que Servidores, aun en estamos solución um problema gera um portal Opaco de unas entretenimeto Cargas altas tan com apenas 10mil visitas UNICAS Por dia, você alguien SABE solución Como esto Por quê ayuda Espero o wordpress Tienen ni en esto solución para

  16. 30 de maio de 2009 giggi:

    Isso só acontece comigo ou com qualquer um que entra no roteiro independentemente da senha digitada?

  17. 25 jul 2009 Redemption :

    Olá, me deparei com um blog fazendo uma pesquisa sobre o login do WordPress e devo dizer que este tutorial - Quero parabenizá-lo porque é muito bem feito - Eu posso ser muito útil, no entanto, são um pouco enferrujado em programação assim que eu queria perguntar, dado que Eu sei que para frotas : D Se
    Eu certificar-se de fazer logon no WordPress plataforma, privado e outro no mesmo instante.

    Deixe-me explicar: Eu tenho essa plataforma privada que eu possa programar à vontade e queria fazê-lo através do login deste poderia, ao mesmo tempo, a plataforma é para executar dois log privada para WordPress (tendo o mesmo em ambos usuário e senha) .
    No começo eu pensei que a página de login para entrar na plataforma privada de um formulário oculto que me permitisse ter uma cópia dos dados para efetuar login em dizer "sutil", mesmo WordPress, mas depois fiquei impressionado com seu guia e talvez não uma maneira mais inteligente para enviar dados e certifique-se de login para WordPress através de outra página ... Eu não sei se expliquei bem e eu espero que você me responda : D . Olá Nicola

  18. 03 de agosto de 2009 Giovambattista Fazioli :

    @ Redemption: Olá Nicola, eu sei, é claro, o seu terraço privado, mas o processo é definitivamente possível. Em teoria, todo o código que nós Server (para o WordPress) está presente neste post. O que você tem que decidir exatamente onde realizar o "dois" logins simultâneos.
    Se você tem acesso total a sua plataforma, você pode digitar o código de acesso ao seu deck privado no logon.php arquivo proposto neste post, por exemplo.

  19. 03 de agosto de 2009 Redemption :

    @ Giovambattista Fazioli:
    Obrigado pela resposta!

    Devo começar a experimentar, no entanto, deram-me esperança para uma boa implementação e estou grato :) .
    Peço-vos uma última coisa, eu posso de alguma forma criar uma consulta do usuário na tabela user diretamente do banco de dados de wp ou existem outros relacionamentos e chaves para ser criado no db?

    Como você sabe que eu tenho de alguma forma também exportar os usuários do wp terraço privado :) .

  20. 07 de outubro de 2009 HackersGold :

    Ola bom guia, mas eu percebi uma coisa fundamental Nenhum onde posso colocar todos os arquivos? pasta do wordpress? como faço?

  21. 22 de maio de 2010 Lorenzo :

    Ótimo post ... muito obrigado!

  22. 16 de junho de 2010 Umberto:

    Se eu queria salvar o login de acesso de dados do wordpress, que seriam as duas variáveis ​​de usuário e passar eu tenho que salvar?

  23. 08 de outubro de 2011 Guido:

    Olá, excelente tutorial!
    Eu só tenho uma pequena dúvida: como é que você definir para que a página inicial do WordPress é o index.php na pasta e não MyLogin index.php na raiz?
    Hoje eu coloquei um redirecionamento na index.php raiz do WordPress:

    Há um outro método mais elegante?

    obrigado

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL 


Parar SOPA