web-dev-qa-db-de.com

Wie füge ich dem Medien-Upload-Manager eine neue Registerkarte mit benutzerdefinierten Bildern hinzu?

Ich möchte eine neue Registerkarte zum Hochladen von Manager- und Inside-List-Bildern hinzufügen

theme_folder/images/patterns

Ich habe so etwas versucht, um einen Tab hinzuzufügen, aber es funktioniert nicht für mich, da es Tabs auf der Seite des Medienmanagers hinzufügt, aber beim Hochladen von Bildern dieser Tab nicht sichtbar ist.

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Patterns' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo 'Hello content';
}
add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );

um genau zu sein möchte ich hier einen neuen tab hinzufügen und in diesem tab möchte ich bilder aus dem themenordner auflisten.

enter image description here

Mir ist bewusst, dass Media Manager JS neu geschrieben werden muss, aber um ehrlich zu sein, weiß ich nicht, wo ich anfangen soll. Es sieht so aus, als müsste ich eine komplett neue Vorlage für Media Manager schreiben, um dies zu erreichen.

Ich ging durch alle Vorschläge, aber es scheint, als würde niemand die Frage lesen. Wie empfohlen "Ich habe so etwas versucht, um einen Tab hinzuzufügen, aber es funktioniert nicht für mich, da es Tabs auf der Seite des Medienmanagers hinzufügt, aber beim Hochladen von Bildern dieser Tab nicht sichtbar ist."

Daher kann derzeit niemand die Lösung dafür finden.

17
Benn

Laut WordPress Codex können Sie im Media Uploader einen benutzerdefinierten Tab wie folgt hinzufügen:

// add the tab
add_filter('media_upload_tabs', 'my_upload_tab');
function my_upload_tab($tabs) {
    $tabs['mytabname'] = "My Tab Name";
    return $tabs;
}

// call the new tab with wp_iframe
add_action('media_upload_mytabname', 'add_my_new_form');
function add_my_new_form() {
    wp_iframe( 'my_new_form' );
}

// the tab content
function my_new_form() {
    echo media_upload_header(); // This function is used for print media uploader headers etc.
    echo '<p>Example HTML content goes here.</p>';
}

Hoffe es wird dir helfen.

5
Touqeer Shafi

Das ist ein alter Thread aber für mich immer noch genauso relevant. Ich habe herumgespielt und mir diesen Code ausgedacht, um hier einen Medien-Tab hinzuzufügen. Vielleicht möchte jemand weiter machen, wie der Inhalt des Tabs behandelt wird. :)

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

Und dann die js-Datei:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};

EDIT: Ok, also. Für den Umgang mit den Inhalten habe ich keinen guten Weg gefunden, dies von wp.media zu tun. Meine aktuelle Lösung sind 2 Lisener, einer zum Öffnen der Medienbibliothek und einer zum Klicken in das Medienrouter-Menü.

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($('body').find('.media-modal-content .media-router a.media-menu-item.active')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on('click', '.media-router a.media-menu-item', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});

die Funktion doMyTabContent (); ist nur so etwas wie;

function doMyTabContent() {
    var html = '<div class="myTabContent">';
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

Ich bin mir sehr sicher, dass dies sehr viel heikler gemacht werden kann. Wer dies liest und eine bessere Lösung hat, bitte ausfüllen :-)

4
gubbfett