WordPress y jQuery

Muchos se encontraron con un problema muy particular con estos dos actores (parezco periodista :P ), y es que, en WordPress, hay otra librería que usa la función $(), por lo que no se llama a la correspondiente de jQuery. Así que esto no funciona:

$(document).ready(function(){
  alert('test');
});

Esto se arregla muy facilmente, incluyan esta línea al principio de su script:

$j = jQuery.noConflict();

Y reemplacen cada $ que tengan en el código con $j (puede ser cualquier cosa precedida por $):

$j(document).ready(function(){
  alert('test');
});

Otra solución: simplemente reemplazar cada $ por jQuery:

jQuery(document).ready(function(){
  alert('test');
});

EDITADO. Recién estaba viendo la página de jQuery, y explican un par de métodos. Para no transcribirlo, pueden echarle un vistazo: Atajos para jQuery, en el caso de trabajar con otra librería (como Prototype).

Ahora dejen de llorar, arreglen sus scripts y sigan desarrollando.

PD: si no les carga jQuery (la librería, no hablo de los scripts), pongan esto en el functions.php de su theme.

function my_jquery_load() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.4.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_jquery_load');

Page Cornr for October

En honor al mes de la lucha contra el cáncer de mama, Cathy Tibbles modificó mi plugin Page Cornr para que por defecto muestre la cinta rosa, representativa de dicha causa.

Me alegró mucho que le haya servido a alguien y que lo haya modificado por una causa tan importante, una causa que me toca de cerca y que realmente me emocionó :) .

Pueden bajarlo desde la página del plugin en WP.org.

WP Tuit: versión 0.9.4 y en WP.org

Acabo de terminar la versión 0.9.4 de WP Tuit y la subí al svn de WordPress.org, así que ahora lo pueden bajar desde la sección de plugins :mrgreen: » WP Tuit.

No hay mucho que decir, son pocos cambios:

  1. Le agregué un widget :D
  2. Ahora son dos funciones, una que es la original y la otra la usa el widget. De todas formas se puede usar esta última al editar el theme… si se quiere :P
  3. Para cambiar el estilo, se puede usar la clase .wp-tuit en la hoja de estilos (para <p /> y <ul />), aunque puede estar condicionado a los estilos superiores del theme :twisted: .

Y si, ya sé que me salté versiones, pero así “versiono” yo ;) .

Por último, para demostrar que confío en lo que hice, lo uso en mi blog :lol: .

Descarga: WP Tuit 0.9.4.

WP Tuit: mostrá tu último tuit

Pantallazo 1Hoy estaba aburrido y me puse a escribir otra forma de mostrar el último tuit de mi cuenta (si, obsesión :mrgreen: ). Pasé por PHP, después por jQuery y de nuevo a PHP. Una vez que lo tuve hecho, estuve divagando: “¿posteo el código? ¿o hago un plugin?”. Estaba por hacer el post con el código… pero cuando estaba a punto de hacerlo, pensé: “¿Por qué no complicarme haciendo el plugin?” :D .

Así que lo que ven en mi cabecera es el fruto de 2 horas de trabajo :P . Ya envié la solicitud al equipo de WordPress para hostear el plugin y que sea oficial, pero por ahora les pongo la información acá.

WP Tuit

Y si, WP Tuit, como me esforcé con el nombre, ¿no? :mrgreen:

Durante la programación me crucé con un par de problemas… pero la solución era tan tonta que me daba bronca no haberla pensado antes ¬¬

La instalación sigue siendo la misma… cosa fácil :P
Pantallazo 2

1. Subir wp-tuit.php a tu directorio /wp-content/plugins/
2. Activar el plugin mediante el menú Plugins de WordPress.
3. Ir a Opciones, WP Tuit y establecer el nombre de usuario de Twitter
4. Ir a Apariencia, Editor y escribir <php wp_tuit(); ?> donde quieras que aparezca tu último tuit.

Esta vez solo probé el plugin con WordPress 2.8.4… si no llega a andar en una versión anterior, se joden me avisan :) .

Descarga: WP Tuit.

WordPress: miniposts o asides

Esto es algo que seguramente muchos andan buscando o dejaron de buscar hace tiempo porque no lo encontraron :P . Estoy hablando de los miniposts o asides en WordPress. Los miniposts son posts que no pertenecen al estilo general, generalmente son para pequeños comunicados o para compartir un link, etc. Es molesto mostrar el estilo común de un post para algo tan corto, entonces se ideó esto.

