자바스크립트 | wp.media

요약

자바스크립트로 이미지 라이브러리를 불러오는 방법입니다. backbone.js 를 기반으로 작동합니다.

워드프레스 백본 가이드 플러그인 : [링크]

• wp-includes/js/media-models.js
• wp-includes/js/media-views.js

사용법

items_frame = wp.media.frames.items = wp.media({
    title: '갤러리에 추가',
    button: {
        text: '추가하기'
    },
    library: {
            type: [ 'video', 'image' ]
    },
});

다중 선택 기능 추가하기

items_frame = wp.media.frames.items = wp.media({
    title: '갤러리에 추가',
    button: {
        text: '추가하기'
    },
    library: {
            type: [ 'video', 'image' ]
    },
    multiple: 'toggle',
});

multiple 에 값을 추가하면 다중 선택이 가능해집니다. true , toggle , embed 등 을 지정하면 다중 선택이 가능해집니다

클래스 이름 지정하기

items_frame = wp.media.frames.items = wp.media({
    frame: 'post',
    title: '갤러리에 추가',
    button: {
        text: '추가하기'
    },
    library: {
            type: [ 'video', 'image' ]
    },
    multiple: 'toggle',
    className: 'media-frame rdg-library',
});

className 에는 media-frame 을 추가시킨다음 적용시키는 것이 좋습니다.

정리

버튼 만들기

<button class="버튼">사진 등록</button>

document.querySelector('.버튼').addEventListner('click', function() {
    media.open;
})

AJAX 와 같이 사용

media.on('select', function() {
    let attachment = media.state()
        .get('selection')
        .first()
        .toJSON();
    console.log('정상작동');
});

wp.media.attachment(document.querySelector('.버튼').value)
    .fetch()
    .then(function(attachment) {
        console.log(attachment);
});

여러 값을 가져오기

media.on('select', function() {
    let attachment = media.state()
        .get('selection')
        .toJSON();
    console.log('정상작동');
});

.first() 를 제거합니다.

참조

• javascript – Show only images and videos in a wp.media window
• jquery – 워드 프레스 미디어 선택기에서 여러 이미지 가져 오기 – 스택 오버플로 (stackoverflow.com)