-
Tenho visto alguns bons tutoriais sobre como criar widgets para WordPress 2,8 flutuando em torno do WordPress-o-Sphere. Mas, eu não sinto nenhum deles realmente coberto de uso prático. Quero mostrar-lhe como criar um widget para o desenvolvimento do mundo real usando WordPress 2/8 's novo widget classe.
Neste tutorial, eu vou levá-lo através das etapas de criação de um widget, suas definições de formulário, e exibi-lo em seu site. No final do tutorial, você pode baixar um plugin para construir a partir de exemplo. Claro, você pode aplicar isto a seus temas também.
Se você não sentir como através da leitura do tutorial, pule para o final e fazer o download do widget exemplo. É fortemente comentados e vai lhe dar uma boa base para construir a partir de.
Qual será o exemplo do widget?
Para o bem do tutorial, vamos estar a criar uma coisa extremamente simples, mas ainda assim você verá algumas técnicas avançadas sobre como dar aos utilizadores mais controlo sobre a exibição do widget através do widget controles.
O nosso widget exibirá uma pessoa do nome e do sexo. Os controlos permitirão a entrada de um widget título (texto), a entrada do nome do usuário (texto), a selecção do sexo da pessoa (seleção), e se o sexo deve ser exibido publicamente (caixa).
Veja o que a saída do widget será algo parecido com:
Eu sei, não é muito, mas você será capaz de tomar essas ferramentas e aplicá-las a mais complexa widgets.
Carregando o widget no momento oportuno
A primeira coisa que temos de fazer é carregar o nosso widget, quando necessário. WordPress prevê a
widgets_initacção gancho que nos permite fazer isso. Em WordPress 2.8, esta acção gancho é despedido logo após o padrão WordPress widgets foram registrados.
<?php /* Add our function to the widgets_init hook. */ add_action( 'widgets_init', 'example_load_widgets' ); /* Function that registers our widget. */ function example_load_widgets() { register_widget( 'Example_Widget' ); }Se quiser criar mais de um widget, você pode usar a
register_widget()para cada função dentro do widgetexample_load_widgets()function.Configurando nosso widget
No passado, a criação de widgets em alguns WordPress foi feio mish-mash de funções que era incompreensível. Em 2.8, que apenas têm de alargar o preexistente
WP_Widgetclasse. Então, o primeiro passo é criar uma nova classe com um nome único.
class Example_Widget extends WP_Widget {Então, nós queremos acrescentar a nossa primeira função. Esta função será o que torna a nossa única widget para WordPress, e isso vai permitir-nos a criar o widget definições.
Note que o nome da classe e primeira função nome são os mesmos. Neste exemplo, este é
Example_Widget
function Example_Widget() { /* Widget settings. */ $widget_ops = array( 'classname' => 'example', 'description' => 'An example widget that displays a person\'s name and sex.' ); /* Widget control settings. */ $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); /* Create the widget. */ $this->WP_Widget( 'example-widget', 'Example Widget', $widget_ops, $control_ops ); }Você quer fazer algum deste material exclusivo para o seu widget.
Mostrando a widget
A próxima função dentro da nossa
Example_Widgetclasse irá lidar com a exibição do widget. Este código pode ser um pouco confuso porque não sabemos o que significa que todos (não temos acrescentado os controles).O objetivo aqui é para ter as definições fornecidas pelo o que o usuário selecionado para o widget e exibir o widget de acordo com esses valores.
Também é importante certificar-se você usar o
$before_widget $after_widget $before_titlee$after_titlevariáveis. Estes são fornecidos pelo tema e não devem ser codificados. Como widgets são indicadas devem ser sempre manipulados pelo tema.
function widget( $args, $instance ) { extract( $args ); /* User-selected settings. */ $title = apply_filters('widget_title', $instance['title'] ); $name = $instance['name']; $sex = $instance['sex']; $show_sex = isset( $instance['show_sex'] ) ? $instance['show_sex'] : false; /* Before widget (defined by themes). */ echo $before_widget; /* Title of widget (before and after defined by themes). */ if ( $title ) echo $before_title . $title . $after_title; /* Display name from widget settings. */ if ( $name ) echo '<p>Hello. My name is' . $name . '.</p>'; /* Show sex. */ if ( $show_sex ) echo '<p>I am a ' . $sex . '.</p>'; /* After widget (defined by themes). */ echo $after_widget; }Garantindo o nosso widget é actualizado e guardado
Neste passo, vamos ter cada um de nossos widget configurações e salvá-los. É um procedimento muito simples. Estamos apenas atualizando o widget para usar o novo usuário-selecionado valores.
Se você estiver usando algo parecido com um texto no seu formulário e os usuários não devem adicionar XHTML para ele, então você deve adicionar o valor ao
strip_tags()função, conforme mostrado abaixo.
function update( $new_instance, $old_instance ) { $instance = $old_instance; /* Strip tags (if needed) and update the widget settings. */ $instance['title'] = strip_tags( $new_instance['title'] ); $instance['name'] = strip_tags( $new_instance['name'] ); $instance['sex'] = $new_instance['sex']; $instance['show_sex'] = $new_instance['show_sex']; return $instance; }Criando widget controles ou ajustes
A razão pela qual o novo widget classe em WordPress 2,8 é tão legal é como é fácil configurar controles para o seu widgets. O
get_field_id()eget_field_name()manipular a maioria das funções trabalho sujo, deixando-nos a concentrar em coisas mais importantes como realmente criar o widget. Tome especial aviso de como essas funções são usadas, porque vai tornar a vida mais simples para você.Em primeiro lugar, pode querer criar alguns padrões. Através da criação de padrões, podemos controlar o que é mostrado apenas no caso de o usuário não selecionar nada.
function form( $instance ) { /* Set up some default widget settings. */ $defaults = array( 'title' => 'Example', 'name' => 'John Doe', 'sex' => 'male', 'show_sex' => true ); $instance = wp_parse_args( (array) $instance, $defaults ); ?>As primeiras duas partes do formulário será texto insumos: a widget título e o nome da pessoa.
<p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" /> </p> <p> <label for="<?php echo $this->get_field_id( 'name' ); ?>">Your Name:</label> <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" /> </p>value<p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" /> </p> <p> <label for="<?php echo $this->get_field_id( 'name' ); ?>">Your Name:</label> <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" /> </p>value<p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" /> </p> <p> <label for="<?php echo $this->get_field_id( 'name' ); ?>">Your Name:</label> <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" /> </p>A segunda parte do formulário será uma seleção, permitindo ao usuário selecionar seu sexo.
<p> <label for="<?php echo $this->get_field_id( 'sex' ); ?>">Sex:</label> <select id="<?php echo $this->get_field_id( 'sex' ); ?>" name="<?php echo $this->get_field_name( 'sex' ); ?>" class="widefat" style="width:100%;"> <option <?php if ( 'male' == $instance['format'] ) echo 'selected="selected"'; ?>>male</option> <option <?php if ( 'female' == $instance['format'] ) echo 'selected="selected"'; ?>>female</option> </select> </p>A última parte do formulário irá mostrar uma opção que permite ao usuário escolher se querem exibir publicamente as suas relações sexuais.
<p> <input class="checkbox" type="checkbox" <?php checked( $instance['show_sex'], true ); ?> id="<?php echo $this->get_field_id( 'show_sex' ); ?>" name="<?php echo $this->get_field_name( 'show_sex' ); ?>" /> <label for="<?php echo $this->get_field_id( 'show_sex' ); ?>">Display sex publicly?</label> </p>type<p> <input class="checkbox" type="checkbox" <?php checked( $instance['show_sex'], true ); ?> id="<?php echo $this->get_field_id( 'show_sex' ); ?>" name="<?php echo $this->get_field_name( 'show_sex' ); ?>" /> <label for="<?php echo $this->get_field_id( 'show_sex' ); ?>">Display sex publicly?</label> </p>O único passo que resta é fechar o formulário de função e do resto do widget código.
<?php } } ?>Tempo para criar seus próprios widgets
Se você nunca criou ou tentou criar um widget no WordPress anterior a 2.8, então provavelmente você pode ver como este é muito mais fácil. Para ajudar as pessoas a aprender o novo sistema, que eu ponha em conjunto um exemplo widget. I've esquerdo cargas de comentários sobre o que faz o código no arquivo, portanto, deve ser bastante fácil de seguir:
Eu estou desfrutando de trabalho com a nova classe widget. Eu quase me sinto motivado a libertação de alguns novos elementos no futuro próximo. Mas, eu adoro ver o que você venha com todos.
0 comentários: