Contenido

Pon la información del FTP en tu wp-config.php

3 ene

+ 13

Generalmente cuando actualizamos un plugin o una versión de WordPress (algo que últimamente es demasiado común) podemos optar por la cómoda opción de actualizar automáticamente mediante subida directa del fichero al FTP de tu servidor. Esta opción te solucita los datos de tu servidor para poder realizar la conexión. Si has instalado una versión de WordPress a alguien que no debe tener esos datos, estás obligado a ir actualizándole tu mismo los plugins, core,…

Para evitar esto, puedes usar el fichero wp-config.php, que como ya vimos hace 2 años, era la piedra angular de la configuración de tu WordPress. En él podrás incluir los datos de tu FTP para que el usuario pueda actualizar sin problemas y sobretodo para que tu puedas vivir un poco más cómodo :D

Constantes en wp-config.php

Simplemente tendremos que guardar los datos en variables globales que el propio WordPress usará cuando las necesite.

define('FS_METHOD', 'ftpext'); // Método usado ("direct", "ssh", "ftpext", o "ftpsockets")
define('FTP_BASE', '/var/www/vhosts/chriscoyier.net/httpdocs/'); // Directorio base de tu FTP
define('FTP_USER', 'username'); // Username del FTP
define('FTP_PASS', 'password'); // Password del FTP
define('FTP_HOST', 'host'); // Ruta del Host del FTP
define('FTP_SSL', false); // Activar / Desactivar SSL de la conexión al FTP

Estas son las básicas que tu WordPress necesita para realizar la conexión, aunque disponemos de una serie más para personalizar más aún nuestra conexión:

define('FTP_CONTENT_DIR', '/path/to/wordpress/wp-content/'); // Ruta absoluta del directorio wp-content/ del FTP
define('FTP_PLUGIN_DIR ', '/path/to/wordpress/wp-content/plugins/'); // Ruta absoluta del directorio wp-content/plugins/ del FTP
define('FTP_PUBKEY', '/home/username/.ssh/id_rsa.pub'); // Ruta de las "public key" para conexiones SSH
define('FTP_PRIKEY', '/home/username/.ssh/id_rsa'); // Ruta de las "private key" para conexiones SSH
define('FS_CHMOD_DIR', (0755 & ~ umask())); // Sobreescritura de permisos de directorio
define('FS_CHMOD_FILE', (0644 & ~ umask())); // Sobreescritura de permisos de fichero

Todo esto está definido en Codex de WordPress.

WordPress Transients API, opciones que expiran en el tiempo

24 dic

+ 3

La gente de WordPress nos ofrece una API nueva para almacenar datos transitorios como hacíamos con la Options API pero especificando el tiempo que estos están disponibles.

// Graba un transient
set_transient($transient, $value, $expiration);

// Obtenemos un transient
get_transient($transient);

// Borramos un transient
delete_transient($transient);

Básicamente se trata de una serie de funciones que nos permitirá cachear datos en nuestras creaciones para WordPress. Una buena herramienta que nos permitirá mejorar el rendimiento de nuestras aplicaciones.

set_transient()

  • $transient identificador único de nuestros datos.
  • $value datos a guardar, estos datos se serializarán.
  • $expiration número de segundos que esperarán los datos en la caché.

Ejemplo:

set_transient('special_query_results', $special_query_results, 60*60*12);

get_transient()

  • $transient identificador único de nuestros datos.

Ejemplo:

$value = get_transient("codigodeejemplo");

delete_transient()

  • $transient identificador único de nuestros datos.

Ejemplo:

delete_transient("codigodeejemplo");

Ejemplo de uso

En WP-Engineer publican un ejemplo de sistema simple de caché con Transients API. En el ejemplo, nos muestra como cachear la nube de tags como ejemplo de uso para cachear datos de nuestras plantillas.

$tag_cloud = get_transient( 'tag_cloud' );
if ( false === $tag_cloud || '' === $tag_cloud ){
   $args = array('echo' => false);
   $tag_cloud = wp_tag_cloud( $args );
   set_transient( 'tag_cloud', $tag_cloud, 60*60*12 );
}
echo $tag_cloud;

Una herramienta muy útil para suavizar el impacto de nuestros trabajos sobre la base de datos de WordPress.

