워드프레스 미디어 파일 업로드

이번 장에서는 예제에서 사용하는, 예제에 필요한 EXIF 데이터를 편집한 이미지 391장을 이미지 등록 권한이 있는 2명의 회원 계정으로 각각 업로드합니다. 예제 과정의 처음에 알린 바 있는 예제의 가상 기준은, 승인된 이미지 등록 회원이 이미지를 업로드하고 일반 회원은 다운로드만 가능하도록 설정하는 것입니다.

간략 코드로 워드프레스 사이트 회원 생성

지금 예제 사이트의 회원을 생성하는 것은 이미지를 등록할 권한이 있는 회원의 계정(소유)으로 이미지를 등록하기 위한 것입니다. 더불어 다운로드만 가능한 일반 회원도 함께 생성하여 구성 과정의 편리를 꾀하기 위한 것입니다. 사이트 회원과 관련한 조금 더 세부적인 내용은 나중의 과정에서 진행합니다.

관리페이지에서 워드프레스 사이트의 회원을 추가하는 것은 아주 간단합니다. 그러나 지금은 미리 준비한 코드를 연습장 파일에 추가하여 더 간편하게 생성합니다. 회원을 추가하는 내용(코드)에 초점을 맞추지 마세요.

먼저, 편집기로 연습장 파일을 엽니다. 그리고 다음 코드를 복사하여 붙여넣고 저장합니다. 코드 추가 위치를 다시 안내하지 않아도 이제는 저절로 알 것입니다.

// 이미지 등록 가능 회원, contributor
$userdata_PhotoMan = array(
    'user_login' => 'PhotoMan',
    'user_email' => 'PhotoMan@localhost.com',
    'user_pass' => 1234,
    'role' => 'author'
);
// 이미지 등록 가능 회원, contributor
$userdata_PhotoWoman = array(
    'user_login' => 'PhotoWoman',
    'user_email' => 'PhotoWoman@localhost.com',
    'user_pass' => 1234,
    'role' => 'author'
);
// 이미지 다운로드만 가능한 회원, subscriber
$userdata_generalMember = array(
    'user_login' => 'generalMember',
    'user_email' => 'generalMember@localhost.com',
    'user_pass' => 1234,
    'role' => 'subscriber'
);

wp_insert_user( $userdata_PhotoMan );
wp_insert_user( $userdata_PhotoWoman );
wp_insert_user( $userdata_generalMember );

위의 코드는 wp_insert_user 함수를 사용하여 간단하게 3명의 회원을 생성한 것입니다. 암호(user_pass)는 예제 구성의 편리를 위해 간단한 것으로, 메일(user_email)은 존재하지 않는 것으로 중복을 피한 가상의 데이터입니다. 아이디(user_login)도 중복을 피해 임의로 지정하였습니다.

역할(role)을 보면 2명은 ‘author’, 1명은 ‘subscriber’로 설정하였습니다. 워드프레스에서 기본으로 존재하는 역할을 선택하여 필자 임의로 지정한 것입니다. 여기서, ‘역할’은 사이트 운영자가 새로 이름을 정하여 생성할 수도 있으며, 어떤 역할을 사용하든지 역할에 할당할 ‘권한(capabilities)’ 역시 사이트 운영자가 자유롭게 변경할 수 있으므로 역할의 이름이 특정 권한을 제한하는 것은 아니다는 것만, 지금의 과정에서는 인지하는 정도면 됩니다.

다만, 2명의 회원 역할을 ‘author’로 지정한 것은 지금의 과정에서 이미지를 업로드하기 위해서입니다. 다시 말하면, 워드프레스 기본은 최소 ‘author’ 이상의 역할에서 ‘파일 업로드’ 권한이 있는데, 예제에서 최종적으로 이미지를 등록할 수 있는 사용자에게 부여하는 ‘contributor’ 역할은 ‘파일 업로드’ 권한이 없습니다. 따라서 이미지 업로드 과정에서 임시로 ‘author’로 지정하고, 업로드 결과만 확인한 후 ‘contributor’로 변경할 것입니다. 나중에 ‘contributor’ 역할에도 파일을 업로드할 수 있는 권한을 할당할 것입니다.

이제, 사이트에서 연습장 페이지를 새로 고칩니다. 연습장 페이지에 어떤 결과가 나타나지는 않습니다. 다시 관리페이지의 ‘사용자’ 메뉴를 클릭하여 다음 그림과 같은 사용자 목록이 나오는지 확인하세요.

