Las ventajas de usar un formulario de contacto sin plugin son:

• Mayor control y personalizacion sobre el funcionamiento
• Mayor velocidad y optimizacion
• Posibilidad de agregar caracteristicas unicas

Me interesaba principalmente el tema de la velocidad de carga de la web. Me di cuenta que usando Contact Form 7, el plugin mas famoso para esta tarea, siempre me cargaba un archivo javascript y uno css en cada pagina de mi blog. No solo en la pagina de contacto sino en cada post, cada categoria, cada tag, etc etc. Eso no me gusto nada y comence mi tarea de buscar una forma de hacerlo sin que me pase eso. Despues de todo…para que necesito tantas opciones si lo unico que quiero es un simple formulario de contacto?

Lo encontre en trevodavis(en ingles) y lo simplifique. Porque tampoco necesitaba algo que use jQuery y Ajax. Simple PHP y HTML me bastaban. Paso a explicarles como se hace.

Basicamente lo que vamos a hacer es un template de pagina para wordpress. Y este es el esquema basico que tendra:

SI (recibo formulario)
  Verifico captcha
  Valido datos
  SI (no hay errores)
    envio email

Template de pagina

SI (se envio el mail)
  Muestro msj + algo extra
SINO
  Muestro formulario

Voy a explicar paso a paso pero aclaro que como vamos a un template de pagina cada uno debera adaptarlo a su blog. Aunque igual es una tarea facil.

Lo primero que lleva el archivo es la cabecera para indicar que es un template:

<?php
/*
Template name: Pagina de Contacto
*/

A continuacion lleva el codigo para verificar el mail y enviarlo. Deben copiarlo tal cual esta, no necesita cambios, solo fijense de poner la direccion a donde quieren que se envien los email del formulario de contacto.

//si recibe un formulario
if(isset($_POST['submitted'])) {
	if(trim($_POST['checking']) !== '') {
		$captchaError = true;
	} else {
                //revisa el nombre
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Olvidaste ingresar tu nombre.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}

		//revisa el email
		if(trim($_POST['email']) === '')  {
			$emailError = 'Olvidaste ingresar tu email.';
			$hasError = true;
		} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = 'Ingresa un email real.';
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}

                //revisa el mensaje
		if(trim($_POST['textoMensaje']) === '') {
			$commentError = 'No ingresaste ningun mensaje.';
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['textoMensaje']));
			} else {
				$comments = trim($_POST['textoMensaje']);
			}
		}
	}

        //si no hay errores envia el email
	if(!isset($hasError)) {
		$emailTo = 'mailejemplo@mail.com';//cambiar esto
		$subject = 'Mensaje de '.$name;
		$body = "Nombre: $name \n\nEmail: $email \n\nComentario:\n\n $comments";
		$headers = 'From: Mi blog ' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}
}

Luego viene la primera parte de su template de pagina. Yo les dejo la mia pero ustedes usen la de su theme. Lo mas facil es ir al archivo page.php de su theme y fijarse como esta constituido.

Lo que es seguro es que comienza con get_header()

get_header(); ?>
<!-- Row for main content area -->
<div id="content">
<div id="main">
<div class="post-box">

Ya casi terminamos. Ahora viene la parte de mostrar un mensaje si el mail se envio o mostrar el formulario. En cada input se muestra el valor enviado si es que el envio falla, esto para que el visitante no tenga que llenar de nuevo los campos.
Tambien se muestra debajo de cada input el error para indicar al visitante donde cometio un error.

