Nota: hemos escrito este artículo pensando en usuarios avanzados; necesitarás ciertos conocimientos de programación para realizar estas tareas. Como siempre, activa Jetpack Backup para que puedas revertir fácilmente tu sitio en caso de cometer algún error. Los hooks son una forma de que un fragmento de código interactúe con otro o lo modifique. Constituyen la base de la forma en que Jetpack interactúa con el núcleo de WordPress.
Si tienes preguntas sobre cómo usarlos tú mismo, pregunta a la comunidad de Jetpack en los foros. Si quieres contratar ayuda, ponte en contacto con un servicio como Codeable.
Los administradores del sitio utilizan el Acelerador del sitio de Jetpack — una CDN ultrarrápida y lista para usar para un número ilimitado de archivos — para acelerar sus sitios web y reducir el consumo de ancho de banda.
Como no hay dos sitios iguales, puede haber ocasiones en las que tenga sentido desactivar ciertos aspectos de la CDN o cambiar la forma en que procesa las imágenes. Hoy veremos cómo utilizar hooks para modificar la funcionalidad del Acelerador del sitio y personalizarlo según las necesidades específicas de tu sitio.
Antes de utilizar hooks:
- Es importante que pongas un prefijo a tus funciones para evitar conflictos con temas o plugins. Aquí usamos el prefijo jetpackblog_.
- No es necesario editar directamente los archivos del tema — utiliza un plugin de funcionalidades para añadir fragmentos de código de forma segura.
Las CDN almacenan imágenes en caché, lo que puede causar problemas mientras pruebas o experimentas con cambios de diseño. Puedes impedir que Jetpack procese imágenes mientras realizas cambios con el siguiente fragmento de código:
add_filter( 'jetpack_photon_development_mode', '__return_true' );Cómo desactivar el Acelerador del sitio
Cuando combinas el potente filtro jetpack_photo_skip_image con algunas de las funciones condicionales de WordPress, obtienes un control muy preciso sobre cuándo y dónde servir imágenes desde la CDN.
Puede que quieras desactivar la CDN si utilizas el mismo nombre de archivo para representar imágenes que cambian periódicamente; por ejemplo, una imagen de cabecera que cambia cada semana, pero cuyo nombre de archivo siempre es headerimage1.jpg. El Acelerador del sitio no vacía su caché, sino que almacena las imágenes en caché para siempre. Para cambiar una imagen, debe tener un nombre de archivo nuevo, por lo que las técnicas habituales para vaciar la caché no funcionarán.
Desactivar la CDN de imágenes en las páginas
Cómo desactivar Jetpack CDN en páginas específicas:
Para desactivar la CDN en páginas específicas, utiliza la siguiente lógica condicional junto con el filtro jetpack_photo_skip_image.
function jetpackblog_101() {
if ( is_page( 101 ) ) {
add_filter( 'jetpack_photon_skip_image', '__return_true' );
}
}
add_action( 'wp', 'jetpackblog_101' );O bien, a la función is_page() también se le puede pasar un slug.
function jetpackblog_home() {
if ( is_page( 'home' ) ) {
add_filter( 'jetpack_photon_skip_image', '__return_true');
}
}
add_action( 'wp', 'jetpackblog_home' );Desactivar la CDN de imágenes en las entradas
La función is_single() es muy similar a la función is_page() y funciona con cualquier tipo de entrada, excepto los archivos adjuntos y las páginas.
Cómo desactivar Jetpack CDN en entradas específicas
Esto es muy similar al ejemplo anterior de las páginas, pero se aplica a entradas individuales.
function jetpackblog_302() {
if ( is_single( 302 ) ) {
add_filter( 'jetpack_photon_skip_image', '__return_true' );
}
}
add_action( 'wp', 'jetpackblog_302' );Controlar la caché según la URL de la imagen
El filtro jetpack_photon_skip_image no es la única forma de controlar qué imágenes almacena la CDN en caché. De forma predeterminada, Jetpack almacena en caché tanto las imágenes del sitio como las externas, así que, si enlazas directamente a una imagen de un sitio externo, también la añadirás a la caché de la CDN.
Cómo forzar a Jetpack CDN a almacenar en caché las imágenes en tu propio servidor
Si sirves una imagen dinámica desde un sitio externo (por ejemplo, la imagen cambia periódicamente, pero la URL permanece igual), la caché de la CDN no se actualizará. En esta situación, quizá quieras almacenar en caché únicamente las imágenes internas.
function jetpackblog_external( $skip, $image_url, $args, $scheme ) {
// Obtén la URL de tu sitio, sin el protocolo
$site_url = preg_replace( '~^(?:f|ht)tps?://~i', '', get_site_url() );
/**
* Si la URL de la imagen pertenece a tu sitio,
* devuelve el valor predeterminado (false, salvo que otra función lo sobrescriba).
* De lo contrario, no utilices la CDN
*/
if ( strpos( $image_url, $site_url ) ) {
return $skip;
} else {
return true;
}
}
add_filter( 'jetpack_photon_skip_for_url', 'jetpackblog_external', 9, 4 );Cómo cambiar la forma en que Jetpack CDN procesa las imágenes
De forma predeterminada, Jetpack comprime automáticamente las imágenes que se suben a la CDN. Sin embargo, algunos sitios —por ejemplo, un blog de fotografía— pueden querer mostrar las imágenes con su calidad original, independientemente del tamaño del archivo. Aquí es donde entra en juego el filtro jetpack_photon_pre_args.
function sa_custom_params( $args ) {
$args['quality'] = 100;
return $args;
}
add_filter( 'jetpack_photon_pre_args', 'sa_custom_params' );En el ejemplo anterior, el parámetro de calidad está establecido en 100, lo que significa que las imágenes se subirán con la máxima calidad. Si quieres hacer aún más personalizaciones, hay varios argumentos de consulta compatibles para ajustar con precisión la forma en que Jetpack procesa tus imágenes.
Algunas marcas pueden querer aplicar los mismos filtros y ajustes a todas las imágenes para mantener la coherencia. Veamos un ejemplo en el que la calidad de la imagen está establecida en 100, se aplica un filtro sepia y se eliminan los metadatos.
function sa_custom_paramsfilter( $args ) {
$args['quality'] = 100;
$args['filter'] = 'sepia';
$args['strip'] = 'all';
return $args;
}
add_filter( 'jetpack_photon_pre_args', 'sa_custom_paramsfilter' );Personaliza el Acelerador del sitio de Jetpack con hooks
El Acelerador del sitio de Jetpack puede mejorar el rendimiento de tu sitio. Sin embargo, a veces necesitas personalizar su funcionalidad para adaptarla a tu situación específica. Con unos conocimientos básicos, puedes crear reglas personalizadas para optimizar la forma en que utilizas la CDN. Obtén más información sobre el uso de etiquetas condicionales en tu sitio de WordPress o explora otros hooks para CDN.
Jetpack 