Hace poco tuvimos que desarrollar un área segura para clientes de un sitio web que por supuesto utiliza WordPress como CMS. Es cierto que WordPress tiene su administrador y además su propia página de acceso a usuarios pero en este caso necesitábamos abstraer a los usuarios de esa área que es solo para administradores y además por cuestiones estéticas. Los usuarios utilizarían el mismo sistema de acceso a usuarios que tiene WordPress pero nunca verían el área de administradores.

Lo primero que tuve que hacer fue crear un formulario de acceso que se integrara con el diseño de la página y es lo que compartiré en este tutorial. No hay que complicarlo demasiado así que lo haré simple. El objetivo es que entiendan la base para que luego puedan aplicarlo a su gusto en donde haga falta.

Lo que haremos será crear una página plantilla en el mismo Theme Twentyeleven que traer WordPress activo por defecto.

Lo primero es crear el archivo e identificarlo como plantilla para que WordPress lo reconozca.

<?php /**  * Template Name: User Login */ ?>

Vamos a mantener el diseño y la estructura así que incluimos el encabezado y los divs respectivos.

<?php get_header(); ?>
<div id="primary" class="showcase">
   <div id="content" role="main">

Lo próximo, el código que hace todo el trabajo.

    <h2>
      <?php the_title(); ?>
    </h2>
    <?php if ( is_user_logged_in() ) : ?>
    <p>Ya estás autenticado. <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Cerra sesi&oacute;n de usuario">Salir</a></p>
    <?php else : ?>
    <form name="loginform" id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
      <p>
        <label>Username<br />
          <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" />
        </label>
      </p>
      <p>
        <label>Password<br />
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />
        </label>
      </p>
      <p class="forgetmenot">
        <label>
          <input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" />
          Remember Me</label>
      </p>
      <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
        <input type="hidden" name="redirect_to" value="<?php echo get_permalink() ?>" />
        <input type="hidden" name="testcookie" value="1" />
      </p>
    </form>
    <p id="nav"> <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a> </p>
    <?php endif; ?>

Este código anterior evalúa mediante is_user_logged_in() si estás autenticado como usuario. De ser así te avisa y te da un enlace de salida aunque con un poco más de trabajo y ganas puedes mostrar un panel de opciones de perfil, información del usuario y más datos relevantes para el usuario. De lo contrario, si no estás autenticado como usuario muestra un formulario de acceso.

Para terminar, el código que muestra la barra lateral o sidebar, el pié de página o footer y los divs que cierran toda la estructura de dicha página.

    <div class="widget-area" role="complementary">
      <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
      <?php
						the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
						?>
      <?php endif; // end sidebar widget area ?>
    </div>
    <!-- .widget-area --> 

  </div>
  <!-- #content -->
</div>
<!-- #primary -->

<?php get_footer(); ?>

Con esto estamos listos, ya tenemos página con formulario de acceso. Con esta base y ganas puedes llegar a aprovechar muchas posibilidades para tener un área de usuarios en tu sitio web administrado con WordPress.