Hay muchas formas de hacerlo (¿frase recurrente? ;) ) pero yo uso la forma más fácil que existe :mrgreen: , ¿quieren saberla? mmmm… no sé, creo que estoy dando demasiado últimamente… pero si insisten :P :

Abran el archivo index.php de su theme, seguramente se encontrarán con algo como esto:

<?php while (have_posts()) : the_post(); ?>

//contenido y estilos del post, por ejemplo
<div class="post">
	<h2><?php the_title(); ?></h2>
	<div class="entry">
		<?php the_content('Leer mas...'); ?>
	</div>
</div>

<?php endwhile; ?>

Ahora, lo que necesitan es que WordPress se fije si alguno de esos posts pertenece a la categoría de miniposts y, si pertenece, devolver algo diferente:

<?php while (have_posts()) : the_post(); ?>

<?php if (in_category(4)) : ?> //En este ejemplo, 4 es el ID de la categoría 'minipost'

//contenido y estilos del minipost, de nuevo, por ejemplo
<div class="minipost">
	<div class="minientry">
		<?php the_content(); ?>
	</div>
</div>

<?php else : ?>

//contenido y estilos del post, por ejemplo
<div class="post">
	<h2><?php the_title(); ?></h2>
	<div class="entry">
		<?php the_content('Leer mas...'); ?>
	</div>
</div>

<?php endif; ?>

<?php endwhile; ?>

Ok, terminamos. Realmente no hay nada que explicar, el código es muy sencillo y estoy seguro que lo van a entender… al menos eso espero :) . Ahora solo les queda editar el archivo style.css de su theme y agregar el estilo que desean darle a su minipost.

Ahora si, estoy falto de ideas, así que creo que se acabaron estos posts por un tiempo :mrgreen: .

Page Cornr: añade una esquina a tu blog :D

El otro día, leyendo un par de posts sobre diseño web, me encontré con este post de Soh Tanaka, en el que se explica como hacer un efecto de esquina plegada (page peel) con CSS y jQuery.

Pantallazo 1

Así se ve normalmente...

Bueno, después de implementarlo en un diseño que hice (tengo que terminarlo aún) me decidí a hacer un plugin para WordPress que terminé hoy. En tres días, tres versiones, así que la que está disponible en el repositorio de plugins es la 0.3 0.3.1 0.3.6 (Actualización: Ahora viene con el png fix para IE 6 :D ).

Page Cornr

Pues si, lo llamé Page Cornr :D .

Durante la adaptación de esta técnica a WordPress tuve un par de problemas, más que nada con javascript, tuve que modificar el js de Soh Tanaka para que funcionase con la versión de jQuery incluida en nuestro gestor de blogs favorito :) (le añade una línea al final del archivo que me ocasionó molestias hasta que me di cuenta). También tuve que sortear otro “problema”: para instalar el plugin había que modificar el theme que se esté usando. Lo solucioné con una función de WordPress para incluir Page Cornr en el pie de página (es sólo ubicación, la esquina siempre estará en la parte superior, a menos que editen el archivo CSS incluido).

Pantallazo 2

...y así cuando se pasa el mouse por encima

En la carpeta images/ del plugin están las imágenes que deben modificar a su gusto y los archivos .psd que capaz les sirvan ;) .

La instalación es igual a la de cualquier otro plugin:

1. Subir el contenido del archivo page-cornr.zip al directorio /wp-content/plugins.
2. Activar el plugin mediante el menú Plugins de WordPress.
3. Ir a Opciones, Page Cornr Options, donde podrán configurar el enlace de la esquina y el texto alternativo.

La próxima versión les llegará localizada: incluiré la traducción al español junto con los archivos para que puedan traducirlo al idioma que quieran. Debería estar lista la próxima semana (exámenes :? ).

Lo probé con WordPress 2.7.1, 2.8.1 y 2.8.2, por lo que seguramente no van a tener problemas, cualquier cosa me chiflan :P .

Descarga: Page Cornr.

Hasta la próxima! :D

Actualización: si el CSS de su theme establece un width para <body> (por ejemplo: body { width: 900px; }) la esquina no estará pegada al borde del monitor, ya que si bien usa position: absolute; top: 0; rigth: 0; para controlar la posición, al redimensionar <body> se pierde ese control.

AVISO: Algunos problemas con P2

AVISO: Parece que hay algunos problemas con P2, como se podrán dar cuenta en los posts que muestran el título. Al parecer P2 está generando el permalink desde el post, sin fijarse si el permalink está definido en la base de datos. Por lo pronto, accedan a los posts usando el link “Enlace permanente” de cada uno.