Te explico paso a paso, con un ejemplo y todo el código, cómo crear un ticker de noticias para WordPress sin plugins y totalmente personalizable.
- Tiempo de implementación:15/20 min
- Nivel de dificultad: Medio
Un ticker news es una barra superior, donde se muestran las últimas entradas de un feed, que puede ser el de tu sitio web o de otro. A nivel de SEO sirve para dar relevancia a las últimas URLs publicadas, lo cual es interesante para sitios que desean salir en Google News o Discover.
Paso 1: Crear un archivo JavaScript para el Ticker News
Crea un archivo llamado ticker-news.js en la carpeta js de tu tema de WordPress.
Añade el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
fetch('https://lawebdelaquequieresobtenerelfeed.com/feed/')
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
const items = data.querySelectorAll('item');
let newsItems = [];
items.forEach((item, index) => {
if(index < 7) { // Asegúrate de que se procesen al menos 7 noticias
let title = item.querySelector('title').textContent;
let link = item.querySelector('link').textContent;
newsItems.push(`<a href="${link}" target="_blank">${title}</a>`);
}
});
const ticker = document.querySelector('#ticker-news');
ticker.innerHTML = newsItems.join(' | ');
});
});
Sustituye esto: https://lawebdelaquequieresobtenerelfeed.com/feed/ por la URL correcta.
Paso 2: Añadir el archivo JavaScript al tema de WordPress
Añade el siguiente código al archivo functions.php de tu tema:
function enqueue_ticker_script() {
wp_enqueue_script('ticker-news', get_stylesheet_directory_uri() . '/js/ticker-news.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_ticker_script');Paso 3: Crear el CSS para el Ticker News
Añade el siguiente código al archivo style.css de tu tema:
#ticker-news {
position: relative;
top: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
padding: 5px 0;
z-index: 9999;
white-space: nowrap;
overflow: hidden;
/*text-overflow: ellipsis;*/
width: 300%; /* Aumenta el ancho para dar más espacio al contenido */
}
@keyframes scrolling {
0% {
transform: translateX(10%);
}
100% {
transform: translateX(-100%);
}
}
#ticker-news {
animation: scrolling 60s linear infinite; /* Aumenta el tiempo para que vaya más lento */
}
#ticker-news:hover {
animation-play-state: paused; /* Detiene la animación al pasar el ratón por encima */
}
#ticker-news a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
#ticker-news a:hover {
text-decoration: underline;
}
#top-container {
background-color: #000;
width: 100%;
position: relative;
}
@media (max-width: 768px) {
#ticker-news {
font-size: 14px;
}
Paso 4: Añadir el Ticker News al tema
Añade el siguiente código al archivo header.php de tu tema, justo después de la etiqueta <body>:
<div id="top-container">
<div id="ticker-news"></div>
</div>
Si usas algún sistema de caché, te recomiendo desinstalarlo durante la creación del ticker. Una vez habilitado comprueba que sigue funcionando correctamente. A veces estos plugins optimizan el JS y CSS. Si la optimización produjera erroes excluye el fichero JS de la optimización, y eventualmente las clases del ticker. En mi caso no he tenido ningún problema con LiteSpeed Cache.