Convierte las rutas de tu WordPress en relativas

26 oct

+ 8

456 Berea St publica un pequeño script para convertir las url’s absolutas de nuestro WordPress en relativas. El script se basa en el uso de una expresión regular que elimina el protocolo y el dominio y nos deja la url recortada allá donde la usemos.

function make_href_root_relative($input) {
    return preg_replace('!http(s)?://' . $_SERVER['SERVER_NAME'] . '/!', '/', $input);
}

Esta función nos permitirá convertir cualquier url que le pasemos como parámetro, si además usamos el filtro asociado a the_permalink(), esto se propagará por la aplicación y reemplazará la mayoría de url’s que usen este método.

function root_relative_permalinks($input) {
    return make_href_root_relative($input);
}
add_filter( 'the_permalink', 'root_relative_permalinks' );

Una forma rápida de relativizar tus url’s :D

CSS Sprites para mejorar las fechas de tus posts

4 feb

+ 9

Hace ya tiempo, vimos como introducir un calendar con las fechas en tus posts. Un sistema que permite darle un aspecto diferente a tu wordpress. En WpBeginner dán un paso más y usando la CSS Sprites genera un elegante sistema que se basa en desplazarse por encima de una imágen para mostrar la fecha.

dates-css-sprites-large
(Ver Imagen)

Como vemos en la imágen, tenemos las fechas desde 2009 a 2014 y con el siguiente código CSS podremos mostrar el año que deseemos.

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

El código HTML encargado de mostrar las imágenes se basa en el uso de clases que indicarán que porción de imágen hay que mostrar.

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

El resultado es que mediante la carga de una única imágen disponemos de todas las fechas posibles entre estos 5 años y solo cambiando las clases de los hijos del elemento .postdate podremos mostrar una fecha u otra.

Deshabilitar el editor HTML de nuestro WordPress

19 ene

+ 7

Aunque sin él yo no podría escribir mis artículos, es posible deshabilitar el editor HTML de nuestro WordPress de una forma sencilla con alguna de estas opciones:

1) CSS: La opción con más estilo (¿lo pillais? :P)

Sin duda se trata de la solución más rápida y sencilla ya que simplemente tendremos que añadir un estilo CSS al panel de administrador.

// Añadir el CSS directamente
function removeHTMLEditorCSS(){
 echo '<style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>';
}

add_action('admin_head', 'removeHTMLEditorCSS');

// Añadir un fichero CSS externo
fichero: removeHTMLEditor.css
#editor-toolbar #edButtonHTML, #quicktags {display: none;}

wp_register_style('removeHTMLEditorCSS', '/ruta/css/removeHTMLEditor.css');
wp_enqueue_style('removeHTMLEditorCSS');

2) Javascript: La más rápida

Desde Javascript podemos borrar directamente el botón y no permitir usar esta opción:

function removeHTMLEditorJS(){
 echo 'jQuery(document).ready(function($) {
         $("#edButtonHTML").remove();
       });';
}

add_action('admin_footer', 'removeHTMLEditorJS');

3) PHP: La más limpia

En las dos anteriores, aunque son efectivas, dejamos la opción de recuperar la opción directamente desde el mismo navegador, desde PHP podemos eliminar el botón dejando la opción perfectamente deshabilitada.

function my_default_editor() {
 $r = 'tinymce'; // html or tinymce
 return $r;
}
add_filter( 'wp_default_editor', 'my_default_editor' );

// Versión reducida
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

Conclusión

Siempre que puedas estas cosas, deberían ir en un fichero de configuración alojado en el servidor y todas las opciones son igual de válidas.

Optimiza la frecuencia de refresco del RSS de tu WordPress

21 dic

+ 4

Un módulo del estandar RDF, concretamente el destinado sobre la frecuencia de sincronización, que este próximo año cumplirá 10 años de su aparición nos permite especificar la frecuencia con la que los agregadores de noticia deben comprobar si el feed ha cambiado.

Por defecto WordPress, asume que eres una máquina y que no paras de actualizar en todo el día:

<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>

WordPress nos añade dos filtros para modificar esta frecuencia a nuestro gusto. Para ello bastará con incluir estas líneas en el fichero functions.php de nuestro theme para conseguir una frecuencia de sincronización de 4 veces al día.

