A partir da interface Posts no backend do WordPress, são necessários cinco cliques para adicionar uma imagem de recurso a uma postagem. Um novo plugin gratuito, que reduz o número de cliques para apenas três – e eu vou orientá-lo sobre como eu o construí.
Estou trabalhando em um grande projeto no momento – uma reconstrução do site – e queria criar uma maneira de adicionar, modificar e excluir imagens em destaque sem ter que editar manualmente cada publicação. Eu também preciso adicionar e atualizar imagens de forma retrospectiva, o que pode demorar consideravelmente se eu tiver que esperar para que as imagens sejam carregadas.
Quando comecei a trabalhar neste projeto, decidi que não criaria funcionalidade de plug-in no meu tema personalizado. Em vez disso, se algo devesse ser um plugin, seria – e seria lançado gratuitamente.
O resultado final é fácil de imagens em destaque , e hoje quero acompanhar você como foi feito, do início ao fim.
O que faremos
O plugin essencialmente adiciona uma coluna à lista de postagens. A coluna exibe a imagem em destaque ou um prompt para adicionar uma imagem em destaque. Quando você clica em qualquer um, o carregador de mídia do WordPress aparece e você pode selecionar / carregar uma imagem.
Quando você clica no botão “Definir imagem destacada”, a imagem é exibida na lista de publicações e é definida como a imagem em destaque via AJAX, não é necessário recarregar. O link remover permite que você remova a imagem em destaque instantaneamente.
Dê uma olhada neste demo GIF para uma visão geral rápida:
O plugin não é excessivamente complicado, mas oferece uma boa mistura de coisas úteis que você pode aplicar em seu próprio trabalho. Nonces, Ajax, modificando as listas de administradores, como usar o carregador nativo e muito mais, bem como como adicionar um plugin ao Diretório de Plugins do WordPress e assim por diante.
Vamos começar!
O quadro
Eu decidi que não usaria uma estrutura para este plugin. Eu sou um grande fã do WordPress Plugin Boilerplate , mas o PHP neste plugin consiste em três funções, então eu decidi que eu poderia gerenciar minhas coisas sem problemas. Daí o único quadro que eu precisava era uma pasta de plugins e o arquivo principal de plugins. Veja como eu fiz isso:
Em uma instalação local do WordPress, fui ao wp-content/pluginsdiretório e criei uma nova pasta chamada easy-featured-images. Dentro dessa pasta criei o easy-featured-images.phparquivo que é o arquivo principal do plugin. Dentro desse arquivo adicionei um comentário, que contém algumas informações sobre o plugin.
| <? Php | |
| / * | |
| Nome do plugin: imagens em destaque fáceis | |
| Descrição: Adiciona imagens apresentadas às listas de postagens de administração e permite que você as adicione e as modifique sem carregar a página de edição da publicação. | |
| Versão: 1.0.0 | |
| Autor: Daniel Pataki | |
| Autor URI: http://danielpataki.com/ | |
| Licença: GPLv2 ou posterior | |
| * / |
Isso é usado pelo WordPress para exibir o plugin na lista de plugins do backend. Depois de salvar o arquivo, você deve ver o plugin aparecer. Isso parecerá algo assim:
Adicionando uma nova coluna de postagem
A primeira coisa que queremos fazer é adicionar uma nova coluna para exibir as imagens em destaque. Podemos usar o manage_[POST_TYPE]_posts_columnsgancho para fazê-lo. Precisamos substituir [POST_TYPE]com a lesma do tipo pós queremos adicionar uma nova coluna. Por enquanto, esta será a tela da postagem do blog para que possamos usar post.
| Add_filter (‘manage_post_posts_columns’, ‘efi_table_head’); | |
| / ** | |
| * Cabeçalhos de coluna personalizados | |
| * | |
| * Esta função adiciona a coluna personalizada que precisamos. É adicionado ao início | |
| * Dividindo a matriz original. | |
| * | |
| * @param array $ columns As colunas contidas na lista de postagens | |
| * | |
| * / | |
| Função efi_table_head ($ columns) { | |
| $ Checkbox = array_slice ($ colunas, 0, 1); | |
| $ Columns = array_slice ($ columns, 1); | |
| $ New [‘_ post_thumbnail’] = ‘Imagem’; | |
| $ Columns = array_merge ($ checkbox, $ new, $ columns); | |
| Retornar $ colunas; | |
| } |
Observe como a função é documentada usando os padrões phpDoc . No próprio plugin, todas as funções estão documentadas como esta. Os omitirei neste artigo a partir de agora.
O primeiro parâmetro passado para esta função é o conjunto de colunas já instaladas. As chaves da matriz são os slugs das colunas, os valores são os nomes. Normalmente, adicionar um valor é tão fácil como adicionar um membro à matriz. No entanto, isso irá adicioná-lo ao final e eu queria adicioná-lo na segunda posição.
A primeira coluna é usada pela caixa de seleção, então eu dividi a matriz em dois. O primeiro contém apenas a caixa de seleção, o segundo contém o resto. Eu também criei uma terceira série com apenas um membro nossa nova coluna de imagem.
Eu mesclava esses três arrays – colando nosso campo de imagem no meio – criando o conjunto final de colunas, o campo de imagem em segundo lugar. Se for feito direito, você deve ver uma nova coluna no administrador da postagem sem nenhum conteúdo.
Adicionando conteúdo à coluna
A adição de conteúdo é feita agendando uma função manage_[POST_TYPE]_posts_custom_column. Você precisa ter cuidado com esta função, pois retornará o conteúdo para todas as colunas, então você precisa usar instruções if para segmentar as específicas.
Antes de escrever o PHP, vamos discutir algum HTML. A coisa mais importante a perceber é que não cheguei ao código final na minha primeira viagem. Eu comecei com uma estrutura mais simples, mas percebi que eu precisava de mais uma vez que eu começava.
Existem três partes principais para o nosso HTML. Um deles é a exibição da imagem em destaque. Eu queria mostrar a pequena miniatura e uma versão maior no hover. Se não houver nenhuma imagem destacada, precisamos de uma tela que solicite aos usuários que adicionem uma. Finalmente, precisamos de um link de remoção de imagem que remova a imagem em destaque quando clicado.
| <! – A principal div efi-miniatura recebe a classe sem imagem se a postagem não tiver uma imagem -> | |
| < Div class = ‘ efi-thumbnail ‘ > | |
| < Div class = ‘ efi-images ‘ > | |
| <! – Se a publicação tiver uma miniatura -> | |
| < A href = ‘ ‘ class = ‘ efi-escolher-image ‘ > < img class = ‘ apego-thumbnail ‘ src = ‘ ‘ > </ a > | |
| < A href = ‘ ‘ class = ‘ efi escolher-image ‘ > < img class = ‘ apego de médio ‘ src = ‘ ‘ > </ a > | |
| <! – Se a publicação não tiver uma miniatura -> | |
| < A href = ‘ ‘ class = ‘ efi-escolher-image ‘ > adicionar imagem </ a > | |
| </ Div > | |
| < A href = ‘ ‘ class = ‘ efi-remove-image ‘ > remover </ a > | |
| </ Div > |
Os pontos principais aqui são os seguintes. O elemento com a efi-thumbnailclasse também recebe no-imagese não houver uma miniatura anexada. O efi-imageselemento contém um prompt para carregar uma imagem ou duas imagens – a miniatura e as versões de tamanho médio. A versão de tamanho médio será escondida, aparecerá quando você passar o mouse sobre o efi=imageselemento.
Também temos um link de remoção de imagem. Na verdade, está sempre lá. Usaremos CSS para escondê-lo se o recipiente principal tiver a no-imageclasse.
Mais uma coisa a notar é que, uma vez que vamos trabalhar com o Javascript, não há necessidade de usar links em todos os lugares, então o que dá? Apenas no caso de algo dar errado, esses links levarão os usuários à página de publicação de edição. Isso é útil se o JS estiver desligado (bastante raro hoje em dia) ou se outro plugin provoca um problema de Javascript que afeta nosso plugin. O PHP final será assim:
| Add_action (‘manage_post_posts_custom_column’, ‘efi_column_content’, 10, 2); | |
| Função efi_column_content ($ column_slug, $ post_id) { | |
| Se (‘_post_thumbnail’ == $ column_slug) { | |
| $ Nonce = wp_create_nonce (“set_post_thumbnail-“. $ Post_id); | |
| $ No_image = (has_post_thumbnail ($ public_id))? ”: ‘Não-imagem’; | |
| Eco “< div class = ‘ efi-thumbnail”. $ No_image. ” ‘ >”; | |
| Eco “< div class = ‘ efi-images ‘ >”; | |
| Se (has_post_thumbnail ($ post_id)) { | |
| Echo “< a class = ‘ efi-choose-image ‘ data-nonce = ‘ “. $ Nonce. ” ‘ Href = ‘ “. Get_edit_post_link ($ post_id). ” ‘ >” “. Get_the_post_thumbnail ($ post_id, ‘thumbnail’). ‘</ A >’; | |
| Echo “< a class = ‘ efi-choose-image ‘ data-nonce = ‘ “. $ Nonce. ” ‘ Href = ‘ “. Get_edit_post_link ($ post_id). ” ‘ >” “. Get_the_post_thumbnail ($ post_id, ‘medium’). ‘</ A >’; | |
| } | |
| outro { | |
| Echo “< a class = ‘ efi-choose-image ‘ data-nonce = ‘ “. $ Nonce. ” ‘ Href = ‘ “. Get_edit_post_link ($ post_id). ” ‘ > < I class = ‘ dashicons dashicons-plus “ > </ i > < br > adicionar imagem </ a >”; | |
| } | |
| Echo ‘</ div >’; | |
| Eco “< a href = ‘ “. Get_edit_post_link ($ post_id). ” ‘ Data-nonce = ‘ “. $ Nonce. ” ‘ Class = ‘ efi-remove-image ‘ > < i class = ‘ dashicons dashicons-no ‘ > </ i > remove </ a >”; | |
| Echo ‘</ div >’; | |
| } | |
| } |
Todo o código está envolvido em uma instrução if que separa o código de nossa coluna de todo o resto. Use o slug que você definiu na função anterior aqui. O primeiro parâmetro da função é o slug da coluna, o segundo é o id do post.
Eu wp_create_nonce()costumava adicionar alguma segurança adicional, e também para poder usar as funções internas do WordPress mais tarde, vou explicar quando chegarmos ao Javascript. Por enquanto, o bit importante é que um nonces é uma camada de segurança que garante que um usuário tenha as permissões e a intenção de executar uma ação específica.
O resto é direto, eu costumava recuperar get_edit_post_link()o link para a tela de edição get_the_post_thumbnail()da publicação e pegar as miniaturas em diferentes tamanhos.
Eu também usei Dashicons , a fonte de ícone que WordPress usa para tornar a exibição mais agradável sem ter que recorrer a imagens ou outros recursos. Você pode adicionar qualquer ícone disponível no backend usando este formato:
| < I class = ‘ dashicons dashicons-icon ‘ > </ i > |
Substitua iconna segunda classe com o nome do ícone que você precisa. Você pode procurar os nomes usando o link acima ou a lista no site do Kevin Leary . Eu prefiro o último porque você não precisa clicar no ícone primeiro para ver o nome.
Conteúdo estilístico
Sem uma folha de estilo, nossa tabela parece incrível agora. Vamos consertar isso criando nossos estilos usando o admin_enqueue_scriptsgancho.
| Add_action (‘admin_enqueue_scripts’, ‘efi_enqueue_assets’); | |
| Função efi_enqueue_assets ($ page) { | |
| Se (‘edit.php’! = $ Page) { | |
| Retorna; | |
| } | |
| Wp_enqueue_style (‘efi_styles’, plugin_dir_url (__FILE__). ‘/style.css’); | |
| } |
O primeiro parâmetro nos permite enquever nossos recursos apenas nas páginas que queremos. No nosso caso, esta é a página de edição. Em todos os outros casos, retornamos rapidamente antes de serem adicionados scripts ou estilos. Como você pode ver, estamos ligando para um style.cssno diretório do plugin, crie esse arquivo agora e use o seguinte CSS para que pareça nosso exemplo.
| / * Largura máxima da coluna * / | |
| .manage-column.column-_post_thumbnail { | |
| Largura : 72 px ; | |
| } | |
| / * Faz com que grandes imagens possam ser colocadas sobre a mesa * / | |
| ._post_thumbnail.column-_post_thumbnail { | |
| Transbordamento : visível ; | |
| } | |
| / * Certifique-se de que os elementos absolutamente posicionados dentro estão alinhados com este elemento * / | |
| .efi-thumbnail { | |
| Posição : relativa ; | |
| } | |
| / * Tamanho máximo da miniatura * / | |
| .efi-thumbnail .attachment-thumbnail { | |
| Largura máxima : 72 px ; | |
| Max-height : 72 px ; | |
| } | |
| / * Posicionamento da exibição de imagem de tamanho médio * / | |
| .efi-thumbnail .attachment-medium { | |
| Posição : absoluta ; | |
| Topo : 0 px ; | |
| Esquerda : 0 px ; | |
| Exibir : nenhum ; | |
| } | |
| / * Mostrar imagem maior quando pairar sobre o menor * / | |
| .efi-images : hover .attachment-medium { | |
| Exibição : bloco ; | |
| Índice z : 4000 ; | |
| } | |
| / * Sem estilo de imagem * / | |
| .efi-thumbnail.no-image a .efi-choose-image { | |
| Exibição : bloco ; | |
| Altura : 70 px ; | |
| Largura : 70 px ; | |
| border : 1 px frustradas #aaa ; | |
| Font-size : 11 px ; | |
| Text-align : center ; | |
| Exibição : tabela-célula ; | |
| Vertical-alinhamento : meio ; | |
| Cor : #aaa ; | |
| -webkit-transition : all .1 s ease-in 0 ; | |
| Transição : todos .1 s facilidade em 0 ; | |
| } | |
| .efi-thumbnail.no-imagem a .efi-choose-image : hover { | |
| Cor : # 0074a2 ; | |
| Border-color : # 0074a2 ; | |
| } | |
| .efi-thumbnail.no-imagem um .efi-escolher-imagem .dashicons { | |
| Transição : nenhuma ; | |
| -webkit-transition : nenhum ; | |
| } | |
| / * Estilo de link de remoção de imagem * / | |
| .efi-remove-image { | |
| Font-size : 11 px ; | |
| Cor : #aaa ; | |
| } | |
| .efi-remove-image .dashicons { | |
| Tamanho da fonte : 10 px ; | |
| Largura : 10 px ; | |
| Altura : 10 px ; | |
| Altura da linha : 11 px ; | |
| Vertical-alinhamento : meio ; | |
| } | |
| .efi-remove-image : hover { | |
| Cor : # aa0000 ; | |
| } | |
| .efi-thumbnail.no-image .efi-remove-image { | |
| Exibir : nenhum ; | |
| } |
A primeira coisa que fiz foi limitar a largura da nossa coluna, não deveria ocupar muito espaço. Eu fiz 72px de largura – junto com a miniatura pequena.
A imagem de tamanho médio é posicionada absolutamente na parte superior esquerda do recipiente. Quando o usuário paira sobre o .efi-imageselemento, o anexo de tamanho médio é mostrado, cobrindo a miniatura.
O link de adicionar imagem tem um monte de regras para fazê-lo parecer legal. Eu display: table-cellcostumava ser capaz de alinhar o texto verticalmente sem a necessidade de elementos de contêiner adicionais. Eu também adicionei uma transição para tornar a experiência de um pouco melhor. Observe que a transição é removida dos dashicons. Uma vez que eles têm sua própria transição, isso funcionaria em conjunto com o nosso próprio, que é um pouco difícil.
Neste ponto, as coisas devem estar se formando bem. As imagens são exibidas, o trabalho de transição do cursor, o link de adicionar imagens parece ser bom.
Funcionalidade de Javascript
O lado JavaScript do nosso código é o mais complexo, então, em vez de colar todo o código, eu trabalharei em etapas aqui.
Enqueageing Javascript
Usaremos a mesma efi_enqueue_assets()função que usamos para CSS, mas precisamos discutir algumas coisas de antemão. Eu mencionei que estaremos usando a janela de mídia incorporada do WordPress para carregar / selecionar imagens. Isso requer uma série de scripts e estilos a serem adicionados. O WordPress tornou isso mais fácil, fornecendo a wp_enqueue_media()função para fazê-lo para nós. Precisamos adicioná-lo à nossa função enqueue.
Nós também precisamos de uma maneira de traduzir algumas cordas no nosso arquivo Javascript, e também para dizer onde está o nosso admin-ajax.phparquivo. Isso é fornecido pelo WordPress como uma estrutura para chamadas AJAX, é encontrado na wp-adminpasta. Podemos passar nossas traduções e o URL admin ajax usando a wp_localize_script()função que também será parte de nossa função de enqueue. Aqui está a versão final:
| Função efi_enqueue_assets ($ page) { | |
| Se (‘edit.php’! = $ Page) { | |
| Retorna; | |
| } | |
| Wp_enqueue_style (‘efi_styles’, plugin_dir_url (__FILE__). ‘/style.css’); | |
| Wp_enqueue_script (‘efi_scripts’, plugin_dir_url (__FILE__). ‘/scripts.js’); | |
| Wp_enqueue_media (); | |
| Wp_localize_script (‘efi_scripts’, ‘efi_strings’, matriz ( | |
| ‘Browse_images’ => __ (‘Procurar ou carregar uma imagem’, ‘easy-featured-images’), | |
| ‘Select_image’ => __ (‘Definir imagem destacada’, ‘easy-featured-images’), | |
| ‘Ajaxurl’ => admin_url (‘admin-ajax.php’) | |
| )); | |
| } |
O primeiro parâmetro wp_localize_script()é o identificador do script que queremos localizar . O segundo parâmetro será o nome do objeto que podemos usar para se referir às nossas strings. O terceiro parâmetro é a matriz de tradução. As chaves serão usadas para se referir aos valores. Por exemplo: podemos usar efi_strings.browse_imagesem nosso Javascript para exibir o texto especificado aqui.
Ao envolver a __()função de tradução ao redor do texto, certifiquei-me de que os usuários possam traduzir isso mais tarde.
Framework de upload de mídia
Eu trapacei um pouco e usei o código do Tom Your McFarin Your Own Instance do WordPress Media Uploader artigo. Obrigado Tom! Aqui está uma versão ligeiramente modificada sem comentários.
| ( Função ( $ ) { | |
| ‘ Usar rigoroso ‘ ; | |
| / * Wp global, console * / | |
| Var file_frame, image_data; | |
| $ ( Documento ). On ( ‘ clique ‘ , ‘ .efi-choose-image ‘ , função ( evento ) { | |
| Se ( indefinido ! == file_frame) { | |
| File_frame . Aberto (); | |
| Retorno ; | |
| } | |
| File_frame = wp . Mídia . Quadros . File_frame = wp . Mídia ({ | |
| Título : “ Inserir mídia “ , // Para produção, isso precisa de i18n. | |
| Botão : { | |
| Texto : “ Upload Image ” // Para produção, isso precisa de i18n. | |
| }, | |
| Múltiplo : falso | |
| }); | |
| File_frame . On ( ‘ select ‘ , function () { | |
| Image_data = file_frame . Estado (). Obter ( ‘ seleção ‘ ). Primeiro (). ToJSON (); | |
| }); | |
| File_frame . Aberto (); | |
| }); | |
| }) (JQuery); |
A essência é esta: quando clicamos no .efi-choose-imageelemento que verificamos se file_frameestá definido, isso contém uma instância do carregador de mídia. Se existe, usamos a open()função para exibi-la. Se não criarmos usando a wp.media()função. Passamos o título (mostrado na parte superior da janela) e o texto do botão.
Usando a file_frame.on( 'select', function() {})seção, definimos o que acontece quando o usuário clica na imagem e, finalmente, abrimos o recém-criado file_frame. Nós também retornamos o falso no final para evitar que o link realmente dispare e levem o usuário para a página de edição de postagem.
Manipulação de imagens exibidas
Sem mais delongas, aqui está o código usado no plugin atual. Defini algumas variáveis mais e usamos nosso objeto de tradução ao criar, file_framemas a maioria disso é a mesma que antes. A carne deste código está dentro da seleção, mesmo assim vamos ver isso em detalhes abaixo do exemplo.
| ( Função ( $ ) { | |
| ‘ Usar rigoroso ‘ ; | |
| Var file_frame, post_id, nonce, efi_thumbnail; | |
| jQuery ( documento ). On ( ‘ clique ‘ , ‘ .efi-choose-image ‘ , função ( evento ) { | |
| Post_id = $ ( this ). Pais ( ‘ tr: primeiro ‘ ). Attr ( “ id “ ). Substituir ( ‘ post- ‘ , ‘ ‘ ); | |
| Nonce = $ ( this ). Dados ( ‘ nonce ‘ ); | |
| Efi_thumbnail = $ ( this ). Pais ( ‘ .efi-thumbnail ‘ ); | |
| Se ( indefinido ! == file_frame) { | |
| File_frame . Aberto (); | |
| Retornar falso ; | |
| } | |
| File_frame = wp . Mídia . Quadros . File_frame = wp . Mídia ({ | |
| Título : efi_strings . Browse_images , | |
| Botão : { | |
| Texto : efi_strings . selecione a imagem | |
| }, | |
| Múltiplo : falso | |
| }); | |
| File_frame . On ( ‘ select ‘ , function () { | |
| Var image_data = file_frame . Estado (). Obter ( ‘ seleção ‘ ). Primeiro (). ToJSON (); | |
| Var thumbnail = image_data . Tamanhos . Miniatura ; | |
| Var medium = image_data . Tamanhos . Médio ; | |
| Se ( efi_thumbnail . HasClass ( ‘ no-image ‘ )) { | |
| Efi_thumbnail . RemoveClass ( ‘ no-image ‘ ); | |
| Var link = efi_thumbnail . encontrar ( ‘ a.efi-escolher-image ‘ ); | |
| Link . Html ( ‘ ‘ ). Clone (). InsertAfter (link); | |
| Var thumbnail_image = $ ( ‘ <img> ‘ ). Attr ({ | |
| Largura : miniatura . largura , | |
| Altura : miniatura . Altura , | |
| Classe : ‘ attachment-thumbnail wp-post-image ‘ , | |
| src : miniaturas . url , | |
| Alt : image_data . Alt | |
| }) | |
| Var medium_image = $ ( ‘ <img> ‘ ). Attr ({ | |
| Largura : média . largura , | |
| Altura : média . Altura , | |
| Classe : ‘ attachment-medium wp-post-image ‘ , | |
| Src : médio . url , | |
| Alt : image_data . Alt | |
| }) | |
| Efi_thumbnail . encontrar ( ‘ a.efi-escolher-image: first ‘ ). Html (thumbnail_image); | |
| Efi_thumbnail . encontrar ( ‘ a.efi-escolher-image: último ‘ ). Html (imagem média); | |
| Efi_thumbnail . encontrar ( ‘ a.efi-escolher-image ‘ ). WrapAll ( “ <div class = ‘efi-images’ /> “ ); | |
| } | |
| Else { | |
| Efi_thumbnail . encontrar ( ‘ .attachment-thumbnail ‘ ). Attr ( ‘ src ‘ , thumbnail . Url ); | |
| Efi_thumbnail . encontrar ( ‘ .attachment de médio ‘ ). Attr ( ‘ src ‘ , medium . Url ); | |
| } | |
| $ . Post ( efi_strings . Ajaxurl , { | |
| _ajax_nonce : nonce, | |
| Post_id : post_id, | |
| Thumbnail_id : image_data . Id , | |
| Ação : ‘ set-post-thumbnail ‘ | |
| }) | |
| }); | |
| File_frame . Aberto (); | |
| Retornar falso ; | |
| }); | |
| }) (JQuery); |
Eu criei uma variável thumbnaile mediumpara armazenar os dados desses tamanhos de imagem. Isso inclui a largura, altura e URL das imagens. Se a publicação já tiver uma imagem em destaque, temos dois srcelementos de imagem, tudo o que precisamos fazer é substituir as propriedades.
Se a postagem não tiver uma imagem em destaque, tudo o que temos é adicionar um novo link, precisamos criar esses elementos. Primeiro removemos a no-imageclasse. Nós achamos o link adicionar imagem e duplicá-lo. Eu decidi ir por essa abordagem porque já contém um link para a publicação, portanto não precisamos passá-la usando a matriz de tradução. Os links estão agora corretos, precisamos apenas colocar uma imagem neles.
Usando as thumbnailpropriedades do objeto, criamos um elemento de imagem com vários atributos. As classes adicionadas são as mesmas que o WordPress adicionaria à imagem. Finalmente, a altpropriedade é retirado do image_dataobjeto (que contém os dados tanto para a miniatura ea imagem de tamanho médio), porque o texto alt é comum a todos os tamanhos de imagem.
Fazemos o mesmo para a imagem de tamanho médio e colocá-los dentro dos links. Em seguida, efi-imagesenvolvemos todo o item dentro do elemento para acabar com nossa estrutura HTML final.
Neste momento, carregar / selecionar imagens funcionará bem. As imagens não serão salvas na publicação, então, se você recarregar a página, você acabará onde você começou, mas estamos quase lá.
Atribuindo as imagens em destaque
Esta parte consiste em apenas um par de linhas, mas a explicação é um pouco complexa. No entanto, penso que é importante entender como cheguei lá. A imagem selecionada precisa ser exibida na lista de publicações e precisa ser realmente adicionada à publicação como uma imagem destacada – é aí que entra o AJAX. Podemos escrever nosso próprio manipulador para isso. Sabemos que as imagens em destaque são armazenadas na meta meta do post usando a _thumbnail_idchave, seria uma questão de usar update_post_meta()com os parâmetros corretos. No entanto, por que não usar o mesmo mecanismo que o WordPress usa?
Fui para a página de edição de postagens e adicionei uma imagem em destaque. Eu usei as Ferramentas do desenvolvedor do Chrome para descobrir como o WordPress adiciona a imagem em destaque. Nós temos uma publicação aqui no WPMU DEV sobre o uso de Ferramentas de desenvolvimento do Chrome para coisas assim, procure mais informações . O cabeçalho da solicitação feita pelo WordPress parece assim:
Isso significa que, se usarmos os parâmetros corretos, nem precisaremos escrever uma função para que isso funcione, usaremos o WordPress nativo! O único desafio é o nonce. Ao criar um nonce, precisamos saber o nome da ação usada. Eu cavava em torno de um, mas no código-fonte até encontrar o código principal responsável por criar o nonce para a imagem em destaque, o nome da ação não é set_post_thumbnail-[PostID]. Este é o lugar do código para criar o nosso nonce!
Então, para adicionar uma imagem em destaque usando a função incorporada do WordPress, precisamos usar o AJAX para publicar alguns dados no admin-ajax.php. Os dados devem conter o nonce, o ID do post, o ID da miniatura e a ação set-post-thumbnail.
Removendo imagens em destaque
O mesmo mecanismo se aplica aqui. Precisamos ter certeza de que visualmente tudo funciona e também precisamos usar o AJAX para realmente remover a imagem no banco de dados. O código a seguir deve ser adicionado ao nosso arquivo Javascript após a função de clique.
| $ ( Documento ). On ( ‘ clique ‘ , ‘ .efi-remove-image ‘ , function () { | |
| Efi_thumbnail = $ ( this ). Pais ( ‘ .efi-thumbnail ‘ ); | |
| Nonce = $ ( this ). Dados ( ‘ nonce ‘ ); | |
| Var url = $ ( this ). Attr ( ‘ href ‘ ); | |
| Var post_id = parseInt ( efi_thumbnail . Pais ( ‘ tr: first ‘ ). Attr ( ‘ id ‘ ). Replace ( ‘ post- ‘ , ‘ ‘ )); | |
| Efi_thumbnail . AddClass ( ‘ não-imagem ‘ ); | |
| Var choose_image = $ ( ‘ <a> ‘ ). Attr ({ | |
| Href : url, | |
| ‘ Data-nonce ‘ : nonce, | |
| Classe : ‘ efi-choose-image ‘ | |
| }). Html ( “ <i class = ‘dashicons dashicons-plus’> </ i> <br> adicionar imagem </a> “ ) | |
| Efi_thumbnail . encontrar ( ‘ .efi-imagens ‘ ). Html (choose_image); | |
| $ . Post ( efi_strings . Ajaxurl , { | |
| _ajax_nonce : nonce, | |
| Post_id : post_id, | |
| Thumbnail_id : – 1 , | |
| Ação : ‘ set-post-thumbnail ‘ | |
| }) | |
| Retornar falso ; | |
| }) |
Nós descobrimos o nonce, url, post_id e adicione o no-imageelemento pai. Em seguida, criamos um link de imagem escolhido criando a mesma estrutura HTML do que em nosso arquivo PHP. Nós substituímos o conteúdo do .efi-imagesnosso recém-formado link.
Finalmente, usamos a função incorporada do WordPress para remover a imagem em destaque. O formato é exatamente o mesmo que você viu antes. A única diferença é que o ID da miniatura precisa ser definido como -1.
Adicionando o Plugin ao Repositório
Adicionar um plugin é realmente muito fácil. Aqui estão os passos básicos, eu vou passar por como eu fiz cada um abaixo:
- Crie um arquivo readme do plugin
- Feche tudo e envie-o para o diretório
- Uma vez aprovado, adicione seus arquivos ao sistema SVN
- Crie ativos opcionais para melhor exibição
Criando um arquivo Leiame do plugin
Este não é muito difícil porque não só o WordPress possui um excelente modelo de Leiame, mas também um leitor de Readme . Aqui está o readme do plugin na sua totalidade:
| === Imagens em destaque fáceis === | |
| Colaboradores: danielpataki | |
| Tags: mídia, imagens em destaque, ajax | |
| Requer pelo menos: 3.5.0 | |
| Testado até: 4.1.1 | |
| Etiqueta estável: tronco | |
| Licença: GPLv2 ou posterior | |
| URI da licença: http://www.gnu.org/licenses/gpl-2.0.html | |
| Permite adicionar e remover imagens apresentadas das listas de postagens do administrador. Trabalha com AJAX e magia para o prazer da sua atribuição de imagem. | |
| == Descrição == | |
| As Imagens em destaque fáceis permitem que você atribua imagens apresentadas às postagens de forma muito mais eficiente, especialmente se você tiver várias postagens para passar. Normalmente, você deve visitar a página de edição de cada publicação, iniciar a janela de mídia e carregar / atribuir a imagem. | |
| Com o plugin ativado, você pode fazer isso na tela da lista de postagens. Todas as palavras via AJAX para que as imagens sejam atribuídas instantaneamente, sem ter que aguardar a carga das páginas. Ele usa a caixa de mídia comum do WordPress, fazendo o plugin 100% WordPress incrível. | |
| Graças a [Tom McFarlin] (https://tommcfarlin.com/the-wordpress-media-uploader/) para a base do Javascript que inicia o upoader de mídia. | |
| == Instalação == | |
| = Instalação automática = | |
| Instalar este plugin automaticamente é a opção mais fácil. Você pode instalar o plugin automaticamente indo à seção de plugins no WordPress e clicando em Adicionar novo. Digite “Imagens em destaque fáceis” na barra de pesquisa e instale o plugin clicando no botão Instalar agora. | |
| = Instalação manual = | |
| Para instalar manualmente o plugin, você precisará baixar o plugin no seu computador e enviá-lo para o servidor via FTP ou outro método. O plugin precisa ser extraído na pasta `wp-content / plugins`. Uma vez feito, você deve ser capaz de ativá-lo como de costume. | |
| Se você está tendo problemas, dê uma olhada na seção [Gerenciando Plugins] (http://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation) no WordPress Codex, ele tem mais informações sobre este tópico. | |
| == Screenshots == | |
| 1. A tela de edição de postagem | |
| == Changelog == | |
| = 1,0 = | |
| * Lançamento inicial. |
Observe que ele não possui três seções que às vezes são encontradas em outros plugins. Você pode adicionar uma seção de aviso de atualização, se algo especial precisa ser feito durante uma atualização. Uma seção de FAQ também está disponível, mas uma vez que esta é uma primeira versão, eu ainda não tenho perguntas freqüentes. Finalmente, um link de doação também está disponível, que será exibido na página do plugin do WordPress.
Zip e Submit
Depois de ter seu arquivo readme na pasta de plugins, recarregue tudo e envie-o . Esteja ciente de que o nome do plugin que você insere aqui se traduzirá diretamente para o URL, que também será o nome do projeto no repositório SVN. Eu escolhi imagens apresentadas com facilidade porque o URL será imagens com facilidade.
Certifique-se de adicionar algumas notas às pessoas legais que analisam seu trabalho. Eles recebem toneladas de envios todos os dias e um agradecimento no final deve ser a quantidade mínima de cortesia que você mostra em relação a eles.
Adicionar Plugin ao SVN
Uma vez aprovado, você terá acesso a um repositório SVN. Isso leva entre 24 a 72 horas e, dependendo de quão complexo seja seu plugin, pode levar mais tempo. Você deve receber um e-mail contendo os detalhes e alguns links úteis, algo assim:
SVN é um sistema de controle de versão que o WordPress usa, você precisa adicionar seu plugin para que ele apareça no repositório. Se você quiser saber mais sobre o SVN, sugiro olhar para a documentação do WordPress ou, ainda melhor, o livro gratuito do SVN disponível on-line.
Para usar o SVN, você precisará do terminal ou de um aplicativo como Tortoise SVN para Windows ou SVNx para Mac. Eu uso o terminal, pois parece ser o mais rápido.
Entre em qualquer diretório que eu gosto e digite svn co http://plugins.svn.wordpress.org/easy-featured-images/. Isso verifica o plugin no diretório. A nova pasta contém quatro subpastas: ativos, tronco, ramos e tags. A pasta tronco deve conter o desenvolvimento ou a versão mais recente do plugin. Eu copio todos os arquivos do diretório do plugin lá.
Em seguida, digite svn add *para adicionar todos os novos arquivos seguidos por svn ci -m "Commit Message". Eu uso a mensagem de confirmação para descrever as mudanças que fiz. Isso enviará o código para os servidores do WordPress, o plugin aparecerá após 15-20 minutos, se você pesquisá-lo online.
Ativos opcionais
Se você quiser fazer seu plugin parecer ótimo e adicionar algumas capturas de tela no processo, você precisará usar a seção de ativos. Eu adicionei três imagens: duas para o ícone do plugin e uma para o banner grande. O banner deve ser 772px x 250px, e deve ser nomeado banner=772x250.png.
Ele aparecerá na página do plugin na seção de plugins do WordPress como esta:
Você também pode adicionar um ícone de 256 × 256 e 128 × 128 aos ativos. Estes aparecem no finder do plugin no administrador do WordPress. Eles adicionam um toque de cor e singularidade muito necessários aos seus plugins, eu realmente recomendo a criação desses arquivos. Os arquivos precisam ser nomeados icon-128x128.pnge, icon-256x256.pngrespectivamente. Uma vez adicionados, aparecerão na seção de plugins como esta.
Conclusão
Lá você tem, um completo plugin que faz algo útil de zero para publicação no repositório. Se você precisar desta funcionalidade e ter algum tempo, exorto-o a tentar construí-lo por si mesmo – ele irá ajudá-lo a crescer como um desenvolvedor de plugins.
Se você não tiver o tempo, você pode pegar o plugin real, Imagens em destaque fáceis , do Diretório de plugins do WordPress. Divirta-se em desenvolver suas próprias coisas!
Você tem dicas para criar plugins e fazer o upload para o Diretório de Plugins do WordPress? Conte-nos nos comentários abaixo.
