Cómo crear un concurso de fotografía usando WordPress

En la siguiente serie de vídeotutoriales, vamos a ver cómo poner en marcha un Concurso de Fotografía Digital utilizando WordPress.

Pasos / requisitos para nuestro Concurso de Fotografía en WordPress

• Permitir el registro de fotógrafos
• Permitir recibir fotografías por usuarios registrados
• Mostrar una galería de fotografías
• Votar exclusivamente 1 fotografía por cada usuario registrado (no tiene por qué ser un fotógrafo)

Plugins de WordPress necesarios para el Concurso de Fotografía

Vamos a realizar la implementación del sistema prácticamente si utilizar nada de código. Sólo algún pequeño snippet CSS para ajustar alguna pequeña funcionalidad.

Los plugins imprescindibles que vamos a utilizar son:

• Ultimate Member: Para crear la membresía de fotógrafos y votantes
• Gravity Forms, para recibir las fotografías y votos

Primer vídeotutorial: Cómo configurar el sistema de membresía con Ultimate Member

El código PHP que muestra el menú superior en función de si estamos autentificados o no, os lo dejo a continuación:

function add_login_logout_register_menu( $items, $args )
{
  if ( $args->theme_location != 'secondary-menu' )
  {
	  return $items;
  }

  if ( is_user_logged_in() ) 
  {
	$current_user = wp_get_current_user();
	$items .= "<a href='/area-privada'>AREA PRIVADA (envío de fotos)</a> | ";
	$items .= '
	<a href="' . wp_logout_url() . '">CERRAR SESIÓN</a>
	';
  }
  else
  {
	  $items .= '
	  <a href="/login">INICIAR SESIÓN</a> | 
	  ';
	  $items .= '

	  <a href="/registro">CREAR CUENTA</a>
	  ';
  }
  return $items;
}

add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 199, 2 );

Segundo vídeotutorial: Cómo enviar fotografías desde el área privada implementada con Ultimate Member

Tercer vídeotutorial: Cómo crear el sistema de votaciones, garantizando un sólo voto por usuario registrado

Recursos comentados en los vídeotutoriales

El codigo PHP que rellena automáticamente el email (aunque se puede hacer de otra forma sin código) en un formulario de Gravity Forms es el siguiente:

add_filter( 'gform_field_value_email_usuario', 'rellenar_email_usuario' );
function rellenar_email_usuario( $value )
{
	$current_user = wp_get_current_user();
    return $current_user->user_email;
}

El código PHP y Javascript que bloquea un campo en Gravity Forms es el siguiente:

add_filter( 'gform_pre_render_3', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
 
    <script type="text/javascript">
        jQuery(document).ready(function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery("li.gf_readonly input").attr("readonly","readonly");
        });
    </script>
 
    <?php
    return $form;
}

El código CSS donde ocultamos y modificamos los elementos relativos a la validación del email en GravityForms:

.gform_validation_error .ginput_container.ginput_container_email input {
    display: none !important;
}

.gform_validation_error .ginput_container.ginput_container_email:after {
    content: "Ya has realizado tu voto";
}

div#validation_message_3_2 {
    display: none;
}