S
SoloNegocios
Xi
SEO
Importante: Todas las paginas nuevas que creemos necesitan una validación y esa es la de <?php if (is_user_logged_in() ) ?> ya que no queremos que usuarios sin logearse tengan acceso a paginas como la de actualizar usuario o escribir artículos xD
Segunda parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins.html#post468195
Tercera Parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins-2.html#post468249
Cuarta Parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins-2.html#post468311
Wordpress es el mejor CMS para crear Blogs de eso no hay ninguna duda, pero hay algunas veces en la que sentimos que Wordpress nos limita y no podemos realizar algunos proyectos que tenemos en mente, uno de estos limitantes y para mi el mas importante es el dichoso "Panel de administración".
Se que muchos dirán "Pero si el Panel de administración es muy fácil de usar" yo eso lo se por algo llevo ya varios años usando Wordpress, el verdadero problema viene cuando queremos tener un Blog donde nuestros visitantes se registren y puedan escribir sus propios artículos, seamos sinceros el 99,5% de la gente que navega en Internet no es Blogger o Webmaster para ellos el Panel de administración es tan difícil como usar Ubuntu Linux.
Wordpress tiene una infinidad de Plugins que puedes usar para que los usuarios se registren, inicien sesión o escriban artículos sin necesidad de entrar al Panel de administración, el problema viene cuando los Plugins no tienen todo lo que necesitas o son tan viejos que ya no funcionan en versiones nuevas de Wordpress, por esa razón hoy les voy a enseñar a crear un Blog tipo comunidad usando Wordpress y un poco de "PHP+HTML+CSS".
La mayoría de funciones que uso son sacadas de algunos temas de Wordpress y de Blogs que encontré Googleando, lo que hice fue reunir todas esas funciones que necesitaba y las modifique a mis necesidades, ahora si ya dejare la carreta y empezare con lo interesante.
Segunda parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins.html#post468195
Tercera Parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins-2.html#post468249
Cuarta Parte: http://forobeta.com/wordpress/46089-crear-comunidad-wordpress-plugins-2.html#post468311

