[Ayuda]Cómo crear shortcode slider

[MadDunDee]

Hola!

estoy tratando de crear un shortcode para manejar desde wordpress un paquete de imagenes. Para esto quiero utilizar la librería nivo. Lo que necesito es que el shortcode sea de este tipo.

[slider]
[ruta-absoluta-o-relativa-a-la-imagen-1]
[ruta-absoluta-o-relativa-a-la-imagen-2]
[ruta-absoluta-o-relativa-a-la-imagen-n]
[/slider]

O algo parecido a esto a esto, de forma que la salida sea

Código PHP:

  <div class="slider-wrapper theme-default">
                                    <div id="slider" class="nivoSlider">
                                        <img src="ruta-a-imagen.jpg" data-thumb="ruta-a-imagen.jpg" alt="texto" />
                                       <img src="ruta-a-imagen.jpg" data-thumb="ruta-a-imagen.jpg" alt="texto" />
                                       <img src="ruta-a-imagen.jpg" data-thumb="ruta-a-imagen.jpg" alt="texto" />
                                    </div>
                                    <div id="htmlcaption" class="nivo-html-caption">
                                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
                                    </div>
                                </div> 
   

No tengo mucha experiencia con php, esto es lo que he logrado hasta ahora

Código PHP:

  function nivo_slider_func( $atts ){
    extract(shortcode_atts(array('gallery_name'=>''),$atts));
    $output= "<div class='slider-wrapper theme-default'>";
    $output.=  "<div id='slider' class='nivoSlider'>";
    $atts = shortcode_atts(
        array(
            'url' => '',
            'title' => ''
        ), $atts);
        
    foreach ($atts as $thumb_id => $atts) {
        $src = $atts['url'];
        $title = $atts['title'];
        $output.=  "<img src='".$src."' data-thumb='".$src."' alt='".$title."' />";
    }
    $output.=  "</div></div>";
    return $output;
}
 
add_shortcode( 'nivo-slider', 'nivo_slider_func' ); 
   

Espero que me podáis echar una mano, no consigo que funcione correctamente.

Muchas gracias

[hasdpk]

He probado nivo y no me gusta, aunque por lo que ponen en los repositorios de wordpress es uno de los más relevantes.

Yo desarrollé uno desde cero utilizando la librería SlidesJS que es muy fácil de instalar y usar, y puedes ver unos ejemplo de su funcionamiento. Desde mi punto de vista, completo y sencillo de usar.

