Gracias a la sugerencia de un amigo de distribuir libre mi tema Minority (que lo voy a hacer, en cuanto le realice unos ajustes), y lo que estoy aprendiendo sobre la creación de plugins, he podido llegar a la redacción de este artículo, vasto en longitud y en contenido.
¿Tema con plugin? ¿Tema con widget? ¿Tema y plugin?
En un grupo de Facebook acerca de WordPress se realizó la pregunta sobre cómo se podía implementar un slider como template. En un principio respondí que había que hacerlo mediante un widget, a lo que se volvió a preguntar que cómo se podía hacer sin widget.
Bien, obviamente necesitas una manera de indicarle al slider qué debe mostrar, para luego ubicarlo en algún sitio para que se ejecute. No sabiendo qué responder, dejé el tema en el olvido.
Modificación del menú de administración desde un tema
En mi estudio del ‘Manual de plugins’ del Codex de WordPress, llegué al último artículo ‘8. Ajustes’ y pensé que quería modificar la forma en que se implementa la ‘home page’ en mi tema Minority.
En mi anterior entrada de la serie ‘Temas WP’ ya vimos cómo podíamos crear un ítem del menú del panel de administración mediante un plugin.
Si cogemos todo y lo ponemos en la coctelera y la sacudimos, llegamos a la pregunta única: ¿podemos coger un widget y transformarlo a un ítem del menú admin, y hacer todo esto no con un plugin, sino con un tema?
Vamos a verlo.
La home page de mi tema Minority
La home page del tema Minority es muy ‘flipante’, lo reconozco, aunque adolece de diversos errores, más de concepto que técnicos (los cuales espero que sean enmendados por quienes así lo deseen cuando realice la distro libre).
Pero si hay algo que me molestaba sobremanera, era la gestión de la home page en el back-end que, sin ser excesivamente complicada, estaba poco clara.
Veamos el fichero home.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php get_header('inicio'); ?> <div id="cuerpo-central" class="row"> <!-- Zona widgets principal --> <div id="inicio-principal" class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <?php if( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'Widgets Cuerpo Principal' ) ) : endif; ?> </div> <canvas id="capaCanvas"></canvas> <!-- Zona widgets principal derecha --> <div id="inicio-sidebar" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <?php if( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'Widgets Cuerpo Principal Derecha' ) ) : endif; ?> </div> </div> <?php get_footer('inicio'); ?> |
Básicamente, este código llama a una cabecera header-inicio.php y a un pie footer-inicio.php, que son específicos para esta página, y crea dos zonas libres de widgets, para integrar en la primera el widget inicio_widget y en la otra el widget que cada uno prefiera.
El widget chiripitifláutico
Veamos ahora, el código del widget:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<?php /* ** Widget que genera un slider con los thumbnails de los artículos seleccionados */ class inicio_Widget extends WP_Widget { /* Registro del widget */ public function inicio_widget() { $widget_args = array( 'classname' => 'inicio_widget', 'description' => 'Mi widget de inicio', ); WP_Widget::__construct( 'inicio_widget', 'Inicio Widget', $widget_args ); } /* Muestra el contenido del widget */ public function widget( $args, $instance ) { // Extraer los argumentos del area de widgets extract( $args ); $titulo = apply_filters( 'widget_title', $this->name ); // A partir de aquí empezamos a construir el menú ?> <div id="cuerpo" class="parpadea navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Desplegar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <h2 class="puntero"><br><br><br><br><br><br><br><br><br><br><br><br></h2> <?php $elemento = explode(',',$instance['seleccion']); $cantidad = count( $elemento ); if( $cantidad>9 ) { $cantidad=9; } echo '<div class="collapse navbar-collapse navbar-ex1-collapse"><ul class="elemento'.$cantidad.' nav navbar-nav">'; $contador = 0; foreach($elemento as $articulo){ $contador++; if ( $contador <= $cantidad ) { $articulo = (int) $articulo; $categoria = get_term( $articulo, 'category' ); if ( !$categoria || is_wp_error( $categoria ) ) { ?> <li> <a href="<?php echo get_post_permalink( $articulo ); ?>"> <span class="puntero" onmouseover="arranca(event,'<?php echo get_the_title( $articulo ); ?>');" onmouseout="borra();">O</span><span class="titulo"><?php echo get_the_title( $articulo ); ?></span> </a> </li> <?php } else { ?> <li> <a href="<?php echo get_category_link( $articulo ); ?>"> <span class="puntero" onmouseover="arranca(event,'<?php echo get_cat_name( $articulo ); ?>');" onmouseout="borra();">O</span><span class="titulo"><?php echo get_cat_name( $articulo ); ?></span> </a> </li> <?php } } } echo '</ul></div>'; ?> </div> <?php } /* Formulario del back-end del widget */ public function form( $instance ) { $defecto=array('seleccion'=>''); $instance = wp_parse_args((array)$instance,$defecto); $seleccion = $instance['seleccion']; ?>Artículos, páginas y categorías: <?php echo '<select class="widefat">'; $argumentos = array ( 'post_type' => 'any', 'nopaging' => 'true', ); $consulta = new WP_Query( $argumentos ); if ( $consulta -> have_posts() ) { while ( $consulta -> have_posts() ) { $consulta -> the_post(); echo '<option value="">'.get_the_ID().' - '.get_the_title().'</option>'; } } $categorias = get_categories(); foreach( $categorias as $item ) { echo '<option value="">'.$item->cat_ID.' - '.$item->cat_name.'</option>'; } echo '</select>'; ?>Selección: <input class="widefat" type="text" name="<?php echo $this->get_field_name('seleccion'); ?>" value="<?php echo $seleccion; ?>"/><?php } /* Procesado del widget y salvado de los valores */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['seleccion'] = sanitize_text_field( $new_instance['seleccion'] ); return $instance; } /* Fin del widget */ } |
En la función form del widget existen dos elementos: el select nos permite ver tanto los artículos y las páginas como las categorías existentes en la base de datos, incluyendo el ID de cada uno, para poder después introducirlos en el input, manualmente, separados por comas. De esta forma, indicamos al widget los enlaces que queremos visualizar en la zona principal de la home page.
Por otro lado, en la función widget del widget, extraemos el parámetro introducido en el back-end, y generamos el menú adaptativo, eliminando los eventos onmouseover y onmouseout en dispositivos móviles, mediante CSS. En pantalla grande, se dispondrán en función de la cantidad de ítems que tenga el menú (hasta 9) según el mismo CSS, y los eventos serán los que ejecutarán el código JavaScript que generará con CSV el canvas.
El apoyo de inicio.css e inicio.js necesarios en la home page se consiguen mediante un condicional en functions.php:
|
1 2 3 4 5 6 7 |
if ( is_home() || is_front_page() ) { wp_enqueue_style( 'inicio', get_template_directory_uri() . '/css/inicio.min.css'); } if( is_home() || is_front_page() ) { wp_enqueue_script( 'javascript', get_template_directory_uri() . '/js/inicio.min.js', false ); } |
inicio.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
@font-face{font-family:'Orbitron';src:url('orbitron/Orbitron-Black.ttf');} body{font-family:'Orbitron', sans-serif;color:rgba(28,255,255,0.4);} #capaTexto{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:2;} #cabecera{height:15%;} #cuerpo{height:75%;} #pie{height:10%;} #inicio-principal{height:100%;z-index:2;} #inicio-principal #cuerpo{height:100%;} #inicio-principal #cuerpo ul{height:100%;} #capaCanvas{position:absolute;left:0px;top:0px;width:500px;height:250px;z-index:1;} p, h1, li{text-shadow:0px 0px 10px rgba(28,255,255,0.4), 0px 0px 20px rgba(28,187,187,0.4), 0px 0px 30px rgba(28,102,102,0.4), 0px 0px 70px rgba(28,34,34,0.4);} h1{text-align:center;font-size:5em;} #cabecera h2{text-align:center;color:rgba(28,255,255,0.5);} ul{list-style-type:none;} li{font-size:1.5em;} a{text-decoration:none;color:rgba(28,255,255,0.4);} @media only screen and (min-width: 768px){.parpadea{animation-name:parpadeo;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-name:parpadeo;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;background:transparent;border:none;} .titulo{display:none;}} @media (max-width:769px) {.puntero{display:none;}} @media handheld {.puntero{display:none;}} @-moz-keyframes parpadeo{0%{opacity:1.0;} 50%{opacity:0.0;} 100%{opacity:1.0;} } @-webkit-keyframes parpadeo{0%{opacity:1.0;} 50%{opacity:0.0;} 100%{opacity:1.0;} } @keyframes parpadeo{0%{opacity:1.0;} 50%{opacity:0.0;} 100%{opacity:1.0;} } @media(min-width: 768px) { ul.elemento1 li:nth-child(1){position:absolute;top:50%;left:50%;} ul.elemento2 li:nth-child(1){position:absolute;top:50%;left:33%;} ul.elemento2 li:nth-child(2){position:absolute;top:50%;left:66%;} ul.elemento3 li:nth-child(1){position:absolute;top:33%;left:25%;} ul.elemento3 li:nth-child(2){position:absolute;top:66%;left:50%;} ul.elemento3 li:nth-child(3){position:absolute;top:33%;left:75%;} ul.elemento4 li:nth-child(1){position:absolute;top:25%;left:25%;} ul.elemento4 li:nth-child(2){position:absolute;top:75%;left:25%;} ul.elemento4 li:nth-child(3){position:absolute;top:25%;left:75%;} ul.elemento4 li:nth-child(4){position:absolute;top:75%;left:75%;} ul.elemento5 li:nth-child(1){position:absolute;top:25%;left:20%;} ul.elemento5 li:nth-child(2){position:absolute;top:75%;left:20%;} ul.elemento5 li:nth-child(3){position:absolute;top:50%;left:50%;} ul.elemento5 li:nth-child(4){position:absolute;top:25%;left:80%;} ul.elemento5 li:nth-child(5){position:absolute;top:75%;left:80%;} ul.elemento6 li:nth-child(1){position:absolute;top:25%;left:16%;} ul.elemento6 li:nth-child(2){position:absolute;top:75%;left:16%;} ul.elemento6 li:nth-child(3){position:absolute;top:25%;left:50%;} ul.elemento6 li:nth-child(4){position:absolute;top:75%;left:50%;} ul.elemento6 li:nth-child(5){position:absolute;top:25%;left:84%;} ul.elemento6 li:nth-child(6){position:absolute;top:75%;left:84%;} ul.elemento7 li:nth-child(1){position:absolute;top:50%;left:10%;} ul.elemento7 li:nth-child(2){position:absolute;top:25%;left:30%;} ul.elemento7 li:nth-child(3){position:absolute;top:75%;left:30%;} ul.elemento7 li:nth-child(4){position:absolute;top:50%;left:50%;} ul.elemento7 li:nth-child(5){position:absolute;top:25%;left:70%;} ul.elemento7 li:nth-child(6){position:absolute;top:75%;left:70%;} ul.elemento7 li:nth-child(7){position:absolute;top:50%;left:90%;} ul.elemento8 li:nth-child(1){position:absolute;top:40%;left:12.5%} ul.elemento8 li:nth-child(2){position:absolute;top:80%;left:12.5%;} ul.elemento8 li:nth-child(3){position:absolute;top:20%;left:37.5%;} ul.elemento8 li:nth-child(4){position:absolute;top:60%;left:37.5%;} ul.elemento8 li:nth-child(5){position:absolute;top:40%;left:62.5%;} ul.elemento8 li:nth-child(6){position:absolute;top:80%;left:62.5%;} ul.elemento8 li:nth-child(7){position:absolute;top:20%;left:87.5%;} ul.elemento8 li:nth-child(8){position:absolute;top:60%;left:87.5%;} ul.elemento9 li:nth-child(1){position:absolute;top:25%;left:16%;} ul.elemento9 li:nth-child(2){position:absolute;top:50%;left:16%;} ul.elemento9 li:nth-child(3){position:absolute;top:75%;left:16%;} ul.elemento9 li:nth-child(4){position:absolute;top:25%;left:50%;} ul.elemento9 li:nth-child(5){position:absolute;top:50%;left:50%;} ul.elemento9 li:nth-child(6){position:absolute;top:75%;left:50%;} ul.elemento9 li:nth-child(7){position:absolute;top:25%;left:84%;} ul.elemento9 li:nth-child(8){position:absolute;top:50%;left:84%;} ul.elemento9 li:nth-child(9){position:absolute;top:75%;left:84%;}} .widget{background:transparent;border:rgba(28,255,255,.5) solid 4px;border-radius:12px;list-style-type:none;} .widgettitle{text-align:center;} .widget ul{border:rgba(28,255,255,.5) solid;margin:10px;padding:0 10px;} .widget ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .widget_text{border:none;} .widget_text ul{border:none;display:flex;} .widget_text ul li{padding:0px 10px 0px 10px;} #pie div:nth-child(1) p{margin:25% 0 0 0;} #pie .carousel-inner img{height:150px;margin:0 auto;} #pie #text-3{float:right;margin:20% 0 0 0;} |
inicio.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
// La primera función es arranca(event, text) // La función arranca gestiona los datos que necesitarán las otras funciones // y los tiempos, cuando se produce el evento onmouseover en un elemento 'li' function arranca(event,text){ // Tomamos la posición del ratón var xRaton = event.clientX; var yRaton = event.clientY; // Modificamos las coordenadas del canvas según la posición del ratón en pantalla document.getElementById("capaCanvas").style.top = yRaton - 125; document.getElementById("capaCanvas").style.left = xRaton - 250; // Necesitamos saber el scroll que tiene la página para rectificar var sv = jQuery(window).scrollTop(); jQuery("#capaCanvas").css({'top' : yRaton - 125 + sv, 'left' : xRaton - 250}); // En sendas variables metemos el canvas y el contexto var canvas = document.getElementById('capaCanvas'); var context = canvas.getContext('2d'); // Ahora, vemos las medidas del texto context.font = '20px Orbitron'; var metrics = context.measureText(text); var width = metrics.width; var x = canvas.width / 2; var y = canvas.height / 2; // Una vez ya tenemos los valores necesarios de todas las variables, ya podemos llamar a las funciones // Primero los círculos for (i=0; i<100; i++) (function(i){ t=setTimeout(function() {dibujar(i,x,y,context);},10*i); })(i); // A continuación, el rectángulo for (i=0; i<100; i++) (function(i){ t=setTimeout(function() {rectangulo(i,x,y,width+20,30,context);},10*i+1000); })(i); // Finalmente, el texto t=setTimeout(function() {texto(text,x,y,context);},2000); } // La función borra se ejecuta cuando se produce el evento onmouseout en el elemento 'li' function borra(){ var canvas = document.getElementById('capaCanvas'); canvas.width = canvas.width; } // Ahora las funciones que marcan el cursor activado // Primero, la función que dibuja los círculos y semicírculos function dibujar(i,x,y,context){ // Definimos primero el radio, los ángulos y la dirección del primer arco var radius1 = 50; var startAngle1 = (1+i/100) * Math.PI; var endAngle1 = (1+(i+1)/100) * Math.PI; var counterClockwise1 = false; // Dibujamos el path context.beginPath(); context.arc(x, y, radius1, startAngle1, endAngle1, counterClockwise1); context.lineWidth = 15; context.strokeStyle = 'rgba(28,255,255,0.5)'; context.stroke(); // El segundo arco var radius2 = 60; var startAngle2 = (0.5 - i/100) * Math.PI; var endAngle2 = (0.5 - (i+1)/100) * Math.PI; var counterClockwise2 = false; // Y el path context.beginPath(); context.arc(x, y, radius2, endAngle2, startAngle2, counterClockwise2); context.lineWidth = 3; context.strokeStyle = 'rgba(28,255,255,0.7)'; context.stroke(); // Lo cerramos var radius3 = 60; var startAngle3 = (0.5 + i/100) * Math.PI; var endAngle3 = (0.5 + (i+1)/100) * Math.PI; var counterClockwise3 = false; context.beginPath(); context.arc(x, y, radius3, startAngle3, endAngle3, counterClockwise3); context.lineWidth = 3; context.strokeStyle = 'rgba(28,255,255,0.7)'; context.stroke(); // Y el interno var radius4 = 40; var startAngle4 = (0.25 + i/100) * Math.PI; var endAngle4 = (0.25 + (i+1)/100) * Math.PI; var counterClockwise4 = false; context.beginPath(); context.arc(x, y, radius4, startAngle4, endAngle4, counterClockwise4); context.lineWidth = 3; context.strokeStyle = 'rgba(28,255,255,0.7)'; context.stroke(); } // Siguiente, el rectángulo function rectangulo(i,xInicial,yInicial,width,height,context){ // Primero definimos coordenada, ancho y alto var x=xInicial-(width/2)/100*i; var ancho=width/100*i; var y = yInicial + 5; var alto = height; // Y luego dibujamos context.strokeStyle = 'rgba(28,255,255,0.1)'; context.strokeRect (x, y, ancho, alto); } // Finalmente, el texto function texto (text, x, y, context){ context.font = '20px Orbitron'; context.textAlign = 'center'; context.fillStyle = 'rgba(28,255,255,1)'; context.fillText(text, x, y+30); } |
Se va del alcance de este artículo la explicación de todo este código. Me interesa más repasar el proceso para transformar el widget en un ítem del menú de administración de WordPress.
La modificación del menú de administración de WP
Cojamos primero el archivo stm-ancora.php que desarrollamos en el artículo ‘6. Nuestro primer plugin’ y seleccionemos todo el código a excepción de la cabecera. Nos vamos ahora al archivo functions.php y pegamos el código seleccionado, y probamos si funciona.
¡Bravo, funcionó! Esto quiere decir que con un tema podemos modificar el menú de administración (para mi no era tan obvio, soy un principiante en WP. Además, falta saber si el resto del código funcionará).
NOTA: Previamente, habremos desactivado el plugin (¡of course!).
Adaptación del widget al menú de administración
NOTA PREVIA: Aquí hay que coger el anterior artículo de la serie del Manual de Plugins, ‘8. Ajustes’, y vamos a repasarlo, ya que no es tan obvio a priori.
El proceso es el siguiente:
- Añadimos el ítem del menú, que a su vez será la sección. Lo enganchamos al hook ‘admin_menu’.
- Añadimos la sección, que la hacemos coincidir con el slug del ítem del menú.
- Añadimos el campo de ajuste o selección, que lo incluimos en la sección.
- Tanto el campo como la sección los enganchamos al hook ‘admin_init’.
- La función ligada al ítem del menú nos genera (como vimos en ‘6. Nuestro primer plugin’) la página de ajustes.
- Dentro de la función, creamos un formulario, donde seleccionamos los campos que componen la sección, mediante settings_fields( ‘stm_pagina-inicial’ );.
- El campo <select> lo dejamos como estaba.
- El campo donde indicamos los elementos que queremos en el menú pasa a ser así:
-
1<input type="text" name="stm_seleccion" value="<?php echo get_option( 'stm_seleccion' ); ?>" id="stm_seleccion" />
Quedando el código final así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
//Vamos a probar si la modificación del menú admin se puede hacer desde el theme function stm_ancora_menu() { add_menu_page( 'Inicio Minority', 'Inicio Minority', 'publish_pages', 'stm_pagina-inicial', 'stm_funcion_menu', '', '3' ); // add_submenu_page( 'stm-ancora/prueba-funcion-menu.php', 'Pagina principal', 'Pagina principal', 'publish_pages', 'stm_ancora_principal', 'stm_prueba_funcion_menu' ); // add_submenu_page( 'stm-ancora/prueba-funcion-menu.php', 'Pagina secundaria', 'Pagina secundaria', 'publish_pages', 'stm-ancora/prueba-funcion-menu.php', '' ); // remove_submenu_page( 'stm-ancora/prueba-funcion-menu.php', 'stm-ancora/prueba-funcion-menu.php' ); } add_action( 'admin_menu', 'stm_ancora_menu' ); // Antes de guardar valores hay que declararlos function stm_declaraciones() { add_settings_section( 'stm_pagina-inicial', 'Ejemplo de sección', 'stm_funcion_menu', 'general' ); add_settings_field( 'stm_seleccion', 'Seleccion', 'stm_pagina-inicial', 'general', 'stm_pagina-inicial' ); } add_action( 'admin_init', 'stm_declaraciones' ); // Registro de los ajustes function stm_registro_seleccion() { register_setting( 'stm_pagina-inicial', // Sección de ajuste 'stm_seleccion' // Nombre seleccion ); } add_action( 'admin_init', 'stm_registro_seleccion' ); function stm_funcion_menu() { ?> <div class="wrap"> <h2>Menú inicial Minority</h2> <form method="post" action="options.php"> <?php settings_fields( 'stm_pagina-inicial' ); $defecto=array('seleccion'=>''); ?>Artículos, páginas y categorías: <?php echo '<select>'; $argumentos = array ( 'post_type' => 'any', 'nopaging' => 'true', ); $consulta = new WP_Query( $argumentos ); if ( $consulta -> have_posts() ) { while ( $consulta -> have_posts() ) { $consulta -> the_post(); echo '<option value="">'.get_the_ID().' - '.get_the_title().'</option>'; } } $categorias = get_categories(); foreach( $categorias as $item ) { echo '<option value="">'.$item->cat_ID.' - '.$item->cat_name.'</option>'; } echo '</select><br>'; ?>Selección: <input type="text" name="stm_seleccion" value="<?php echo get_option( 'stm_seleccion' ); ?>" id="stm_seleccion" /><?php ?> <input type="submit"> </form> </div> <?php } |
Bien, ahora sí puedo decir que se puede crear un slider, o cualquier otra cosa, dentro de un tema WP, pues se puede sustituir el widget por un elemento del menú.
Para visionarlo por pantalla, ahora sólo tenemos que ir al fichero home.php y sustituir las siguientes líneas:
|
1 2 3 4 |
<?php if( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'Widgets Cuerpo Principal' ) ) : endif; ?> |
Por la función widget del widget:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// A partir de aquí empezamos a construir el menú ?> <div id="cuerpo" class="parpadea navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Desplegar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <h2 class="puntero"><br><br><br><br><br><br><br><br><br><br><br><br></h2> <?php $elemento = explode(',',$instance['seleccion']); $cantidad = count( $elemento ); if( $cantidad>9 ) { $cantidad=9; } echo '<div class="collapse navbar-collapse navbar-ex1-collapse"><ul class="elemento'.$cantidad.' nav navbar-nav">'; $contador = 0; foreach($elemento as $articulo){ $contador++; if ( $contador <= $cantidad ) { $articulo = (int) $articulo; $categoria = get_term( $articulo, 'category' ); if ( !$categoria || is_wp_error( $categoria ) ) { ?> <li> <a href="<?php echo get_post_permalink( $articulo ); ?>"> <span class="puntero" onmouseover="arranca(event,'<?php echo get_the_title( $articulo ); ?>');" onmouseout="borra();">O</span><span class="titulo"><?php echo get_the_title( $articulo ); ?></span> </a> </li> <?php } else { ?> <li> <a href="<?php echo get_category_link( $articulo ); ?>"> <span class="puntero" onmouseover="arranca(event,'<?php echo get_cat_name( $articulo ); ?>');" onmouseout="borra();">O</span><span class="titulo"><?php echo get_cat_name( $articulo ); ?></span> </a> </li> <?php } } } echo '</ul></div>'; ?> </div> |
Simplemente, deberemos cambiar donde pone:
|
1 |
$elemento = explode(',',$instance['seleccion']); |
Por esto otro:
|
1 |
$elemento = explode(',',get_option( 'stm_seleccion' )); |
El resultado en el front-end es el mismo que ya teníamos, y en el back-end lo podéis ver aquí:
Bien, hemos comprobado cómo podemos incluir un slider o cualquier otra cosa en un tema. En el siguiente artículo de la serie ‘Temas WordPress’ lanzaremos la distribución libre del tema Minority, para que todo el mundo pueda descargarla, probarla, mejorarla, criticarla o lo que le plazca hacer con ella.
Mientras tanto, por mi parte, seguiré con el estudio del Manual de Plugins del Codex de WordPress, que seguro que me ofrecerá más mejoras a realizar, tanto en plugins, como en mis temas.