add_filter( 'rss_update_period',    create_function( '', 'return "daily";' ) );
add_filter( 'rss_update_frequency', create_function( '', 'return 4;' ) );

Via

Truco del campo oculto antispam para WordPress más fácil todavía

4 dic

+ 13

Este artículo hace ya más de un año que comencé a escribirlo y hoy que he tenido unos minutos para repasarlo y modificar un poco el código lo termino.

Hace ya mucho tiempo, Jose Ramón (Manz) publicó en Emezeta un sistema bastante ingenioso para capear el problema del SPAM en nuestros blogs.

El sistema

antispam3
(Ver Imagen)

El sistema, se basa en pensar de forma dual a la hora de implementar el formulario de comentarios de tu blog (que apartir de este momento, va a ser WordPress), y barajar la idea de que un robot pueda rellenar los campos automáticamente haciendo que sus comentarios entraran como un comentario normal. Akismet, y demás plugins antispam, tienen una gran lista de URL’s, agentes de usuarios, emails e IP’s que comprueban para comprobar que un robot es malicioso o no, pero estos sistemas, como ya bien sabemos, no son del todo eficaces. Por eso, hemos de engañar al robot :D

¿Como lo engañamos?

La propuesta de Manz, es la de añadir un campo oculto (mediante CSS) con el nombre del elemento destinado para el nombre del usuario, en el caso de WordPress usaremos author, con un valor X predefinido.

<input type="text" name="author" value="X" class="oculto" />
// CSS
input.oculto {display:none;}

Este campo, será el señuelo que los robots editarán automáticamente al procesar la página, principalmente por que es un <input /> y además se llama author, lo que hace complicado saber si esa página lo tiene implementado o es una trampa.

Para los usuarios, incluiremos un nuevo elemento <input /> con un nombre a nuestra elección.

<input name="nombrebueno" type="text" class="author" />

El usuario, verá este campo y será en el que introducirá su nombre de usuario. A simple vista podemos ver el problema que nos encontramos al realizar este cambio, el nombre del usuario siempre será X, ya que WordPress está preparado para leer author como nombre de usuario, y evidentemente no conoce el campo nombrebueno que hemos creado nosotros.

Por este motivo hemos de modificar el código de WordPress para añadir unas pocas líneas (voy a explicar como lo tenía yo antes de implementar la funcionalidad que veremos abajo):

wp-config.php
define("SPAM_CONTROL", "kaminitos"); // No sé por que puse eso...
wp-comment-post.php
$comment_author       = ( isset($_POST['author']) )  ? trim(strip_tags($_POST['author'])) : null;
$comment_author_email = ( isset($_POST['email']) )   ? trim($_POST['email']) : null;
$comment_author_url   = ( isset($_POST['url']) )     ? trim($_POST['url']) : null;
$comment_content      = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null;

// Añadimos el control del campo nuevo
if ($_POST["author"] != SPAM_CONTROL) die("SPAM");
$comment_author       = ( isset($_POST['secure']) )  ? trim(strip_tags($_POST['secure'])) : null;

Se puede hacer más sencillo, editando únicamente el fichero wp-comment-post.php, pero de esta forma tengo control sobre lo que aparece en el campo oculto.

Evidentemente, este sistema, me obliga a añadir esas dos líneas de código cada vez que actualizo WordPress, lo que se convierte en algo, que aunque no es laborioso, es muy pesado. Para evitar tener que modificar el código de WordPress en cada actualización, yo propongo este código.

Sistema antispam de campo oculto más cómodo :D

// Mensaje que mostramos a los SPAM
define('MESSAGE', 'SPAM!!!');
// Nombre del campo que usaremos para alojar el verdadero nombre del usuario
define('NOMBRE_CAMPO', 'secure');
// Clave única que será modificada por el bot
define('WP_ANTI_SPAM', 'kko');

add_filter('pre_comment_author_name', '_pre_comment_author_name');
function _pre_comment_author_name($comment_author_name = ''){
 // Devolvemos el nombre del autor sinó estamos pasando los campos necesarios
 if (!isset($_POST['author'], $_POST[NOMBRE_CAMPO])) return $comment_author_name;

 // Matamos el proceso
 if (isset($_POST['author']) && $_POST['author'] != WP_ANTI_SPAM) die(MESSAGE);

 // Cambiamos el nombre del author
 global $wpdb;
 return $wpdb->escape(trim(strip_tags($_POST[NOMBRE_CAMPO])));
}

