Como criar seus próprios widgets básicos wordpress

Muitos blogueiros irá procurar alta e baixa para o widget WordPress perfeito que vai fazer exatamente o que eles querem, mas com um pouco de experiência de programação que você pode achar que é mais fácil escrever o seu widget personalizado.

Esta semana eu gostaria de mostrar como fazer exatamente isso, e o widget estaremos escrevendo é um simples que escolhe um único post aleatório de seu site, puxa a imagem em destaque, e mostra-o na barra lateral - visual “verificar isso” widget que irá ajudar os usuários a encontrar mais conteúdo em seu site.

Esta é também uma extensão de uma série contínua em que eu te mostrar como é fácil personalizar seu modelo WordPress.2 fresco novo Wordpress Plugins & Compreender a estrutura Tema Wordpress2 fresco novo Wordpress Plugins & Compreender a estrutura Tema WordpressEsta semana eu vou ser um dar uma olhada em uma alternativa superior ao elogiado frequentemente All-In-One SEO-um plugin que lhe dá o poder de um sistema de publicação de Wordpress, mas permite a saída ...consulte Mais informação

Você pode também estar satisfeito por saber que nós adicionamos um novo categoria WordPress Tutoriais para MakeUseOf, por isso certifique-se de verificar isso para um arquivo cada vez maior de até dicas de data e guias de plataforma de blogs mais popular do mundo.

Conceitos-chave: Consultas WordPress e do Loop

Cada página em seu blog consiste de uma consulta ao banco de dados de mensagens. Dependendo da página que você está vendo, a consulta vai mudar. Sua página inicial do blog, por exemplo, pode usar a consulta “pegar as últimas 10 posts“. Quando você visualizar os arquivos da categoria, a consulta pode mudar para “pegar as últimas 20 mensagens para apenas as fotos estilo Familiar, ordenar os resultados por data de publicação“. Cada consulta retornará um conjunto de resultados, e, dependendo do modelo da página que está sendo utilizado, cada resultado será executado através do principal “laço” do modelo.

Cada página pode de fato consistem em mais de uma consulta embora, e você pode até mesmo criar suas próprias consultas para adicionar funcionalidade para vários lugares no seu modelo. Você pode ver um exemplo disso em uso no final deste artigo - temos algumas consultas adicionais que são executados em cada página que pretendem mostrar-lhe artigos relacionados você pode estar interessado em, ou artigos que são tendências desta semana.

Para tornar o nosso widget personalizado no entanto, nós simplesmente precisará criar uma consulta adicional que agarra um número X de mensagens aleatórias além de suas imagens, e apresenta-os de alguma forma na barra lateral. Eu já mostrei na semana passada o código para agarrar a imagem destaque, então nós realmente só precisa saber como fazer um widget novas WordPress e colocá-lo na barra lateral. Como Jazz acima de seu Wordpress Adicionando Imagens selecionadasComo Jazz acima de seu Wordpress Adicionando Imagens selecionadasImagens selecionadas foram introduzidos no Wordpress na versão 2.9, e permite que você exiba facilmente uma imagem que está associada com o seu post em várias partes do seu tema. Hoje eu gostaria de mostrar ...consulte Mais informação

Código Widget Básico

Comece por criar um novo arquivo .php na sua wp-content / plugins diretório. Você também pode seguir o tutorial fora de linha, em seguida, enviá-lo usando a interface WordPress, mas acho que é mais fácil escrever à medida que avançamos no caso de você precisar depurar. Ligue para o seu arquivo que quiser, mas eu vou com random-pós-widget.php

Cole o seguinte para o arquivo e salve. Sinta-se livre para mudar a seção na parte superior com o meu nome nele, mas não ajustar o resto do código ainda. Este é basicamente um widget vazio esqueleto, e você pode ver onde ele diz // código do widget VAI AQUI é onde vamos adicionar nossa funcionalidade mais tarde.

lt;? php/ * Plugin Nome: Random Publicar WidgetPlugin URI: http://jamesbruce.me/Description: Random Publicar Widget agarra um post aleatório ea miniatura associada para exibir em seu sidebarAuthor: James BruceVersion: 1Author URI: http://jamesbruce.me / * /classe RandomPostWidget estende WP_Widget{função RandomPostWidget(){$ widget_ops = ordem(`nome da classe` =gt; `RandomPostWidget`, `descrição` =gt; `Mostra uma pós aleatória com miniaturas` )-$ this--gt;WP_Widget(`RandomPostWidget`, `Aleatório Post e Miniatura`, $ widget_ops)-}função Formato($ instance){$ instance = wp_parse_args( (ordem) $ instance, ordem( `título` =gt; `` ) )-$ title = $ instance[`título`]-?gt;lt;pgt;lt;rótulo para="lt;? php eco $ this--gt;get_field_id(`título`)- ?gt;"gt;Título: lt;entrada classe="widefat" identidade="lt;? php eco $ this--gt;get_field_id(`título`)- ?gt;" nome="lt;? php eco $ this--gt;get_field_name(`título`)- ?gt;" tipo="texto" valor="lt;? php eco attribute_escape($ title)- ?gt;" / Gt;rótulogt;pgt;lt;? php}função atualizar($ new_instance, $ old_instance){$ instance = $ old_instance-$ instance[`título`] = $ new_instance[`título`]-Retorna $ instance-}função ferramenta($ args, $ instance){extrair($ args, EXTR_SKIP)-eco $ before_widget-$ title = vazio($ instance[`título`]) ? `` : apply_filters(`Widget_title`, $ instance[`título`])-E se (!vazio($ title))eco $ before_title . $ title . $ after_title--// código do widget VAI AQUIeco "

