Adicione um item de menu ao Wordpress 3.5 Media Manager

34

Como adicionar um novo item de menu abaixo do "Inserir do URL" na barra lateral esquerda no novo Wordpress 3.5 Media Manager?

Eu estive olhando para o backbone js e tentei enganchar nele com meu próprio JS, mas sem sucesso.

Edit 2: Isso parece fazer o truque:

http://sumtips.com/2012/12/add-remove-tab-wordpress-3-5-media-upload-page.html

Deveria fazer coisas simples, mas acho que também é possível fazer a mesma coisa em Javascript. Seria bom se houvesse um tutorial / explicação sobre como os novos internos do gerenciador de mídia funcionam.

erezie
fonte
Qual é o seu novo menu? Adicionar um item de menu não é o principal problema e você está no caminho certo, mas se seu menu deve exibir algo diferente das visualizações padrão, apenas com a configuração alterada, o Backbone precisa de uma visualização para o item de menu ... e é onde eu estou
preso
clicar no item de menu deve mostrar uma visão diferente. Obtendo o item de menu para mostrar-se seria um primeiro passo
erezie
11
Com relação ao meu prêmio de 150 pontos: Procurando continuar com o objetivo do pôster original de usar um método baseado em JS para adicionar um novo item de menu Estado abaixo de "Inserir do URL" e associar uma nova exibição no modo de mídia principal do Editor de postagem.
Scott Kingsley Clark
@erezie, você pode marcar a resposta como a fornecida por Fabien Quatravaux?
Scott Kingsley Clark

Respostas:

19

OK, acho que tenho algo muito próximo de ser uma resposta:

Eu coloquei meu código em uma essência

Aqui está o resultado: captura de tela do menu personalizado

Criei vários objetos Backbone para respeitar o padrão MVC: ele controller.Customé responsável por fazer toda a lógica, view.Toolbar.Customlidar com os botões da barra de ferramentas e view.Customexibir a interface do usuário interna.

Fabien Quatravaux
fonte
2
O que está faltando até agora?
Kaiser
+1 bom começo! Mas sim, em vez de precisarmos implementar isso para saber o que faz, um instantâneo seria muito útil . E também, puxe essa linha de comentário //build an empty view (needs more work)para o conteúdo da resposta.
Brasofilo
Eu adicionei uma captura de tela para mostrar o resultado. A próxima coisa a fazer agora é implementar a própria exibição que exibirá componentes HTML e reagirá à interação do usuário.
Fabien Quatravaux
Parece legal, é definitivamente um começo! Digno da recompensa como está, mas sinta-se à vontade para levá-la ao próximo nível, se achar necessário.
Scott Kingsley Clark
Obrigado pela recompensa Scott! Definitivamente vou me aprofundar um pouco, porque preciso disso para um projeto no trabalho. Vou postar meu código aqui assim que for utilizável.
Fabien Quatravaux
10

Estou trabalhando para adicionar um botão ao "menu roteador" (adicionar algo à direita da "Biblioteca de mídia"), mas o sistema é o mesmo.

<script type="text/javascript">
    jQuery(window).on('load', function() {
        var media   = window.wp.media,  
        Attachment  = media.model.Attachment,
        Attachments = media.model.Attachments,
        Query       = media.model.Query,
        l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
        NewMenuItem;

        jQuery(document).on( 'click', '.insert-media', function( event ) {
            var workflow = wp.media.editor.get();
            var options = workflow.options;
            if( undefined == NewMenuItem ) {
                NewMenuItem = new wp.media.view.RouterItem( _.extend( options, { text: 'New Item!' } ) );
                workflow.menu.view.views.set( '.media-menu', NewMenuItem, _.extend( options, { add: true } ) );
            }

        });
    });
</script>

Agora, ainda não faz nada. Esse é o próximo passo!

Joost
fonte
2
Alguma sorte nisso? Solução baseada em JS Um é o que eu realmente gostaria de ver, não é a solução PHP iframe já observado na edição do cartaz original e outra resposta
Scott Kingsley Clark
7

Você pode conectar-se ao media_upload_tabsfiltro para adicionar a guia. Este é o método usado pelo plug-in Network Shared Media :

function wpse_76980_add_upload_tab( $tabs ) {
    $newtab = array( 'tab_slug' => 'Tab Name' );
    return array_merge( $tabs, $newtab );
}
add_filter( 'media_upload_tabs', 'wpse_76980_add_upload_tab' );

Em seguida, você pode conectar-se à media_upload_tab_slugação (onde tab_slugé usado acima) para exibir o conteúdo da guia:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );
shea
fonte
2
Esta é a maneira antiga de adicionar uma guia. Embora ainda esteja funcionando, suspeito que o WP esteja se afastando.
21912 Jenny
2
@ Jenny, acho que podemos contar com esse filtro. Bilhete relevante . (: oh, e +1, agradável snipett :)
brasofilo
3

Eu não tenho uma solução, mas dicas. As strings são obtidas de uma matriz. Você pode filtrar via gancho media_view_strings. A caixa modal após o clique é um javascript, construído com backbone.js desde o WP 3.5. Veja /wp-includes/js/media-views.jsuma solução. O backbone também é novo para mim e os scripts têm muitas linhas de origem.

bueltge
fonte
Essa foi uma dica muito legal, mas acho que fica aquém. O media.view.settingsjs var pode ser ajustado por um filtro php para adicionar novas guias, mas essas guias são renderizadas via iframe (consulte o createIframeStatesmétodo em media-views.js).
Fabien Quatravaux
Talvez você possa adicionar um tutorial, um resumo ao seu blog para adicionar um link simples dentro da visualização de mídia e uma ação personalizada ao clicar neste link? Sua essência atual é muito complexa e possui muitas ações personalizadas.
bueltge
Infelizmente, não encontrei outra maneira mais simples de conseguir isso. Este código está fazendo apenas uma coisa básica: adicione um item de menu personalizado à esquerda, com sua própria exibição de conteúdo, barra de ferramentas e controlador. Toda essa construção é necessária para criar as visualizações e o controlador necessários ao Backbone. Mas se você tiver uma solução mais simples, sinta-se à vontade para mexer na minha essência.
Fabien Quatravaux
Sim, eu vi isso e também testei, funciona bem. Mas acho que foi legal que você crie também uma essência apenas para um botão ou link e um funktion de retorno de chamada dentro da tela de mídia padrão, e não uma parte adicional, como no seu exemplo.
bueltge