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.

En pocas palabras un theme resposive es aquel que se adapta a la pantalla de cada usuario. Pero antes de avanzar veamos como se hace normalmente para mostrar un blog a un usuario de telefonos celulares.

1. Lo mas comun es que no hagan nada. Entonces un usuario que entra desde el movil lo que ve es tu blog tal como tu lo ves pero en miniatura. Casi siempre tiene que hacer un doble touch sobre la pantalla del movil y puede maximinar alguna parte de la web para poder leer. Seguro que todos hemos vivido esto alguna vez.
2. Usar plugins o servicios externos para mostrar una version movil de tu blog. Hace un tiempo publique 11 maneras de hacer tu blog mas amigable para telefonos moviles, y alli veiamos el popular plugin wp-touch que muchos usan. Esto es una buena alternativa, rapida y sin problemas.
3. La tercer manera es poco usada pero aun asi la he visto por alli. Es crear en un subdominio una version movil del blog a la que eran redirigidos mediante php. Realmente no se que opinar sobre esto, no me parece gracioso tener 2 dominios con practicamente el mismo contenido, y calculo que a google tampoco le debe gustar mucho.

De todas esas opciones solo la segunda es algo valido, la tercera podria usarse en una aplicacion web pero no lo veo conveniente usarlo en un blog. Y de la primera ni hablar, es horrible ver una pagina en miniatura y tener que andar viendo de a pedacitos.

El resposive design es otra opcion mas, en la que mediante css, jquery u otras tecnicas se logra adaptar UN solo diseño a cualquier pantalla.

Esto casi siemper se logra (o al menos yo lo veo mas facil) creando divs con anchos porcentuales. Es decir que no se deben usar en el theme del blog anchos como 960px sino mas bien cosas como 45%. Esto aplica tambien a los textos, en vez de usar 13px se deben usar 1.2em. Se entiende?

Tambien se puede usar otra caracteristica de css que son los media querys pero navegadores viejos como Internet Explorer 8, 7 y 6 no lo soportan y lamentablemente todavia hay un monton de gente que los usa.

Ventajas de un theme resposive

• Mejora la experiencia del usuario. No tienen que andar haciendo cosas raras para ver tu blog desde una tablet o un celular.
• Mantienes el diseño. Plugins como WP-Touch lo que hacen es usar su propio diseño para mostrar el blog y ese diseño no tiene ni parecido a como ven tu blog en una pantalla de pc.
• Ahorro de coste de mantenimiento. Cuando haces un cambio en la web este se ve reflejado en tablets y celulares por igual.

Themes wordpress con resposive design

En un monton, yo siempre recomiendo buscar en wordpress.org en la categoria de flexible-widht

Pero los que me conocen saben que yo soy mas fanatico de armar mi propio theme con algun framework. Y recomiendo 2: reverie y bones.

Ejemplos de responsive design

En esta pagina pueden ver lo que suceden al agrandar o achicar la ventana del navegador. De paso terminaran de entender lo que es esto del diseño adaptable.

Y sino pueden agrandar o achicar la pantalla de paraisolinux.com para ver el efecto en un blog que usar wordpress.

Cual es el inconveniente? Que la mayoria tuneamos nuestros themes a nuestro gusto y aquellos que hayan estado usando y modificando el theme twenty ten perderan todos los cambios.

Como se soluciona? No hay una solucion simple, lo mejor era tener un child theme y realizar las modificaciones alli. Pero alli tambien surge otro problema, algunos child themes no solo modifican el archivo style.css y functions.php sino que hacen sus propias versiones de otros archivos como index.php, header.php, etc. Y puede que en esos archivos hayan usado funciones viejas que ya no sirven en wordpress, generando con esto la descomposicion de algunos childs themes.

Lo mejor para los amantes de twenty ten es usar un theme que no modifique nada mas que style.css y funcions.php. Por ejemplo el child theme ParaisoLinux que cree hace un tiempo y que es el mismo que estoy usando.

Por cierto, pronto sacare una actualizacion de dicho child theme de twenty ten.

Por suerte hay una manera sencilla de desactivar esa barra (que deberia ser opcional). Solo tienen que escribir en el archivo functions.php de su theme la siguiente linea:

add_filter( 'show_admin_bar', '__return_false' );

Y con eso se eliminara la molesta barra.

Cambiar de theme es como pintar de nuevo la casa, y decorarla como uno quiera, los seguidores fieles de este blog o los que me sigan en twitter sabran que cambio de theme cada 2×3, en especial me gustan los themes minimalistas. Pero cada quien tiene sus gustos, entonces aqui les dejo 10 themes para wordpress que estan lindos, livianos (la mayoria) y por sobre todo: pocas veces vistos. Personalmente no vi ninguno en ningun blog (a nadie le gusta vestirse con la misma ropa que ya esta vestida otra persona…o blog ).

Bubblog

Live Demo | Download

Fuente: bloggermint (ingles)

Lo que tienen que hacer es simplemente pegar el codigo que dejo mas abajo en el footer.php de su theme justo antes de la etiqueta de cierre de body.

