Ajuda para criar um tipo de postagem personalizado de apresentação de slides com meta caixas personalizadas?


16

Preciso criar uma (s) meta (s) caixa (s) de postagem personalizada (s) para o meu tipo de postagem personalizado "Slideshow" (esse tipo de postagem já foi criado). Cada metabox retém o conteúdo de cada slide e o salva nos campos personalizados correspondentes. Cada metabox deve conter os seguintes campos:

  • Título (campo de texto)
  • Imagem (um campo de texto para o URL img ou, idealmente, uma lista suspensa mostrando miniaturas das imagens anexadas à postagem)
  • Código de incorporação (área de texto)
  • Descrição (wysiwyg)
  • Ocultar o slide (marque a caixa de seleção para ocultar temporariamente um slide sem excluí-lo)
  • Excluir slide (botão que exclui o conteúdo dos meta-campos de postagem que foram preenchidos por este slide)

Eu também gostaria de um botão em algum lugar que me permita "Adicionar um slide", para que, ao ser clicado, adicione outra Meta Box Personalizada "Slide", que é uma duplicata da primeira, mas que adicione um número incremental a cada meta campo personalizado da postagem. Atualmente, tenho apenas 15 metaboxes e o modelo Slideshow é configurado de uma maneira que, se apenas 5 metaboxes forem preenchidos, apenas 5 slides serão exibidos.

Por fim, gostaria de poder reordenar os slides, seja por "Arrastar e soltar" ou por outro campo de texto no qual possa digitar o número do pedido.

Cheguei quase onde precisava com o plug - in "More Fields" e alguma ajuda de código da Rarst. Com o plug-in "Mais campos", tenho os seguintes campos em cada metabox:

  • Título (campo de texto)
  • Imagem (uma lista suspensa das imagens anexadas à postagem)
  • Código de incorporação (área de texto)
  • Descrição (wysiwyg)
  • Ocultar o slide (marque a caixa de seleção para ocultar temporariamente um slide sem excluí-lo)

Aqui está uma captura de tela de como eu o configurei através do plug-in "Mais campos":

texto alternativo

O problema é que não há como excluir um slide depois que ele é criado porque "Mais campos" não é usado em <?php delete_post_meta($post_id, $key, $value); ?>nenhum lugar. O outro problema com o plug-in é que ele não é confiável demais e quebras com frequência nas atualizações.

Consegui implementar uma solução semelhante com meus próprios metaboxes personalizados que incluem:

  • Título (campo de texto)
  • Imagem (campo de texto para o URL img)
  • Código de incorporação (área de texto)
  • Descrição (área de texto)
  • Ocultar o slide (marque a caixa de seleção para ocultar temporariamente um slide sem excluí-lo)

Com esta implementação, não consigo obter os vários campos do TinyMCE para funcionar ou a caixa suspensa da imagem. O código TinyMCE parece funcionar até que eu adicionar o código que criar cópias incrementais do primeiro METABOX altura em que eu recebo esse direito erro acima do campo onde os botões TinyMCE deve ser: Warning: array_push() [function.array-push]: First argument should be an array....

Além disso, agora eu estou contando com meus escritores para saberem colocar um vídeo ou uma imagem para cada slide e tudo bem, mas pode ser melhor ter um botão de opção que permita que eles escolham qual o slide (provavelmente o padrão é imagem) que está vinculada a uma instrução de exibição condicional no modelo de apresentação de slides.

Estou lidando com uploads de imagens através da caixa "Imagem em destaque" na barra lateral, embora não me importe com uma metabox personalizada que simplesmente diga "Upload Images" na parte superior do painel de gravação.

Por fim, estou procurando uma apresentação de slides semelhante a esta: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html . Quero que o meu também possa ter um vídeo como conteúdo no slide, em vez de uma imagem. Preciso de um painel de administração intuitivo e fácil de usar para meus escritores (eles não são muito conhecedores de tecnologia e não são confiáveis ​​usando html e / ou códigos de acesso). Caso não esteja claro no exemplo, cada slide deve gerar uma nova visualização de página.

