WordPress

Compartiendo experiencias sobre la plataforma CMS más importante del mundo

BuddyPress

El increíble y fabuloso plugin de WordPress para crear redes sociales verticales

¿Cómo crear una RED SOCIAL?

Experiencias, ideas y materiales para llevar adelante tu próximo proyecto de creación de una red social

domingo, 1 de mayo de 2016

WordPress: ¿Cómo crear un formulario personalizado? - Parte 4 (Guardar datos)

En esta cuarta parte de esta serie de artículos (ver parte 3) veremos cómo almacenar los datos de nuestro formulario en un tipo de artículo personalizado (custom post type) dentro de la base de datos de WordPress. Por supuesto no accederemos en forma directa a la base, sin a través de la API.

Paso 1

Creamos un custom post type:



Paso 2

Agregamos el código para insertar dentro de WordPress y controlar el posible error.

<?php

$response = "<h1>Solicitar autorización</h1><br/>";

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  
  # Datos
  
  $to = get_option('admin_email');
  $subject = "Solicitud de autorización desde ".get_bloginfo('name');
  $message = "<b>Empresa</b>: " . $_POST['razonsocial'];
  $message .= "<br/><b>Email</b>: " . $_POST['email'];
  $cabeceras = "MIME-Version: 1.0\r\n";
  $cabeceras .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
  
  # Carga de post en WodPress
  $my_post = array(
 'post_title'    => $subject,
 'post_content'  => $message,
 'post_status'   => 'publish',
 'post_type'   => 'solicitud',
);
  $post_id = wp_insert_post( $my_post , true);
  if ( is_wp_error($post_id) ) {
    autorizacion_response("ERROR", "No se ha podido cargar la solicitud: <br/><br/>" . $post_id->get_error_message());
}
  
  # Envío de mail
  else {
    
    $subject .= " - " . $post_id;

    $sent = wp_mail($to, utf8_decode($subject), $message, $cabeceras);
if($sent) 
    autorizacion_response("OK", "Solicitud de autorización enviada.");
else 
    autorizacion_response("ERROR", "No se ha podido enviar el correo electrónico: <br/><br/>" . error_get_last()["message"]);
    
    }
 
  }


function autorizacion_response($tipo, $mensaje){
    global $response;
    $response = "<div class='mensaje{$tipo}'>{$mensaje}</div><br/>";
  }


?>


