Agregue un elemento de menú a Wordpress 3.5 Media Manager

34

¿Cómo se puede agregar un nuevo elemento de menú debajo de "insertar desde URL" en la barra lateral izquierda en el nuevo Administrador de medios de Wordpress 3.5?

He estado mirando el backbone js e intenté conectarlo con mi propio JS pero sin éxito.

Edición 2: Esto parece hacer el truco:

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

Debería hacer cosas simples, pero supongo que también es posible hacer lo mismo en Javascript. Sería bueno si hubiera un tutorial / explicación sobre cómo funcionan los internos del nuevo administrador de medios.

Erezie
fuente
¿Qué se supone que debe hacer tu nuevo menú? Agregar un elemento de menú no es el problema principal y está en el camino correcto, pero si se supone que su menú muestra algo diferente de las vistas predeterminadas, solo con la configuración modificada, Backbone necesita una vista para su elemento de menú ... y que es donde estoy stucked así ...
ungestaltbar
hacer clic en el elemento del menú se supone que muestra una vista diferente. Hacer que aparezca el elemento del menú sería un primer paso
erezie
1
Con respecto a mi bouny de 150 puntos: buscando continuar con el objetivo del póster original de usar un método basado en JS para agregar un nuevo elemento de menú de Estado debajo de "Insertar desde URL" y asociar una nueva vista en el modo de medios principal del Editor de publicaciones.
Scott Kingsley Clark
@erezie, ¿puede marcar la respuesta en esto como la proporcionada por Fabien Quatravaux?
Scott Kingsley Clark

Respuestas:

19

OK, creo que tengo algo que está muy cerca de ser una respuesta:

Puse mi código en una esencia

Aquí está el resultado: captura de pantalla del menú personalizado

Creé varios objetos de Backbone para respetar el patrón MVC: controller.Customse encarga de hacer toda la lógica, se view.Toolbar.Customocupa de los botones de la barra de herramientas y view.Custommuestra la interfaz de usuario interna.

Fabien Quatravaux
fuente
2
¿Qué le falta hasta ahora?
Kaiser
+1 buen comienzo! Pero sí, en lugar de necesitar implementar esto para saber qué hace, una instantánea sería muy útil . Y también, arrastre esa línea de comentario //build an empty view (needs more work)al contenido de la Respuesta.
brasofilo
He agregado una captura de pantalla para mostrar el resultado. Lo siguiente que debe hacer ahora es implementar la vista en sí que mostrará los componentes HTML y reaccionará a la interacción del usuario.
Fabien Quatravaux
Este se ve bien, eso es sin duda un comienzo! Digno de la generosidad como es, pero no dude en llevarlo al siguiente nivel si se siente la necesidad.
de Scott Clark Kingsley
Gracias por la generosidad de Scott! Definitivamente voy a profundizar un poco más porque lo necesito para un proyecto en el trabajo. Voy a publicar mi código de nuevo aquí tan pronto como lo será utilizable.
Fabien Quatravaux
10

Yo estoy trabajando para añadir un botón al menú "Router" (añadiendo algo a la derecha de la "Media Library"), pero el sistema es el mismo.

<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>

Ahora, que no hace nada. Ese es el siguiente paso!

Joost
fuente
2
¿Alguna suerte en esto? Lo que realmente me gustaría ver es una solución basada en JS, no la solución PHP de iframe que ya se mencionó en la edición original del póster y otra respuesta
Scott Kingsley Clark el
7

Puede enganchar en el media_upload_tabsfiltro para agregar la pestaña. Este es el método utilizado por el complemento 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' );

Luego puede enlazar a la media_upload_tab_slugacción (donde tab_sluges como se usó anteriormente) para mostrar el contenido de la pestaña:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );
Ella a
fuente
2
Esta es la antigua forma de agregar una pestaña. Aunque todavía funciona, sospecho que WP se está alejando.
Jenny
2
@ Jenny, creo que podemos contar con este filtro. Correspondiente billete . (: oh, y +1, agradable snipett :)
brasofilo
3

No tengo una solución, pero pistas. Las cadenas se obtienen de una matriz. Puede filtrar a través del gancho media_view_strings. El cuadro modal después de hacer clic es javascript, compilado con backbone.js desde WP 3.5. Ver /wp-includes/js/media-views.jspara una solución. Backbone también es nuevo para mí y los scripts tienen muchas líneas de origen.

bueltge
fuente
Esa fue una muy buena pista, pero creo que se queda corta. El media.view.settingsjs var puede ser ajustado por un filtro php para agregar nuevas pestañas, pero luego esas pestañas se representan a través de un iframe (ver createIframeStatesmétodo en media-views.js).
Fabien Quatravaux
¿Quizás pueda agregar un tutorial, una idea general de su blog para agregar un enlace simple dentro de la vista de medios y una acción personalizada al hacer clic en este enlace? Su esencia actual es muy compleja y tiene muchas acciones personalizadas.
bueltge
Desafortunadamente, no encontré otra forma más simple de lograr esto. Este código solo hace una cosa básica: agregar un elemento de menú personalizado a la izquierda, con su propia vista de contenido, barra de herramientas y controlador. Toda esta construcción es necesaria para construir las vistas y el controlador que necesita Backbone. Pero si tiene una solución más simple, siéntase libre de bifurcar mi esencia.
Fabien Quatravaux
Sí, he visto esto y también lo pruebo, funciona bien. Pero creo que fue agradable, que creas también una esencia solo para un botón o enlace y una función de devolución de llamada dentro de la pantalla de medios predeterminada, no una parte adicional, como en tu ejemplo.
bueltge