function get_anti_spam_input($comment_author){
 return '<input type="hidden" name="'.NOMBRE_CAMPO.'" value="'.esc_attr($comment_author).'" />';
}

function anti_spam_input($comment_author){
 echo get_anti_spam_input($comment_author);
}

function get_author_input($comment_author){
 return '<input type="hidden" name="author" value="'.WP_ANTI_SPAM.'" />';
}

function author_input($comment_author){
 echo get_author_input($comment_author);
}

Este código, lo incluimos en el fichero functions.php de nuestro theme. Como vemos en la parte superior, tenemos 3 define() que nos permiten declarar 3 variablesconstantes que nos hará nuestro sistema más personalizable. Después, vemos una función que se aplica al filtro pre_comment_author_name en la que comprobamos que el campo oculto no ha sido modificado. En caso de detectar el cambio, matamos el proceso en ese mismo momento, mostrando el mensaje que hayamos definido previamente.

En caso de que el campo oculto no haya sido modificado, entonces reemplazaremos el nombre de usuario por el del campo visible para el usuario. Este sistema nos permite intercalar este proceso y hacer que en caso comentario válido, continúe sin ningún problema.

Modificar el theme

Después para facilitar el trabajo de modificación del theme, he añadido unos métodos para pintar (o devolver como cadena) los elementos <input /> que intervienen en este sistema. Usaremos, como siempre, el theme default de WordPress, y usaremos únicamente el fichero comment.php del mismo.

Básicamente, el único cambio que tendremos que realizar es el cambio de esta línea:

<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />

Por estas dos

<?php
 author_input($comment_author);
 anti_spam_input($comment_author);
?>

Estos dos funciones se encargarán de pintar los elementos <input /> que vamos a necesitar. Evidentemente, si tu theme tiene estilos o clases aplicados a estos elemento tendrás que modificarlos en las funciones get_anti_spam_input() get_author_input() del fichero functions.php que hemos incluido antes.

Sencillo, ¿verdad? :D

Resultado

El resultado, os puedo garántizar que es 100% satisfactorio y que junto a Akismet el SPAM (por el momento) deja de ser un problema.

La funcionalidad “post-image” de WordPress 2.9

17 nov

+ 13

Una de las nuevas funcionalidades que nos encontraremos en WordPress 2.9 es el llamado post-image, que como ya hemos explicado previamente se trata de un sistema que nos permite asociar a un post una imagen y poder usarla en un theme.

Justin Tadlock muestra un completo artículo mostrando como hacer uso de esta funcionalidad.

1) Permitir la funcionalidad

Como vimos en el post de las nuevas funcionalidades de WordPress 2.9, el theme iba a coger algo de relevancia permitiendo activar/desactivar funcionalidades de WordPress desde el fichero functions.php.

Esta capacidad nos permitirá activar esta funcionalidad añadiendo un simple línea a nuestro theme:

add_theme_support( 'post-thumbnails' );

Esta línea, nos activará la funcionalidad de post-image en nuestro WordPress, permitiendo que podamos ver un box más en nuestra página de “Nueva Entrada”.

wordpress-2.9-post-image
(Ver Imagen)

Allí podremos seleccionar una imagen que será asociada al post.

2) Usar la funcionalidad

Una vez asociada la imagen, ya solo nos queda hacer que nuestro theme muestre la imagen donde queramos. Para ello tenemos una serie de funciones que debemos conocer:

the_post_image($size)

Esta función nos permite mostrar la imagen en el punto en el que la llamamos, requiere estar incluida dentro del Loop para funcionar.

<?php while( have_posts() ) : the_post(); ?>
 <div>
 <h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 <?php the_post_image() ?>
 <?php the_content() ?>
</div>
<?php endif; ?>

Podemos usarla con un parámetro para especificar el tamaño de la imagen que queremos mostrar:

  • thumbnail
  • medium
  • full

Todas hacen referencia a la configuración de imagenes del apartado Opciones > Media de nuestro panel de control.

has_post_image()

Para comprobar si un post tiene asociada una imagen deberemos usar has_post_image() que nos devolverá true o false.

