slider archivos - Programación y Servidores web

Vamos a crear un sencillo plugin de nuestro Bootstrap Slider para mantener organizado nuesto fichero functions.php. Para ello solo tendremos que mover el código que incluimos en nuestro fichero functions.php de como crear un Bootstrap slider para WordPress Parte I.

Crearemos una nueva carpeta en /wp-content/plugins/ y llamaremos por ejemplo bootstrapSlider/slider.php y en ella copiaremos el siguiente código.

<?php
/**
 * Plugin Name: Bootstrap Slider para Wordpress
 * Plugin URI: https://wwww.artegrafico.net
 * Description: Bootstrap slider para WordPress, nos permitirá gestioanr las imágenes y orden de las diapositivas
 * Author: José Luis Rojo Sánchez
 * Author URI: https://wwww.artegrafico.net
 * Version: 0.1
 * Date: 03-11-2018
*/

define( 'BOOTSTRAP_SLIDER_VERSION', '0.0.1' );
define( 'BOOTSTRAP_SLIDER_MINIMUM_WP_VERSION', '4.0' );
define( 'BOOTSTRAP_SLIDER_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

if ( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) {
    require_once( BOOTSTRAP_SLIDER_PLUGIN_DIR . 'bootstrap-slider.php' );
    add_action( 'init', 'bootstrapSlider' );
}

<?php

/**

* Plugin Name: Bootstrap Slider para Wordpress

* Plugin URI: https://wwww.artegrafico.net

* Description: Bootstrap slider para WordPress, nos permitirá gestioanr las imágenes y orden de las diapositivas

* Author: José Luis Rojo Sánchez

* Author URI: https://wwww.artegrafico.net

* Version: 0.1

* Date: 03-11-2018

define( 'BOOTSTRAP_SLIDER_VERSION', '0.0.1' );

define( 'BOOTSTRAP_SLIDER_MINIMUM_WP_VERSION', '4.0' );

define( 'BOOTSTRAP_SLIDER_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

if ( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) {

require_once( BOOTSTRAP_SLIDER_PLUGIN_DIR . 'bootstrap-slider.php' );

add_action( 'init', 'bootstrapSlider' );

}

El siguiente fichero que vamos a crear es bootstrap-slider.php con el código de nuestra función. Y un fichero index.php que dejaremos vacío para proteger el listado del directorio si fuera el caso.

<?php

function bootstrapSlider() {
    $labels = [
	'name'               => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __
	'singular_name'      => _x( 'Slide', 'txt-domain'), 
	'menu_name'          => _x( 'Bootstrap Slider', 'txt-domain'),	
	'add_new'            => _x( 'Incluir', 'txt-domain'), // texto para incluir 
	'add_new_item'       => __( 'Incluir diapositiva', 'txt-domain'), // Nombre
	'new_item'           => __( 'Nueva diapositiva', 'txt-domain'), //
	'edit_item'          => __( 'Editar diapositiva', 'txt-domain'),
	'view_item'          => __( 'Ver diapositiva', 'txt-domain'),
	'all_items'          => __( 'Todas las diapositivas', 'txt-domain'),
	'featured_image'     => __( 'Imagen destacada', 'txt-domain' ),
	'search_items'       => __( 'Buscar diapositiva', 'txt-domain'),
	'parent_item_colon'  => __( 'Padre de la diapositiva:', 'txt-domain'),
	'not_found'          => __( 'No se encontraron diapositivas.', 'txt-domain'),
	'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

    $args = [
	'labels'             => $labels,
	'menu_icon'	     => 'dashicons-format-gallery',
        'description'        => __( 'Description.', 'txt-domain'),
	'public'             => true,
	'publicly_queryable' => true,
        'exclude_from_search' => true,
	'show_ui'            => true, // genera un UI para administrar este tipo en el gestor de WordPress.
	'show_in_menu'       => true, // Lo muestra en el menú de administración de WordPres.        
	'query_var'          => true,
	'rewrite'            => true,
	'capability_type'    => 'post', 
	'has_archive'        => true,
	'hierarchical'       => true,
	'menu_position'      => null, // posición en el menú.
	'supports'           => array('title','editor','author','thumbnail','revisions','page-attributes') ];
        

    // Podremos usar esta función para themes y plugins.  
    // Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...) 
    // Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).
    // - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.
    // - argumentos (array)
    // https://codex.wordpress.org/Function_Reference/register_post_type
    register_post_type( 'slider', $args );
}

<?php

function bootstrapSlider() {

$labels = [

'name' => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __

'singular_name' => _x( 'Slide', 'txt-domain'),

'menu_name' => _x( 'Bootstrap Slider', 'txt-domain'),

'add_new' => _x( 'Incluir', 'txt-domain'), // texto para incluir

'add_new_item' => __( 'Incluir diapositiva', 'txt-domain'), // Nombre

'new_item' => __( 'Nueva diapositiva', 'txt-domain'), //

'edit_item' => __( 'Editar diapositiva', 'txt-domain'),

'view_item' => __( 'Ver diapositiva', 'txt-domain'),

'all_items' => __( 'Todas las diapositivas', 'txt-domain'),

'featured_image' => __( 'Imagen destacada', 'txt-domain' ),

'search_items' => __( 'Buscar diapositiva', 'txt-domain'),

'parent_item_colon' => __( 'Padre de la diapositiva:', 'txt-domain'),

'not_found' => __( 'No se encontraron diapositivas.', 'txt-domain'),

'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

$args = [

'labels' => $labels,

'menu_icon' => 'dashicons-format-gallery',

'description' => __( 'Description.', 'txt-domain'),

'public' => true,

'publicly_queryable' => true,

'exclude_from_search' => true,

'show_ui' => true, // genera un UI para administrar este tipo en el gestor de WordPress.

'show_in_menu' => true, // Lo muestra en el menú de administración de WordPres.

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => true,

'menu_position' => null, // posición en el menú.

'supports' => array('title','editor','author','thumbnail','revisions','page-attributes') ];

// Podremos usar esta función para themes y plugins.

// Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...)

// Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).

// - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.

// - argumentos (array)

// https://codex.wordpress.org/Function_Reference/register_post_type

register_post_type( 'slider', $args );

}

Lo siguiente es abrir nuestro gestor y desde el menú plugins activarlo. De esta manera lo podremos reutilizar, mejorar, además de tenerlo todo más organizado.

Vamos a incluir a nuestro Theme de WordPress un slider creado con Bootstrap 4.1. También incluiremos de una forma muy sencilla un área gestionable para este tipo de post.

Lo primero que debemos hacer es editar el fichero functions.php de nuestro theme en el que incluiremos las llamadas a las librerías de bootstrap y sus dependencias (jQuery, etc …).

<?php
function add_styles() {
   wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
}

function add_scripts() {    
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
    wp_enqueue_script('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');
    wp_enqueue_script('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js');    
}

add_action('wp_enqueue_scripts', 'add_styles' );
add_action('wp_enqueue_scripts', 'add_scripts' );

<?php

function add_styles() {

wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

}

function add_scripts() {

wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

wp_enqueue_script('jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');

wp_enqueue_script('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js');

}

add_action('wp_enqueue_scripts', 'add_styles' );

add_action('wp_enqueue_scripts', 'add_scripts' );

Lo segundo que incluiremos es el código de gestión del slider para así gestionarlo más fácilmente. Para ello usaremos la función register_post_type($type, $args).

<?php
function bootstrapSlider() {
    $labels = [
	'name'               => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __
	'singular_name'      => _x( 'Slide', 'post type singular name'), 
	'menu_name'          => _x( 'Diapositivas', 'txt-domain'),	
	'add_new'            => _x( 'Incluir', 'txt-domain'), // texto para incluir 
	'add_new_item'       => __( 'Incluir diapositiva', 'txt-domain'), // Nombre
	'new_item'           => __( 'Nueva diapositiva', 'txt-domain'), //
	'edit_item'          => __( 'Editar diapositiva', 'txt-domain'),
	'view_item'          => __( 'Ver diapositiva', 'txt-domain'),
	'all_items'          => __( 'Todas las diapositivas', 'txt-domain'),
	'featured_image'     => __( 'Imagen destacada', 'txt-domain' ),
	'search_items'       => __( 'Buscar diapositiva', 'txt-domain''),
	'parent_item_colon'  => __( 'Padre de la diapositova:', 'txt-domain'),
	'not_found'          => __( 'No se encontraron diapositivas.', 'txt-domain'),
	'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

    $args = [
	'labels'             => $labels,
	'menu_icon'	     => 'dashicons-format-gallery',
        'description'        => __( 'Description.', 'txt-domain'),
	'public'             => true,
	'publicly_queryable' => true,
        'exclude_from_search' => true,
	'show_ui'            => true, // genera un UI para administrar este tipo en el gestor de WordPress.
	'show_in_menu'       => true, // Lo muestra en el menú de administración de WordPres.        
	'query_var'          => true,
	'rewrite'            => true,
	'capability_type'    => 'post', 
	'has_archive'        => true,
	'hierarchical'       => true,
	'menu_position'      => null, // posición en el menú.
	'supports'           => array('title','editor','author','thumbnail','revisions','page-attributes') ];
        

    // Podremos usar esta funcion para themes y plugins.  
    // Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...) 
    // Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).
    // - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.
    // - argumentos (array)
    register_post_type( 'slider', $args );
}
add_action( 'init', 'bootstrapSlider' );

<?php

function bootstrapSlider() {

$labels = [

'name' => _x( 'Bootstrap Slider Wordpress', 'txt-domain'), // Contiene el nonbre del post. usaremos _x para cambiar el idioma. Similar a __

'singular_name' => _x( 'Slide', 'post type singular name'),

'menu_name' => _x( 'Diapositivas', 'txt-domain'),

'add_new' => _x( 'Incluir', 'txt-domain'), // texto para incluir

'add_new_item' => __( 'Incluir diapositiva', 'txt-domain'), // Nombre

'new_item' => __( 'Nueva diapositiva', 'txt-domain'), //

'edit_item' => __( 'Editar diapositiva', 'txt-domain'),

'view_item' => __( 'Ver diapositiva', 'txt-domain'),

'all_items' => __( 'Todas las diapositivas', 'txt-domain'),

'featured_image' => __( 'Imagen destacada', 'txt-domain' ),

'search_items' => __( 'Buscar diapositiva', 'txt-domain''),

'parent_item_colon' => __( 'Padre de la diapositova:', 'txt-domain'),

'not_found' => __( 'No se encontraron diapositivas.', 'txt-domain'),

'not_found_in_trash' => __( 'No se encontraron diapositivas en la papelera.', 'txt-domain') ];

$args = [

'labels' => $labels,

'menu_icon' => 'dashicons-format-gallery',

'description' => __( 'Description.', 'txt-domain'),

'public' => true,

'publicly_queryable' => true,

'exclude_from_search' => true,

'show_ui' => true, // genera un UI para administrar este tipo en el gestor de WordPress.

'show_in_menu' => true, // Lo muestra en el menú de administración de WordPres.

'query_var' => true,

'rewrite' => true,

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => true,

'menu_position' => null, // posición en el menú.

'supports' => array('title','editor','author','thumbnail','revisions','page-attributes') ];

// Podremos usar esta funcion para themes y plugins.

// Cuidado con usar palabras reservadas por WordPres (post, page, attachment, revision, nav_menu_item, custom_css ...)

// Los argumentos son el tipo de post que queremos registrar y sus argumentos (array).

// - El tipo de post sin mayusculas, simbolos y espacios. Que no supere los 20 caracteres.

// - argumentos (array)

register_post_type( 'slider', $args );

}

add_action( 'init', 'bootstrapSlider' );

Ahora si entramos en nuestro gestor de WordPress veremos que se ha creado un nuevo menú para gestionar las entradas del slider. Si nos molestara podremos cambiarlo de posición.

El penúltimo paso es incluir es incluir nuestro slider al theme que estemos usando o el que estemos creando. En mi caso lo he incluido directamente al header.php. Lo que hago es y usar get_template_part() para llamar al fichero que contiene el código del slider y mantener un poco de orden en mi theme.

get_template_part('template-parts/header/slider', '');

1	get_template_part('template-parts/header/slider', '');

Y como último paso es incluir nuestro código el el fichero slider.php.

<div id="carousel-bootstrap-wordpress" class="carousel slide" data-ride="carousel">
  <!-- Indicadores de las diapositivas  -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="1"></li>
    <li data-target="#carousel-bootstrap-wordpress" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <?php 
    $args = ['post_type' => 'slider', 
            'posts_per_page' => 5,
            'orderby' => 'date',
            'order' => 'desc',
            'exclude' => '',
            'post_status' => 'publish'];
    
        $slider = get_posts($args); ?>
      <?php $count = 0; ?>
      <?php foreach($slider as $slide): ?>
      <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
          <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive" />
          <div class="carousel-caption-template d-md-block animated fadeInUp" style="animation-name: fadeInUp;animation-delay: 1s;animation-duration: 2s;">
            <h4><?php echo $slide->post_title; ?></h4>
            <p><?php echo $slide->post_content; ?></p>
          </div>
      </div>
      <?php $count++; ?>
    <?php endforeach; ?>
  </div>

   <a class="carousel-control-prev" href="#carousel-bootstrap-wordpress" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-bootstrap-wordpress" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</ol>

<?php

$args = ['post_type' => 'slider',

'posts_per_page' => 5,

'orderby' => 'date',

'order' => 'desc',

'exclude' => '',

'post_status' => 'publish'];

$slider = get_posts($args); ?>

<?php $count = 0; ?>

<?php foreach($slider as $slide): ?>

<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive" />

<h4><?php echo $slide->post_title; ?></h4>

<p><?php echo $slide->post_content; ?></p>

</div>

<?php $count++; ?>

<?php endforeach; ?>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Os tendría que quedar algo parecido a esto (el estilado al 100% y otras detalles de CSS ya son personal de cada uno):

Y eso es todo!

Etiqueta: slider

Creando un sencillo Plugin para WordPress de nuestro Bootstrap Slider, parte II

Incluir un slider creado con Bootstrap 4.1 y administrable por WordPress.