적용버전 : XpressEngine 공통 웹사이트 최근 게시물 꾸미기

최근 게시물 꾸미기

최근 게시물이란?

최근 게시물은 사이트 내 운영중인 게시판 모듈에서 마지막으로 작성된 게시물의 내용을 필요한 갯수만큼 가져와 목록으로 출력하는 것을 말합니다. 가져올 수 있는 게시물의 내용에는 작성된 본문 글의 내용, 본문 글에 딸린 댓글 그리고 첨부된 이미지나 파일 등을 가져올 수 있습니다. 또한 다른 웹사이트에서 피드(RSS, Really Simple Syndication) 주소(URL)를 제공하는 경우 제공된 내용을 목록으로 만들어 자신의 웹사이트에서 게시할 수도 있고 블로그와 엮인글 형식의 트랙백(Trackback) 기능도 활용할 수 있습니다.


콘텐츠 위젯 아이콘

최근 게시물은 메인 페이지에서 주로 활용되기도 하며 사이트 내 필요한 영역에서 다양한 방법으로 사용자의 접근성을 편리하게 제공하기도 합니다. XE 코어에서 최근 게시물을 가져오는 기능은 Content 위젯이 담당하며 여러가지 옵션의 조합으로 다양한 목록을 구성할 수 있습니다. 메인 페이지 꾸미기에 필요한 최근 글, 최근 댓글, 최근 이미지의 목록을 만들고 구성하기 위해 위젯을 다루다 보면 다음과 같은 아이콘 친구들이 등장합니다. 간략히 살펴보면 다음과 같고 미리 이해하고 가면 편리합니다.

  • widgetstyle_setup 위젯 스타일 설정 : 위젯 목록의 제목을 꾸며 줍니다.
  • widget_setup 위젯 설정 : 위젯의 옵션을 설정하거나 수정합니다.
  • widget_copy 위젯 복사 : 옵션 설정을 포함하여 같은 형식의 위젯을 복사합니다.
  • widget_size 위젯 속성 설정 : 위젯의 정렬방식, 크기, 테두리와 배경색상, 배경 이미지의 속성을 설정합니다.
  • widget_remove 위젯 삭제 : 위젯을 삭제합니다.

최근 글 가져오기

최근 게시물을 가져오기 위해 메인 페이지와는 별도로 공지사항 게시판, 자유게시판, 갤러리 게시판 모듈을 미리 생성하고 메뉴를 연결 하였습니다. 아래 순서를 따라하면서 위젯의 옵션 설정 방법에 대해 알아봅니다.

  • image▲ 메인 페이지를 위젯 페이지로 생성하면 위젯을 활용하여 꾸밀 수 있습니다. [페이지 수정] 버튼을 클릭합니다.
  • image▲ [Content 위젯]을 선택하고 [추가] 버튼을 클릭합니다.
  • image▲ [Content 위젯 기본 스킨]을 선택하고 [선택] 버튼을 클릭합니다. 추가되는 스킨 옵션은 자유롭게 설정합니다.
  • image▲ [추출 대상]을 게시물로 선택합니다.
  • image▲ [사이트 찾기]를 이용해 대상 모듈을 공지사항 게시판으로 추가합니다.
  • image▲ 게시판에서 [제목]만 가져오기로 선택하고 목록수는 5개로 설정합니다.
  • image▲ 공지사항은 관리자 알림글이기 때문에 목록에서 [글쓴이]를 [삭제]하고
    단일 게시판이기 때문에 게시판 이름을 출력하지 않도록 설정합니다. 자유롭게 설정하세요.
  • image▲ 기타 내용을 설정합니다.
  • image▲ 옵션 설정이 완료되면 위젯을 생성하기 위해 [코드 생성] 버튼을 클릭합니다.
  • image▲ 위젯 목록의 제목을 만들기 위해 [위젯스타일 설정] 아이콘을 클릭합니다.
  • image▲ [심플 스트롱] 위젯스타일을 클릭합니다.
  • image▲ 게시판의 모듈 아이디를 포함한 URL을 [더보기 URL]에 입력합니다.
    [자세히 보기]를 클릭했을 때 해당 게시판 모듈로 이동하는 링크입니다. 입력이 완료되면 [설정] 버튼을 클릭합니다.
  • image▲ 위젯 페이지에서 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 공지사항 게시판에서 최근 글 5개를 가져오는 위젯이 생성되었습니다.
  • image▲ 다른 게시판에서도 최근 글을 가져오기 위해 [추가] 버튼을 클릭합니다.
  • image▲ 이번에는 자유게시판을 선택하고 같은 방법으로 [대상 모듈]을 추가합니다.
  • image▲ 기타 내용을 설정합니다.
  • image▲ 최근 글의 내용에서 등록일과 게시판 이름을 출력하지 않도록 설정합니다.
  • image▲ 위젯 목록의 제목을 만들기 위해 [위젯스타일 설정] 아이콘을 클릭합니다.
  • image▲ [심플 스트롱] 위젯스타일을 클릭합니다.
  • image▲ 자유게시판 모듈의 URL을 입력하고 [설정] 버튼을 클릭합니다.
  • image▲ 위젯 페이지에서 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 공지사항과 자유게시판 모듈에서 최근 글 5개씩 목록을 만들고 출력합니다.

위젯 속성 설정하기

위젯은 DIV 상자에 포장됩니다. 따라서 위젯의 속성을 설정하는 일은 DIV 엘리먼트의 속성을 설정하는 것과 같습니다.

image

2개의 최근 글 위젯을 생성하였을때 위젯의 가로 크기는 100%가 기본값이기 때문에 위와 같이 가로 방향으로 꽉찬 목록을 만들어 줍니다. 세로 크기는 기본값이 없기 때문에 내용에 맞추어 늘어날 것입니다. [위젯 속성 설정] 아이콘을 클릭하면 다음과 같이 속성값을 설정할 수 있는 대화상자가 출력되는데 DIV 엘리먼트와 같은 속성들이기 때문에 비교적 쉽게 설정할 수 있습니다.

image


위젯 2단 구성 하기

첫번째 위젯의 [위젯 속성 설정] 아이콘을 클릭하고 위젯 속성값 입력창에서 아래 내용과 같이 값을 입력합니다.

image

기본 레이아웃은 콘텐츠 영역의 가로 크기가 740픽셀이기 때문에 360px+20px(여백)+360px로 2단 구성을 하기 위해서 위와 같이 입력한 것입니다. 바로 위 환영 인사말과도 10픽셀 여백을 설정하였습니다. [저장] 버튼을 클릭합니다.


image

첫번째 위젯의 크기가 수정되었습니다.


image

같은 방법으로 두번째 위젯의 [위젯 속성 설정] 아이콘을 클릭하고 위 그림과 같이 값을 입력한 후 [저장] 버튼을 클릭합니다.


image

위젯의 2단 구성 설정이 완료되면 최종적으로 위젯 페이지의 [저장] 버튼을 클릭하여 설정 된 내용을 저장합니다.


image

TIP - 위젯의 코너 모퉁이를 마우스로 드래그하여 크기를 조정한 경우 DIV 엘리먼트의 가로와 세로 크기값은 자동으로 픽셀값으로 고정됩니다. 이런 경우 위젯은 overflow 속성이 hidden으로 기본 설정되어 있기 때문에 세로 방향으로 늘어난 내용은 숨김처리 됩니다. 위젯의 세로 크기가 고정적으로 필요한 경우 내용에 관계없이 항상 세로 크기를 유지할 수 있습니다.


탭형태로 최근 댓글 가져오기

최근 게시물을 가져올 때 위에서는 단일 게시판 모듈에서 최근 글의 내용만 목록으로 만들었습니다. 다음 과정은 다수의 게시판 모듈에서 게시글에 딸린 댓글을 탭형태로 모두 가져오는 위젯을 만듭니다. 그림을 보면서 탭형태의 사용법을 따라해 보세요.

  • image▲ [페이지 수정] 버튼을 클릭합니다.
  • image▲ [Content 위젯]을 선택하고 [추가] 버튼을 클릭합니다.
  • image▲ [Content 위젯 기본 스킨]을 선택하고 [선택] 버튼을 클릭합니다. 추가되는 스킨 옵션은 자유롭게 설정합니다.
  • image▲ [추출 대상]을 댓글로 선택합니다.
  • image▲ [사이트 찾기]를 이용해 대상 모듈을 포함시킬때 운영중인 게시판 모듈을 모두 추가합니다.
    탭에 표시되는 순서는 ⑤번에서 위, 아래 방향으로 모듈의 위치를 조정할 수 있습니다.
  • image▲ 탭의 형태를 [상단 탭형]으로 선택하고 기타 내용을 설정합니다.
  • image▲ 기타 내용을 자유롭게 설정합니다.
  • image▲ 옵션 설정이 완료되면 위젯을 생성하기 위해 [코드 생성] 버튼을 클릭합니다.
  • image▲ 위젯 페이지에서 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 상단 탭에 마우스를 올리면 해당 모듈의 댓글 내용으로 변경되고 클릭하면 모듈로 이동합니다.

최근 이미지 가져오기