A reordenação do Drag'n'Drop não é uma alta prioridade, mas seria legal. Eu encontrei um plugin que lida com isso muito bem: SlideDeck . Infelizmente, o plug-in não se adequa às minhas necessidades, mas o modo como eles lidam com a ordenação dos slides é bastante liso. É um metabox separado na barra lateral que permite arrastar os slides na ordem que desejar. Também é assim que você adiciona slides, clicando no botão "Adicionar slide", que adiciona outra Metabox de slides ao painel de gravação. Aqui está uma captura de tela:

texto alternativo

Você também pode ver mais capturas de tela em ação no repositório wordpress .

Aqui está todo o meu código:

As funções que configuram meu tipo de postagem de apresentação de slides e paginação de apresentação de slides: http://loak.pastebin.com/g63Gf186

O código original de DeluxeBloggingTips.com (DBT) do qual baseei minhas Metaboxes: http://loak.pastebin.com/u9YTQrxf

A versão do código DBT que eu modifiquei para fornecer versões incrementais da mesma metabox: http://loak.pastebin.com/WtxGdPrN

Uma versão modificada do código DBT que Chris Burbridge criou para permitir várias instâncias do TinyMCE: http://loak.pastebin.com/Mqb3pKhx Com esse código, os TinyMCEs funcionam.

Minha modificação do código de Burbridge que tenta incorporar meu incremento e um campo que permite escolher a imagem em uma lista suspensa de todas as imagens anexadas à postagem: http://loak.pastebin.com/xSuenJTK Nesta tentativa, o TinyMCE está quebrado e o menu suspenso não funciona.

Provavelmente isso não importa, mas caso você esteja se perguntando, aqui está o código que eu uso para extrair o código de incorporação da meta personalizada da postagem, redimensioná-la e inseri-la na postagem: http://loak.pastebin.com / n7pAzEAw

Esta é uma versão editada da pergunta original para refletir o status atual do projeto e responde às perguntas postadas nos comentários. Obrigado a Chris_O por colocar a recompensa nisso. Além disso, obrigado a Rarst e Justin por me ajudarem com muito disso no fórum ThemeHybrid.com . Passei horas e horas nisso e estou preso (passei algumas horas sozinho nessa questão). Qualquer ajuda seria muito apreciada.


Você pode desenhar uma imagem simples que mostre a imagem inteira, como um esboço ou algo assim? Eu acho que é útil entender melhor suas necessidades.
hakre 14/09/10

Eu adicionei alguns exemplos ao final. Se isso não esclarecer suficientemente as coisas, me avise.
mate

Ainda não está claro?
mate

Qualquer um? Isto está ligado?
mate

@Hakre, você está aí?
19410 matt

Respostas:


6

Do ponto de vista das coisas, sua aposta mais segura e a rota mais fácil seria usar o plug-in More Fields especificamente para seu uso. Os dois maiores recursos que posso ver o seu garfo precisam são de uma "fábrica" ​​de campo e uma interface de arrastar e soltar.

Campos múltiplos

Minha sugestão seria olhar para a classe Widget do WordPress e usá-la como modelo para sua fábrica de campo - basicamente, pegue emprestada a capacidade de criar várias instâncias de um campo depois de criar a estrutura para ele.

Este é o núcleo de como vários widgets funcionam em uma barra lateral:

  • Você define o código para cada widget uma vez estendendo a WP_Widgetclasse.
  • Em seguida, você pode criar quantas cópias do widget desejar
    • As especificidades de cada widget são armazenadas como dados serializados na tabela de opções
  • Você pode personalizar cada widget, removê-los com um deletecomando simples e definir seu posicionamento explicitamente através da interface de arrastar e soltar aparência.

Arrastar e soltar

Mais uma vez, sugiro procurar o sistema de widgets do WordPress em busca de inspiração. Já temos uma interface de arrastar e soltar bastante intuitiva configurada lá, por isso seria bastante fácil redirecionar muito do mesmo código em outro lugar. Ou, se você quiser ser realmente sofisticado, poderá implementar seu próprio sistema de arrastar e soltar dentro de um meta-campo personalizado separado.

Portanto, cada slide seria definido por uma caixa de meta personalizada vinculada à postagem. A ordem dos slides seria definida por uma caixa meta personalizada separada, que também está vinculada à postagem. Eu recomendo o envio de atualizações de slides via AJAX para que você possa atualizar dinamicamente a meta box de ordem dos slides com base nas informações (isso evita que seja necessário pressionar manualmente "update" e aguardar a atualização da página antes de mudar as coisas).

