여러 이미지를 나열하고 목록 만들기

여러 이미지를 나열하고 목록 만들기

기사의 본문에 복수의 이미지를 추가하고 가로로 나열해서 표시한다. 이때 워드프레스에 표준으로 준비된 ‘갤러리’ 기능을 이용하면 캡션이 붙은 이미지를 간단하게 나열해서 표시할 수 있다.
->POINT
갤러리의 표준 스타일시트 설정을 출력하지 않는다.
add_filter(‘use_default_gallery_style’,’__return_false’);

  1. 이미지 업로드하기
    640×480픽셀 크기의 이미지를 6장 업로드한다.
  2. 이미지 캡션 지정하기
    이미지의 제목이나 설명을 표시하는 캡션을 지정한다. ‘캡션’ 항목에 적당한 단어를 입력하고 저장한다.
  3. 갤러리 설정하기
    ‘갤러리’ 탭이 열리면 갤러리를 설정한다. ‘썸네일 연결’ 항목에서 ‘첨부페이지’를 선택해서 이미지가 개별 페이지로 링크되도록 설정한다. ‘갤러리 컬럼’은 ‘3’을 지정해서 1줄에 3개의 이미지가 나열되도록 하고, [갤러리 추가] 버튼을 클릭한다.
  4. 기사 지정하기
    편집화면에서 ‘비주얼’ 탭을 선택해서 갤러리가 추가된 것을 확인한다. 편집화면에서는 이미지의 목록은 표시되지 않고 카메라 아이콘이 표시된다. [업데이트] 버튼을 클릭해서 기사를 저장한다.
  5. 갤러리 표시 확인하기
    기사를 확인하면 썸네일 크기의 이미지가 나열되어 표시된다. 썸네일 크기가 150×150픽셀로 지정된다.
  6. 갤러리 소스 확인하기
    출력된 갤러리 부분의 소스를 확인해보면 갤러리 전체가 <div>로 마크업되어 이미지와 캡션이 <dl>,  <dt>,  <dd>로 마크업되어 있다. <style type=”text/css”>~</style> 부분은 갤러리의 디자인을 지정한 스타일시트의 설정이다. 그러나 스타일시트의 설정은 HTML/XHTML의 헤더 부분 <head>~</head>에 입력해야 하므로, 브라우저 화면에 표시하는 콘텐츠와 함께 <body>~</body> 안에 입력하면 문법 위반이 된다. 따라서 갤러리의 표준 스타일시트의 설정이 출력을 출력하지 않도록 설정한다.
    ->MEMO
    HTML5에서는 <style>의 설정을 <body> 안에 입력해도 문법 위반이 되지 않는 방법이 제안되어 있지만 현재 주요 브라우저에서는 지원하지 않는다.
  7. 스타일시트 설정을 출력하지 않기
    갤러리의 표준 스타일시트의 설정을 출력하지 않도록 하기 위해 function.php에 add_filter() 설정을 추가하면 <style type=”text/css”>~</style>가 출력되지 않고 이미지가 세로로 나열되어 표시된다. (아래 코드 참조)
  8. 갤러리 디자인 지정하기
    style.css에 설정을 추가한다. 각 이미지를 휜색 액자 모양으로 장식하고 캡션을 이미지의 중앙에 오도록 표시한다. 또한 가로로 나열해서 표시하기 위해 ‘float: left’라고 지정한다.

function.php

<?php

(생략)

//갤러리의 스타일시트의 출력을 정지
add_filter(‘use_default_gallery_style’, ‘__return_false’);

?>

->MEMO

예제에서는 3 열로 갤러리를 표시하기 위해 gallery-item{width:~}로 각 열의 가로 길이를 33%로 지정했다. 이외에도 2 열 또는 4 열로 갤러리를 표시하는 경우 다음과 같이 가로 길이를 지정한다.

style.css

.gallery-columns-2.gallery-item {width: 50%;}
.gallery-columns-4.gallery-item {width: 25%;}



->MEMO

갤러리의 이미지를 클릭하면 이미지의 개별 페이지가 열린다. 갤러리 설정에서 ‘썸네일 연결’을 ‘첨부 페이지’로 지정했기 때문이다. 이미지의 개별페이지는 기사의 개별페이지와 같은 single.php로 생성된다. 이 페이지의 디자인을 변경하는 방법은 이미지의 개별 페이지를 사용자정의로 디자인하기를 참조한다.

출처: 바꾸면서 배우는 워드프레스 디자인

답글 남기기