Crear una marquesina en SKT Themes

Para el theme: SKT NewsPaper Pro
https://www.sktthemes.org/shop/newspaper-wordpress-theme/

--

Kindly copy/paste below code in your theme's functions.php file:



// [news-ticker limit="10"]
function news_ticker_function( $atts ) {
extract( shortcode_atts( array(
'limit' => ''
), $atts ) );
ob_start();
?>
<div direction="left">
<?php $args = array( 'post_type' => 'post', 'posts_per_page' => $limit );
query_posts( $args );
if ( have_posts() ) {
while ( have_posts() ) { the_post();
?>

<span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>

<?php } } else { ?><span>No news availabe.</span><?php } ?>

<?php wp_reset_query(); ?>
</div>

<?php
$output_string = ob_get_contents();
ob_end_clean();
return $output_string;
}
add_shortcode( 'news-ticker', 'news_ticker_function' );


And copy/paste below code in your theme's style.css file:



.marquee{margin: 0 auto; overflow: hidden; white-space: nowrap; width: 100%;}
.marquee span{animation: marquee 20s linear infinite; border-right: solid 1px #fff; color: #fff; display: inline-block; left: 100%; list-style: none; margin-right: 25px; padding-right: 25px; position: relative; vertical-align: top;}
.marquee span a{color: #fff;}
.marquee:hover span{animation-play-state: paused;}
@keyframes marquee{
0%{left: 100%;}
100%{left: -100%;}
}


Now use below shortcode where you want to show the news ticker:



[news-ticker limit="10"]



No hay comentarios:

Publicar un comentario

Déjame Tu Comentario Aquí