Como criar um um widget para a sua rede de blogs

A criação de widgets em WordPress não é tão difícil como à partida se poderá pensar, e neste artigo vamos ajudá-lo a criar um widget para a sua rede de blogs. Uma rede de blogs em WordPress pode ser uma rede ao estilo das Escolas+ em que há um conceito no qual assentam as várias escolas da rede, formando assim um grupo de websites em WordPress. A utilidade deste widget pode simplesmente passar por dar a conhecer aos seus visitantes os restantes websites que você tem na sua rede, facilitando assim a navegação entre estes e espalhando a palavra, dando a conhecer a sua existência. Os colegas do WPTuts forneceram este código para que todo o mundo possa criar o seu próprio widget. Para o correto funcionamento do mesmo, você deverá já ter criado uma rede de blogs através do WordPress MU, o qual poderá aprender seguindo o nosso guia Guia para Configurar o WordPress Multisite.

1. CRIANDO AS BASES PARA O WIDGET

Como referimos, você já deverá ter criado anteriormente uma rede de websites em WordPress. Comece por criar o ficheiro mynetwork.php e insira o seguinte código:

/*
Plugin Name: Nome do seu Plugin
Plugin URI: http://www.websiteDoSeuPlugin.com/
Description: Descrição
Author: Nome do Autor
Version: Versão (ex: 1.01)
Author URI: http://www.websiteDoAutor.com/
*/
class MyNetwork_Widget extends WP_Widget {

	public function __construct() {
		// widget actual processes
	}

	public function form( $instance ) {
		// outputs the options form on admin
	}

	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
	}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "mynetwork_widget" );' ) );

Neste trecho de código, a função add_action(‘widgets_init’) é utilizada para fazer o registro do widget da rede de blogs!

2. A FUNÇÃO CONSTRUCT

Já criámos a base deste widget, e agora é hora de começar a entrar no núcleo do mesmo. Vamos adicionar as suas funcionalidades, começando por adicionar um atributo denominado blogs, que irá ser utilizado como um array onde irá ser inserida a lista de blogs da rede:

class MyNetwork_Widget extends WP_Widget {
	public $blogs = null;

O próximo passo é adicionar mais elementos à função construct. Atribuiremos um array dos blogs ao atributo utilizando a funçãoo get_blog_list. Assim, cada vez que pretendermos fazer uma referência a este array, basta utlizarmos $this->blogs

public function __construct() {
	$this->blogs = get_blog_list( 0, 'all' );

Por ultimo, iremos fazer a chamada à função construtora e inserir informações acerca do widget. Esta função contará com os elementos ID, Name, Options e Control Options. Estas informações irão ser apresentadas no painel do widget:

	parent::__construct(
		'mynetwork_widget', // Base ID
		'MyNetwork_Widget', // Name
		array(
			'description' => __( 'Display List of Blogs in Site Network', 'text_domain' )
		)
	);
}

3. CRIAR O FORMULÁRIO DO WIDGET

Neste passo iremos criar o formulário que irá estar presente no painel de administração. O formulário irá contar com um campo Image URL  para você inserir o logo de cada um dos blogs da rede ao estilo thumbnail. A primeira coisa a fazer é criar um loop  que irá fazer um ciclo em cada um dos blogs, o qual não irá contar com o nome do blog que irá ser introduzido através da função get_blog_details. Assim, a função irá buscar o id do blog e irá retornar o nome, o ID, o número de artigos, o caminho e outras informações úteis. O nome de cada um dos blos irá ser inserido acima de cada um dos campos onde irá inserir o URL:

	public function form( $instance ) {
		// outputs the options form on admin
		foreach ($this->blogs AS $blog) {
			$image =  $instance['image-'.$blog['blog_id']];
			?>
			<p>
				<label><strong><?php echo get_blog_details($blog['blog_id'])->blogname; ?></strong></label><br />
				<label for="<?php echo $this->get_field_id( 'image-'.$blog['blog_id'] ); ?>"><?php _e( 'Image Url:' ); ?></label>
				<input class="widefat" id="<?php echo $this->get_field_id( 'image-'.$blog['blog_id'] ); ?>" name="<?php echo $this->get_field_name( 'image-'.$blog['blog_id']); ?>" type="text" value="<?php echo esc_attr( $image ); ?>" />
			</p>
			<?php
		}
	}

4. CRIAR A FUNÇÃO UPDATE

A função update irá guardar os valores inseridos no formulário presente no painel de administração. Primeiro criamos a variável $instance como array, e de seguida irá ser feito um novo loop em cada blog:

	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
		$instance = array();
		foreach ($this->blogs AS $blog) {
			$instance['image-'.$blog['blog_id']] = strip_tags( $new_instance['image-'.$blog['blog_id']]);
		}
		return $instance;
	}