Este é o meu novo widget!

"
-eco $ after_widget-}}add_action( `Widgets_init`, create_function(``, `Register_widget retornar ("RandomPostWidget") -`) )-?gt;

Como é, o plugin não faz muito além de imprimir um grande título com as palavras “Este é o meu novo widget!“.

como criar widgets de

Isto, contudo, dar-lhe a opção de mudar o título, que é uma espécie de essencial para qualquer widget. Adicionando em outras opções é um pouco além do escopo deste artigo de hoje, então por enquanto vamos seguir em frente para dar-lhe um propósito real.

Video: Como Criar um Wordpress Theme - Widgets

escrever o seu próprio widget

Uma nova consulta & O laço

Para fazer uma nova consulta ao banco de dados blog, você precisa usar o query_posts () função, juntamente com alguns parâmetros, em seguida, executado através da saída utilizando um tempo loop. Vamos tentar isso - uma consulta muito básico e loop para demonstrar. Substituir a linha de código que diz:

Este é o meu novo widget!


com o seguinte:

// código do widget VAI AQUIquery_posts(``)-E se (have_posts()) :enquanto (have_posts()) : the_post()-o título()-EndWhile-fim se-wp_reset_query()-

Esta é uma consulta absolutamente básico usando opções padrão e de zero a formatação da saída. Dependendo de como seu blog é criado, o padrão será muito provável para pegar as 10 últimas mensagens - em seguida, todo o código acima faz é para a saída o título de cada post. É muito feio, mas funciona:

Video: Criação de Temas WordPress - Sidebar e Widgets - Vídeo 3

escrever o seu próprio widget

Podemos torná-lo um pouco melhor de imediato apenas adicionando alguns formatação HTML para a saída com o ECO comando e criar um link para o post usando get_the_permalink () função:

query_posts(``)-E se (have_posts()) :eco ""-enquanto (have_posts()) : the_post()-eco "".get_the_title().""-EndWhile-eco ""-fim se-wp_reset_query()-

escrever o seu próprio widget

Video: Como Criar e Instalar Widget do Google + no Blog Wordpress

Já, ele está olhando muito melhor. Mas nós só queremos um post, escolhidos aleatoriamente. Para fazer isso, nós especificar alguns parâmetros na consulta:

query_posts(`= 1 posts_per_page&OrdenarPor = rand`)-

Claro, você pode alterá-lo para qualquer número de mensagens - na verdade, há toda uma gama de bits extras que você pode passar para a consulta, a fim de restringir, expandir ou alterar a ordem dos resultados, mas vamos ficar com isso para agora. Se você atualizar, você deve ver apenas um post que é ao acaso a cada vez que você atualizar.

Agora, para a miniatura destaque. Substitua o código com isso, espero que você pode ver onde estamos agarrando a miniatura e exibi-lo:

query_posts(`= 1 posts_per_page&OrdenarPor = rand`)-E se (have_posts()) :eco ""-enquanto (have_posts()) : the_post()-eco "".get_the_title()-eco the_post_thumbnail(ordem(220,200))-eco ""-EndWhile-eco ""-fim se-wp_reset_query()-

Você pode ver os resultados acabados de novo no meu blog desenvolvimento Guia de auto-suficiência, embora eu poderia ter transferida coisas pelo tempo que você ler isto.

como criar widgets de

Conclusão:

Veja como é fácil fazer o seu próprio widget personalizado que pode fazer exatamente o que você quer? Mesmo se você não entender 90% do código que eu mostrei hoje, você ainda deve ser capaz de personalizá-lo um pouco por apenas mudando variáveis ​​ou saída HTML diferente. Nós escrevemos um widget inteiro hoje, mas você poderia facilmente utilizar apenas o novo código de consulta e laço em qualquer um dos seus modelos de página.

Video: Como criar meu próprio tema WordPress do zero?

Problemas? Precisa de alguma relacionada WordPress ajuda diferente? Estou sempre à disposição para ajudar no Respostas MakeUseOf, então cabeça sobre sobre e postar uma nova pergunta lá.


Artigos relacionados