<!-- language-all: php --> A primeira observação é que [*é mais indicado criar um plugin*][1]<sup>(en)</sup> e fazer com que essa funcionalidade seja [*independente do tema*][2]<sup>(en)</sup>, assim, ao mudar de tema, é muito mais fácil fazer a migração do Slider. A segunda é que *só devemos usar outras versões de jQuery* <sup>(em vez da que vem embutida no WordPress)</sup> *se soubermos o que estamos fazendo*. Isso evita conflitos com outros plugins e temas. A falta de cuidado ao usar jQuery corretamente no WP é [responsável por inúmeros problemas][3]<sup>(en)</sup> e *bugs*. O plugin que segue é a adaptação do código da pergunta, observando o seguinte: - Como sempre, o ponto de partida é o código do [**Plugin Base Demo**][4] <sup>(do moderador @toscho no WordPress Developers)</sup>. É uma base [tag:OOP] limpa e pronta pra rodar. - **Estrutura dos arquivos** do plugin. Os arquivos marcados em cinza provêem do próprio plugin Nivo Slider. ![inserir a descrição da imagem aqui][5] - **Principais funções** do WordPress [`plugins_url`][6], [`wp_enqueue_script`][7], [`wp_register_script`][8], [`wp_enqueue_scripts`][9], [`get_children`][10] e [`wp_get_attachment_image_src`][11]. - Conferir o **uso de scripts como dependências**. Nosso arquivo personalizado (`nivo-start`) é carregado usando como dependencias um arquivo registrado (`nivo-pack`) e o jQuery embutido no WP. - Conferir o **uso do `$` como atalho para `jQuery`** no arquivo `start-nivo.js`. - O **Slider é usado como Shortcode**. Use <?php echo do_shortcode('[teste-nivo]'); ?> justo após o `<body>` no arquivo `header.php` do *theme* ativo. - **Para usar imagens dinâmicas** o ideal seria um *Custom Post Type*, mas neste exemplo usamos uma Página e colocamos seu ID no plugin (`$default_post = 648;`). Essa página pode ser deixada em Modo Rascunho. Faça o upload das imagens, a Legenda e a Descrição correspondem ao `post_excerpt` e `post_content` do arquivo anexado. - O plugin também aceita que o **Shortcode aponte para um post/página especifica**. Use <?php echo do_shortcode('[teste-nivo id="105"]'); ?> - O método privado **`get_nivo_page($id)`** renderiza o HTML a partir da `$id`. A padrão escrita no plugin ou a dinâmica passada pelo Shortcode. - O método privado **`get_nivo_default()`** faz o *output* da `string` HTML dentro do Shortcode é construido usando a [**sintaxe Heredoc**][12] do PHP. **Atenção para o identificador de fechamento**: o `HTML;` final *não deve ter **nenhum** espaço em branco antes do identificador*. Arquivo `meu-nivo-slider.php`: <?php /** * Plugin Name: (SOPT) Nivo Slider * Plugin URI: http://pt.stackoverflow.com/a/9546/201 * Description: Adaptação do exemplo básico do Nivo Slider como plugin de WordPress * Author: brasofilo * License: GPLv3 */ add_action( 'plugins_loaded', array ( B5F_Nivo_Slider::get_instance(), 'plugin_setup' ) ); class B5F_Nivo_Slider { protected static $instance = NULL; private static $default_post = 648; // AJUSTAR public $plugin_url = ''; public $plugin_path = ''; /** * Acessar a instancia de trabalho deste plugin. * * @wp-hook plugins_loaded * @return object of this class */ public static function get_instance() { NULL === self::$instance and self::$instance = new self; return self::$instance; } /** * Usado para iniciar os trabalhos normais do plugin. * * @wp-hook plugins_loaded * @return void */ public function plugin_setup() { $this->plugin_url = plugins_url( '/', __FILE__ ); $this->plugin_path = plugin_dir_path( __FILE__ ); add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) ); add_shortcode( 'teste-nivo', array( $this, 'shortcode' ) ); } /** * Constructor. Deixado publico e vazio intencionalmente. * * @see plugin_setup() */ public function __construct() {} /** * Carregar scripts e styles * * @wp-hook wp_enqueue_scripts */ public function enqueue () { wp_register_script( 'nivo-pack', $this->plugin_url . 'js/jquery.nivo.slider.pack.js' ); wp_enqueue_script( 'nivo-start', $this->plugin_url . 'js/start-nivo.js', array( 'jquery', 'nivo-pack' ), false, true ); wp_enqueue_style( 'nivo-css', $this->plugin_url . 'css/nivo-slider.css' ); } /** * Criar HTML para o Shortcode * * @wp-hook add_shortcode */ public function shortcode( $atts ) { // Shortcode definiu uma ID de post, eg, [teste-nivo id="NUMERO"] if( isset( $atts['id'] ) ) $output = $this->get_nivo_page( $atts['id'] ); // Shortcode não definiu uma ID, e a ID default existe elseif ( $nivo_page = get_post( self::$default_post ) ) $output = $this->get_nivo_page( $nivo_page->ID ); // O ID default não existe, usar template do demo else $output = $this->get_nivo_default(); return $output; } /** * Prepara o HTML puxando os attachments do post com $id * * @return string */ private function get_nivo_page( $id ) { $attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image' )); if( $attachments ) { $output = '<div id="slider" class="nivoSlider">'; foreach( $attachments as $attach ) { $image = wp_get_attachment_image_src( $attach->ID, 'full' ); $output .= sprintf( '%s<img src="%s" alt="" title="%s" />%s', empty( $attach->post_content ) ? '' : "<a href='$attach->post_content'>", $image[0], empty( $attach->post_excerpt ) ? '' : $attach->post_excerpt, empty( $attach->post_content ) ? '' : '</a>' ); } $output .= '</div>'; } else $output = '<h2>Faça upload de imagens no post/página!</h2>'; return $output; } /** * Prepara o HTML usando o código demonstrativo do Nivo * * @return string */ private function get_nivo_default() { $nivo_folder = $this->plugin_url . 'img'; $output = <<<HTML <div id="slider" class="nivoSlider"> <img src="$nivo_folder/nemo.jpg" alt="" /> <a href="http://example.com"><img src="$nivo_folder/toystory.jpg" alt="" title="#htmlcaption" /></a> <img src="$nivo_folder/up.jpg" alt="" title="This is an example of a caption" /> <img src="$nivo_folder/walle.jpg" alt="" /> </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> HTML; return $output; } } Arquivo `start-nivo.js`: jQuery( document ).ready( function( $ ) // $ como atalho de jQuery { $('#slider').nivoSlider({ effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: true, controlNav: true, controlNavThumbs: false, pauseOnHover: true, manualAdvance: false, prevText: 'Anterior', nextText: 'Seguinte', randomStart: false }); }); [1]: http://wordpress.stackexchange.com/questions/72160/where-do-i-put-the-code-snippets-i-found-here-or-somewhere-else-on-the-web "Pergunta no WordPress Developers" [2]: http://wordpress.stackexchange.com/questions/73031/where-to-put-my-code-plugin-or-functions-php "Pergunta no WordPress Developers" [3]: http://wordpress.stackexchange.com/search?q=jquery%20not%20working "Busca de posts no WordPress Developers" [4]: https://gist.github.com/toscho/3804204 "Código no Gist/GitHub" [5]: https://i.sstatic.net/ts78m.png [6]: http://codex.wordpress.org/Function_Reference/plugins_url "Documentação no WordPress Codex" [7]: http://codex.wordpress.org/Function_Reference/wp_enqueue_script "Documentação no WordPress Codex" [8]: http://codex.wordpress.org/Function_Reference/wp_register_script "Documentação no WordPress Codex" [9]: http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts "Documentação no WordPress Codex" [10]: http://codex.wordpress.org/Function_Reference/get_children "Documentação no WordPress Codex" [11]: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src "Documentação no WordPress Codex" [12]: http://es1.php.net/manual/pt_BR/language.types.string.php#language.types.string.syntax.heredoc "Documentação no manual do PHP"