Si quieres saber usar los shortcode mirate la API (http://codex.wordpress.org/Shortcode_API), ahí te explica todo perfectamente sobre su implantación.

[MadDunDee]

Es muy interesante ese slider que pones. Pero mi problema es el mismo en los dos casos, necesito crear un shortcode que recoja las images y cree el código que necesita nivo o SlideJs.

Necesito que sea del tipo

[slider]
[image]http: //www .domain.com/images/1.jpg[/image]
[image]http: //www .domain.com/images/2.jpg[/image]
[image]http: //www .domain.com/images/n.jpg[/image]
[/slider]

Gracias por la referencia hasdpk!

[hasdpk]

Puedes echarle un vistazo a la API de los shortcode (http://codex.wordpress.org/Shortcode_API) y allí te explican cómo desarrollar lo que deseas.

Si tienes alguna duda puedes exponerla aquí. Eso sí, sólo te resolveremos las dudas.

[MadDunDee]

Muchas gracias de todos modos. Al final he encontrado la solución, la dejo aquí por si pudiera serle útil a alguien.

Código PHP:

  function nivo_slider_func($atts)
{
  extract(shortcode_atts(array('gallery_name' => ''), $atts));
  $output = "<div class='slider-wrapper theme-default'>";
  $output .= "<div id='slider' class='nivoSlider'>";
  $atts = shortcode_atts(
    array(
      'url' => '',
      'title' => ''
    ), $atts);
 
  foreach ($atts as $atts) {
    $src = $atts['url'];
    $title = $atts['title'];
    $output .= "<img src='" . $src . "' data-thumb='" . $src . "' alt='" . $title . "' />";
  }
  $output .= "</div></div>";
  return $output;
}
 
add_shortcode( 'slider', 'nivo_slider_func' ); 
   

Se trata de lograr un shortcode anidado, aquí la referencia - http://www.sitepoint.com/wordpress-nested-shortcodes/

Solo una última cuestión. El código que me genera este shortcode es de este tipo:

<p><img src="path" title="title" alt="alt" /></p>

Cómo puedo retirar el elemento de párrafo? Ya he intentado quitar los filtros:

Código PHP:

  remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize'); 
   

Pero se sigue generando este tag. Necesito que el código generado sea solo <img src="path" title="title" alt="alt" />

Gracias!

[zanguanga]

No sé si será una tontería pero ¿has probado a sustituir

Código:

function nivo_slider_func($atts)

por

Código:

function nivo_slider_func($atts, $content = null)

?

Y quizá en el return debería volver a aparecer . $content . antes de la etiqueta de cierre, creo.

Si no te funciona, yo volvería a revisar http://codex.wordpress.org/Shortcode_API o el tuto que has seguido. Estás a punto de conseguirlo

[MadDunDee]

Perdón, perdón! Volví a copiar el código inicial!

El código válido es el siguiente, este es el que funciona y genera el código necesario siendo un "nested shortcode"

Código PHP:

  add_shortcode( 'nivo_slider', 'nivo_slider_func' ); 
function nivo_slider_func( $atts, $content = null ) {
    $output  =  '<div class="slider-wrapper theme-default">';
    $output .=  '<div id="slider" class="nivoSlider">';
    $output .=  do_shortcode($content);
    $output .=  '</div></div>';
    return $output;
}

add_shortcode( 'image', 'nivo_image_shortcode' );
function nivo_image_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
    'title' => ''
    ), $atts )
    );
    return '<img src="'.$content.'"  data-thumb="'.$content.'" title="'.$atts['title'].'" alt="'.$atts['title'].'" />';
} 
   

Solo faltaría retirar la etiqueta de párrafo.

[MadDunDee]

Hola,

tengo un shortcode que genera código para un slider, el usuario simplemente tiene que pasarlo de esta manera:

[slider]
[image]http://path-to-image-1[/image]
[image]http://path-to-image-2[/image]
[image]http://path-to-image-3[/image]
[/slider]

La salida debería de ser esta:

Código PHP:

  <img src="http://path-to-image-1" title="title" alt="alt" /> 
   

Pero ahora es así:

Código PHP:

  <p><img src="http://path-to-image-1" title="title" alt="alt" /></p> 
   

Me gustaría saber cómo retirar la etiqueta de párrafo que mete con el autoformato. Para ello he tratado de controlarlo quitando estos filtros:

Código PHP:

  remove_filter('the_content', 'wpautop');  
remove_filter('the_content', 'wptexturize'); 
   

Pero no funciona, la etiqueta de párrafo sigue ahí. Alguien tiene alguna idea de cómo solucionar esto?

Gracias!

[rogertm]

Yo más bien revisaría la función que genera el shortcode, ¿la puedes mostrar?

[MadDunDee]

Por supuesto, aquí esta:

Código PHP:

  add_shortcode( 'nivo_slider', 'nivo_slider_func' ); 
function nivo_slider_func( $atts, $content = null ) {
    $output  =  '<div class="slider-wrapper theme-default">';
    $output .=  '<div id="slider" class="nivoSlider">';
    $output .=  do_shortcode($content);
    $output .=  '</div></div>';
    return $output;
}

add_shortcode( 'image', 'nivo_image_shortcode' );
function nivo_image_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
    'title' => ''
    ), $atts )
    );
    return '<img src="'.$content.'"  data-thumb="'.$content.'" title="'.$atts['title'].'" alt="'.$atts['title'].'" />';
} 
   

Espero que me podáis ayudar con esto, no encuentro la forma de corregirlo.

Muchas gracias!

[MadDunDee]

Habría alguna forma de controlar esto con la función de callback del mismo shortcode que genera las imagenes?

No logro hacerlo funcionar y es urgente, espero que me puedo ayudar alguien con esto.

Gracias!! :)