詳細検索

워드프레스에 AjaXplorer 통합하기

아바타
글쓴이 maeno

워드프레스에 AjaXplorer 통합하기
日本語에서 번역 • 원문 보기

[caption id="attachment_107" align="aligncenter"]

AjaXplorer AjaXplorer[/caption]

"DEVLAß"의 쇼케이스를 구상할 때, 다양한 형식의 파일을 업로드하고 삭제하는 UI를 고민해야 했습니다. 이 사이트는 워드프레스로 구축되었지만, 워드프레스 미디어 라이브러리에 의존한다면 파일 관리 플러그인을 추가해도 각 업로드된 파일을 관리해야 하며, 로컬 PC와 같은 대량 삭제나 디렉터리 그룹 관리 같은 파일 작업과는 거리가 멉니다. 또한 "DEVLAβ"는 보안상의 이유로 FTP를 열지 않기 때문에 FTP에 의존하지 않는 파일 업로더가 되어야 했습니다. 그래서 우리는 "AjaXplorer"를 도입하기로 결정했는데, 이는 로컬 PC에서 탐색기처럼 파일 관리와 작동을 가능하게 하며 FTP를 사용하지 않습니다.
이 "AjaXplorer"는 무료 도구이지만, Windows 탐색기를 통해 파일을 업로드, 이름 변경, 삭제, 디렉터리 생성, 복사, 온라인 이동 등 매우 고급스러운 도구입니다. 또한 iOS와 같은 스마트폰과 호환되며, WordPress와 Drupal 같은 주요 CMS와 연결하는 플러그인도 있습니다. 예를 들어, CMS 연동 플러그인을 사용하면 WordPress에 로그인하면 자동으로 AjaXplorer에 로그인할 수 있고, 각 사용자별로 저장소(접근 디렉터리 및 접근 권한)를 개별적으로 설정할 수 있습니다. 또한 "AjaXplorer" 자체는 일본어로 제공되어 도구 사용이 매우 편리합니다.
하지만 아쉬운 점은 워드프레스에 통합하는 방법이 다소 번거롭고, 자세히 설명하는 사이트가 거의 없으며, CMS 통합에 대한 일본어 도움말도 없다는 것입니다. 따라서 TIPS에 통합할 때 사용한 단계를 변환해 보겠습니다. 또한 AjaXplorer의 워드프레스 플러그인을 일본어로 번역해 보았기 때문에 절차와 일본어 번역 파일도 배포할 예정입니다.
(*이 TIPS는 워드프레스가 이미 AjaXplore가 설치된 환경에 설치되어 있다고 가정합니다.)

  1. AjaXplorer 설치

    먼저, "AjaXplorer"를 다운로드하세요.
    AjaXplorer 공식 웹사이트에서 최신 버전을 다운로드하세요(제가 다운로드한 버전은 2012년 7월 기준 4.2.0이었습니다). 또는 서버 측에서 RPM이나 yum 명령어로 직접 다운로드 및 설치할 수도 있습니다(명령줄 기반 다운로드 및 설치 정보는 공식 웹사이트를 참고해 주세요). 이번에는 명령줄 기반 대신 파일 업로드 형식으로 설치했습니다. 설정 파일과 기타 파일을 AjaXplorer 설치 경로에 직접 배포하는 것이 더 쉽게 설정할 수 있을 것 같았기 때문입니다.

    [caption id="attachment_115" align="alignleft"]

AjaXplorer-install-01 [그림 1] AjaXplorer 설치 건강 점검 화면[/caption]

다운로드한 파일을 확장하면 "ajaxplorer-core-4.2.0" 같은 긴 디렉터리 이름이 나타납니다. 서버에 그대로 업로드하면 접근 URL이 길고 사용하기 어려울 수 있으니, 이름을 "ajaxplorer"로 바꾸고 서버에 업로드하세요.   
다음으로, AjaXplorer가 배포된 디렉터리 바로 아래의 "data" 디렉터리의 권한을 변경하고, 그 아래 하위 디렉터리는 사용자가 작성할 수 있는 권한(권한 777 또는 775)으로 변경합니다. 이제 웹 브라우저에서 AjaXplorer가 배포된 디렉터리(루트 경로)에 접근하세요. 예를 들어, 사이트 문서 루트 아래에 AjaXplorer를 직접 업로드하면 "http://mydomain.com/ajaxplorer/"이 됩니다. 이 경우 설치 프로그램의 건강 점검이 시작됩니다. 오류가 발생하면 대부분의 문제는 디렉터리 권한 때문이므로, AjaXplorer가 배포된 루트 디렉터리(예: "ajaxplorer")의 권한(예: "ajaxplorer")의 권한을 작성 가능하게 만들어 보세요.   
건강 점검이 성공적으로 수행되면 [그림 1]과 같은 화면이 표시되므로, 내용에 문제가 없다면 "여기를 클릭하여 AjaXplorer로 계속 가세요"라는 링크를 클릭해 주세요.   

\[caption id="attachment\_116" align="alignleft"\]<a href="https://dev.blog.colorkrew.com/uploads/scrsht-00004.png">

AjaXplorer-install-02 [그림 2] AjaXplorer 로그인 화면[/caption]

초기 관리 사용자의 사용자 이름과 비밀번호가 동일하다는 경고 대화 창은 건너뛸 수 있습니다. [그림 2]에 표시된 로그인 화면이 시작되면 설치가 완료됩니다. 초기 관리자 사용자의 사용자 이름과 비밀번호 모두 "admin"이므로, 먼저 로그인해 주세요.   
  1. AjaXplorer 초기 설정

    [caption id="attachment_127" align="alignleft"]

AjaXplorer-setting-01 [그림 3] AjaXplorer 일본어 번역[/caption]

먼저, 언어 설정을 일본어로 변경하세요. 그림 3에 보이듯이, 콘솔 오른쪽 상단의 "관리자로 로그됨" 드롭다운에서 "언어"를 선택한 후, 선택 박스에서 "일본어"를 선택하세요. 이로써 AjaXplorer의 일본어 변환이 완료됩니다.   

\[caption id="attachment\_126" align="alignright"\]<a href="https://dev.blog.colorkrew.com/uploads/scrsht-00006.png">

AjaXplorer-setting-02 [그림 4] AjaXplorer 사용자 비밀번호 변경[/caption]

다음으로, 초기 관리자 사용자의 비밀번호를 변경합니다. "비밀번호 변경"에서 언어 설정과 같은 방식으로 할 수 있습니다([그림 4] 참조). 이렇게 하면 AjaXplorer 측의 초기 설정이 완료됩니다.   
  1. 워드프레스와 AjaXplorer 연결 (워드프레스 준비)

    다음으로, WordPress에 로그인하면 동시에 AjaXplorer에도 로그인하게 되며, 사용자가 WordPress 쪽에 로그인하면 해당 사용자가 AjaXplorer 쪽에 존재하지 않을 경우 애플리케이션 브리지가 자동으로 추가됩니다. 공식 웹사이트에서 브리지 플러그인을 배포하다운로드하세요("ajaxplorer-cms-bridges-4.0.zip" 내 다양한 CMS용 브리지 플러그인이 링크에서 다운로드할 수 있습니다).
    다운로드 파일을 펼치면 "WordPress" 폴더 안에 "ajaxplorer"라는 폴더가 있으니, 이 폴더를 WordPress 플러그인 디렉터리에 업로드하세요.
    이제 WordPress 관리자 메뉴에서 AjaXplorer 플러그인을 활성화하면 브리지 기능을 사용할 수 있습니다. 하지만 설정 화면이 영어로 이해하기 어려워 이 브리지 플러그인을 일본어로 번역하겠습니다. 먼저, 이 기사에 배포된 브리지 플러그인의 일본어 파일을 다운로드하세요. 다운로드한 파일을 압축 해제하면 lang 폴더도 압축이 풀리므로, 이 폴더를 AjaXplorer 브리지 플러그인 디렉터리 바로 아래에 업로드하세요.
    다음으로, 언어 파일을 브리지 플러그인 자체에 임베드할 것입니다. 브리지 플러그인 본문 "class. WpAjxp.php"을 편집하고 [php firstline="11"]define("AJXP_EXEC", true);[/php]에 다음 코드를 추가하세요.
    [php firstline="12"]load_plugin_textdomain("ajxp", false, "ajaxplorer/lang/");[/php] 이로써 플러그인 일본어가 완성됩니다. "AjaXplorer"는 워드프레스 관리자 메뉴의 "설정" 섹션에 추가되므로, 아래 [그림 5]처럼 설정 화면이 일본어라면 일본어가 성공한 것입니다.

    [caption id="attachment_130" align="aligncenter"]