A interface do usuário do jQuery possui uma ótima interface " arrastável " que você pode manipular facilmente para seus objetivos dentro dessa meta box personalizada. A parte difícil não é criar a interface, está obtendo uma comunicação consistente e precisa entre a meta box e a coleção de meta boxes de slides em outras partes da página.

Em suma

O que eu deduzi da sua postagem é que você tem uma solução viável:

  • Você adicionou 15 campos personalizados ao seu tipo de postagem personalizado por meio do widget Mais campos, mas deseja adicionar / remover campos dinamicamente , em vez de trabalhar com um número definido
  • Você deseja uma maneira de ajustar a ordem desses campos personalizados para que os slides sejam carregados em ordem

A maneira como eu abordaria isso é abstrair o processo de meta-criação personalizado para uma classe que eu possa usar repetidamente para criar novos meta-campos personalizados. Depois, estenderia a classe para inicializar dois tipos de meta boxes: um para slides e outro para estrutura de slides. Eu também criaria na meta box da estrutura do slide a capacidade de criar dinamicamente novas caixas de meta slide (as caixas de slide abrigariam sua própria ação "excluir").

A apresentação de slides inteira seria armazenada não pelas caixas de meta slide, mas pela caixa de meta da estrutura do slide em um campo meta personalizado para a postagem - a meta personalizada seria uma matriz irregular, com cada um dos slides representados como matrizes dentro dela - em ordem . A personalização da ordem da apresentação de slides na caixa de meta estrutura reorganizaria a matriz e salvaria novamente a meta meta. Dessa forma, só tenho 1 meta-valor para ler novamente quando quero acessar a apresentação de slides.

Entre o SlideDeck, More Fields e o código personalizado que você criou até agora, você já tem a maior parte de sua solução em mãos ... só precisa fazer tudo funcionar ao mesmo tempo. Eu me concentraria em reduzir a implementação raiz antes de adicionar os enfeites JavaScript - criar, modificar, salvar e excluir dinamicamente slides é mais importante do que um IMO, um editor de rich text. Pegue isso primeiro. Em seguida, abaixe o sistema de pedidos. Depois, você pode se concentrar em fazer com que várias instâncias do TinyMCE funcionem na página.


Obrigado pela ajuda! No momento, isso está um pouco fora do meu conjunto de habilidades, mas servirá como um bom guia no processo de aprendizado. Estou ciente das "classes" e percebo que já uso uma classe no código metaboxes, mas ainda não as entendo. Outra coisa de que estou "ciente", mas não entendo completamente, é o uso de matrizes.
matt

Seu conselho sobre como desmembrar os fundamentos primeiro faz sentido, mas sou contra algumas restrições do mundo real que exigem que eu o coloque no ambiente de produção o mais cedo possível e um dos fatores mais importantes é o editor wysiwyg, porque muitos dos escritores são muito não técnicos . Não me importo de incrementar o projeto e depender de muletas ao longo do caminho, mas essa abordagem obviamente precisa ser escalável. Dito isto, parece-me que usando o "mais campos" plug-in poderia servir como uma solução temporária até que eu descobrir isso no entanto não tenho certeza de que vai funcionar com ...
Matt

sua abordagem de salvar a apresentação de slides inteira em um campo personalizado. Você realmente acha que colocar tudo em um campo é melhor? Isso pode parecer ignorante, mas parece-me que há muito mais espaço para erros se o wp precisar reescrever toda a apresentação de slides toda vez que uma pequena alteração for feita.
mate

Salvar o programa inteiro em um meta-campo evita e apresenta problemas: economiza tempo no site da apresentação, não forçando você a selecionar, ler e percorrer vários campos. No entanto, se algo quebra em um slide e é gravado no banco de dados, ele interrompe toda a apresentação de slides. Definitivamente, é uma troca, mas eu sempre opto por velocidade e facilidade de desenvolvimento.
EAMann

Você está dizendo que economiza tempo no front-end do site? Por que isso aconteceria se estivesse mostrando apenas um slide de cada vez?
mate

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.