Como criei meu primeiro Plugin para WordPress

VN:RO [1.9.11_1134]
segunda-feira, 20 de fevereiro de 2012
Por Eduardo Russo, Coop10. Siga no Twitter

Desenvolvendo o blog do Universo, resolvemos colocar um Facebook Like Box para incentivar o acesso à nossa Fan Page do Facebook. A ideia era colocar um Widget (para quem nunca tocou no Admin do WordPress, Widget é tudo que fica aí, do lado direito… os “artigos populares”, os “últimos comentários” etc.).

Fiz uma rápida pesquisa e acabei instalando dois para testar. Um deles achei decente, com configurações dentro do próprio painel dos Widgets, o outro, não pois as configurações ficavam em um outro lugar e ele criava um novo item no já gigante painel de administração do WordPress. Não bom!

Não preciso de mais um painel principal!

Decidi então ficar com o primeiro, já que ele me parecia mais dentro dos padrões de uso que estou acostumado.

Testando o Plugin de base

Configurei o Plugin, fui ver como estava ficando e encontrei o primeiro problema, o título. O comportamento padrão dos Widgets é não mostrar nada se você escolher não colocar um título. Não foi o caso desse Plugin. Ao não por um título, ele simplesmente veio em branco, mas a barra de título do tema estava lá, estragando tudo.

Pra completar, não conseguia trocar a cor da borda e, pra piorar, como a versão pequena do logo do Universo tem a forma de gota e o Facebook não curte PNG, o fundinho azul deixava o logo com aquela marca branca maldita!

Foi então que comecei a colocar a mão no código, apenas com o objetivo de corrigir esses probleminhas.

Deixando bonito

Depois de estudar um pouco o código original, percebi que ele estava usando uma API antiga do Facebook e que, com ela, eu não ia conseguir deixar do jeito que eu queria.

Barrinha maldita! Bordinha maldita! Fundinho azul maldito!

Comecei a cavocar e alterar o código, fiz um monte de POG pra ir vendo como ficava e acabei tendo o resultado que eu esperava, com bordinha arredondada, colado num dos cantos, fundo branco etc.

Isso sim é encaixe!

Aí, chegou o momento da verdade. O Diabinho gritando: “Tá ótimo, parte pra próxima!”. O Anjinho gritando: “Tá tosco, meu filho! Funciona, mas ninguém nunca mais vai conseguir arrumar isso de maneira fácil. Faz direito!”. Sim, o Anjinho é prolixo.

Transformando o POG em Plugin

Resolvi ouvir o Anjinho e percebi que a coisa era relativamente simples. Um Plugin de WP se resume a basicamente a formulário, Widget e registro junto ao WordPress.

O Widget já estava funcionando via POG, bastava transformar tudo que estava hard coded em utilização de parâmetros.

O registro do Plugin junto ao WordPress já tinha vindo junto do código original… não havia muito a ser feito.

O formulário é que deu um pouco mais de trabalho, já que resolvi que ia usar um outro componente (text area) que não existia no formulário orginal (nele, só tinha text box e check box).

Já que resolvi escrever um post sobre o assunto, vou comentar tudo que foi feito, com um pouquinho de código pra vocês… seus geeks! O código fonte completo pode ser baixado na própria página do Plugin “Styled Facebook Like Box”.

Metendo a mão no código

Parâmetros

A primeira coisa que comecei a alterar, já que a API nova do Facebook era um pouco diferente, foi a lista de parâmetros utilizados no form.

13
14
15
16
17
18
19
20
21
22