<?php
//Si el email es enviado muestra un mensaje
//Sino muestra el formulario
if(isset($emailSent) && $emailSent == true) { ?>
<h3>Gracias por comunicarte, <?php echo $name;?></h3>
Te email sera atendido y respondido a la brevedad.
<?php } else { ?>
	<?php if(isset($hasError) || isset($captchaError)) { ?>
          Hubo un error enviando el formulario.
	<?php } ?>
<form id="contactForm" action="<?php the_permalink(); ?>" method="post">
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>

<br>
<input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>

<br>
<label for="commentText">Tu mensaje aqui</label>
<textarea name="textoMensaje" rows="15" cols="40"><?php if(isset($_POST['textoMensaje'])) {  if(function_exists('stripslashes')) { echo trim(stripslashes($_POST['textoMensaje']));
} else { echo trim($_POST['textoMensaje']); } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>

<br>
<label class="screenReader" for="checking">Deja este campo vacio para demostrar que eres humano</label>
<input id="checking" class="screenReader" type="text" name="checking" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
<input id="submitted" type="hidden" name="submitted" value="true" />

<br>
<input type="submit" value="Enviar" /></form>
<?php } ?>

Por ultimo solo mostramos lo que queda del template de pagina. Que de nuevo dependera de la estructura de su theme. El mio y asi:

<!-- /#main -->

		<?php get_sidebar(); ?>

<!-- End content row -->

<?php get_footer(); ?>

Suben el archivo a la carpeta de su theme. Ahora solo crean una pagina y eligen el template que acabamos de crear. Deberia funcionar sin mayores problemas.

Como mejorar el formulario de contacto

Agregar CSS. Pueden usar CSS para mejorar el aspecto del formulario. Seguramente su theme algun estilo para ellos, lo mejor seria usar esos para no tener que agregar aun mas codigo.

Mostrar mas informacion. Cuando Muestran el mensaje de ‘exito’ podrian aprovechar y mostrar algo mas para mantener a la visita dando vueltas por el blog. Por ejemplo pueden aprovechar y mostrar algunos post destacados o los mas comentados. Pueden usar algo del codigo que les mostre cuando hice el post de crear pagina de archivos para wordpress.

Si quieren una prueba pueden usar el formulario de contacto de este blog. El enlace esta en la parte superior derecha.

La cuestion ahora para los bloggers es que van a tener algunos (o muchos) enlaces a un sitio caido, un sitio que no existe. Y como saben los enlaces muertos pueden perjudicar el SEO del blog, entonces lo mejor es borrarlos o resubirlos a otro servidor.

Para encontrar dichos enlaces deben abrir el panel de control de su hosting e ingresar a phpMyAdmin, ubican la base de datos de su blog y en la pestaña SQL escriben lo siguiente:

SELECT guid
FROM wp_posts
WHERE post_content LIKE  '%megaupload.com%'

Eso les va a devolver un resultado parecido a esto:

Eso que ven como guid es el enlace al post, escribanlo en la barra de direcciones del navegador, y vean ese post para revisar donde esta el enlace y borrenlo o hagan lo que les guste

El caso en el que lo podemos usar es el siguiente:

Tenemos un blog con wordpress y seguramente tendra el boton ‘Me gusta’ de facebook en algun lado. Cuando alguien haga click en ese boton la noticia o post en la que lo hizo aparecera en el muro de esa persona y mas o menos dira algo como: ‘Pepito a compartido un enlace’ + una descripcion + una foto.

La cuestion es que, a veces la foto facebook la elije casi aleatoriamente de nuestra web y la descripcion tambien. Entonces si yo quiero compartir por ejemplo el post de Crea tu propia fuente con FontForge me saldra algo asi:

Como texto me tomo la meta etiqueta description, pero hay gente que no usa eso y le salen cosas muy feas como descripcion en facebook. Y veran que como imagen no me tomo una imagen del post en cuestion sino cualquiera otra del blog. Incluso habia veces en que me tomaba un emoticon

Como solucionarlo? Es alli donde entra OpenGraph, en la cabecera de nuestro theme podemos agregar algunas lineas de codigo que nos permitiran personalizar que es lo que aparece alli. Esas lineas son mas o menos asi:

<meta property="og:title" content="<?php the_title() ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:image" content="<?php bloginfo('template_url') ?>/images/like_image.jpg" />
<meta property="og:site_name" content="<?php bloginfo('name') ?>"/>
<meta property="fb:admins" content="ID_de_ADMIN" />
<meta property="og:description" content="<?php echo get_the_excerpt() ?>" />

Por supuesto que se puede agregar a mano pero yo esta vez he preferido usar un plugin que mejora un poco ese codigo, en especial en lo referente a la imagen. El plugin es WP Facebook Open Graph protocol. Creanme que he dedicado unas cuantas horas a buscar el mejor plugin y es ese.

Deben activarlo y luego colocar su ID de usuario de facebook que pueden encontrar en esta pagina: http://graph.facebook.com/USERNAME donde deben reemplazar USERNAME por su nombre de usuario.

Ahora, cuando alguien haga click en el boton ‘Me gusta’ de facebook aparecera en el muro de esa persona algo mas lindo con una imagen del post y con una mejor descripcion. Ej: post de La verdadera razon para usar linux

Simple pero ayuda mucho

Quieren subir una imagen a un post y resulta que es muy grande ej:904×1067 y quieren que ocupe el mayor tamaño posible en el post si que se salga de los bordes. Ese tamaño depende del theme que usen, el mio es de 600px de ancho.

Como hacen habitualmente? Suben la imagen al mayor tamaño y luego le dan click para editarla y cambiarle el porcentaje hasta que quede mas o menos del tamaño que quieren verdad? A veces le ponen 70% luego 90% y asi sucesivamente. Son muchos pasos y una perdida de tiempo.

Existe una mejor alternativa y es el plugin “Aditional Images Size zui”, que permite que uno mismo establezca reglas o nuevo tamaños para redimensionar imagenes.

Por ejemplo, defino una tamaño de 600px de ancho, y sin indicar el alto en la parte de configuracion del plugin.

Esto lo que hara es agregar un nuevo tamaño cuando subo la imagen que sea de 600px de ancho y el alto sera relativo. Con lo que al subir una imagen de 904×1067 nos queda una de 604×708.

Espero que el plugin le sirva a mis compañeros bloggers

Descargar el plugin

El theme se llama Ubux y fue un intento por imitar el diseño de la pagina de Ubuntu.

Las caracteristicas del theme la pueden encontrar en su pagina de descarga.

Les dejo las capturas de pantalla para que lo vean:

Lo pueden descargar desde la pagina de recursos.

Las modificaciones son:

• Correccion del problema con printf cuando la entrada tenia caracteres especiales
• Al final del post ya no se muestra la url de la fan page de facebook a menos que se haya agregado alguna url en la pagina de configuraciones
• Pequeñas modificaciones en el diseño(ej: se elimino el espacio vacio en la parte superior del theme, algunas sombras se han quitado)

Bueno, lo que queria contarles es que salio la nueva version de bbPress. Concretamente bbPress 2.0 que es un sistema de foros ideal para wordpress porque se integra casi perfectamente con el blog, el theme, los plugins y los usuarios del blog. Ademas de eso es muy ligero. No hay que hacer nada complicado para instarlo, se instala como cualquier otro plugin en wordpress.

Si quieren ver algunos ejemplos de foros en wordpress miren estos 2:

• BuddyPress Test Drive
• WPCandy Forums

Enlace de descarga: http://wordpress.org/extend/plugins/bbpress/
Fuente: ayudawordpress

No es que no se pueda hacer, si se puede, con el shortcode include o exclude se puede elegir que foto agregar o quitar a cada galeria. Pero hay que tomarse el trabajo de ver cual es el id de cada imagen, cambiar a la pestaña html, escribir…va, como si fueramos de la edad de piedra Y ni pensar si tienen que insertar muchas galerias todos los dias, se pierde mucho tiempo.

Asi que este post es simplemente para recomendarles un plugin que hace el trabajo. Se llama, obviamente, Multiple Galleries. Y lo unico que hace es agregar unos checkboxs al lado de cada imagen para que asi podamos elegir cuales agregar. Uns funcion muy sencilla que wordpress deberia traer por defecto.

Descarga el plugin: http://wordpress.org/extend/plugins/multiple-galleries/

Greg’s High Performance SEO

http://wordpress.org/extend/plugins/gregs-high-performance-seo/

Este plugin es una alternativa a All In One SEO pack. La diferencia es que permite configurar muchas mas opciones que ese plugin y con un muy reducido peso o mejor dicho, con poca carga para el servidor o hosting. Las opciones llegan a cerca de 100. Este plugin no es de esos que hacen ‘trucos’ por mejorar nuestras visitas. Sino que configura muchas de las opciones basicas como poner noindex a las paginas que corresponda, el atributo canonical para evitar contenido duplicado, etc.

Es lo basico pero bien hecho y sin matar nuestro servidor.

Bloggerhigh SEO Plugin Help

http://www.bloggerhigh.com/seopressor.php

Este plugin requiere registro en el sitio para poder descargarlo pero vale mucho la pena. Se usa asi: primero, aprendes lo que es una keyword. Luego en cada post eliges una keyword sobre la cual escribir, y este plugin te calificara el post del 0 al 100% en terminos seo para esa palabra clave. Y te dara los tips basicos para mejorar ese porcentaje, como ser, escribir la palabra clave en negritas, subrayada, en titulos h2, h3, en el atributo alt de las imagenes,etc. Muy bueno para acostumbrarse a escribir bien en terminos seo.

SEO content control

http://wordpress.org/extend/plugins/seo-content-control/

Este plugin seo para wordpress es parecido al de bloggerhigh pero enfocado en el blog en vez de en el post. Es decir, te dira que partes de tu blog estan malas o debiles en terminos seo. Por ejemplo: que las categorias no tengan descripcion, o que los post no tengan excerpt.

Como veran a exepcion del primero, los otros 2 plugins no hacen nada automatico, sino que nos dan muy buena informacion para que nosotros con nuestros conocimientos realicemos los cambios necesarios.

Otros, te roban directamente desde el feed con algun sistema automatico, creando los llamados ‘planetas’. Cada vez que tu publiques un articulo este sera copiado de forma automatica. Una solucion a esto es ofrecer solo feed parciales o feed cortados.

Hoy les quiero presentar otra forma mas de intentar protegerse. Deshabilitando el boton derecho en el blog. Con esto ya no se podra hacer boton derecho->copiar lo cual molestara a un gran porcentaje de las personas que realizan esa practica y se evitara asi el robo de texto e imagenes.

Pero se debe usar esta tecnica con cuidado, pues tambien puede molestar a los lectores habituales que simplemente entran al blog a copiar algo de info para pegarla en un informe para la escuela, o copiar un comando de linux para pegarlo en la consola, etc. Yo solo lo recomiendo en casos extremos cuando el robo de sus articulos sea demasiado frecuente.

Como deshabilitar el click derecho en tu blog? Simple, instala este plugin en wordpress y activalo. Nada mas, no hay que configurar nada.