워드프레스 미디어 라이브러리 구조와 순서 제어

“미디어 라이브러리의 배열 번호”라는 질문은 아마도 “미디어 라이브러리 팝업창의 탭(메뉴) 구조와 순서를 어떻게 제어하는가?” 라는 의미로 이해했습니다. 맞으신가요?

만약 맞다면, 그 구조는 다음과 같습니다.

미디어 라이브러리 탭(메뉴)의 구조와 순서

미디어 라이브러리 팝업창의 왼쪽 메뉴는 Router라는 객체들의 모음으로 관리됩니다. 각 Router 객체는 하나의 탭(예: ‘미디어 추가’, ‘갤러리 생성’)을 의미하며, 다음과 같은 주요 속성을 가집니다.

• id: 각 탭을 구분하는 고유한 ID (예: insert-router)
• label: 화면에 표시되는 탭의 이름 (예: ‘미디어 추가’)
• priority: 이것이 바로 순서를 결정하는 핵심 속성입니다. 숫자가 작을수록 메뉴의 위쪽에 표시됩니다.

워드프레스의 기본 탭들이 사용하는 priority 값은 다음과 같습니다.

결론: 우리가 새로운 탭을 추가할 때, priority 값을 조절하여 원하는 위치에 탭을 삽입할 수 있습니다.

• priority: 5 로 설정하면 -> ‘미디어 추가’ 탭 위에 표시됩니다.
• priority: 25 로 설정하면 -> ‘갤러리 생성’과 ‘오디오 재생목록’ 사이에 표시됩니다.
• priority: 100 로 설정하면 -> 가장 아래에 표시됩니다. (이전 코드에서 사용했던 방식)

재설계 계획

이 구조를 바탕으로, 다음과 같이 재설계하겠습니다.

1단계: 목표 정의 및 구조 설계 (개념)

• 목표: ‘URL에서 삽입’ 탭 바로 위에, 우리가 등록한 JSON 소스들을 그룹으로 묶어서 표시한다.
• 구조:
  1. 먼저 'SmartFlex 미디어' 라는 이름의 최상위 부모 탭을 하나 만든다. (priority: 55 정도로 설정)
  2. ‘SmartFlex 미디어’ 탭을 클릭하면, 그 아래에 xtx9-media-storage 와 같은 하위 탭(서브메뉴)들이 나타나도록 한다.
  3. 각 하위 탭을 클릭하면 해당 JSON의 이미지 목록이 오른쪽에 표시된다.

하지만, 워드프레스 미디어 프레임은 기본적으로 2단계 하위 메뉴(Sub-menu) 구조를 지원하지 않습니다. 따라서 위 구조는 구현이 매우 복잡합니다.

더 현실적이고 효율적인 대안:

• 목표: ‘URL에서 삽입’ 탭 바로 위에, 등록된 각 JSON 소스를 개별 탭으로 나란히 추가한다.
• 구조:
  • xtx9-media-storage 탭 (priority: 51)
  • another-source 탭 (priority: 52)
  • …
  • ‘URL에서 삽입’ 탭 (priority: 60)

이 방식이 훨씬 직관적이고 구현이 간단하며, 워드프레스 표준 방식에 가깝습니다. 이 대안으로 진행하는 것이 좋겠습니다. 동의하시나요?

2단계: 코드 구현 계획 (실행)

1. inc/assets-admin.php (PHP):
   • 역할은 이전과 동일합니다. sf-url-media.js를 로드하고, sfLtoMediaData 객체에 URL 목록을 전달합니다. 이 부분은 거의 수정할 필요가 없습니다.
2. assets/js/sf-url-media.js (JavaScript):
   • (삭제) 기존의 복잡한 extend 코드를 모두 지우고 처음부터 다시 작성합니다.
   • (핵심) wp.media.frame.on('open', ...) 이벤트를 사용합니다. ‘미디어 추가’ 버튼을 눌러 팝업창이 열릴 때마다 코드를 실행하는 가장 안정적인 방법입니다.
   • 팝업창이 열리면, sfLtoMediaData.urls 배열을 순회합니다.
   • 각 URL에 대해 priority 값을 51부터 1씩 증가시키면서 새로운 탭(Router)과 콘텐츠 영역(State)을 동적으로 추가합니다.
   • 각 탭의 콘텐츠 영역에는 “Loading…” 메시지와 함께, 해당 탭의 JSON URL을 data-source-url 속성으로 저장해 둡니다. (다음 단계에서 이미지 로딩에 사용)

이 계획대로 진행하면, 이전보다 훨씬 간결하고 이해하기 쉬우며 안정적인 코드가 만들어질 것입니다.

먼저, 위에서 제안한 “개별 탭으로 나란히 추가하는 방식”에 동의하시는지 확인 후 다음 단계의 코드를 작성하겠습니다.