Agregue NivoSlider con un tipo de publicación personalizada al tema de WordPress

Nota: este mensaje está obsoleto.

Hoy voy a enseñarle cómo incluir correctamente un jQuery de NivoSlider en su tema de WordPress con unos sencillos pasos de copiar / pegar. Para los propósitos de este tutorial, le mostraré cómo crear un tipo de publicación de ‘diapositivas’ personalizada que usaremos para obtener todas las ‘publicaciones’ del control deslizante; sin embargo, puede cambiar fácilmente el bucle para obtener las publicaciones. de una determinada categoría, etiqueta … etc.

Paso 1: Obtenga el código de Dev7Studios

Antes de hacer cualquier cosa, obviamente necesitará descargar la última versión de Javascript y CSS para NivoSlider. Puede obtenerlo del autor (dev7studios) haciendo clic en la imagen a continuación:

Paso 2: agregue el CSS a su archivo Style.css

A continuación, querrá copiar todo el CSS que acaba de descargar para Nivoslider y pegarlo en su archivo style.css principal ubicado en la carpeta de su tema donde agrega el control deslizante de imagen. Simplemente copie y pegue en la parte inferior de su hoja de estilo; querrá volver después para remodelarla como desee.

Paso 3: agregue JavaScript para el cursor

Luego, debe agregar el JavaScript requerido para que el cursor funcione. Deberá llamar a su nivoslider js que descargó previamente de su functions.php y luego iniciar el script en su archivo header.php.

una. Agregue JS a Functions.php

Agregue lo siguiente a su functions.php, que obtendrá primero el archivo JS principal de la API de Google y luego llamará al archivo nivoslider JS que descargó en el paso 1 y necesita agregarlo a su carpeta de temas en una subcarpeta llamada “js”

// include jQuery wp_enqueue_script('jquery');
// include nivoslider JS
wp_enqueue_script('nivoSlider', get_stylesheet_directory_uri() . '/js/jquery.nivo.slider.pack.js'); }

B. Iniciar guion

A continuación, querrá iniciar el script agregando el siguiente javascript al archivo justo antes de la ubicación del cursor (eche un vistazo a todas las increíbles opciones para el cursor en dev7studios y cámbielas en consecuencia).

Alternativamente (y la mejor manera de hacerlo) sería agregar esto en la parte superior de su archivo nivo js o en un nuevo archivo js y ponerlo en cola correctamente.

<script type="text/javascript"> jQuery(function($){ $(window).load(function() { $('#slider').nivoSlider(); }); }); </script>

Paso 4: Agregue diapositivas Soporte de miniaturas y tipo de mensaje personalizado

Para agregar un nuevo tipo de publicación personalizada llamada ‘diapositivas’, simplemente inserte el siguiente código en su archivo functions.php:

//Register post type for slider
add_action( 'init', 'create_post_types' ); function create_post_types() { register_post_type( 'slides', array( 'labels' => array( 'name' => _x( 'Slides', 'post type general name' ), 'singular_name' => _x( 'Slide', 'post type singular name' ), 'add_new' => _x( 'Add New', 'Slide' ), 'add_new_item' => __( 'Add New Slide' ), 'edit_item' => __( 'Edit Slide' ), 'new_item' => __( 'New Slide' ), 'view_item' => __( 'View Slide' ), 'search_items' => __( 'Search Slides' ), 'not_found' => __( 'No Slides found' ), 'not_found_in_trash' => __( 'No Slides found in Trash' ), 'parent_item_colon' => '' ), 'public' => true, 'exclude_from_search' => true, 'supports' => array('title','thumbnail','editor'), ) ); }

Si su tema aún no lo tiene, querrá agregar soporte para miniaturas de WP, hágalo insertando lo siguiente en su archivo functions.php.

// activate post-image function
add_theme_support( 'post-thumbnails' );

Paso 5: crea y agrega el bucle para tu control deslizante

Ahora que tiene todos los js / css en su lugar y ha creado su tipo de publicación personalizada para diapositivas, debe llamar a sus publicaciones donde desea que se muestre el cursor. Ya he creado todo el código para ti, así que copia y pega el siguiente bucle get_posts donde quieras que aparezca el cursor.

<?php 
// get custom post type ==> slides
global $post; $args = array( 'post_type' =>'slides', 'numberposts' => -1, 'orderby' => 'ASC' ); $slider_posts = get_posts($args); ?> <?php // show slider only if slides exist if($slider_posts) { ?> <div id="slider-wrap"> <div id="slider"> <?php // start the loop foreach($slider_posts as $post) : setup_postdata($post); // get image $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide'); ?> <a href="https://www.wpexplorer.com/nivoslider-wordpress/<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" width="" height="" title="<?php the_title(); ?>" /></a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div><!--/slider nivoSlider--> </div><!--/slider-wrap --><?php } ?>

Paso 6: agregue un archivo single-slides.php a su tema

Como puede ver en el bucle, agregué un enlace a las diapositivas para que pueda llevarlas a una página con el contenido agregado en el editor para esa diapositiva. De forma predeterminada, WordPress usará su archivo single.php para presentar el contenido de las diapositivas. Si desea que sus páginas de diapositivas se vean diferentes, puede hacerlo creando un nuevo archivo llamado single-slides.php y diseñándolo de la manera que desea que sean las páginas de diapositivas. También puede eliminar los enlaces por completo y solo tener un control deslizante de imagen 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba