Dodaj pozycję menu do Wordpress 3.5 Media Manager


34

Jak dodać nowy element menu pod „wstaw z adresu URL” na lewym pasku bocznym w nowym Wordpress 3.5 Media Manager?

Patrzyłem na JS kręgosłupa i próbowałem podłączyć się do niego z moim własnym JS, ale bez powodzenia.

Edycja 2: Wydaje się, że to załatwia sprawę:

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

Powinien to zrobić dla prostych rzeczy, ale myślę, że to samo można zrobić w Javascript. Byłoby miło, gdyby istniał samouczek / wyjaśnienie, w jaki sposób działają nowe elementy wewnętrzne menedżera multimediów.


co ma zrobić twoje nowe menu? Dodanie pozycji menu nie jest głównym problemem i jesteś na dobrej drodze, ale jeśli twoje menu ma wyświetlać coś innego niż widoki domyślne, tylko ze zmienionym ustawieniem, Backbone potrzebuje widoku dla pozycji menu ... i tam też
utknąłem

kliknięcie pozycji menu ma pokazać inny widok. Pierwszym krokiem byłoby uzyskanie pozycji menu
erezie

1
Jeśli chodzi o moją 150-punktową pulę: Chciałbym kontynuować cel oryginalnego plakatu, aby użyć metody opartej na JS, aby dodać nowy element menu Stan pod „Wstaw z adresu URL” i powiązać nowy widok w głównym module medialnym edytora postów.
Scott Kingsley Clark,

@erezie, czy możesz oznaczyć odpowiedź na to pytanie jako udzieloną przez Fabiena Quatravaux?
Scott Kingsley Clark,

Odpowiedzi:


19

OK, myślę, że mam coś, co jest naprawdę bliskie odpowiedzi:

Kładę kod w GIST

Oto wynik: niestandardowy zrzut ekranu menu

Zbudowałem kilka obiektów Backbone, aby uszanować wzór MVC: odpowiada controller.Customza całą logikę, view.Toolbar.Customzajmuje się przyciskami paska narzędzi i view.Customwyświetla wewnętrzny interfejs użytkownika.


2
Czego dotychczas brakuje?
kaiser

+1 dobry początek! Ale tak, zamiast musimy to zaimplementować, aby wiedzieć, co robi, migawka byłaby bardzo przydatna . A także przeciągnij ten wiersz komentarza //build an empty view (needs more work)do treści odpowiedzi.
brasofilo

Dodałem zrzut ekranu, aby pokazać wynik. Następną rzeczą do zrobienia jest wdrożenie samego widoku, który wyświetli komponenty HTML i zareaguje na interakcję użytkownika.
Fabien Quatravaux

Wygląda świetnie, to zdecydowanie początek! Godna nagrody, jaka jest, ale możesz ją przenieść na wyższy poziom, jeśli poczujesz taką potrzebę.
Scott Kingsley Clark,

Dzięki za nagrodę Scott! Na pewno będę kopał trochę głębiej, ponieważ potrzebuję go do projektu w pracy. Prześlę tutaj mój kod, gdy tylko będzie on dostępny.
Fabien Quatravaux

10

Pracuję nad dodaniem przycisku do „menu routera” (dodanie czegoś z „Biblioteki multimediów”), ale system jest taki sam.

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

Teraz nic jeszcze nie robi. To kolejny krok!


2
Masz w tym szczęście? Naprawdę chciałbym zobaczyć rozwiązanie oparte na JS, a nie iframe PHP, o którym wspomniałem już w edycji oryginalnego plakatu i innej odpowiedzi
Scott Kingsley Clark

7

Możesz podłączyć media_upload_tabsfiltr, aby dodać kartę. Jest to metoda używana przez wtyczkę 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' );

Następnie możesz podpiąć się do media_upload_tab_slugakcji (gdzie tab_slugjest to, jak opisano powyżej), aby wyświetlić zawartość karty:

function wpse_76980_media_upload() {
    // display tab contents
}
add_action( 'media_upload_tab_slug', 'wpse_76980_media_upload' );

2
Jest to stary sposób dodawania karty. Chociaż nadal działa, ale podejrzewam, że WP się od niego odchodzi.
Jenny

2
@Jenny, myślę, że możemy liczyć na ten filtr. Odpowiedni bilet . (: och, i +1, miły snipett :)
brasofilo 30.12.12

3

Nie mam rozwiązania, ale wskazówki. Ciągi znaków pochodzą z tablicy. Możesz filtrować za pomocą haka media_view_strings. Modalne pole po kliknięciu to javascript, budowany z backbone.js od WP 3.5. Zobacz /wp-includes/js/media-views.jsrozwiązanie. Backbone jest dla mnie również nowy, a skrypty mają wiele linii źródłowych.


To była bardzo miła wskazówka, ale myślę, że jest ona zbyt krótka. Plik media.view.settingsjs var może zostać ulepszony przez filtr php, aby dodać nowe karty, ale następnie te karty są renderowane za pomocą elementu iframe (patrz createIframeStatesmetoda w media-views.js).
Fabien Quatravaux

Może możesz dodać samouczek, rozwinąć na swoim blogu oo, aby dodać prosty link w widoku multimediów i niestandardową akcję po kliknięciu tego linku? Twoja obecna istota jest bardzo złożona i ma wiele niestandardowych akcji.
bueltge

Niestety nie znalazłem innego prostszego sposobu na osiągnięcie tego. Ten kod robi tylko jedną podstawową rzecz: dodaj niestandardowy element menu po lewej stronie, z własnym widokiem zawartości, paskiem narzędzi i kontrolerem. Cała ta konstrukcja jest potrzebna do zbudowania widoków i kontrolera potrzebnego przez Backbone. Ale jeśli masz prostsze rozwiązanie, rozwiąż moją istotę.
Fabien Quatravaux

Tak, widziałem to, a także przetestowałem, działa dobrze. Ale myślę, że to miłe, że tworzysz także istotę tylko dla przycisku lub linku i funkcję wywołania zwrotnego na domyślnym ekranie multimediów, a nie dodatkową część, jak w twoim przykładzie.
bueltge
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.