$styled_facebook_like_box_options['widget_fields']['title'] = array('label'=>'Widget title:', 'type'=>'text', 'default'=>'Facebook', 'class'=>'widefat', 'size'=>'', 'help'=>'The title before your widget');
$styled_facebook_like_box_options['widget_fields']['profile_url'] = array('label'=>'FanPage URL:', 'type'=>'text', 'default'=>'http://facebook.com/universo.mobi', 'class'=>'widefat', 'size'=>'', 'help'=>'Your Facebook Fan Page URL');
$styled_facebook_like_box_options['widget_fields']['width'] = array('label'=>'Width:', 'type'=>'text', 'default'=>'300', 'class'=>'', 'size'=>'3', 'help'=>'(Value in px)');
$styled_facebook_like_box_options['widget_fields']['height'] = array('label'=>'Height:', 'type'=>'text', 'default'=>'550', 'class'=>'', 'size'=>'3', 'help'=>'(Value in px)');
$styled_facebook_like_box_options['widget_fields']['border_color'] = array('label'=>'Border color:', 'type'=>'text', 'default'=>'#000', 'class'=>'', 'size'=>'', 'help'=>'(#E1E4E6, white)');
$styled_facebook_like_box_options['widget_fields']['background_color'] = array('label'=>'Background color:', 'type'=>'text', 'default'=>'#FFF', 'class'=>'', 'size'=>'', 'help'=>'(#E123F0, blue)');
$styled_facebook_like_box_options['widget_fields']['faces'] = array('label'=>'Show faces:', 'type'=>'checkbox', 'default'=>true, 'class'=>'', 'size'=>'', 'help'=>'Show profile photos');
$styled_facebook_like_box_options['widget_fields']['stream'] = array('label'=>'Show stream:', 'type'=>'checkbox', 'default'=>false, 'class'=>'', 'size'=>'', 'help'=>'Show profile stream');
$styled_facebook_like_box_options['widget_fields']['header'] = array('label'=>'Show header:', 'type'=>'checkbox', 'default'=>false, 'class'=>'', 'size'=>'', 'help'=>'Show default Facebook header');
$styled_facebook_like_box_options['widget_fields']['style_code'] = array('label'=>'Style code:', 'type'=>'textarea', 'default'=>'-moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius:10px;', 'class'=>'', 'rows'=>'6', 'cols'=>'31', 'help'=>'margin-left: -40px; border-radius: 10px;');

Não sei se essa é uma forma normal de declarar os parâmetros de Widgets, mas achei bem interessante relativamente fácil de manejar. Tudo que tive que fazer foi alterar os arrays para os parâmetros que ia usar, acrescentar um novo tipo (textarea, na linha 22) e colocar uns helps decentes.

O Widget propriamente dito