5. CRIAR A FUNÇÃO DO WIDGET

Agora que temos a função que irá fazer a renderização HTML do widget, está na altura de criar mais alguns itens que irão finalizar o widget. Criamos um loop que ira trabalhar nos blogs registados e para cada um deles irá ser definida a imagem, o link e o nome do blog. Adicionamos também um if que irá certificar se o URL para a imagem foi inserido no painel de controlo do widget, e caso isso não se verifique, esse blog não irá ser apresentado na lista. Adicionamos também algum código HTML para inserir hiperligação em cada uma das imagens da rede de blogs:

	public function widget( $args, $instance ) {
		// outputs the content of the widget
		foreach ($this->blogs AS $blog) {
			$image = $instance['image-'.$blog['blog_id']];
			$link = $blog['path'];
			$name = get_blog_details($blog['blog_id'])->blogname;
			if ($image) {
			?>
				<div>
					<div>
						<a href="<?php echo $link; ?>"><img src="<?php echo $image; ?>" width="125" border="0" alt="<?php echo $name; ?>" /></a>
					</div>
					<div><h3><?php echo $name; ?></h3></div>
				</div>
			<?php
			}
		}
	}

E está finalizado o Widget!

6. CÓDIGO COMPLETO

Caso seja mais fácil para si pegar o código completo e compreendê-lo, ou simplesmente não pretende estar a juntar todo o código que fomos fornecendo ao longo deste tutorial, deixamos-lhe abaixo o código completo que poderá utilizar para criar o seu widget:

<?php
/**
 * @package MyNetwork
 * @version 1.0.0
 */
/*
/*
Plugin Name: Nome do seu Plugin
Plugin URI: http://www.websiteDoSeuPlugin.com/
Description: Descrição
Author: Nome do Autor
Version: Versão (ex: 1.01)
Author URI: http://www.websiteDoAutor.com/
*/
?>
<?php
class MyNetwork_Widget extends WP_Widget {
	public $blogs = null;

	public function __construct() {
		$this->blogs = get_blog_list( 0, 'all' );
		parent::__construct(
			'mynetwork_widget', // Base ID
			'MyNetwork_Widget', // Name
			array(
				'description' => __( 'Display List of Blogs in Site Network', 'text_domain' )
			) // Args
		);
	}

	public function form( $instance ) {
		// outputs the options form on admin
		foreach ($this->blogs AS $blog) {
			$image =  $instance['image-'.$blog['blog_id']];
			?>
			<p>
				<label><strong><?php echo get_blog_details($blog['blog_id'])->blogname; ?></strong></label><br />
				<label for="<?php echo $this->get_field_id( 'image-'.$blog['blog_id'] ); ?>"><?php _e( 'Image Url:' ); ?></label>
				<input class="widefat" id="<?php echo $this->get_field_id( 'image-'.$blog['blog_id'] ); ?>" name="<?php echo $this->get_field_name( 'image-'.$blog['blog_id']); ?>" type="text" value="<?php echo esc_attr( $image ); ?>" />
			</p>
			<?php
		}
	}

	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
		$instance = array();
		foreach ($this->blogs AS $blog) {
			$instance['image-'.$blog['blog_id']] = strip_tags( $new_instance['image-'.$blog['blog_id']]);
		}
		return $instance;
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
		foreach ($this->blogs AS $blog) {
			$image = $instance['image-'.$blog['blog_id']];
			$link = $blog['path'];
			$name = get_blog_details($blog['blog_id'])->blogname;
			if ($image) {
				?>
				<div>
					<div>
						<a href="<?php echo $link; ?>"><img src="<?php echo $image; ?>" width="125" border="0" alt="<?php echo $name; ?>" /></a>
					</div>
					<div><h3><?php echo $name; ?></h3></div>
				</div>
				<?php
			}
		}
	}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "mynetwork_widget" );' ) );
?>

Abraço!