Ten en cuenta: el tema móvil quedó obsoleto en marzo de 2020. La siguiente información se conserva para la posteridad.
Hola, usuarios de Jetpack,
Es posible que ya conozcas el módulo Tema móvil: muestra tu contenido en una interfaz limpia y despejada para teléfonos, lo que facilita que los visitantes accedan a tu publicación más reciente desde cualquier lugar.
Si has activado el módulo Tema móvil, los visitantes móviles verán una nueva página de inicio azul:
Pero ¿sabías que podías personalizar el aspecto de este Tema móvil? Con unos sencillos cambios, puedes hacer que la experiencia móvil de tu sitio se parezca más a la versión de pantalla completa. Puedes personalizar tanto los tipos de contenido que aparecen en la página de inicio móvil como los colores y el encabezado.
Personaliza el contenido de tu página de inicio
El Tema móvil incluye dos opciones para la página de inicio:
- Puedes elegir mostrar extractos o publicaciones completas en las páginas de inicio y de archivo.
- Puedes mostrar una promoción de las aplicaciones móviles de WordPress en el pie de página.
Accede a estas opciones haciendo clic en Configurar debajo del Tema móvil en el menú de Jetpack.
Cambia el aspecto del tema
Tiene un precioso tono azul, pero ¿qué pasaría si el Tema móvil pudiera usar la misma combinación de colores que tu tema de escritorio? ¿El mismo encabezado y fondo? Por suerte, ¡puedes hacer eso y mucho más!
Veremos tres formas de personalizar el Tema móvil. Según lo que quieras hacer y lo cómodo que te sientas con el código, puedes realizar cambios mediante el Personalizador, con CSS o con acciones y filtros.
Mediante el Personalizador
Si tu tema incluye un Fondo personalizado o un Encabezado personalizado, las imágenes o los colores se transferirán automáticamente al Tema móvil, sin necesidad de realizar ningún trabajo adicional.
Para empezar con los encabezados y fondos, ve a Apariencia >> Temas en tu escritorio y haz clic en «Personalizar»:
Si tu tema de escritorio los admite, podrás especificar un encabezado personalizado o un fondo personalizado para tu escritorio y para el tema móvil de Jetpack.
Mediante el módulo CSS personalizado
Jetpack incluye un módulo llamado Personalizado CSS que te permite añadir tu propio código CSS sin tener que editar la hoja de estilos de tu tema. El editor de CSS personalizado está disponible en Apariencia >> Editar CSS dentro de tu escritorio.
Es posible que lo hayas usado para hacer cambios en tu tema de escritorio, pero también incluye una opción compatible con dispositivos móviles:
Si eliges la opción compatible con dispositivos móviles, todo tu código CSS personalizado también se aplicará al tema móvil.
También puedes usar CSS para realizar cambios específicos del tema móvil. Para ello, usa la clase .mobile-theme para seleccionar únicamente el tema móvil.
Mediante acciones y filtros
El tema móvil de Jetpack, al igual que otros temas y plugins, utiliza acciones y filtros para añadir datos y funciones a tu sitio. Si quieres eliminar o editar algunas de las funciones del tema móvil, puedes crear un pequeño plugin.
Aquí tienes un pequeño ejemplo: añadiremos las imágenes de Gravatar de los autores de las entradas antes de cada entrada en la página de inicio para móviles. Para ello, crearemos una nueva función llamada jetpackme_author_image, y conectaremos esa función al filtro the_content.
// Check if we are on mobile
function jetpackme_is_mobile() {
// Are Jetpack Mobile functions available?
if ( ! function_exists( 'jetpack_is_mobile' ) )
return false;
// Is Mobile theme showing?
if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
return false;
return jetpack_is_mobile();
}
// Let's add the post author's Gravatar image, but only if we're on a mobile device
function jetpackme_maybe_add_filter() {
// On mobile, and on the home page?
if ( jetpackme_is_mobile() && is_home() ) {
add_filter( 'the_content', 'jetpackme_author_image' );
}
}
add_action( 'wp_head', 'jetpackme_maybe_add_filter' );
// Build the function
function jetpackme_author_image( $content ) {
global $post;
$avatar = get_avatar( $post->post_author );
return $avatar . $content;
}
Podrías usar un método similar para añadir, editar o eliminar funciones del tema móvil. (Si lo haces, ¡cuéntanos las cosas geniales que hayas creado con el Tema móvil de Jetpack!)
¿Hay algo más que te gustaría saber sobre el Tema móvil de Jetpack? ¿Hay algún módulo de Jetpack sobre el que te gustaría obtener más información? ¡Cuéntanoslo!
Jetpack 