창작자를 위한 XE3 테마 만드는 방법 #2

LuisK
LuisK
Sep 23 · 5 min read

#테마를 만들기 위한 테마 변수 더 들여다보기

XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.

XE CAMPUS 바로 가기

#0,#1, #2, #3

앞서 다뤘던 내용과, 다룰 내용

이전 시간에는 더미로 만든 테마의 코드를 알아보고, 파일을 쪼개 경우별로 테마 블레이드 파일을 불러오는 방법에 대해서 알아보았습니다.

이번 시간에는 메뉴를 출력하고 메뉴 선택 시 active class 추가 방법, 테마 설정 별로 class를 다르게 주거나 추가 class 또는 id를 주는 방법에 대해서 알아보고, XE Store에 상품을 등록하는 방법을 간략하게 알아보겠습니다.

메뉴 출력 및 설정

메뉴 출력

메뉴 출력을 위해서는 테마 설정에 menu 타입을 설정해서 지정해야 합니다.
지난번 info.php에 작성해야 할 내용에 gnb라는 ID를 menu 타입이 있습니다.

이를 이용해서, 아래의 코드를 작성하면 메뉴가 출력됩니다.

<ul>
@foreach(menu_list($config->get('gnb')) as $menu)
<li>
<a href="{{ url($menu['url']) }}" target="{{ $menu['target'] }}">
{{ $menu['link'] }}
</a>
</li>
@endforeach
</ul>

물론, 각 테마 또는 템플릿에 맞는 <ul> 또는 <li>를 치환해야 합니다.

메뉴 선택 시 Active

메뉴를 클릭했다면, 굵게 만들거나 선택한 부분을 알려줘야 합니다.
물론, 이 항목들은 css에서 각 선택된 항목에 해당하는 class의 효과 등을 작성해야 합니다.

<li @if($menu[‘selected’]) class=”active” @endif> 코드처럼 @if 문과 @endif 부분을 복사 붙여넣으면 해당 메뉴를 클릭하면 class에 active가 추가됩니다.

선택에 따른 Class 추가

테마 설정에서 컬러별 색상을 다르게 하고 싶은 경우 각 컬러 셋에 맞는 css를 작성한 후, class에 해당 값을 출력해주면 됩니다.

{{ app('xe.frontend')->bodyClass($config->get('color_set')) }}

예시 코드는 body에 컬러 셋 코드를 먼저 추가한 예시입니다.

컨텐츠 출력

컨텐츠는 {{ $content }} 코드를 입력한 곳에서 출력이 됩니다.
단, 이 코드는 한 레이아웃 구성 페이지에서 하나만 사용할 수 있으며, 한개 이상의 컨텐츠 출력 코드가 작성된 경우 오류를 출력하거나, 제대로 화면 구성이 되지 않을 수 있습니다.

만약, 테마 설정에서 메인과 서브를 나누었는데 메인 또는 서브 단일 화면에서 게시판 또는 메인 위젯이 보이지 않는다면 {{ $content }}를 출력할 컨텐츠 div 컨테이너에 입력해주시면 출력됩니다.

배포를 위한 준비

XE3는 기존의 XE1과는 다르게 플러그인 단위를 묶어 배포하거나 판매할 수 있습니다.
이를 패키지라고 부르며, 테마와 위젯, 익스텐션 기능을 나눠 배포하지 않고 한꺼번에 배포하고 싶은 창작자를 위한 패키지 배포를 지원하고 있습니다.

하나의 플러그인에서 make:theme 또는 make:skin 을 사용해 만들고 플러그인을 압축하여 배포하면, 테마와 연관된 스킨을 함께 판매하거나 배포할 수 있게 됩니다.

Composer.json 수정

SSH 또는 관리자 사이트에서 생성된 플러그인 더미에는 더미를 위한 설명과 이름으로 작성되어 있습니다.

이미지처럼 extra란은 설치된 테마 목록에서 나오는 플러그인 명, 플러그인 설명입니다.

그와 더불어 author란은 이 플러그인을 작성한 창작자의 이름, 이메일 등으로 수정하여 저장하면 됩니다.

XE Store 등록

XE Store에 등록하기 위해 회원 가입 이후, 플러그인 등록을 누르면 익스텐션(기능 단위 프로그램)인지 테마인지 구분하게 됩니다.

클릭 후 테마의 카테고리를 최대 2개까지 선택하여 지정한 후, 플러그인을 압축한 소스 코드를 업로드 하면 끝!

XE Store에 내 테마를 등록하여 더 많은 팬을 만들 수 있기 바랍니다!

지금까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)

XE 익스텐션 / 테마 창작자로써 내 플러그인의 팬을 만들어보세요!
XE Store 바로 가기

XE 공식 홈페이지 바로 가기
XE CAMPUS 바로 가기

LuisK

Written by

LuisK

Content Director At XEHub

XEHub

XEHub

Stories and tips for XE, the best platform for web page building.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade