{"id":3579,"date":"2016-06-28T09:00:03","date_gmt":"2016-06-28T12:00:03","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3579"},"modified":"2019-03-16T03:00:53","modified_gmt":"2019-03-16T06:00:53","slug":"wordpress-criando-widgets-personalizados","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/wordpress-criando-widgets-personalizados\/","title":{"rendered":"WordPress – Criando Widgets personalizados"},"content":{"rendered":"

A utiliza\u00e7\u00e3o de widgets se torna um diferencial em nossos temas pela facilidade de utilizar,\u00a0implementar\u00a0e explorar novos recursos.<\/p>\n

Para desenvolver um widget, voc\u00ea precisar\u00e1 basicamente\u00a0entender a classe WP_Widget<\/em> e implementar alguns m\u00e9todos, que seriam: \u00a0<\/strong>__construct, widget, form, e update.<\/em><\/p>\n

Veremos neste artigo como criar widget para WordPress<\/a> de forma simples e pr\u00e1tica.<\/p>\n

Abaixo temos uma classe de exemplo com\u00a0os\u00a0m\u00e9todos comentados:<\/p>\n

<?php\r\n \r\nclass Exemplo_Widget extends WP_Widget {\r\n \r\n \/**\r\n * Registrar o Widget no WordPress\r\n *\r\n *\/\r\n public function __construct() {\r\n \/**\r\n * Chamando a classe __construct pai\r\n * $id_base => Define Identifica\u00e7\u00e3o\r\n * $name => Define o Nome que ser\u00e1 exibido\r\n * $widget_options => Configura\u00e7\u00f5es extras\r\n *\/\r\n parent::__construct($id_base, $name, $widget_options);\r\n }\r\n \r\n \/**\r\n * O que ser\u00e1 mostrado na parte administrativa\r\n * do WordPress\r\n *\/\r\n public function form($instance) {\r\n \r\n }\r\n \r\n \/**\r\n * O que salvar\u00e1 os dados do widget no banco de dados\r\n *\/\r\n public function update($new_instance, $old_instance) {\r\n \r\n }\r\n \r\n \/**\r\n * O que ser\u00e1 exibido no Tema\r\n *\/\r\n public function widget($args, $instance) {\r\n \r\n }\r\n \r\n}<\/pre>\n
Agora vamos criar algo pr\u00e1tico.<\/p>\n
No nosso site, precisamos criar um widget que exiba os posts mais comentados, informando o titulo do post, o link e quantidade de coment\u00e1rios.<\/p>\n
Obs: Para nosso tutorial, utilizarei a vers\u00e3o\u00a04.5.2 do WordPress e o tema twentytwelve, mas voc\u00ea poder\u00e1 utilizar\u00a0outras vers\u00f5es do WordPress e outros temas tamb\u00e9m.<\/em><\/p>\n
Criaremos uma pasta chamada widget<\/em>\u00a0e dentro dela ser\u00e1 criado um arquivo chamado : most_commented_posts.php<\/em>
\n\"criando_widget_01\"<\/a><\/p>\n
Colocarei por partes pra facilitar o entendimento.<\/p>\n
O c\u00f3digo estar\u00e1 com coment\u00e1rios.<\/p>\n
Criamos a classe Most_Commented_Posts<\/em> e estendemos a classe WP_Widget.<\/em><\/p>\n
<?php\r\n \r\n\/**\r\n * Criamos a classe, estendendo WP_Widget\r\n *\/\r\nclass Most_Commented_Posts extends WP_Widget {<\/pre>\n
Agora vamos definir o construtor e chamar classe Pai do construtor pra definir as configura\u00e7\u00f5es do Widget.<\/p>\n
\n
\/**\r\n * Vamos registrar o Widget no WordPress\r\n *\/\r\npublic function __construct() {\r\n    \/\/Identificador do widget\r\n    $id_base = 'most_commented_posts';\r\n    \/\/Nome do Widget que ser\u00e1 exibido\r\n    $name = 'Posts Mais Comentados';\r\n    \/\/Adicionado Descri\u00e7\u00e3o do widget\r\n    $widget_options = array('description' => 'Exibir os posts mais comentados');\r\n    parent::__construct($id_base, $name, $widget_options);\r\n}<\/pre>\n<\/div>\n
\n
Definiremos agora\u00a0o m\u00e9todo form<\/em>, que \u00e9 respons\u00e1vel por exibir o formul\u00e1rio na parte administrativa do WordPress<\/p>\n
\n
\/**\r\n  * O formul\u00e1rio que ser\u00e1 exibido\r\n  * no painel administrativo no WordPress\r\n  *\/\r\n public function form($instance) {\r\n     \/\/Verifica se existe um titulo, sen\u00e3o ficar\u00e1 em branco\r\n     $title = isset($instance['title']) ? $instance['title'] : '';\r\n     \/\/Verficia se existe o valor que ser\u00e1 exibido, sen\u00e3o ter\u00e1 o valor de 5\r\n     $number = isset($instance['number']) ? $instance['number'] : 5;\r\n \r\n     \/**\r\n      * Aqui criamos label, e input para ser inserido e exibido o valor do t\u00edtulo\r\n      *\/\r\n    \/**\r\n      * Aqui criamos label, e input para ser inserido e exibido o valor do t\u00edtulo\r\n      *\/\r\n     echo '<p>\r\n                 <label for=\"' . $this->get_field_id('title') . '\">T\u00edtulo<\/label>\r\n                 <input class=\"widefat\" id=\"' . $this->get_field_id('title') . '\" name=\"' . $this->get_field_name('title') . '\" value=\"' . esc_attr($title) . '\">\r\n          <\/p>';\r\n     \/**\r\n      * Aqui criamos label, e input para ser inserido\r\n      * e exibido a quantidade de post que ser\u00e1 exibido\r\n      *\/\r\n     echo '<p>\r\n                 <label for=\"' . $this->get_field_id('number') . '\">Quantidade a ser Exibido<\/label>\r\n                 <input class=\"widefat\" id=\"' . $this->get_field_id('number') . '\" name=\"' . $this->get_field_name('number') . '\" value=\"' . esc_attr($number) . '\">\r\n             <\/p>';\r\n }<\/pre>\n
Agora vamos para o m\u00e9todo update, que ser\u00e1 respons\u00e1vel por salvar as novas informa\u00e7\u00f5es.<\/p>\n<\/div>\n
\n
\/**\r\n   * Vamos salvar as informa\u00e7\u00f5es\r\n   * $new_instance => valores que ser\u00e3o salvos\r\n   * $old_instance => valores que est\u00e3o no banco de dados\r\n   *\/\r\n  public function update($new_instance, $old_instance) {\r\n      $instance = array();\r\n      $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';\r\n      $instance['number'] = (!empty($new_instance['number']) ) ? (int) $new_instance['number'] : '';\r\n  }<\/pre>\n<\/div>\n
\n
Abaixo temos o\u00a0m\u00e9todo widget, que ser\u00e1 respons\u00e1vel por exibir widget no tema<\/p>\n
\n
\/**\r\n   * O que ser\u00e1 exibido no tema (FronteEnd)\r\n   *\/\r\n  public function widget($args, $instance) {\r\n      \/\/Aplica o t\u00edtulo,  criado por n\u00f3s, atribuido ao widget\r\n      $title = apply_filters('widget_title', $instance['title']);\r\n      $number = $instance['number'] ? (int) $instance['number'] : 5;\r\n \r\n      \/**\r\n       * Instancia a classe WP_Query:\r\n       * Ordernar poelo total comentarios, em forma descrecente\r\n       * exibindo o valor determinado: $number\r\n       *\/\r\n      $wp = new WP_Query(array('orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => $number));\r\n \r\n      \/\/Verifica se tem post\r\n      if ($wp->have_posts()) {\r\n \r\n          \/\/Elemento a ser inserido antes de todo widget.\r\n          echo $args['before_widget'];\r\n          \/\/Verifica se n\u00e3o tiver vazio o $title\r\n          if (!empty($title)) {\r\n              \/**\r\n               * $args['before_title']: Texto a ser inserido antes de todo t\u00edtulo.\r\n               * $title : Titulo definido no wiget\r\n               * $args['after_title'] :Texto a ser inserido depois de todo t\u00edtulo.\r\n               *\/\r\n              echo $args['before_title'] . $title . $args['after_title'];\r\n          }\r\n \r\n          \/\/\r\n          echo '<ul class=\"most_commented_posts\">';\r\n          \/\/Listar os posts\r\n          while ($wp->have_posts()) {\r\n              $wp->the_post();\r\n              \/**\r\n               * Exibi O t\u00edtulo com link, e total de coment\u00e1rios\r\n               *\/\r\n              echo '<li>';\r\n              echo '<h3><a href=\"' . get_permalink() . '\">' . get_the_title() . ' (' . get_comments_number(get_the_ID()) . ')<\/a><\/h3>';\r\n              echo '<li>';\r\n          }\r\n          echo '<\/ul>';\r\n          \/\/Elemento a ser inserido depois de todo widget.\r\n          echo $args['before_widget'];\r\n      }\r\n  }<\/pre>\n
Agora vamos ao c\u00f3digo da classe Most_Commented_Posts<\/em><\/p>\n
\n
<?php\r\n \r\n\/**\r\n * Criamos a classe, estendendo WP_Widget\r\n *\/\r\nclass Most_Commented_Posts extends WP_Widget {\r\n \r\n    \/**\r\n     * Vamos registrar o Widget no WordPress\r\n     *\/\r\n    public function __construct() {\r\n        \/\/Identificador do widget\r\n        $id_base = 'most_commented_posts';\r\n        \/\/Nome do Widget que ser\u00e1 exibido\r\n        $name = 'Posts Mais Comentados';\r\n        \/\/Adicionado Descri\u00e7\u00e3o do widget\r\n        $widget_options = array('description' => 'Exibir os posts mais comentados');\r\n        parent::__construct($id_base, $name, $widget_options);\r\n    }\r\n \r\n    \/**\r\n     * O formul\u00e1rio que ser\u00e1 exibido\r\n     * no painel administrativo no WordPress\r\n     *\/\r\n    public function form($instance) {\r\n        \/\/Verifica se existe um titulo, sen\u00e3o ficar\u00e1 em branco\r\n        $title = isset($instance['title']) ? $instance['title'] : '';\r\n        \/\/Verficia se existe o valor que ser\u00e1 exibido, sen\u00e3o ter\u00e1 o valor de 5\r\n        $number = isset($instance['number']) ? $instance['number'] : 5;\r\n \r\n         \/**\r\n         * Aqui criamos label, e input para ser inserido e exibido o valor do t\u00edtulo\r\n         *\/\r\n        echo '<p>\r\n                    <label for=\"' . $this->get_field_id('title') . '\">T\u00edtulo<\/label>\r\n                    <input class=\"widefat\" id=\"' . $this->get_field_id('title') . '\" name=\"' . $this->get_field_name('title') . '\" value=\"' . esc_attr($title) . '\">\r\n             <\/p>';\r\n        \/**\r\n         * Aqui criamos label, e input para ser inserido\r\n         * e exibido a quantidade de post que ser\u00e1 exibido\r\n         *\/\r\n        echo '<p>\r\n                    <label for=\"' . $this->get_field_id('number') . '\">Quantidade a ser Exibido<\/label>\r\n                    <input class=\"widefat\" id=\"' . $this->get_field_id('number') . '\" name=\"' . $this->get_field_name('number') . '\" value=\"' . esc_attr($number) . '\">\r\n                <\/p>';\r\n    }\r\n \r\n    \/**\r\n     * Vamos salvar as informa\u00e7\u00f5es\r\n     * $new_instance => valores que ser\u00e3o salvos\r\n     * $old_instance => valores que est\u00e3o no banco de dados\r\n     *\/\r\n    public function update($new_instance, $old_instance) {\r\n        $instance = array();\r\n        $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';\r\n        $instance['number'] = (!empty($new_instance['number']) ) ? (int) $new_instance['number'] : '';\r\n    }\r\n \r\n    \/**\r\n     * O que ser\u00e1 exibido no tema (FronteEnd)\r\n     *\/\r\n    public function widget($args, $instance) {\r\n        \/\/Aplica o t\u00edtulo,  criado por n\u00f3s, atribuido ao widget\r\n        $title = apply_filters('widget_title', $instance['title']);\r\n        $number = $instance['number'] ? (int) $instance['number'] : 5;\r\n \r\n        \/**\r\n         * Instancia a classe WP_Query:\r\n         * Ordernar poelo total comentarios, em forma descrecente\r\n         * exibindo o valor determinado: $number\r\n         *\/\r\n        $wp = new WP_Query(array('orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => $number));\r\n \r\n        \/\/Verifica se tem post\r\n        if ($wp->have_posts()) {\r\n \r\n            \/\/Elemento a ser inserido antes de todo widget.\r\n            echo $args['before_widget'];\r\n            \/\/Verifica se n\u00e3o tiver vazio o $title\r\n            if (!empty($title)) {\r\n                \/**\r\n                 * $args['before_title']: Texto a ser inserido antes de todo t\u00edtulo.\r\n                 * $title : Titulo definido no wiget\r\n                 * $args['after_title'] :Texto a ser inserido depois de todo t\u00edtulo.\r\n                 *\/\r\n                echo $args['before_title'] . $title . $args['after_title'];\r\n            }\r\n \r\n            \/\/\r\n            echo '<ul class=\"most_commented_posts\">';\r\n            \/\/Listar os posts\r\n            while ($wp->have_posts()) {\r\n                $wp->the_post();\r\n                \/**\r\n                 * Exibi O t\u00edtulo com link, e total de coment\u00e1rios\r\n                 *\/\r\n                echo '<li>';\r\n                echo '<h3><a href=\"' . get_permalink() . '\">' . get_the_title() . ' (' . get_comments_number(get_the_ID()) . ')<\/a><\/h3>';\r\n                echo '<li>';\r\n            }\r\n            echo '<\/ul>';\r\n            \/\/Elemento a ser inserido depois de todo widget.\r\n            echo $args['before_widget'];\r\n        }\r\n    }\r\n \r\n}<\/pre>\n<\/div>\n
Nessa pasta widget, vamos criar um arquivo chamado bootstrap.php. Esse arquivo ser\u00e1 respons\u00e1vel por registrar o widget<\/em> que criamos:<\/p>\n
\n
<?php\r\n \r\n\/\/Inclui o arquivo : most_commented_posts.php\r\nrequire_once \"most_commented_posts.php\";\r\n \r\n\/\/Fun\u00e7\u00e3o para registar o widget\r\nfunction register_most_commented_widget(){\r\n    \/\/Registra o widget que criamos\r\n     register_widget( 'Most_Commented_Posts' );\r\n}\r\n \r\n\/\/Com fun\u00e7\u00e3o add_action, atribuimos uma fun\u00e7\u00e3o, usando o gancho widgets_init\r\nadd_action( 'widgets_init', 'register_most_commented_widget' );<\/pre>\n<\/div>\n
Agora no arquivo functions.php<\/em>, incluiremos o arquivo boostrap.php<\/em><\/p>\n
\n
require_once \"widget\/bootstrap.php\";<\/pre>\n
Agora acesse Apar\u00eancia > Widgets.<\/em> Do lado esquerdo \u00e9 poss\u00edvel observar o novo\u00a0widget que criamos.<\/p>\n<\/div>\n
\"criando_widget_03\"<\/a><\/div>\n<\/div>\n<\/div>\n
\n
Agora basta arrastar para a \u00e1rea da sidebar do tema.<\/p>\n<\/div>\n
\"criando_widget_02\"<\/a><\/div>\n
Pronto! Seu Widget customizado est\u00e1 criado.<\/div>\n<\/div>\n
\n
Gostou do artigo? Compartilhe e deixe seu coment\u00e1rio.<\/p>\n
Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
A utiliza\u00e7\u00e3o de widgets se torna um diferencial em nossos temas pela facilidade de utilizar,\u00a0implementar\u00a0e explorar novos recursos. Para desenvolver um widget, voc\u00ea precisar\u00e1 basicamente\u00a0entender a classe WP_Widget e implementar alguns m\u00e9todos, que seriam: \u00a0__construct, widget, form, e update. Veremos neste artigo como criar widget para WordPress de forma simples e pr\u00e1tica. Abaixo temos uma […]<\/p>\n","protected":false},"author":67,"featured_media":3369,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"class_list":["post-3579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3579"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/3369"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}