결과 확인 후 연습장 파일에 추가한 위의 코드를 지우고 저장합니다. 그리고 편집기에 열린 파일을 모두 닫고, 예제 사이트에서 로그아웃합니다.

이미지 다운로드

예제 이미지 업로드는 앞에서 추가한 3명 중 이미지 등록 권한이 있는 ‘PhotoMan’, ‘PhotoWoman’ 회원, 완성 예제의 최종 역할로 보면 ‘기여자(contributor)’ 회원만 가능하도록 기준을 정합니다. 다음 링크를 클릭하면 다운로드 안내 페이지로 이동합니다.

제공하는 이미지를 다운로드 후 압축을 풀면 2개의 폴더에 각각 이미지가 있습니다. 폴더 이름을 보면 계정별로 올릴 이미지가 어떤 것인지 금방 이해할 수 있습니다.

다른 세션을 위해 브라우저 2개 실행

다운로드한 이미지 업로드 시간을 줄이기 위해 계정별로 동시 일괄 업로드합니다. 따라서 다른 로그인 세션을 위한 계정별 브라우저가 있어야 합니다. 이 예제의 기준인 구글 크롬 브라우저로 예를 들면, ‘사용자 관리에서 사용자 추가’ 기능으로 크롬 브라우저 2개를 실행하세요. 하나의 브라우저는 예제 사이트에 ‘PhotoMan’ 계정으로 로그인, 다른 하나의 브라우저는 ‘PhotoWoman’ 계정으로 로그인합니다. 구글 계정으로 브라우저에 로그인할 필요는 없습니다.

혹시 이런 내용이 이해하기 어렵다면 ‘인터넷 익스플로러’, ‘크롬’ 브라우저 2개를 실행하여 현재 구성하고 있는 예제 사이트에 이미지 업로드 권한이 있는 회원으로 각각 로그인합니다.

계정별 이미지 동시 일괄 업로드

업로드 전 미리 말하면, 현재 예제의 로컬 PC 환경은 파일의 이동과 관련한 성능은 실제 상용 웹호스팅 또는 보통의 실 서버 환경보다 좋지만, 내부적인 코드 처리 성능은 다소 낮습니다. 원본 이미지 업로드 시 EXIF 데이터를 워드프레스 데이터로 변환하고, 각 이미지를 설정에 따른 사이즈로 각각 생성하며, 특정 데이터를 커스텀 필드의 데이터로 추가하는 등의 여러 처리 성능이 실 서버 환경보다 좋지 않다는 뜻입니다. 참고 내용 정도로 이해하세요.

지금 상황은 2개의 브라우저에 2명의 회원 계정으로 예제 사이트에 로그인한 상태입니다. 다음 순서에 따라 진행하세요.

• 각 브라우저에서 관리페이지의 미디어 하위 ‘파일 올리기’ 메뉴를 클릭합니다.
• 제공한 완성 예제 이미지 중 ‘photoman’ 폴더의 모든 이미지 187개를 선택하여 ‘PhotoMan’으로 로그인한 예제 사이트에 일괄 업로드합니다.
• ‘photowoman’ 폴더의 모든 이미지 204개를 선택하여 ‘PhotoWoman’으로 로그인한 예제 사이트에 일괄 업로드합니다.
• 각 브라우저에 이미지 업로드가 완료될 때까지 다른 페이지 이동 등 업로드 중인 화면을 벗어나지 않도록 주의합니다.
• 환경에 따라 차이가 있지만, 최대 30분 정도 걸릴 수 있습니다.
• 만약, 업로드 과정이 중지되었다면 업로드된 이미지를 모두 지우고 다시 업로드하세요.
• 업로드 시 생성된 term은 지우지 않아도 됩니다.

이미지 업로드 진행 과정을 보면 지루하므로 워드프레스에 원본 이미지를 업로드할 때 지난 과정에서 작업한 내용이 어떻게 처리되는지 다음을 상기하면서 정리해보세요.