O Widget propriamente dito foi o que realmente fez a diferença, já que antes eu não tinha controle de como o ele ficava na tela.

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Output the widget in the sidebar
function styled_facebook_like_box($title, $profile_url, $width, $height, $faces, $border_color, $background_color, $stream, $header, $style_code){
	//Insert Facebook default JavaScript
 	echo "<div id='fb-root'></div>
		<script>(function(d, s, id) {
 		var js, fjs = d.getElementsByTagName(s)[0];
 		if (d.getElementById(id)) return;
 		js = d.createElement(s); js.id = id;
 		js.src = '//connect.facebook.net/pt_BR/all.js#xfbml=1';
		fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>";
	//Insert the styled Like Box
	echo "<div class='fb-like-box' data-href='$profile_url' data-width='$width' data-height='$height' data-show-faces='$faces' data-border-color='$border_color' data-stream='$stream' data-header='$header' style='background-color:$background_color;";
	if ($style_code)
		echo $style_code;
	echo "'></div>";
}

Dessa forma, na linha 27 eu joguei o JavaScript da página de desenvolvimento do Facebook (que eles recomendam que eu jogue no início do Body do HTML, mas eu não tinha ideia de como fazer isso via plugin) e na linha 37 a DIV que será preenchida pelo Facebook.

Repare que na linha 38 eu coloco um campo como opcional, que é exatamente a textarea do formulário. So nada for colocado nela, esse trecho é desconsiderado.

O código do  Plugin tem uma funçãozona com outras dentro. Entre elas, a do formulário e a que chama essa função (styled_facebook_like_box) que mostrei acima.

Aqui, segue o início dela:

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

function widget_styled_facebook_like_box_init(){
	if (!function_exists('register_sidebar_widget'))
		return;
	$check_options = get_option('widget_styled_facebook_like_box');
 
	// Show the Widget in the sidebar
	function widget_styled_facebook_like_box($args){
 
		global $styled_facebook_like_box_options;
		extract($args);
		$options = get_option('widget_styled_facebook_like_box');
 
		// Fill options with default values if value is not set
		$item = $options;
		foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
			if (! isset($item[$key])){
				$item[$key] = $field['default'];
			}
		} 
 
		$title = $item['title'];
		$profile_url = $item['profile_url'];
		$width = $item['width'];
		$height = $item['height'];
		$faces = $item['faces'] ? "true" : "false";
		$border_color = $item['border_color'];
		$background_color = $item['background_color'];
		$stream = ($item['stream']) ? "true" : "false";
		$header = ($item['header']) ? "true" : "false";
		$style_code = $item['style_code'];
 
		//Remove the Wordpress Title if none was set
		if ($title)
			echo $before_widget . $before_title . $title;
 
		echo $after_title; 
 
 	styled_facebook_like_box($title, $profile_url, $width, $height, $faces, $border_color, $background_color, $stream, $header, $style_code);
 	echo $after_widget;
	}

A função widget_styled_facebook_like_box pega todos os parâmetros preenchidos no formulário e, com eles, chama a styled_facebook_like_box. Tudo que fiz aqui foi alterar os parâmetros que eram usados.

O formulário

Esse foi o pedaço que mais deu trabalho, exatamente porque tive a brilhante ideia de usar a textarea. Diferente de tudo que já era usado no formulário que funciona como “<input type=’algum tipo…”, a text area tem uma tag que abre com ela mesma e não com um tipo, assim “<textarea…>alguma coisa</textarea>. Então sofri um pouco para conseguir colocá-la na tela.

Achei a maneira de colocar criar o formulário do código que usei de base muito elegante, já que fazia tudo dentro de um loop, em vez de fazer na unha, então resolvi manter, apesar da dificuldade maior.

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

	// Output the widget form
	function widget_styled_facebook_like_box_control(){
 
		global $styled_facebook_like_box_options;
 
		$options = get_option('widget_styled_facebook_like_box');
		if (isset($_POST['styled_facebook_like_box-submit'])){
 
			foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
				$options[$key] = $field['default'];
				$field_name = sprintf('%s', $key);
				if ($field['type'] == 'text' || $field['type'] == 'textarea'){
					$options[$key] = strip_tags(stripslashes($_POST[$field_name]));
				}
				elseif ($field['type'] == 'checkbox'){
					$options[$key] = isset($_POST[$field_name]);
				}
			}
 
			update_option('widget_styled_facebook_like_box', $options);
		}
 
		foreach($styled_facebook_like_box_options['widget_fields'] as $key => $field){
			// print_r($field);
			$field_name = sprintf('%s', $key);
			$field_checked = '';
			if ($field['type'] == 'text' || $field['type'] == 'textarea'){
				$field_value = (isset($options[$key])) ? htmlspecialchars($options[$key], ENT_QUOTES) : htmlspecialchars($field['default'], ENT_QUOTES);
			} elseif ($field['type'] == 'checkbox'){
				$field_value = (isset($options[$key])) ? $options[$key] :$field['default'];
				if ($field_value == 1){
					$field_checked = 'checked="checked"';
				}
			}
			$jump = ($field['type'] != 'checkbox') ? '<br />' : ' ';
			$field_class = $field['class'];
			$field_size = ($field['class'] != '') ? '' : 'size="'.$field['size'].'"';
			$field_help = ($field['help'] == '') ? '' : '<small>'.$field['help'].'</small>';
			//Exclusive for textarea
			$field_rows = ($field['rows'] == '') ? '' : 'rows="'.$field['rows'].'"';
			$field_cols = ($field['cols'] == '') ? '' : 'cols="'.$field['cols'].'"';
			if ($field['type'] != 'textarea'){
				printf("<p class='styled_facebook_like_box_field'>".
						"<label for='$field_name'>" . __($field['label']) . "</label>$jump".
						"<input id='$field_name' name='$field_name' type='" . $field['type'] . "' value='$field_value' class='$field_class' $field_size $field_checked />".
						"$field_help</p>");
			}
			else{
				printf("<p class='styled_facebook_like_box_field'>".
						"<label for='$field_name'>" . __($field['label']) . "</label>$jump".
						"<textarea id='$field_name' name='$field_name' value='$field_value' class='$field_class' $field_rows $field_cols>$field_value</textarea>".
						"$field_help</p>");
			}
		}
		echo '<input type="hidden" id="styled_facebook_like_box-submit" name="styled_facebook_like_box-submit" value="1" />';
	}

Basicamente, tive que acrescentar as linhas 122, 123 e 124, já que são parâmetros de linhas e colunas exclusivos de um textarea (foram definidos lá no começo, na linha 22) e o trecho que inicia na linha 131.

Com isso, o form do widget ficou assim:

Form final do "Styled Facebook Like Box"

Ficou exatamente como eu queria, com os campos padrão do Widget do Facebook, mas a textarea com um campo para colocar formatações CSS.

Registrando junto ao WP

Finalmente, entra o código para registrar o Plugin junto ao WordPress. Esse código é o que permite que o Plugin seja reconhecido como um Widget.

141
142
143
144
145
146
147
148
149

	// Register the widget with WordPress
	function widget_styled_facebook_like_box_register(){
		$title = 'Styled Facebook Like Box';
		// Register widget for use
		register_sidebar_widget($title, 'widget_styled_facebook_like_box');
		// Register settings for use, 300x100 pixel form
		register_widget_control($title, 'widget_styled_facebook_like_box_control');
	}
	widget_styled_facebook_like_box_register();

As únicas coisas alteradas aqui forams o nome do Plugin e os nomes das funções chamadas.

Mandando tudo para o wordpress.org

Depois de ter feito tudo isso e testado bastante, resolvi que esse plugin merecia mais do que ficar preso ao blog do Universo. Dei uma pesquisada e vi que era muito fácil submetê-lo à lista de Plugins do WordPress.

Basta entrar no site do WordPress (o .org, não o .com) criar um cadastro, preencher o formulário de submissão e fazer upload de um .zip com seu plugin. Seu plugin deve ter alguns comentários que o descrevem, um TXT e ainda é possível colocar screenshots. Isso tudo é usado para a página do seu Plugin e esse texto é apresentado quando seu Plugin é instalado no WordPress.

Após algumas horas, recebi um email dizendo que o Plugin tinha sido aprovado e que eu já podia enviá-lo por SVN.

Subi os arquivos e, quase que instantaneamente, lá ele estava. Depois de algum tempo de teste, resolvi corrigir algumas coisas, mudei a versão e subi novamente. O processo de atualização foi totalmente automático e não tive que fazer nada pra que ele mudasse da 1.0 para 1.1 e depois para a 1.2.

Finalmentes

Acei todo o processo bastante simples, desde o desenvolvimento (Ok, usei um outro plugin como base, mas, mesmo assim, não é nada de outro mundo)até a submissão.

Foi divertido e empolgante ver o plugin no ar (em 1 dia, já teve 288 instalações) e sendo usado! Me empolguei tanto, que instalei aqui no Bit a Bit!

VN:F [1.9.11_1134]
Rating: 5.0/5 (3 votes cast)
Como criei meu primeiro Plugin para WordPress, 5.0 out of 5 based on 3 ratings
Related Posts with Thumbnails

Eduardo Russo
Eduardo Russo

Formado em Engenharia de Computação pela Poli (2010) e em Design pela Belas Artes (2001), é um dos fundadores do Bit a Bit e gerente de produtos da Mowa.

Tags: , , , , ,

Este artigo foi publicado no dia 20 de fevereiro de 2012 às 10:00 am na(s) categoria(s) Coop10, Cooperativo, Internet, Outros, Programação, Tecnologia, Tutorial. Você pode seguir comentários deste artigo através do link do feed RSS 2.0.

Um Comentário para “Como criei meu primeiro Plugin para WordPress”

  1. Charles David Web
    19 de abril de 2012 às 2:17 pm

    Muito bom Parabéns pela iniciativa

    VA:F [1.9.11_1134]
    Rating: +1 (from 1 vote)
    Responder
    #961

Deixe um Comentário

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes