Home 게시판 커뮤니티 Q&A 갤러리 썸네일 메인에 배치하기 도와주세요

1개 답변, 2 voices Last updated by Avatar of Matthew ParkMatthew Park 8 years, 5 months 전
  • Avatar of 유원식유원식
    Participant
    @yuwonsik
    #29243

    워드프레스로 게시판을 만들고 게시판에 사진과 글이 작성할 수 있고

    메인에 썸네일과 간단한 텍스트를 넣어서 배열한뒤 클릭하면 해당 게시글로 이동하는
    쇼핑몰 상품 썸네일과 같은 기능을 구현하려면 어떤 플러그인 혹은 방법을 사용해야 할까요?
    쇼핑몰 구축이 아니라서 결제 플러그인 같은건 필요없고 이기능만요!
    예를들어
    wqdqa
    남자옷으로 검색해서 들어온 쇼핑몰이에요
    이런식으로 배열하는건데
    수동으로 때려박으면 구성할 수 있긴한데…
    그룹으로 나뉘어져 있어야 해요..
    예를 들면
    메인에서는
    패딩과 티와 바지가 섞여있지만
    패딩 메뉴 누르면 패딩만 나오고…
    티도 그렇고 바지도 그렇고..
    일일이 때려박으면 가능하지만..
    패딩과 티와 바지와 같이
    그룹으로 사진관리가 가능한 플러그인이나 방법이 있을것이라 생각합니다.
    위의 사진과 같이 목록을 썸네일로 표현하고 누르면 상세페이지로 이동할 수 있게하는
    게시판 플러그인? 갤러리 플러그인? 이미지 플러그인? 이나
    쉽게 구현할 수 있는 방법 가르쳐주세요..
    Avatar of Matthew ParkMatthew Park
    Moderator
    @hackya
    #29244

    워드프레스 3.X 부터 자체 썸네일 기능이 내장 되었기 때문에 그냥 썸네일 활성화만 시키면 됩니다.

    보통 가장 기본적인 테마도 이 썸네일 기능이 활성화 되어 있는데, 아마 질문자 분께서 썸네일 사용법을 잘 모르시는듯 합니다.

    테마의 function 에 보시면

    add_theme_support( 'post-thumbnails' );

    이렇게 썸네일이 활성화 되 있으실 겁니다.

    위의 형식으로 구현하시려면

    1. post category 를 패딩, 티, 바지, 이런식으로 구분하신 후,

    2. 썸네일을 사용하시면 원하시는 모습이 만들어 집니다. (자동으로 저 모습이 만들어 지는건 아니고 물론 css 를 작성하셔야죠.)

    이런 모습으로 메인 페이지를 짜고 싶으시다는 말씀이시잖아요?

    http://hackya.com/kr/grid-example/

    테마가 썸네일을 불러오고 있으면 그냥 css 로 위 예제처럼 짜시면 됩니다. 그 이상 어떻게 더 설명을 드리기가 힘드네요.

    * 위 예제의 css 는 제가 짠게 아니고, 오래전에 css trick 의 Chris Coyier 가 짠 css 를 제 테마에 적용해본 것 입니다.

    아, 이게 더 좋네요!! 아래는 masonry 반응형 예제 입니다.

    http://w3bits.com/labs/css-masonry/

    그냥 이 페이지 css 를 ctrl +c, v 하셔서 쓰시면 될듯.

    또 다른 방법으로는 워드프레스에 내장되어 있는 갤러리 기능을 이용해서도 쉽게 구축하실 수 있습니다.

    이미지에 링크 거는 작업이 쉽지 않았었네요. 쉽다는 말은 취소. ㅋㅋㅋ

    썸네일 크기등, 여러 옵션들을 설정하는 예제는 아래 Codex 페이지에 상세하게 나와 있습니다. (물론 대부분의 테마에서 이 옵션들을 지정할 수 있도록 되어 있습니다.)

    https://codex.wordpress.org/Post_Thumbnails

    Avatar of Matthew Park
    Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

    Lives in Colorado.

2 글 보임 - 1에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.