Se que muchos dirán "Pero si el Panel de administración es muy fácil de usar" yo eso lo se por algo llevo ya varios años usando Wordpress, el verdadero problema viene cuando queremos tener un Blog donde nuestros visitantes se registren y puedan escribir sus propios artículos, seamos sinceros el 99,5% de la gente que navega en Internet no es Blogger o Webmaster para ellos el Panel de administración es tan difícil como usar Ubuntu Linux.
Wordpress tiene una infinidad de Plugins que puedes usar para que los usuarios se registren, inicien sesión o escriban artículos sin necesidad de entrar al Panel de administración, el problema viene cuando los Plugins no tienen todo lo que necesitas o son tan viejos que ya no funcionan en versiones nuevas de Wordpress, por esa razón hoy les voy a enseñar a crear un Blog tipo comunidad usando Wordpress y un poco de "PHP+HTML+CSS".
La mayoría de funciones que uso son sacadas de algunos temas de Wordpress y de Blogs que encontré Googleando, lo que hice fue reunir todas esas funciones que necesitaba y las modifique a mis necesidades, ahora si ya dejare la carreta y empezare con lo interesante.
- Formulario de Registro:
Lo primero que vamos a hacer es crear el formulario para que nuestros visitantes puedan registrarse en el sitio para eso entramos a nuestro Hosting y buscamos la carpeta del tema que estamos usando "wp-content/themes/tu-tema/", aquí vamos a crear un archivo nuevo llamado registro.php, después regresamos al Panel de Wordpress y vamos menú "Apariencias->Editor" en donde ya nos debe aparecer listado el archivo registro.php
Antes de comenzar a meterle código al archivo registro.php debemos recordar que el formulario de registros es una simple pagina con un formulario así que para hacernos la vida mas sencilla vamos a la Plantilla de pagina "page.php" y copiamos todo el código y lo pegamos en el registro.php.
Ahora pegamos el siguiente código al inicio del registro.php, arriba de todo el código que colocamos antes
PHP:<?php /** * @package WordPress * @subpackage Tu Tema Template Name: Registro */ ?>
Esto lo que hace es decirle a WP que este archivo es una plantilla de pagina, mas adelante les muestro para que sirve.
Abajo de este código colocamos este otro código
PHP:<?php if ( $_POST['signup_post'] == '1') { $username = $_POST['user_login']; $password = $_POST['password']; $confirm = $_POST['confirm']; $email = $_POST['user_email']; $nombre = $_POST['nombre']; $apellido = $_POST['apellido']; $message = add_new_user($username, $password, $confirm, $email, $nombre, $apellido); } ?>
Esto lo que hace es recibir los datos de los campos de texto que tendrá el formulario y crea el usuario con esos datos.
Como recuerdan copiamos todo el código del page.php asi que ahora buscamos esta parte "<?php the_content(); ?>", la eliminamos y copiamos este código
PHP:<form action="" method="post"> <?php display_message($message) ?> <fieldset> <ul> <li> <label>Nombre</label> <input type="text" value="<?php echo $_POST['nombre']; ?>" name="nombre" class="input"/> </li> <li> <label>Apellido</label> <input type="text" value="<?php echo $_POST['apellido']; ?>" name="apellido" class="input"/> </li> <li> <label>Nombre de Usuario</label> <input type="text" value="<?php echo $_POST['user_login']; ?>" name="user_login" class="input"/> <small class="nota">Escoge el nombre con el que te van a conocer</small> </li> <li> <label>Correo Electrónico</label> <input type="text" value="<?php echo $_POST['user_email']; ?>" name="user_email" class="input"/> <small class="nota">Ej. miguel@hotmail.com</small> </li> <li> <label>Contraseña</label> <input type="password" value="" name="password" class="input"/> <small class="nota">Mínimo 6 caracteres</small> </li> <li> <label>Confirmar Contraseña</label> <input type="password" value="" name="confirm" class="input"/> <small class="nota">Escribe de nuevo la contraseña</small> </li> <li> <input type="submit" id="register" value="Crear mi Cuenta"/> <input type="hidden" name="signup_post" value="1"/> </li> </ul> </fieldset> </form>
Como pudieron ver no es algo del otro mundo es puro HTML y solo 2 funciones las cuales paso a explicar ahora y obviamente las deben colocar en el archivo functions.php:
PHP:function display_message( $message = false ) { if( is_wp_error( $message ) ) { echo '<p>' . $message->get_error_message() . '</p>'; } }
display_message= Solo sirve para retornar un mensaje de error, lo vamos a usar para decirles a los usuarios cosas tipo: La contraseña es muy corta, ese Email ya esta siendo usado por otro usuario, etc-
PHP:function add_new_user($username, $password, $confirm, $email, $nombre, $apellido) { require ( ABSPATH . WPINC . '/registration.php' ); // Remove html tags from the title and content fields $username_stripped = strip_tags($username); $password_stripped = strip_tags($password); $confirm_stripped = strip_tags($confirm); $email_stripped = strip_tags($email); $nombre_stripped = strip_tags($nombre); $apellido_stripped = strip_tags($apellido); // Check to see if User Registration is turned OFF if (get_option('users_can_register') == '0') return new WP_Error('reg_off', 'Lo sentimos, los registros están desactivados'); // Validate the Form Data if(isEmptyString($nombre_stripped)) return new WP_Error('forgot_nombre', 'Por favor ingresa tu Nombre'); if(isEmptyString($apellido_stripped)) return new WP_Error('forgot_apellido', 'Por favor ingresa tu Apellido'); if(isEmptyString($username_stripped)) return new WP_Error('forgot_username', 'Por favor ingresa un Nombre de Usuario'); if(strlen($username_stripped)<6) return new WP_Error('username_corto', 'El Nombre de Usuario debe tener 6 caracteres como mínimo'); if(username_exists($username_stripped)) return new WP_Error('username_exists', 'Lo sentimos, ese Nombre de Usuario ya existe'); if(!is_email($email_stripped)) return new WP_Error('verify_email', 'Por favor ingresa un Correo Electrónico valido'); if(email_exists($email_stripped)) return new WP_Error('email_exists', 'Lo sentimos, ese Correo Electrónico ya esta siendo usado por otro usuario'); if(isEmptyString($password_stripped)) return new WP_Error('forgot_password', 'Por favor ingresa una Contraseña'); if(strlen($password_stripped)<6) return new WP_Error('password_corto', 'La Contraseña debe tener por lo menos 6 caracteres'); if($password_stripped != $confirm_stripped) return new WP_Error('passwords_no_match', 'Tu Contraseña no concuerda'); // Create the user $user_data = array ( 'first_name' => $nombre_stripped, 'last_name' => $apellido_stripped, 'user_login' => $username_stripped, 'user_pass' => $password_stripped, 'user_email' => $email_stripped, ); $user_id = wp_insert_user($user_data); $user = get_userdata($user_id); // Log the User In wp_login($username_stripped, $password_stripped); wp_clearcookie(); wp_setcookie($username_stripped, $remember, false); // Email User with Login Info $site = get_bloginfo("name"); $sitename = str_replace("&", "&", $site); $headers = 'From: '.$sitename.' <noreply@'.$sitename.'>' . "\r\n"; $to = $user->user_email; $subject = sprintf(__('Ya tienes cuenta en %s - ¡Bienvenido!'), $sitename) . "\r\n\r\n"; $message = sprintf(__('Estimado %s:'), $user->user_login) . "\r\n\r\n"; $message .= sprintf(__('Gracias por registrarte a %s la Comunidad en la que podrás dar a conocer Tus Propias Opiniones de todos los Productos y Servicios que hayas Comprado o Usado.'), $sitename) . "\r\n\r\n"; $message .= sprintf(__('-------------------------------------------------------------------------------------')). "\r\n\r\n"; $message .= sprintf(__('Te recordamos tus datos:)')). "\r\n\r\n"; $message .= sprintf(__('Nombre de Usuario: %s'), $user->user_login) . "\r\n\r\n"; $message .= sprintf(__('Contraseña: %s'), $password_stripped) . "\r\n\r\n"; $message .= sprintf(__('-------------------------------------------------------------------------------------')). "\r\n\r\n"; $message .= sprintf(__('Una vez más, ¡bienvenido!')) . "\r\n\r\n"; $message .= sprintf(__('Equipo de %s'), $sitename) . "\r\n\r\n"; wp_mail($to, $subject, $message, $headers); // Redirect the User to My Account redirect_to_myaccount_url(); }
Esta función es la que se encarga de verificar los datos que el usuario ingreso y si son correctos le crea su cuenta en nuestro Blog y le envia un correo electrónico avisándole, si no son correctos retorna un mensaje que sera guardado e una variable para ser mostrado con display_message la función anterior.
Si no se dieron cuenta add_new_user usa 2 funciones mas que voy a explicar, recuerden pegarlas en el Functions.php
PHP:function isEmptyString($data) { return (trim($data) === "" or $data === null); }
Sirve para saber si la cadena ingresada tiene algún carácter o no, es para validar si el usuario ingreso un nombre de usuario, correo o contraseña
PHP:function redirect_to_myaccount_url() { wp_redirect(get_bloginfo('url') . '/panel/'); }
Esta función lo que hace es redireccionar al usuario que se registro a donde queremos, en mi caso se registran y los mando a Midominio.com/panel/
Las demas funciones son funciones estándar de PHP o funciones de WP, ahora viene la ultima parte y esa es en el Panel de Administración ir al menú Pagina->Añadir nueva, le colocamos como nombre Registro y a mano derecha debe salir una caja llamada "Atributos de la Pagina" en esa caja dice "Superior" y "Plantilla", en "Plantilla" escogemos el nombre que le pusimos en registro.php, si no recuerdan es esta parte Template Name: Registro, así que para eso era el nombre, guardamos y listo, vamos a midominio.com/registro y debe salir algo como esto
Si probamos y colocamos mal los datos nos muestra el Mensaje de Error, asi
Obviamente no se vera igual porque para eso ya les toca meterle mano al CSS cosa que no explicare ya que cada uno tiene su estilo xD
- Formulario para Iniciar Sesión:
Para el formulario de iniciar sesión segumos casi los mismos pasos que en el anterior formulario, este formulario usara ReCaptcha (reCAPTCHA: Stop Spam, Read Books) ya que hay que asegurar que los Juakers que usan Fuerza Bruta para averiguar contraseñas no pasen, asi que vayan registrándose xD
- Entramos a nuestro Hosting y buscamos la carpeta del tema que estamos usando "wp-content/themes/tu-tema/", aquí vamos a crear un archivo nuevo llamado iniciar-sesion.php.
- Regresamos al Panel de Wordpress y vamos menú "Apariencias->Editor", en donde ya nos debe aparecer listado el archivo iniciar-sesion.php
- Vamos a la Plantilla de pagina "page.php" y copiamos todo el código y lo pegamos en el iniciar-sesión.php.
- Ahora pegamos el siguiente código al inicio del iniciar-sesion.php, arriba de todo el código que colocamos antes
PHP:<?php /** * @package WordPress * @subpackage Tu Tema Template Name: Iniciar Sesion */ ?>
Ya saben que es para darle un nombre a esta pagina.
- Abajo de este código colocamos este otro código, ATENCION este código tiene 2 variables que están con ***********, esos asteriscos los deben remplazar con sus llaves de ReCaptcha por eso deben registrarse, mas adelante les explico
PHP:<?php require_once('recaptchalib.php'); $publickey = "***********"; $privatekey = "***********"; if ( $_POST['login'] == '1') { $username = $_POST['user_login']; $password = $_POST['password']; $re_ip = $_SERVER['REMOTE_ADDR']; $re_challenge = $_POST['recaptcha_challenge_field']; $re_response = $_POST['recaptcha_response_field']; $re_valid = recaptcha_check_answer($privatekey, $re_ip, $re_challenge, $re_response); if ($re_valid->is_valid) { $message = log_in_user($username, $password); } else { $message = new WP_Error('reg_off', 'El Código de Verificación esta Errado'); } } ?>
- Como recuerdan copiamos todo el código del page.php así que ahora buscamos esta parte "<?php the_content(); ?>", la eliminamos y copiamos este código
PHP:<form action="" method="post"> <?php display_message($message) ?> <fieldset> <ul> <li> <label>Nombre de Usuario</label> <input type="text" value="" name="user_login" class="input"/> </li> <li> <label>Contraseña</label> <input type="password" value="" name="password" class="input"/> </li> </ul> </fieldset> <fieldset> <ul> <li> <?php echo recaptcha_get_html($publickey, $error); ?> </li> </ul> </fieldset> <fieldset> <ul> <li> <input type="submit" value="Entrar en mi Cuenta"/> <input type="hidden" name="login" value="1"/> </li> <li> <a href='http://www.tudominio.com/recuperar-contrasena' title='Contrasena' rel='nofollow'>Olvidaste tu Contraseña?</a> </li> </ul> </fieldset> </form>
Otra ves es puro HTML con la funcion que ya conocen "display_message" y otras nuevas: log_in_user y las de ReCaptcha
PHP:// Log In User function log_in_user($username, $password) { // Get the user based on the username from the POST $user = parse_user($username); // Remove html tags from the title and content fields $username_stripped = strip_tags($username); $password_stripped = strip_tags($password); // Validate the Form Data if(isEmptyString($username_stripped)) return new WP_Error('forgot_username', 'Por favor ingresa un Nombre de Usuario'); if(isEmptyString($password_stripped)) return new WP_Error('incorrect_password', 'Por favor ingresa una Contraseña'); if(!wp_check_password( $password_stripped, $user->user_pass ) ) return new WP_Error('incorrect_password', 'Ingresaste una Contraseña incorrecta'); wp_set_auth_cookie($user->ID, $remember); wp_login($username_stripped, $password_stripped); redirect_to_myaccount_url(); }
Esta función debe ir en el Functions.php y lo que hace es revisar si los datos que les pasamos con el formulario son correctos o no para que así se pueda logear el usuario, usa funciones de WP y las otras que ya se habían explicado antes.
Por ultimo vamos al Panel de Administración, menú Pagina->Añadir nueva, le colocamos como nombre Iniciar Sesion y a mano derecha debe salir una caja llamada "Atributos de la Pagina" en esa caja dice "Superior" y "Plantilla", en "Plantilla" escogemos el nombre que le pusimos en iniciar-sesion.php, si no recuerdan es esta parte Template Name: Iniciar Sesión, así que para eso era el nombre, guardamos y listo
Ya hemos creado el formulario y la pagina de iniciar sesión ahora solo nos falta la parte del ReCaptcha, si ya se registraron y agregaron el dominio les darán 2 llaves Public Key y Private Key las cuales tienen que colocar en las variables donde están los ************, esto esta en el Iniciar-sesion.php
PHP:$publickey = "***********"; $privatekey = "***********";
Despues de modificar esto vamos a Downloads - recaptcha - Project Hosting on Google Code y descargamos la ultima versión de la librería ReCaptcha para PHP, la descomprimimos y subimos el archivo llamado recaptchalib.php a la carpeta de nuestro Theme en el Hosting "Wp-Content/themes/MiTema/"
Ahora vamos a midominio.com/iniciar-sesion y debe salir algo como esto
ATENCIÓN: El enlace que dice "Olvidaste tu Contraseña" aun no funciona ya que todavía no hemos creado esa parte es la que viene después xD
Última edición: