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

18

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.

Bildbeschreibung hier eingeben

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 habe alle Vorschläge durchgesehen, aber anscheinend liest niemand die Frage. 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.

Benn
quelle

Antworten:

6

Das ist ein alter Thread aber für mich noch genauso noch 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 netten 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 auf eine viel feinere Art und Weise geschehen kann. Wer dies liest und eine bessere Lösung hat, bitte ausfüllen :-)

gubbfett
quelle
thnx dafür wird sich darum kümmern. Alt oder nicht, es wurde nie gelöst. und genau das habe ich nach prntscr.com/kse5yk gefragt . Gut gemacht!
Benn
Haben Sie versucht, dieses wordpress.stackexchange.com/a/190604/67176 mit Ihrer Tab-Erstellung zu kombinieren ? Ich bin mir zu 99% sicher, dass es funktionieren könnte, besonders wenn die Tabs die gleiche ID haben.
Benn
1
Ja, ich habe mir das zuerst angesehen, aber ich bin nicht wirklich ein Fan der iframe-Lösung, die mit dieser Lösung geliefert wird. Empfangen von Bilddaten mit Iframe-Nachrichten. Das Anzeigen des Inhalts ist eine Sache, das Behandeln von Aktionen eine andere. :) Vielleicht verpasse ich etwas.
Gubbfett
Hallo @Benn, habe gerade die wp.media-Alpträume wieder eingeholt. Der Code, den ich oben angegeben habe, wo ich meinen "doMyTabContent" mache, wird nur bei einem Ereignis ausgelöst. Beispiel: Laden Sie einen Beitrag, klicken Sie auf "Ausgewähltes Bild hinzufügen" und schließen Sie ihn. Nach diesem Klick füge Medien für den Beitrag hinzu und es wird nichts geladen, wahrscheinlich weil sich das wp.media in einer neuen Instanz befindet (der Reiter ist noch da tho). Ich bin nicht sicher, wie ich hier weitermachen soll. Haben Sie irgendwelche Fortschritte bezüglich des Hinzufügens eines Registers und des Einfügens von Medien gemacht? Möchten Sie einen Code freigeben? :)
gubbfett
@gubbfett hast du jemals eine lösung dafür gefunden?
RaajTram
5

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.

Touqeer Shafi
quelle
7
Diese Registerkarte wird nicht oben im modalen Feld, sondern in der linken Seitenleiste hinzugefügt. Es konnte keine Möglichkeit gefunden werden, die Registerkarte oben auf der Registerkarte "Datenträger einfügen" hinzuzufügen. Ich hatte auch Probleme beim Versuch, die bereits verfügbaren CSS-Stile zu verwenden, da der Inhalt in einen iframe eingefügt wird. Was wahrscheinlich bedeutet, dass Sie Ihr eigenes CSS hinzufügen müssen, um die Bilder korrekt anzuzeigen. Und um die Antwort zu vervollständigen, können Sie die Funktion php scandir () verwenden, um alle Elemente im Bildordner abzurufen.
Gdaniel
-1
   function axcoto_genify_media_menu($tabs) {
            $newtab = array('genify'  => __('Axcoto Genify', 'axcotogenify'));
            return array_merge($tabs, $newtab);
            }
            add_filter('media_upload_tabs', 'axcoto_genify_media_menu');

           array('genify' => __('Axcoto Genify', 'axcotogenify'));


        function axcoto_genify_media_process() {
        media_upload_header();
        echo 'hello';
        }
        function axcoto_genify_media_menu_handle() {
        return wp_iframe( 'axcoto_genify_media_process');
        }



 if ( ( is_array( $content_func ) && ! empty( $content_func[1] ) && 0 === strpos( (string) $content_func[1], 'media' ) ) || 0 === strpos( $content_func, 'media' ) )
        wp_enqueue_style( 'media' );
sarath
quelle
1
Ihr Code ist voll von Syntaxfehlern. Bitte verwenden Sie die richtige PHP-Syntax, da die Syntax, die Sie verwenden, in PHP nicht einmal existiert. Erklären Sie außerdem , was Ihr Code bewirkt und wie er funktioniert. Vielen Dank
Pieter Goosen
Ich hatte gerade den Code bearbeitet. Versuchen Sie diesen Code.
Sarath
2
Bitte lesen Sie meinen Kommentar noch einmal, aber überspringen Sie den Syntaxteil. Dumping Code ist keine qualitative Antwort. Bitte erläutern Sie , wie Ihr Code funktioniert und was er tut
Pieter Goosen