Las querys dependeran en gran medida de los plugins y el theme que usen, por eso les recomiendo optimizar su theme de wordpress.

Ademas combinado con el codigo para ver la cantidad de memoria usada estos scripts pueden ser de mucha ayuda a la hora de optimizar wordpress.

El codigo:

<?php echo get_num_queries(); ?> peticiones. <?php timer_stop(1); ?> segundos.<br />

Espero que les sirva

Es verdad, hay gente que vive de esto y otra que hace realmente mucho dinero con unos simples blogs. Pero si se ponen a analizar los blogs “personales” que mas dinero hacen, se van a dar cuenta de 2 cosas. La primero es que esos blogs son en su mayoria de habla inglesa y segundo que la mayor parte de las ganancias no las hacen con adsense, sino vendiendo ebooks.

Existen varios sistemas de pago para gestionar la venta de libros virtuales (ebooks) y todo lo que esta implica (cobros, estadisticas, entrega, etc) pero por suerte siempre existe algun plugin o algun hack para wordpress que permite hacer lo mismo o casi lo mismo y gratis

En este caso el plugin para gestionar la venta de ebook se llama BookShelf y se puede bajar desde aqui.

Plugin Paypal

El funcionamiento del plugin es bastante sencillo, uno crea un post o pagina describiendo el producto, en este caso un ebook. Luego coloca un shotcode el final de esa pagina y el plugin colocara alli un boton para realizar el pago con paypal. Luego una vez confirmado el pago, automaticamente enviara el enlace del ebook al que lo compro para que pueda bajarlo. Estos enlaces los genera automaticamente y quien compra solo tiene 2 dias para descargar el ebook y luego el enlace se invalidara.

Y todo eso de manera automatica Y tambien tiene un pequeño agregado que es un reporte de ventas que puede ser bastante util para ayudar a llevar las cuenta$.

Espero que el plugin les sirva y espero que me sirva a mi tambien…aunque por ahora no tengo ningun buen ebook para vender

El problema viene porque estoy acostumbrado a que en godaddy o hostgator si uno queria actualizar o instalar plugins o themes en wordpress lo podia hacer desde el panel de admin, pero en muchos hostings gratuitos no se puede porque al querer hacerlo siempre pide los datos de ftp del hosting y a veces ni aun asi se puede. Y la verdad es molesto tener que subir archivos via ftp cada vez que uno quiere actualizar un simple plugin. Entonces busque la solucion y encontre 2 …

wp-config.php

La primera es editando el archivo wp-config.php que todos conocen y buscar la linea

define('NONCE_KEY', 'put your unique phrase here');

Justo despues de esa linea agregar estas 3:

define("FTP_HOST", "tudominio.com");
define("FTP_USER", "tu-usuario-de-FTP");
define("FTP_PASS", "tu-pass-de-FTP");

Y listo, ya no pedira mas datos.

Plugin autoFTP

La otra es como siempre con un plugin, se instala y se agregan los mismos datos que arriba en el panel de wordpress y listo. Ya no volvera a pedir datos de FTP.

Bajar plugin de aqui.

Espero que les sirva alguna de estas soluciones a todos aquellos que tienen sus blogs en hosting gratuitos.

Es muy simple usar el plugin, lo descargan, lo instalan y luego al final de cada widget les aparecera una caja de texto que dice “Widget Logic”. Algo asi como en la imagen del final. Lo que deben poner en esa caja de texto son los conditional tags de wordpress, pueden ver la lista completa aqui. Pero para que mas o menos entiendan de que se trata veamos un par:

is_home() hara que ese widget solo aparezca en la pagina principal y no en las paginas interiores.

is_page() hara que ese plugin solo aparezca en las ‘paginas’ de wordpress y no en los post, categorias, pagina principal, etc.

Los conditional tags son muchos y se pueden usar de muchas maneras incluso especificando paginas, post, tags, categorias, etc.

La mayoria ya esta cambiando y han dejado de usar tweetmeme o topsy y empezado a usar este boton oficial. Y creo que es lo mejor

Agregarlo a wordpress es facil y no hay necesidad de un plugin (aunque si existen plugins para ello).

Simplemente hay que abrir el archivos single.php de nuestro theme y copiar el siguiente codigo:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a class="twitter-share-button" href="http://twitter.com/share"></a> data-url="<!--?php the_permalink(); ?-->"
data-via="sefsinalas"
data-text="<!--?php the_title(); ?-->"
data-related="sefsinalas:Fundador de ParaisoLinux"
data-count="vertical"&gt;Tweet

Obvio no es ese codigo exacto sino que hay que modificarlo:

• data-via – Esto le dice a twitter de quien es el twett original. Aqui deberan poner el nick de su cuenta, en mi caso es @sefsinalas
• data-related – Esto sirve para recomendar seguir a alguien despues de compartir la entrada. Puedes recomendar hasta 2 personas. El formato para hacerlo es: twitterusername:Descripcion del usuario
• data-count – Esto es para definir el estilo del boton. Tienes 3 opciones (vertical, horizontal, none).

Visto en wpbeginner