<?php get_header(); 
/*


El resultado

Sin error:


Con error:



El post creado:


El mail recibido

WordPress: ¿Cómo crear un formulario personalizado? - Parte 3 (Submit)

En esta tercera parte (ver parte 2) vamos a describir cómo enviar el formulario y enviar un email.

Paso 1

Agregamos una sección en donde describir el resultado del procesamiento

<?php the_content(); ?>
<?php echo $response; ?>
  <form id="nueva_autorizacion" action="<?php the_permalink(); ?>" method="post">

Se verá así:


Para ello agregamos los siguientes estilos:

.mensajeERROR{
    padding: 5px 9px;
    border: 1px solid red;
    color: red;
    border-radius: 3px;
  }
.mensajeOK{
    padding: 5px 9px;
    border: 1px solid green;
    color: green;
    border-radius: 3px;
  }


Paso 2

Al inicio de nuestra página agregamos el código para enviar el formulario:

<?php

$response = "<h1>Solicitar autorización</h1><br/>";

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  
  # Envío de email
  
  $to = get_option('admin_email');
$subject = "Solicitud de autorización desde ".get_bloginfo('name');
  $message = "Solicito autorización de acceso a la empresa " . $_POST['razonsocial'];
  
  $sent = wp_mail($to, $subject, strip_tags($message));
  
if($sent) 
    autorizacion_response("OK", "Solicitud de autorización enviada.");
else 
    autorizacion_response("ERROR", "No se ha podido enviar el correo electrónico: <br/><br/>" . error_get_last()["message"]);
 
  }


function autorizacion_response($tipo, $mensaje){
    global $response;
    $response = "<div class='mensaje{$tipo}'>{$mensaje}</div><br/>";
  }

?>

<?php get_header(); 


Y finalmente nuestro mensaje ha sido enviado:



Ir a parte 4.

WordPress: ¿Cómo crear un formulario personalizado? - Parte 2 (Validación)

En esta segunda parte (ver parte 1) veremos cómo agregar validaciones de campos utilizando jQuery.

Paso 1

Agregamos la referencia a jQuery Validator: https://jqueryvalidation.org/

Para ello agregamos este código en funtions.php:

function add_jQuery_Validation() {
     wp_register_script('jquery-validation-plugin', 'http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js', array('jquery'));
    wp_enqueue_script('jquery-validation-plugin');
}  
add_action('wp_enqueue_scripts', "add_jQuery_Validation");


Paso 2

Creamos el formulario con los campos usando la función esc_attr:


El formulario se inserta luego de the_content. Esto puede variar según el tema:

<?php the_content(); ?>
  
  
  <form id="nueva_autorizacion" action="<?php the_permalink(); ?>" method="post">
    
    <p>Razón Social: <input type="text" name="razonsocial" value="<?php echo esc_attr($_POST['razonsocial']); ?>" /></p><br/>
    <p>Correo electrónico: <input type="text" name="email" value="<?php echo esc_attr($_POST['email']); ?>"/></p><br/>
      
    <p><input type="submit" value="Solicitar autorización"></p>
    
  </form>

    

Paso 3

Agregamos en la misma página el script de validación:

<script type="text/javascript">
  
(function($){

    $('#nueva_autorizacion').validate({
        rules: {
            'razonsocial': {
                required: true
            },
            'email': {
                required: true,
email: true
            }
        },

        messages: {
            'razonsocial': " Campo requerido.",
            'email': " Correo electrónico no válido."
        }
    });
  
})(jQuery);
      
</script>



Ir a Parte 3.

WordPress: ¿Cómo crear un formulario personalizado? - Parte 1 (Página PHP)

En esta serie de artículos veremos cómo crear formularios a medida en PHP para utilizar dentro de WordPress.

El primer paso consiste en crear un template y luego una página que lo utilice:

Paso 1

Creamos una carpeta y una página dentro de nuestro tema:



Paso 2

El contenido original del template lo podemos copiar desde page.php por ejemplo y agregamos el comentario que lo identifica como template:

<?php get_header(); 
/*
Template Name: autorizacion-nueva
*/
?>
<section id="content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="header">
<h1 class="entry-title"><?php the_title(); ?></h1> <?php edit_post_link(); ?>
</header>
<section class="entry-content">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<?php the_content(); ?>
<div class="entry-links"><?php wp_link_pages(); ?></div>
</section>
</article>
<?php if ( ! post_password_required() ) comments_template( '', true ); ?>
<?php endwhile; endif; ?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>


Paso 3

Creamos una nueva página basada en el template:





Y listo, ya tenemos nuestro primer formulario, por ahora en blanco.

Ir a Parte 2.

WordPress: Obtener el ID de una página a partir de su título

$page = get_page_by_title( 'Solicitar autorización' );
$pageURL = '/?page_id=' . $page->ID;
echo '<div><input type="submit" name="nueva" value="NUEVA" onclick="window.location=\'' . $pageURL . '\';" /></div>';


miércoles, 9 de marzo de 2016

Tabla automática de contenidos en WordPress

Utilizando el plugin Table of Contents Plus podemos crear en forma automática una tabla de contenido en páginas o posts:

Ejemplo:


Opciones de configuración del plugin:




miércoles, 24 de febrero de 2016

URL en WordPress que combine una categoría y una etiqueta

/sitioejemploooo.com/category/industrial/?tag=jack/

El resultado: