wordpress:making_plugin_tutorial
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판이전 판다음 판 | 이전 판마지막 판양쪽 다음 판 | ||
wordpress:making_plugin_tutorial [2015/01/22 03:57] – [포스트 타입과 커스텀 포스트] changwoo | wordpress:making_plugin_tutorial [2015/05/01 20:45] – dw2pdf 파일 재생성을 위한 가짜 작업. changwoo | ||
---|---|---|---|
줄 2: | 줄 2: | ||
===== 소개 ===== | ===== 소개 ===== | ||
- | 워드프레스는 단순히 블로깅 용 툴이 아니라 | + | 워드프레스는 단순히 블로깅 용 툴이 아니라 |
- | 이것은 워드프레스를 통해 제작한 웹사이트는 만들기도 보다 간편하고 차후 유지 관리에도 유리하기 때문에, | + | 워드프레스는 점차 많은 곳에서 채택되어 사용되고 있습니다((http:// |
- | + | ||
- | 요즘은 다양한 플러인들이 제작되어 있어, 뭔가 부족하거나 아쉬운 기능은 플러그인을 찾아 보면 구할 수 있는 경우가 아주 많습니다. 단순한 기능 추가부터, | + | |
그런데 이러한 플러그인 제작은 어떻게 하는 것일까? 내 입맛에 맞는 워드프레스 플러그인은 제작할 수 없을까? 본 문서에서는 그동안의 짧은 경험을 정리하고자 워드프레스 플러그인 제작 방법을 기술합니다. 짧은 경험이므로 혹여 워드프레스에서 권장할 만한 내용이 아닌 부분도 더러 있을 수 있습니다. 반드시 [[http:// | 그런데 이러한 플러그인 제작은 어떻게 하는 것일까? 내 입맛에 맞는 워드프레스 플러그인은 제작할 수 없을까? 본 문서에서는 그동안의 짧은 경험을 정리하고자 워드프레스 플러그인 제작 방법을 기술합니다. 짧은 경험이므로 혹여 워드프레스에서 권장할 만한 내용이 아닌 부분도 더러 있을 수 있습니다. 반드시 [[http:// | ||
- | |||
===== 플러그인 이름짓기 ===== | ===== 플러그인 이름짓기 ===== | ||
줄 157: | 줄 154: | ||
|65 |내 요리 | |65 |내 요리 | ||
- | 그리고 내 요리의 하위 카테고리로 쇠고기를 다시 추가합니다. 이 작업을 모두 워드프레스 UI에서 할 경우에는 ' | + | 그리고 내 요리의 하위 카테고리로 쇠고기를 다시 추가합니다. 이 작업을 모두 워드프레스 UI에서 할 경우에는 ' |
**wp_term_taxonomy** | **wp_term_taxonomy** | ||
줄 190: | 줄 187: | ||
* 플러그인은 특별하게 어떤 페이지를 생성합니다. | * 플러그인은 특별하게 어떤 페이지를 생성합니다. | ||
* 이 페이지는 특별히 어디에 노출되어 있지 않아서, 직접 다른 페이지가 링크를 걸어 주든지, 아니면 사용자가 명시적으로 URL을 타이핑해야 합니다. | * 이 페이지는 특별히 어디에 노출되어 있지 않아서, 직접 다른 페이지가 링크를 걸어 주든지, 아니면 사용자가 명시적으로 URL을 타이핑해야 합니다. | ||
- | * 페이지의 콘텐츠는 그냥 Hello, World를 | + | * 페이지는 |
* 플러그인은 커스텀 포스트 타입을 하나 생성합니다. | * 플러그인은 커스텀 포스트 타입을 하나 생성합니다. | ||
* 이 커스텀 포스트 타입은 기본 포스트처럼 대시보드에서 작성 가능합니다. | * 이 커스텀 포스트 타입은 기본 포스트처럼 대시보드에서 작성 가능합니다. | ||
- | * 몇몇 메타 필드들이 표시됩니다. | + | * 몇몇 메타 필드들이 표시됩니다. 단 프로그램의 단순화를 위해 메타 필드를 직접 DB에 저장하지는 않습니다. |
- | 이러한 기능을 위해 자잘한 설명을 모두 할 이유는 없습니다. | + | 플러그인이 할 만한 기본적인 동작이라 생각해서 구성해 보았습니다. 분량상 DB를 읽어 오거나 업데이트하는 부분은 넣지 않았습니다. |
==== 소스 설명 ==== | ==== 소스 설명 ==== | ||
- | 소스는 [[https:// | + | 소스는 [[https:// |
당연한 말이지만 나열된 기능들은 워드프레스 기능의 아주 일부에 불과합니다. 더 자세한 내용은 코덱스를 참고하셔야겠죠. 하지만 거의 일상적으로 사용될 법한 기본적인 플러그인 기능만을 요점 정리 식으로 모아 보았습니다. 아마 플러그인을 제작할 때 참고하는 편리하리라 생각합니다. 별도의 기능을 위해 특정 도움 함수를 만들지 않고 거의 뼈대를 있는 그대로 노출하는 식으로 전개해 보았습니다. | 당연한 말이지만 나열된 기능들은 워드프레스 기능의 아주 일부에 불과합니다. 더 자세한 내용은 코덱스를 참고하셔야겠죠. 하지만 거의 일상적으로 사용될 법한 기본적인 플러그인 기능만을 요점 정리 식으로 모아 보았습니다. 아마 플러그인을 제작할 때 참고하는 편리하리라 생각합니다. 별도의 기능을 위해 특정 도움 함수를 만들지 않고 거의 뼈대를 있는 그대로 노출하는 식으로 전개해 보았습니다. | ||
줄 206: | 줄 203: | ||
사실 플러그인을 제작하다 보면 콜백 함수에서 다시 콜백 함수를 정의해 주어야 경우가 흔합니다. 이렇게 콜백의 깊이가 깊어지면 추적하기도 어렵고 때로는 코드가 지저분하게 될 수도 있습니다. 이 점을 유념하고 플러그인 제작을 하시는 것이 좋겠습니다. | 사실 플러그인을 제작하다 보면 콜백 함수에서 다시 콜백 함수를 정의해 주어야 경우가 흔합니다. 이렇게 콜백의 깊이가 깊어지면 추적하기도 어렵고 때로는 코드가 지저분하게 될 수도 있습니다. 이 점을 유념하고 플러그인 제작을 하시는 것이 좋겠습니다. | ||
- | 또한 플러그인에서는 MVC 패턴 등을 기본적으로는 지원하지 않습니다. 굳이 어떻게든 PHP 상에서 MVC를 도입하려면 별도의 PHP 프레임워크와 연동을 시키든지, | + | 또한 플러그인에서는 MVC 패턴 등을 기본적으로는 지원하지 않습니다. 굳이 어떻게든 PHP 상에서 MVC를 도입하려면 별도의 PHP 프레임워크와 연동을 시키든지, |
=== 활성화, 비활성화, | === 활성화, 비활성화, | ||
줄 224: | 줄 221: | ||
* 하위 메뉴 페이지 삽입: [[http:// | * 하위 메뉴 페이지 삽입: [[http:// | ||
- | {{ : | + | {{ :wordpress:image: |
그림은 플러그인 메뉴가 삽입되고 마우스 커서가 해당 메뉴 페이지 영역에 접근했을 때의 상황을 보여 주고 있습니다. 하나의 메뉴 페이지에 2개의 하위 메뉴 페이지가 삽입된 상태입니다. 그래서 커서가 근접하면 나오는 오른쪽 부분의 서브 메뉴 부분에 총 3개의 항목이 보이게 됩니다. 이렇게 메뉴 페이지를 삽입하면 항상 기본적으로 같은 이름의 하위 메뉴 페이지가 가장 먼저 삽입됩니다. 이 첫번째 메뉴가 의도한 동작이 아니라면 [[http:// | 그림은 플러그인 메뉴가 삽입되고 마우스 커서가 해당 메뉴 페이지 영역에 접근했을 때의 상황을 보여 주고 있습니다. 하나의 메뉴 페이지에 2개의 하위 메뉴 페이지가 삽입된 상태입니다. 그래서 커서가 근접하면 나오는 오른쪽 부분의 서브 메뉴 부분에 총 3개의 항목이 보이게 됩니다. 이렇게 메뉴 페이지를 삽입하면 항상 기본적으로 같은 이름의 하위 메뉴 페이지가 가장 먼저 삽입됩니다. 이 첫번째 메뉴가 의도한 동작이 아니라면 [[http:// | ||
=== POST 액션 === | === POST 액션 === | ||
- | 어떤 폼을 제작해서 사용자로부터 데이터를 받아 서버로 전달하게 해야 한다고 생각해 봅니다. 이 때 [[http:// | + | 어떤 폼을 제작해서 사용자로부터 데이터를 받아 서버로 전달하게 해야 한다고 생각해 봅니다. 이 때 [[http:// |
워드프레스는 GET/POST 전송에 대해 하나의 URL을 정해 두고 모든 요청에 대해 처리하도록 디자인되어 있습니다. 대신 각 요청에는 자신이 어떤 요청인지를 스스로 밝히는 식별자를 두고 이 식별자에 의해 어떤 종류의 요청인지 제각각 구분하도록 되어 있습니다. 보통 이 주소는 '' | 워드프레스는 GET/POST 전송에 대해 하나의 URL을 정해 두고 모든 요청에 대해 처리하도록 디자인되어 있습니다. 대신 각 요청에는 자신이 어떤 요청인지를 스스로 밝히는 식별자를 두고 이 식별자에 의해 어떤 종류의 요청인지 제각각 구분하도록 되어 있습니다. 보통 이 주소는 '' | ||
줄 243: | 줄 240: | ||
=== AJAX 액션 === | === AJAX 액션 === | ||
+ | POST 방식은 간결하지만 페이지 전환이 일어난다는 단점이 있습니다. 한 페이지 안에서 보이지 않게 서버 요청을 하려면 AJAX 방식을 사용하는 것이 낫습니다. 워드프레스는 [[http:// | ||
+ | |||
+ | AJAX 요청 또한 미리 서버에 등록해 두지 않으면 올바르게 동작하지 않습니다. 세팅이 올바르지 않으면 서버는 항상 ' | ||
+ | |||
+ | AJAX 요청을 등록하려면 [[http:// | ||
+ | |||
+ | AJAX 액션 또한 어떤 특정한 URL에서만 요청을 받습니다. 일반적으로 이 URL은 '' | ||
+ | |||
+ | 이렇게 액션을 등록한 후, POST와 마찬가지로 AJAX 요청을 할 때 반드시 파라미터에 action 항목이 딸려 오고, 그 action은 훅에서 지정한 $action 문자열과 일치해야 합니다. 예제에서는 AJAX 호출을 할 때 action 이름을 ' | ||
+ | <code php> | ||
+ | add_action( ' | ||
+ | </ | ||
+ | 폼에는 미리 숨겨진 input 요소를 넣었습니다. | ||
+ | <code html> | ||
+ | <input type=' | ||
+ | </ | ||
+ | |||
+ | POST와 동일하게 action을 보고 우리가 등록한 콜백 함수를 호출해 줍니다. 함수 호출의 마지막에는 반드시 [[http:// | ||
+ | |||
+ | AJAX는 자바스크립트 기반으로 동작하므로 여기서 자바스크립트 삽입 방법 및 CSS 삽입 방법에 대해 언급하도록 하겠습니다. 물론 HTML 소스 안에 하드 코딩 방식으로 CSS와 스크립트를 우겨 넣어도 관계는 없습니다. 그러나 그다지 안정적인 방법은 아닙니다. 이를 위해 워드프레스에서는 [[http:// | ||
+ | |||
+ | 보통은 간단하게 wp_enqueue_script 콜 한 번으로 스크립트 삽입은 끝납니다. 그러나 다국어를 대비해야만 한다면 wp_localize_script가 필요합니다. 이 때 추가적으로 wp_register_script를 호출할 수도 있구요. 그래서 저는 아예 처음부터 스크립트를 출력할 때는 wp_register_script -> wp_localize_script -> wp_enqueue_script 순으로 호출합니다. | ||
+ | |||
=== Rewrite === | === Rewrite === | ||
- | === 로컬라이즈 === | + | 일단 이 기능은 서버에 rewrite가 가능해야만 동작합니다. 예를 들어 아파치 서버를 쓴다면 rewrite 모듈이 있어야 동작합니다. |
+ | 어떤 URL의 규칙을 다른 규칙으로 변경해주는 역할을 합니다. 보통 .htaccess 안에 많이 삽입하기도 하는데, 워드프레스에서 함수로도 이 기능을 제공합니다. [[http:// | ||
+ | |||
+ | 이 기능을 이용해서 지저분한 URL을 좀 더 깨끗하게 만들 수 있습니다. 예제에서는 ''/ | ||
=== 쿼리 파싱 === | === 쿼리 파싱 === | ||
- | === 템플릿 라우팅 === | + | rewrite를 이용해 ''/ |
+ | 코어는 정해진 쿼리 변수 이외에는 반응하지 않도록 되어 있습니다. 우리가 임의의 파라미터를 처리하려면 미리 코어에 그 파라미터의 존재를 반드시 알려 주어야 합니다. 이를 담당하는 훅은 ' | ||
+ | |||
+ | add_filter에 등록한 콜백은 하나의 인자를 받는데, 여기에 쿼리로 받을 수 있는 파라미터의 목록(array)이 전달됩니다. 이 목록에 원하는 내용을 추가한 후 **반드시** 이 목록을 리턴하세요. 예제에서는 ' | ||
+ | |||
+ | 이제 쿼리 파라미터를 허용했으므로 파라미터의 값이 코어로 전달됩니다. 하지만 여기까지는 값이 전달된 것입니다. 이 값에 어떤 동작을 하라고는 정해 주지 않았습니다. 그러므로 액션을 추가하여 요청 파라미터를 분석 후 원하는 동작이 이루어지도록 해야 합니다. 이것을 위해 ' | ||
+ | |||
+ | 예제에서는 parse_request 훅에 대한 동작을 다음과 같은 방식으로 추가했습니다. 쿼리 중 tutorial이라는 파라미터를 발견하면 특정 페이지로 이동합니다. 이 특정 페이지는 플러그인이 임의로 만들어내는 페이지입니다. | ||
+ | |||
+ | |||
+ | === 템플릿 | ||
+ | 플러그인에서 특정 페이지로 이동을 시키기 위해서는 ' | ||
+ | === 커스텀 포스트 === | ||
+ | 플러그인은 tutorial 타입의 커스텀 포스트를 생성합니다. 관리자 메뉴에서 이 포스트 메뉴가 나오고, 이 타입으로 새로운 글을 작성도 가능합니다. 커스텀 포스트를 생성하기 위해서는 [[http:// | ||
+ | |||
+ | 그리고 ' | ||
+ | |||
+ | === 로컬라이즈 === | ||
+ | == 텍스트 도메인 == | ||
+ | 간단히 말해 플러그인이 출력하는 텍스트가 어떤 소속인지를 지정하는 것입니다. 이렇게 지정해 두지 않으면 모든 번역문이 뒤죽박죽이 되어 있겠지요. 이 텍스트 도메인은 미리 메인 파일의 [[http:// | ||
+ | |||
+ | == 코드 처리 == | ||
+ | 워드프레스 로컬라이즈는 [[http:// | ||
+ | * PHP 자체에 gettext 라이브러리가 있습니다. 텍스트 키워드를 위해 [[http:// | ||
+ | * 한편 [[http:// | ||
+ | * 단수/ | ||
+ | 이렇게 모든 출력되는 텍스트에 대해 미리 < | ||
+ | |||
+ | == 텍스트 번역 == | ||
+ | 번역은 [[http:// | ||
+ | 예제에서는 메인 페이지에 나오는 ' | ||
+ | |||
+ | {{ : | ||
+ | 위 그림은 Poedit 실행 화면입니다. Poedit은 인터페이스가 썩 좋은 편이 아니라 한 단계씩 자세히 설명하겠습니다. 예제 플러그인은 새롭게 시작하는 번역 작업이므로 새 카탈로그를 만들어야 합니다. File > New Catalog을 선택합니다. | ||
+ | |||
+ | {{ : | ||
+ | Project 이름으로 적당히 지어 줍니다. | ||
+ | |||
+ | {{ : | ||
+ | 이제 플러그인 소스 경로를 지정해 주어야 합니다. Sources paths 탭을 선택해 줍니다. 그리고 다른 파일 탐색기를 통해 플러그인 소스 경로를 **복사**한 후 경로를 지정해 줍니다. 직접 창에서 경로를 선택하는 방법이 없습니다. | ||
+ | |||
+ | {{ : | ||
+ | 그다음 번역할 텍스트를 스캔할 키워드(함수) 이름들을 선언해 줍니다. 기본으로 ' | ||
+ | 확인 버튼을 누르고 po 파일을 다른 이름으로 저장하면 됩니다. 그리고 이렇게 만든 파일은 바로 .pot 파일로 만들어 템플릿으로 저장해도 됩니다. 이렇게 파일이 만들어진 후에는 소스에서 텍스트를 추출해 보여주게 됩니다. 혹시 보이지 않는다면 경로를 확인하고 Update 버튼을 눌러주세요. | ||
+ | |||
+ | <WRAP center round info 60%> | ||
+ | po 파일을 저장할 때, ' | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
+ | 각 소스의 텍스트를 한국어로 변역해 주면 됩니다. Source Text를 보면서 하나하나 번역을 해 주면 됩니다. 아래처럼 Preferences 메뉴에서 ' | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | 모든 텍스트를 변역했으면 저장하고 poedit을 닫습니다. .mo 파일이 생성되면 플러그인에서 번역된 텍스트를 이용할 수 있습니다. | ||
+ | |||
+ | == 번역문 출력 == | ||
+ | 플러그인 로딩 때 .mo 파일을 로드하도록 하면 됩니다. 해당 훅은 ' | ||
+ | * 첫번째 인자로 플러그인의 텍스트 도메인을 넣습니다. 여기서는 wp_plugin_tutorial을 텍스트도메인으로도 썼습니다. | ||
+ | * 두 번째 인자는 폐기되었기 때문에 그냥 false를 넣어도 됩니다. | ||
+ | * 세 번째 인자로는 .mo 파일이 있는 곳의 경로를 지정해 줍니다. .mo 파일의 파일 이름은 (텍스트도메인)-(언어코드)로 지으라는 규칙이 있으므로 그 파일이 있는 곳의 경로만을 입력합니다. | ||
+ | |||
+ | 워드프레스가 영어와 한글로 번역되는지를 확인하세요. Settings-General에 보면 Site Language라는 항목이 있습니다. 여기서 ' | ||
+ | {{ : | ||
+ | |||
+ | 워드프레스를 영문으로만 설치했으면 한글 번역이 별도로 설치되지 않았을 수도 있습니다. 서버 설정에 따라 언어를 자동으로 다운로드 받을 수 있고, 언어 파일을 별도로 설치해야 할 수 있습니다. 언어 팩은 [[https:// | ||
+ | |||
+ | ===== 끝내며 ===== | ||
+ | 그동안 워드프레스 플러그인에 대해 한 번 정리를 해 보고 싶었습니다. 플러그인 자체는 그다지 어려울 것이 없습니다. 코어에 원하는 기능을 등록하고, | ||
+ | |||
+ | 플러그인은 워드프레스를 확장하는 데 있어 핵심적인 역할을 합니다. 이미 수많은 플러그인들이 개발하여 코어 자체로는 하지 못하는 일들을 보조해 주고 있습니다. 잘만 활용하면 워드프레스만으로도 엄청나게 많은 일들을 할 수 있습니다. 보고 있으면 하나의 플랫폼 같다는 생각이 들기도 합니다. | ||
+ | |||
+ | 조언해둘 것이 있습니다. 플러그인과 템플릿은 둘 다 워드프레스를 확장하는 기능입입니다. 그러나 둘의 역할은 분명히 다릅니다. 템플릿은 워드프레스를 어떻게 보여줄지에 더욱 집중이 된 요소이고, | ||
+ | |||
+ | 예를 들어 템플릿에서도 액션을 걸어서 유저가 프로필을 업데이트 할 때마다 특정 동작을 할 수 있게 만들 수 있습니다. 예를 들어 프로필의 업데이트된 내용을 다른 서버와 동기화 한다든지 같은 시나리오가 될 수 있겠네요. 그런데 이런 기능을 템플릿에서 꼭 해야만 할 이유가 없습니다. 만일 템플릿을 바꾼다면 그 기능이 동작하지 않게 될 수 있겠죠. 이와 반대의 경우도 마찬가지입니다. 템플릿에서 해야 할 일으르 플러그인에서 해 버리면 그것도 좋지 않습니다. | ||
+ | 이것은 플러그인 사용상의 조언입니다. 직접 플러그인을 만들어 보시거나, | ||
+ | 워드프레스 플러그인에 대해 정리를 했으니 다른 것도 차차 정리해 두고 싶습니다. 다음과 같은 내용들이 다음 타겟이 될 수 있겠네요. | ||
+ | * AXIS < | ||
+ | * 커스텀 포스트 | ||
+ | * 주요 훅 | ||
+ | * Option API | ||
+ | * WP Table |
wordpress/making_plugin_tutorial.txt · 마지막으로 수정됨: 2015/05/01 20:50 저자 changwoo