사진이나 이미지를 게시물로 활용하는 모듈을 운영한다면 메인 페이지에서 미리보기하면 좋겠지요? 이때 최근 게시물에서 이미지를 가져와 목록으로 만들고 방문자에게 한번쯤 찾아 볼 수 있도록 제공하는 위젯을 만들어 두면 더 멋진 홈페이지를 만들 수 있습니다. 다음 과정은 게시판 모듈에서 이미지를 가져와 목록으로 보여주는 위젯 만들기입니다.

  • image▲ [Content 위젯]을 선택하고 [추가] 버튼을 클릭합니다.
  • image▲ [Content 위젯 기본 스킨]을 선택하고 [선택] 버튼을 클릭합니다. 추가되는 스킨 옵션은 자유롭게 설정합니다.
  • image▲ [추출 대상]을 첨부이미지로 선택한 후 [사이트 찾기]를 이용해 대상 모듈을 갤러리 게시판으로 추가합니다.
  • image▲ [내용 형태]는 갤러리 보기로 선택하고 이미지 목록의 갯수를 자유롭게 설정합니다.
  • image▲ 목록에서 이미지를 출력하기 위해서는 [썸네일](손톱이미지)을 지원하도록 [추가] 버튼을 클릭합니다.
  • image▲ 추가된 [썸네일] 항목을 가장 위로 올려주세요.
  • image▲ [등록일] 항목을 삭제합니다. 자유롭게 선택하세요.
  • image▲ 첨부 파일을 표시하는 아이콘은 삭제하고 게시판의 이름은 자유롭게 선택합니다.
    다수 게시판 모듈에서 이미지를 가져올 경우 모듈의 이름을 표시합니다.
  • image▲ 썸네일 이미지의 크기를 자유롭게 설정합니다.
  • image▲ 옵션 설정이 완료되면 위젯을 생성하기 위해 [코드 생성] 버튼을 클릭합니다.
  • image▲ 위젯의 상단 여백을 조정하기 위해 [위젯스타일 설정] 아이콘을 클릭합니다.
  • image▲ 외부 여백에 값을 입력합니다.
  • image▲ 위젯 페이지에서 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 게시판 이름을 표시하도록 설정한 경우 위와 같이 모듈의 이름을 표시합니다.
    썸네일 이미지를 클릭하거나 제목을 클릭하면 해당 모듈로 이동합니다.

RSS 피드 게시물 가져오기

RSS(Really Simple Syndication)는 뉴스나 블로그 사이트에서 주로 사용하는 콘텐츠 표현 방식으로 자신의 웹콘텐츠를 이용자의 방문 없이도 최신 정보들만 모아 RSS 문서 형식으로 전달하는 서비스입니다. 다시말해서 웹콘텐츠 제공자가 RSS 문서를 제공한다면 Content 위젯을 이용해 최근 게시물의 목록를 만들어 출력할 수 있습니다.

image

RSS 피드를 제공하는 경우 위와 같은 RSS 아이콘이 표시되고 URL 주소를 제공합니다. 아래 과정은 Content 위젯을 활용해 RSS 피드 게시물을 자신의 웹사이트에서 목록으로 만들고 게시하는 방법에 대해 알아봅니다. RSS 피드 주소는 미리 준비되어야 합니다.

  • image▲ [Content 위젯]을 선택하고 [추가] 버튼을 클릭합니다.
  • image▲ [Content 위젯 기본 스킨]을 선택하고 [선택] 버튼을 클릭합니다. 추가되는 스킨 옵션은 자유롭게 설정합니다.
  • image▲ [추출 대상]을 RSS 피드로 선택합니다.
  • image▲ [RSS 설정] 항목에서 RSS 피드 URL 주소를 입력합니다. 여러개인 경우 다수 등록이 가능합니다.
  • image▲ 기타 필요한 옵션을 설정하고 위젯 페이지에서 최종적으로 [저장] 버튼을 클릭합니다.
  • image▲ 외부 사이트에서 발행되는 RSS 피드 게시물이 목록으로 출력됩니다. 제목을 클릭하면 해당 웹사이트로 이동합니다.

Content 위젯은 세부적인 옵션 설정에 따라 다양한 스타일의 최근 게시물 목록을 만들고 사용할 수 있습니다. 위 과정은 기본적인 사용법에 대해 간략히 소개한 내용입니다. 다양한 위젯 스킨을 다운로드 받아 추가 설치하면 더 멋진 홈페이지를 만들 수 있을 것입니다. 위젯 스킨의 추가는 "XE 확장하기"에서 다루며 스킨의 설정과 오류 등은 해당 위젯 제작자에게 문의하기 바랍니다.