사용자 지정 이미지 집합을 사용하여 미디어 업로드 관리자에 새 탭을 추가하는 방법은 무엇입니까?


18

관리자 및 내부 목록 이미지를 업로드하기 위해 새 탭을 추가하고 싶습니다.

theme_folder/images/patterns

탭을 추가하기 위해 이와 같은 것을 시도했지만 미디어 관리자 측면에 탭을 추가하고 있지만 이미지 업로드시 해당 탭이 보이지 않기 때문에 작동하지 않습니다.

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' );

정확히 말하면 여기에 새 탭을 추가하고 해당 탭에서 테마 폴더의 이미지를 나열하고 싶습니다.

여기에 이미지 설명을 입력하십시오

미디어 관리자 JS를 다시 작성해야한다는 것을 알고 있지만 솔직히 시작해야 할 곳을 모릅니다. 이것을 달성하기 위해 미디어 관리자를 위해 완전히 새로운 템플릿을 작성해야 할 것 같습니다.

나는 모든 제안을 통과했지만 아무도 질문을 읽지 않는 것 같습니다. 조언했듯이 "탭을 추가하기 위해 이와 같은 것을 시도했지만 미디어 관리자 측면에 탭을 추가하고 있지만 이미지를 업로드 할 때 해당 탭이 보이지 않기 때문에 작동하지 않습니다."

따라서 현재로서는 아무도 이것에 대한 해결책을 찾을 수 없습니다.

답변:


6

이것은 오래된 스레드이지만 여전히 관련성이 있습니다. 나는 멍청하고 여기에 미디어 탭을 추가하기 위해이 코드를 생각해 냈습니다. 아마도 누군가 탭의 내용을 처리하는 방법을 계속하고 싶습니까? :)

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

그리고 js 파일 :

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
        }
    });
};

편집 : 좋아. 내용을 처리하기 위해 wp.media 에서이 작업을 수행하는 좋은 방법을 찾지 못했습니다. 현재 솔루션은 2 개의 lisener입니다. 하나는 미디어 라이브러리를 열고 하나는 미디어 라우터 메뉴를 클릭하기위한 것입니다.

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();
        });
    }
});

함수 doMyTabContent (); 그냥 같은 것입니다;

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

나는 이것이 훨씬 더 섬세한 방식으로 이루어질 수 있다고 확신합니다. 이것을 읽고 더 나은 해결책을 가진 사람은 다음을 작성하십시오 :-)


이것을 위해 thnx는 그것을 들여다 볼 것입니다. 오래되거나 해결되지 않았습니다. 이것이 바로 prntscr.com/kse5yk요청한 내용 입니다. 잘 했어!
Benn

wordpress.stackexchange.com/a/190604/67176 과 탭 생성을 결합 해 보셨습니까 ? 탭에 동일한 ID가있는 경우 특히 작동 할 수 있다고 99 % 확신합니다.
Benn

1
예, 먼저 살펴 봤지만 실제로이 솔루션과 함께 제공되는 iframe 솔루션의 팬은 아닙니다. iframe 메시징으로 이미지 데이터 수신 내용을 표시하는 것은 하나의 일이지만 처리 작업은 다른 것입니다. :) 어쩌면 내가 뭔가 빠졌을 것입니다.
gubbfett

안녕하세요 @Benn은 wp.media 악몽에 다시 휩싸였습니다. "doMyTabContent"를 수행하는 위에서 제공 한 코드는 하나의 이벤트에서만 트리거됩니다. 예 : 게시물을로드하고 추천 이미지 추가를 클릭 한 후 닫습니다. 이 클릭 후 게시물에 미디어를 추가하면 wp.media가 새 인스턴스에 있기 때문에 아무것도로드되지 않습니다 (탭은 여전히 ​​있음). 여기로 이동하는 방법을 잘 모르겠습니다. 탭 추가 및 미디어 삽입과 관련하여 어떤 진전이 있었습니까? 코드를 공유하고 싶습니까? :)
국밥

@gubbfett 이것에 대한 해결책을 찾은 적이 있습니까?
RaajTram

5

WordPress Codex 에 따르면 다음과 같이 미디어 업 로더에 사용자 정의 탭을 추가 할 수 있습니다.

// 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>';
}

그것이 도움이되기를 바랍니다.


7
분명히하기 위해 해당 탭은 모달 상자의 상단에 추가되지 않고 왼쪽 사이드 바에 추가됩니다. 실제로 미디어 삽입 탭의 상단에 탭을 추가하는 방법을 찾을 수 없습니다. 콘텐츠가 iframe 안에 삽입되어 있기 때문에 이미 사용 가능한 CSS 스타일을 사용하는 데 문제가 있습니다. 이미지를 올바르게 표시하려면 자신의 CSS를 추가해야 할 수도 있습니다. 그리고 대답을 완료하기 위해 php scandir () 함수를 사용하여 이미지 폴더 내의 모든 항목을 검색 할 수 있습니다.
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' );

1
코드에 구문 오류가 가득합니다. 사용중인 구문이 PHP에도 존재하지 않으므로 올바른 PHP 구문을 사용하십시오 . 또한, 제발 설명 코드를 수행하고 어떻게 어떤 작품. 감사합니다
Pieter Goosen 8

방금 코드를 편집했습니다. 작동 코드이 코드를 사용해보십시오.
sarath

2
내 의견을 다시 읽으십시오. 그러나 구문 부분은 건너 뛰십시오. 덤핑 코드는 품질 답변이 아닙니다. 코드 작동 방식 및 작동 방식 에 대한 설명 을 추가하십시오.
Pieter Goosen
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.