AjaXplorer-Bridge-plugin

[그림 5] AjaXplorer 브리지 플러그인 설정 화면 일본어 번역 [/caption]

브리지 플러그인 설정은 다음과 같습니다. 

- AjaXplorer 경로 필드에서 AjaXplorer가 설치된 서버의 전체 경로를 입력하세요. 
- "Private Key~" 필드에 아무 비밀번호를 입력하세요 (다음 단계에서 사용할 비밀번호를 기억하세요). 
- "Auto-create~" 토글을 선택할 수 있습니다. 워드프레스에 많은 사용자가 로그인하고 있고 모든 사용자가 AjaXplorer를 사용할 수 있도록 허용할 필요가 없다면, "아니오"를 선택할 수 있습니다. 

그 다음, AjaXplorer에서 초기 관리자 사용자 "admin"을 WordPress 쪽 사용자로 등록하세요. 이 경우, WordPress에서 생성하는 "admin" 사용자의 비밀번호는 이전에 AjaXplorer에서 변경한 것과 동일해야 합니다(이미 WordPress에 "admin" 사용자가 있다면, 사용자의 비밀번호를 AjaXplorer의 "admin" 사용자 비밀번호로 변경하거나, 다시 AjaXplorer에 로그인해서 비밀번호를 변경할 수 있습니다).   
  1. WordPress 및 AjaXplorer 연결 (AjaXplorer 측 준비 중)

    이제 AjaXplorer 쪽에 브리지 플러그인을 추가할 예정입니다.
    AjaXplorer 설치 디렉터리의 "conf"에 "bootstrap_plugins.php"라는 구성 파일이 있으니 편집하세요. 아래 "bootstrap_plugins.php" 65~73 라인에 있는 AUTH_DRIVER라는 전체 연관 배열을 교체하세요(전환 시 원래 배열을 주석 지우고 추가하는 것이 유용합니다).
    [php firstline="65"] "AUTH_DRIVER" => array( "NAME" => "remote", "OPTIONS" => array( "SLAVE_MODE" => true, "USERS_FILEPATH" => "AJXP_INSTALL_PATH/server/users/users.ser", "LOGIN_URL" => "/wordpress/wp-login.php", "LOGOUT_URL" => "/wordpress/", "SECRET" => "myprivatesecret", "TRANSMIT_CLEAR_PASS" => false) ), [/php] 개별적으로 편집해야 하는 부분은 다음과 같습니다.

    • [php firstline="69"]"USERS_FILEPATH" => "AJXP_INSTALL_PATH/server/users/users.ser"[/php] ... 최신 버전의 AjaXplorer에서는 사용자 파일 저장 위치가 변경되어 [php light="true" classname="inline-code"]"AJXP_INSTALL_PATH/data/plugins/auth.serial/users.ser"[/php]
    • [php firstline="70"]"LOGIN_URL" => "/wordpress/wp-login.php"[/php] ... WordPress 로그인 URL (AjaXplorer에 로그인하면 이 URL로 리디렉션됩니다)
    • [php firstline="71"]"LOGOUT_URL" => "/wordpress/"[/php] ... 워드프레스 로그아웃 URL (AjaXplorer로 로그아웃할 때 이 URL로 리디렉션됩니다)
    • [php firstline="72"]"SECRET" => "myprivatesecret"[/php] ... WordPress Bridge 플러그인을 설정할 때 입력한 개인 키

    설정 수정이 끝나면 덮어쓰고 저장하세요. 이제 워드프레스에 로그인하는 동시에 AjaXplorer에 로그인할 수 있습니다. 관리자 사용자로 워드프레스에 로그인해 보고 작동 상태를 확인해 보세요.
    로그인 브리지를 성공적으로 마쳤다면, 이제 WordPress와 AjaXplorer 쪽의 파일 관리가 동기화되도록 저장소를 설정할 차례입니다.

    [caption id="attachment_138" align="alignleft"]

AjaXplorer-setting-03 [그림 6] AjaXplorer 설정[/caption]

AjaXplorer에 로그인하여 왼쪽 상단의 드롭다운에서 "설정"을 선택하세요([그림 6]를 참고).   