• 예제의 워드프레스 사이트에 원본 이미지를 업로드하면
• 지정한 이미지 파일 확장자 ‘jp(e)g, gif, png’에 한하여
• 역시 지정한 이미지 가로, 세로 사이즈 기준에 맞는지 확인한 후
• 원본 이미지의 EXIF 또는 IPTC 메타 데이터를 읽어
• 워드프레스 기본 기준에 따라 제목, 캡션, ISO, 촬영 일자 등의 데이터를 워드프레스 이미지 메타 데이터로 변환하고
• 원본 이미지에 GPS 데이터가 있다면, 이 데이터를 예제에서 정한 기준에 따라 위도, 경도로 구분하여 워드프레스 이미지 메타 데이터에 추가
• 다시, 워드프레스 이미지 메타 데이터에서 위도, 경도, 이미지 포스트 URL, 이미지 파일 URL을 커스텀 필드를 생성하여 메타 데이터로 저장하며
• 또, 원본 이미지의 가로, 세로 사이즈를 각각의 커스텀 필드에 저장하고
• 원본 이미지의 가로와 세로 사이즈를 비교하여 긴 축 정보를 역시 커스텀 필드에 저장하며
• 이미지 메타 데이터의 캡션은 ‘mediacat’, ‘photocat’ 분류의 term으로 생성하여 해당 포스트에 연결하는데, 존재하는 term이면 연결만, 존재하지 않는다면 생성하고 연결
• 이미지 메타 데이터의 카메라 정보는 ‘cameracat’ 분류의 term으로 생성 및 포스트에 연결하며, 역시 존재할 때와 존재하지 않을 때를 구분하여 자동으로 처리
• 이미지 메타 데이터의 ‘keywords’ 배열 데이터는 ‘phototag’ 분류의 term으로 존재할 때와 그렇지 않을 때를 구분하여 생성하고 포스트에 연결
• 이와 함께, ‘keywords’ 배열 데이터는 쉼표로 구분한 텍스트로 변경하여 이미지 포스트의 ‘대체 텍스트’ 및 ‘설명’ 필드에 삽입하여 저장하여
• 원본 이미지를 워드프레스에 업로드할 때 예제 사이트에 필요한 모든 데이터를 자동으로 구성함으로써 사이트 운영 및 관리에 효율을 도모

업로드 결과 확인 및 정리

업로드 완료 후 각 계정 관리페이지에서 미디어 메뉴 하위의 ‘라이브러리’를 클릭하여 이미지를 확인합니다. 미디어 목록 보기의 워드프레스 기본은 ‘섬네일’ 유형으로 설정되어 있습니다. ‘목록’형 보기 아이콘을 클릭한 후에 391이라는 숫자가 보인다면 성공입니다. 회원별 개수는 확인하지 않아도 됩니다.

이제는 앞에서 말한 것처럼 2명의 회원 역할을 ‘contributor’로 변경합니다. 현재 실행 중인 브라우저 중 하나만 선택하여 예제 사이트에서 로그아웃 후 다시 관리자로 로그인하세요.

관리페이지에서 사용자 메뉴를 클릭하여 사용자 목록에서 ‘PhotoMan’, ‘PhotoWoman’ 회원을 선택하고 ‘권한 바꾸기’ 드롭다운 필드에서 ‘기여자’를 선택한 후 ‘변경’ 버튼을 클릭합니다.

꼭 확인할 필요는 없지만, 로그인 중인 ‘PhotoMan’ 또는 ‘PhotoWoman’ 계정 브라우저가 있다면 브라우저를 새로 고쳐 어떤 결과가 나오는지 확인해보세요. 이미지 업로드 과정 전체를 그대로 따라 했다면 ‘죄송합니다. 이 페이지에 접근할 권한이 없습니다.’ 메시지가 나올 것입니다.

역시 꼭 확인할 필요는 없지만, 메시지가 나오는 브라우저 주소 필드에 localhost/wp-admin을 입력하여 관리페이지 메뉴에 ‘미디어’ 메뉴가 나오지 않는 것을 확인해보세요. 그리고, 관리자 로그인 브라우저를 제외한 모든 브라우저를 종료하세요.

관리자 로그인 브라우저에서 관리페이지 미디어 하위 ‘미디어분류’, ‘2차분류’, ‘미디어태그’, ‘카메라’ 메뉴를 각각 클릭하여 생성된 term과 카운트 열, 그리고 목록 테이블 위의 아이템 수를 확인하세요. 필자의 경우는 다음의 괄호와 같은 개수의 term이 생성되었습니다.

미디어분류(3), 2차분류(20), 미디어태그(1,224), 카메라(137)

미디어분류와 2차분류는 필자와 같아야 하지만, 미디어태그와 카메라는 같다면 좋겠지만 한두 개 정도 오차가 있어도 문제가 없습니다.

지금까지는 워드프레스에 원본 이미지를 업로드할 때 데이터를 저장 및 가공하는 내부 처리 과정이었습니다. 다음 장부터는 이 데이터를 사이트의 싱글 이미지 포스트 페이지에 출력합니다.