#테마를 만들기 위한 XE의 플러그인 구조 뽀개기
XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.
앞서 다뤘던 내용과, 다룰 내용
XE를 설치하고, 기본설정, 내 사이트의 메뉴를 구성하고 메인 페이지를 구성하는 방법들에 대해서 알아보았습니다.
더 나아가, 게시판의 설정을 통해 특정 기능을 할 수 있게 해주는 방법들도 알아보았습니다.
이전 스텝인 STEP1에서는 웹초보자를 위한 XE3의 안내였다면 STEP2에서는 코딩을 아는 웹디자이너와 개발자를 위한 테마와 스킨 제작 방법에 대해서 차근차근 총 5부작으로 알아보겠습니다.
XE 구조
구조 파헤치기
XE는 익스텐션과 테마로 크게 나뉘어 집니다.
익스텐션은 어떠한 동작을 하게 해주는 프로그램 단위의 그룹이고, 테마는 겉 모습을 꾸며주는 스킨 단위의 그룹입니다.
이 두 분류는 xe가 설치된 디렉토리의 /plugins 폴더에 위치합니다.
예를 들어, my_theme 라는 테마를 만든경우 xe경로/privates/my_theme 라는 폴더 위치에 내 테마가 위치하게 됩니다.
privates 폴더는 다른 git저장소 또는 packagist와 같은 개념으로, 로컬 저장소에 있는 플러그인을 plugin에 설치할 수 있게 해주는 개념입니다.
빈 플러그인 만들기
XE 에서는 테마를 만들기 위한 기본 뼈대를 갖춘 더미를 제공하고 있습니다.
XE 3.0.2 부터는 웹에서 테마/익스텐션 제작을 할 수 없으니, SSH 사용이 가능한 환경에서 따라해주세요. SSH(터미널)이 처음이시라면, 여기를 눌러 SSH 접속 방법 및 명령어를 확인하실 수 있습니다.
먼저, XE가 설치된 디렉토리로 SSH의 명령어를 통해 이동해주세요.
디렉토리 이동은 cd 명령어로 가능하며 상대 경로 또는 절대 경로로 이동할 수 있습니다.
그 이후 아래의 명령어를 입력합니다.
php artisan make:plugin <테마이름><제작자명>
이 명령어를 실행하면, 아래와 같이 초록색 배경의 글자와 함께 메시지를 마주하게 됩니다.
이렇게 정상적으로 플러그인이 만들어지면 xe경로/plugins/테마명 으로 폴더가 만들어지며 내 테마 플러그인이 XE관리자 화면에서도 확인할 수 있게 됩니다!
본격 테마 플러그인 만들기
빈 플러그인 상자를 만들었다면, 이제 그 상자안에 예쁜 테마를 담을 준비를 해봅시다.
위에서 입력했던 명령어중 make:plugin을 make:theme로 바꿔 입력하면 됩니다.
php artisan make:theme <플러그인명> <테마명> 이 되게 됩니다.
명령어를 실행하면 테마를 추가할 것인지 물어봅니다.
우리는 테마를 만들기 위해 yes를 입력후 엔터를 누르면 끝!
여기서 잠깐!
만약, 기존에 만든 플러그인이 있고 그 플러그인에 테마만 추가하고 싶다면, 위쪽에 플러그인을 만들지 말고, 테마 명령어인 make:theme 만 실행해주세요
플러그인 구조 뽀개기
이렇게 SSH명령어를 통해 만들어진 플러그인과 테마는 xe3경로/privates/플러그인명 의 폴더로 저장되어 있습니다.
이 폴더로 접근하면 아래의 모습을 볼 수 있습니다.
privates/(plugins 심볼릭 폴더)
└── myplugin
├── assets/
├── screenshots/
├── src/
├── views/
├── icon.png
├── composer.json
└── plugin.php플러그인은 plugin.php 와 composer.json의 작성만으로도 구현이 가능합니다. 하지만 규모가 큰 익스텐션이나 패키지단위를 제작하는 경우 더욱 많은 파일과 리소스를 필요로 하게 됩니다.
많은 파일을 제대로 관리하기 위해서 디렉토리 구조를 잘 설계해야 하기에 위의 구조를 권장하고 있습니다.
assets 폴더는 css, js, 이미지 파일과 같은 파일들을 담는 디렉토리입니다. 웹 브라우저에서 직접적으로 요청하는 파일들을 이 디렉토리에 넣어 관리합니다.
src 폴더는 PHP 클래스나 함수와 같이 php로 작성된 파일들을 담는 디렉토리입니다. 컨트롤러 및 컴포넌트 파일들을 이 디렉토리에 넣습니다.
views 폴더는 템플릿 파일을 담는 디렉토리입니다. XE에서는 blade 템플릿 엔진을 사용합니다. blade 템플릿으로 작성된 PHP 파일, 또는 순수한 PHP 작성된 템플릿 파일을 이 디렉토리에 넣습니다.
screenshots 폴더에는 익스텐션의 스크린샷 이미지를 넣으세요
icon.png와 같이 익스텐션의 아이콘 이미지 파일은 플러그인의 루트 폴더에 넣어주세요. (예 : privates/xe3_theme/icon.png )
스크린샷 이미지나 아이콘 이미지는 composer.json파일의 extra > xpressengine에 파일경로를 지정해 주어야 합니다.
여기까지 배운 내용
XE에는 확장 프로그램의 익스텐션과 테마가 구분되어있습니다.
하지만 이 두개의 프로그램 단위는 플러그인이라는 항목의 패키지 형태로 묶여 있습니다.
의존성 관리를 위해 composer를 사용하고 있으며, 플러그인 등록 및 활성화 등 을 위해 plugin.php를 사용하고 있습니다.
플러그인과 테마를 만들기 위해 php artisan 을 이용한 make:plugin & make:theme를 사용해서 각각 만들어주었으며, 효율적인 리소스(파일)관리를 위한 권장 폴더 유형도 알아보았습니다.
다음 시간에는 theme.blade.php 파일과 gnb.blade.php 파일을 뜯어보며, XE에서 어떠한 코드로 테마가 랜더링 되는지 알아 보겠습니다.
지금 까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)
XE 익스텐션 / 테마 창작자가 내 플러그인의 팬을 만들어보세요!
XE Store 바로가기