<?php
	if ( has_post_image() )
		the_post_image( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

get_post_image_id()

Si necesitamos obtener el ID de la imagen podremos hacer uso de esta función que nos devolverá el ID.

$image_id = get_post_image_id();

get_the_post_image( $id, $size )

Si necesitamos obtener la imagen de un post fuera del Loop podemos acceder directamente a ella indicándole el ID del post y el tamaño de la imagen que necesitamos.

$image = get_the_post_image( $post->ID, 'thumbnail' );

3) Filtros y actions

Además de las funciones que nos permiten trabajar cómodamente con la imágen asociada, tenemos una serie de filtros que nos permiten personalizar más aún la funcionalidad y obtener resultados de lo más dispares.

//Filters
 - post_image_size
 - post_image_html
// Actions
 - begin_fetch_post_image_html
 - end_fetch_post_image_html

Veamos un ejemplo de Justin nos muestra con el que podemos cambiar el HTML de salida de la imagen que vamos a mostrar.

add_filter( 'post_image_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id );
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
	return $html;

}

Se trata de una gran funcionalidad, que muchos desarrolladores de themes estarán deseando usar en sus creaciones.

La optimización definitiva de WordPress

17 nov

+ 7

Hay que reconocer que aunque WordPress es un buen software tiene una serie de puntos débiles que hacen que trabajar con él nos dé más de un dolor de cabeza. Entre los problemas que más detectamos es el excesivo consumo de memoria y de recursos en general que necesita para funcionar eficazmente. En estos casos, lo mejor es, sin duda, optimizar todo lo que WordPress necesita para funcionar, desde el servidor web hasta el servidor de base de datos pasándo por las imágenes que servimos y el javascript que le hacemos llegar al usuario. Con esta guía podrás optimizar al milímetro cualquier aspecto de la instalación de tu WordPress.

Excerpt2Content, muestra todo el contenido a tus usuarios

4 nov

+ 12

Muchos son los mails que he recibido pidiendome una solución al problema de que el theme de su WordPress muestra solo una pequeña porción del contenido. Esto es debido a que el theme que están usando está haciendo uso de la función the_excerpt() en lugar de the_content().

La diferencia es que la primera nos muestra únicamente el extracto del artículo, sino lo hemos redactado este cogerá las primeras 55 palabras (por defecto) del artículo, eliminando tags HTML como <img />, <strong />,… haciendo que el contenido tenga un aspecto de “extracto” del original. Generalmente este contenido está seguido de unos puntos suspensivos indicando que el artículo no está completo ([…]). Lo que hace que el usuario tenga que acceder a leer el artículo directamente para ver el contenido completo.

Por otro lado, the_content() nos muestra el contenido completo y nos permite cortarlo donde queramos mediante el uso de 2 tags:

  • <!--more-->: Añade un texto de “Leer Más” (que puedes cambiar) al final de la página principal y que te lleva al artículo completo.
  • <!--nextpage-->: Te permite generar una paginación y cada tag generará una página nueva.

anieto2k_excerpt
(Ver Imagen)

Muchos themes traen the_excerpt() por defecto, ya que la teoría dice (y la práctica lo demuestra) que al mostrar parte del contenido, el usuario genera un mayor número de páginas vistas (una de la página principal y una por cada noticia que quiere ver completa) pero en muchos casos quieres mostrar imágenes o simplemente no quieres que el usuario tenga que acceder a ver un post completo para leer toda la noticia, en estos casos tenemos varias soluciones.

1) Reemplazar the_excerpt() por the_content()

La primera solución sería la de buscar en el theme que estamos usando la palabra the_excerpt() y reemplazarla por the_content() haciendo que siempre se muestre el contenido.

2) Añadir filtro a the_excerpt()

Otra solución más sencilla y fácil de deshacer sería la de añadir un pequeño (muy pequeño) filtro a la llamada the_excerpt() para hacer que nos devuelva el contenido completo.

function excerpt2content(){
 return get_the_content();
}
// Añadimos excerpt2content al filtro
add_filter('get_the_excerpt', 'excerpt2content');

Este código, puede ir alojado en el fichero functions.php del theme y si queremos volver al estado inicial, simplemente tendremos que eliminar estas 4 líneas para volver a la normalidad :D