\[caption id="attachment\_139" align="alignright"\]<a href="https://dev.blog.colorkrew.com/uploads/scrsht-00009.png">

AjaXplorer-setting-04 [그림 7] 새로운 AjaXplorer 저장소 생성[/caption]

상단 툴박스에서 "New Repository" → "Repository"를 선택하세요(그림 7 참조). 

\[캡션 ID="attachment\_140" align="alignleft"\][ 
AjaXplorer-setteing-05

)](https://blog.colorkrew.com/uploads/scrsht-00010.png) [그림 8] AjaXplorer가 새로운 저장소[/caption] 생성

그림 8에서 볼 수 있듯이, "새 저장소 만들기" 대화상자가 열리므로 다음 필수 입력란을 입력하세요.   

- 저장소 라벨: AjaXplorer에 표시되는 저장소 이름입니다
- 저장소 드라이버: 저장소의 드라이버입니다. 기본적으로 "파일 시스템 (표준)"으로 불어도 됩니다.
- 경로: 참조하고자 하는 디렉터리의 전체 경로를 서버에 입력하세요 (WordPress 설정 화면에 표시된 저장소 경로 예시 참조)
- 생성: 위에 지정된 경로가 존재하지 않을 경우 새 경로를 생성할지 여부를 토글하는 기능입니다

또한 "Filesystem Commons"의 아코디언 리스트에서 저장소에 대한 접근 권한을 설정할 수 있습니다. 각 저장소를 읽기 전용으로 설정할 수 있습니다. 기본 파일을 관리하고 싶다면 "읽고 쓰기"로 설정하는 것이 좋습니다.   

\[caption id="attachment\_141" align="aligncenter"\]<a href="https://dev.blog.colorkrew.com/uploads/scrsht-00011.png">

AjaXplorer-setting-06 [그림 9] AjaXplorer 저장소 확인[/caption]

왼쪽 상단의 드롭다운에서 새로 생성된 저장소 이름을 선택하면, 파일 관리자 화면이 저장소 경로에 따라 해당 내용으로 업데이트되면 저장소가 성공적으로 생성된 것입니다. 이로 인해 미디어 파일 재업로드와 같은 파일 관리가 매우 편리해집니다. 
  1. WordPress 관리자 메뉴에서 AjaXplorer 바로가기 만들기

    참고로, 워드프레스와 AjaXplorer 간의 연결은 완료되었지만, 워드프레스 관리자 메뉴에서 AjaXplorer 측으로 가는 바로가기 링크가 없어서 AjaXplorer 진입할 때마다 URL을 입력해야 해서 번거롭습니다. 그래서 워드프레스 관리자 메뉴에 AjaXplorer 바로가기 링크를 추가하여 사용자 친화적으로 만들고 싶습니다.
    다음 코드를 WordPress 브리지 플러그인 클래스의 본문에 추가하세요. WpAjaxp.php.
    103~106행의 "함수 설정_menu()" 함수에서,
    [php firstline="106"] add_submenu_page('tools.php', __("AjaXplorer", "ajxp"), __("AjaXplorer","ajxp"), '1', 'wp_ajax_link', array(&$this, 'goto_ajaxplorer')); [/php]. 또한, "Ajxp" 클래스(함수 "plugin_options_validate()" 다음에 다음을 사용할 수 있습니다
    [PHP htmlscript="true" firstline="202"] function goto_ajaxplorer() { echo '

    AjaXplorer를 열어라;
    '; } AjaXplorer의 루트 디렉터리에 대한 링크를 추가하세요. 예를 들어 [/php] (위의 자바스크립트 주석 출력을 취소하면 즉시 링크됩니다).
    이렇게 하면 WordPress 관리자 메뉴의 "도구"에 "AjaXplorer"라는 항목이 추가되어, 이 메뉴에서 AjaXplorer 쪽으로 바로가기를 할 수 있습니다. AjaXplorer 쪽에서 돌아올 때는 툴박스에서 "Back"을 클릭하여 WordPress 쪽으로 돌아갈 수 있습니다.

AjaXplorer CMS 브리지 워드프레스 플러그인 일본어 파일

Action Confirmation: WordPress 3.4.0 / AjaXplorer 4.2.0

Related Articles