워드프레스 카테고리 글을 게시판 형식으로 나열하기

워드프레스의 특정 카테고리 글을 게시판 형식(표 형식)으로 나열하고 싶은 경우가 있을 수 있습니다. 이 경우 카테고리 템플릿을 추가하여 해당 카테고리 글을 테이블 형식으로 표시할 수 있습니다. 이외에도 뉴스페이퍼와 같은 테마를 사용하면 수월하게 비슷한 형식(완전히 동일하지는 않지만)으로 글들을 나열할 수 있습니다.

이외에도 Posts Table Pro라는 워드프레스 플러그인을 사용하면 포스트, 페이지, 커스텀 포스트 타입, 커스텀 필드, 분류 등을 표 형식으로 표시할 수 있습니다.

워드프레스 카테고리 글을 게시판 형식으로 나열하기 2

워드프레스 카테고리 글을 게시판 형식으로 나열하기

네이버 지식에서 "한국형 게시판처럼 쎔네일 표시 없이 제목만 나열하고" 싶다는 질문이 있어서 Pro Grid와 같은 플러그인을 사용하면 원하는 형식으로 카테고리 글을 나열할 수 있을 것이라는 답변을 준 적이 있습니다. 하지만 질문하신 분이 찾은 플러그인은 List category posts라는 플러그인이네요.

이 플러그인은 단순하게 카테고리 글을 나열하기 때문에 추천하지 않은 것인데, 질문하신 분은 단순히 리스트식으로 글을 나열하기를 원했던 것 같습니다.

사실 이런 기능 때문에 플러그인을 사용한다는 것은 별로 좋은 옵션이 아닙니다. 다음과 비슷한 코드를 사용하면 쉽게 카테고리 글을 목록 식으로 나열할 수 있습니다.

// Display category posts with titles only in WordPress
<ul>
<?php
$catquery = new WP_Query( 'cat=1&posts_per_page=10' ); // 카테고리 ID, 표시 글 개수
while($catquery->have_posts()) : $catquery->the_post();
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

CSS로 적절히 레이아웃만 조정하면 됩니다. (실제로 테스트해보지 않았지만 문제가 없이 잘 작동할 것이라 생각됩니다.) 이런 작업 때문에 플러그인을 사용하는 것은 역시 과용이라고 밖에 할 수 없을 것 같습니다.

내침 김에 이 블로그의 카테고리 글을 게시판 형식으로 표시해보았습니다.

display category posts in list format in wordpress - 워드프레스 카테고리 글을 게시판 형식으로 표시하기

시간이 나면 댓글 개수도 표시하는 등 조금 더 정교하게 바꿀 수 있지만 시간이 부족하여 레이아웃만 나오도록 대충 조정했습니다.

드림위버 등에서 테이블(Table)을 만들어 이용하면 쉽게 가능하지만, div 태그를 사용하여 CSS 표로 만들었습니다. (HTML 테이블을 사용하면 속도가 느려진다고 하네요.) 기본적인 코드는 이 jsfiddle의 코드를 응용했습니다(참고). 방식은 매우 간단하지만 개별 워드프레스 테마에 맞게 조정하고 CSS 코드를 만드는 작업이 제법 시간이 걸리네요.

글 번호를 추가하는 방법은 여기에서 확인할 수 있습니다. 글 제목만 표시하면 매우 간단하게 가능하지만, 일련번호를 추가하는 등의 작업을 병행하면 초보자가 하기에는 조금 복잡해지네요.

참고로 별로 권장하지 않지만 특정 카테고리의 글들을 Kboard 게시판으로 이전하는 것도 고려해볼 수 있습니다. 이 경우 DB에서 wp_posts 테이블과 Kboard 테이블을 비교하여 워드프레스 글을 케이보드로 복사하는 방식으로 이전이 가능합니다. 댓글이 있다면 조금 더 복잡해질 것입니다. 이 작업이 용이하지 않으면 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

14개 댓글

  1. 안녕하세요
    구글에서 검색해보다가 찾아오게 됐어요.
    위 이미지처럼 게시판 형식으로 구현해보려고 하는데 초보자라 아직 많이 어렵네요.
    혹시 가능하시면 코드를 공유해 주실 수 있을까요?
    참고하면서 만들어보려고 해요.
    고맙습니다.

    1. 안녕하세요, 김성철님.

      이 글은 작성된 지 오래되었고, 당시 사용했던 테마를 삭제했기 때문에 코드는 찾을 수가 없습니다.ㅠ

      워드프레스를 조금 알고 HTML, CSS를 조금 알면 별로 어렵지는 않을 것입니다. 다음 문서들을 참고해보시기 바랍니다:

      https://wordpress.stackexchange.com/questions/145125/display-content-from-a-specific-category

      https://artisansweb.net/display-posts-specific-category-wordpress-page/

      차일드 테마를 만들어서 작업하시기 바랍니다.

      https://cafe.naver.com/wphomepage/145

      번호는 글 ID로 대체할 수 있을 것입니다.

      https://developer.wordpress.org/reference/functions/get_the_id/

      직접 만드는 것에 어려움을 겪는 경우 플러그인으로 구현 가능한지 확인해보시겠어요?

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%8F%AC%EC%8A%A4%ED%8A%B8-%EA%B7%B8%EB%A6%AC%EB%93%9C-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/

      뉴스페이퍼 테마를 사용하는 경우 다양하게 카테고리 글 또는 전체 글을 표시하는 블록이 제공되므로 최대한 비슷한 블록을 선택하고 CSS를 통해 조정하면 비슷하게 만들 수도 있을 것입니다.

      여러 가지를 고려하여 상황에 적합한 옵션을 선택하시기 바랍니다.

  2. 안녕하세요! 좋은글 너무 도움이 많이 됩니다 감사합니다!
    혹시 글 리스트에 카테고리가 명시되고 썸네일이 나왔으면 좋겠는데 그건 어떻게 추가할수있을가요? ㅠㅠ
    이런 함수?가 어디에 정의되어있는지 혹시 레퍼런스를 좀 알수있을가요?
    워드프레스 테마 만드는중인데 초보라 어려움이 많네요 ㅠㅠ 감사합니다!

    1. 안녕하세요, meee88님.

      WordPress Codex에서 검색해보시면 자세한 정보를 얻을 수 있습니다.

      https://codex.wordpress.org/

      썸네일까지 표시되도록 하고 싶은 경우 위의 코드에 썸네일을 표시하는 코드를 추가하면 됩니다. 그리고 썸네일 크기를 정의해야 할 수도 있습니다. 다음 글을 참고해보세요:
      https://www.thewordcracker.com/intermediate/show-related-posts-in-wordpress/

      '관련 글'을 표시하는 코드를 소개하고 있는데요. 썸네일과 관련된 부분이 있으므로 도움이 될 것입니다.

      쉽게 가려면 플러그인을 활용하거나 테마 기능을 활용할 수 있습니다.

      플러그인:
      https://wordpress.org/plugins/list-category-posts/

      테마의 경우 이 블로그에 사용된 Newspaper 테마 같은 매거진 테마에서는 다양한 블로그 모듈을 제공하므로 카테고리별로 글을 다양한 방식으로 나열할 수 있습니다.

  3. 저 ACF 질문인데요..
    acf에 리피터 기능이 있잖아요..

    리피터를 하다 보면 리스트가 많아져서 몇개씩 끊어서 보여주는 즉 페이징을 하고 싶은데 가능한가요?

    두번째는 리스트를 클릭할때 내용은 따로 보여 주고 싶은데...
    물론 ACF 에 정보가 있는건데요..

    제품명
    제품내용

    여기서 제품명은 리스트로 보여주고 제품내용을 새창에서 보여주고 싶습니다.

    읽어주셔서 감사합니다.

    1. 두 번째 질문은 클릭했을 때 새 창에서 뜨도록 만들고 싶다는 질문으로 들리네요.

      target="_blank"를 추가하면 크롬에서는 새 탭에서 표시됩니다.
      이것은 보안 문제 때문에 브라우저에서 그렇게 작동하는 것이라고 합니다.

      탭이 아닌 새 창에서 뜨도록 만들려면 javascript 또는 jquery 등을 사용하여야 할 것입니다.

      다음 글을 참고해보세요.

      https://stackoverflow.com/questions/12939928/make-a-link-open-a-new-window-not-tab

  4. 안녕하세요..
    궁금한게 있어서요..
    포스트 리스트에 파일을 같이 포함하고 싶은데 가능할까요?
    글제목(파일명)

    파일명을 누르면 다운이 되었으면 하는데..
    물론 파일은 ACF를 이용하고 싶습니다.

    매일 들어오는데 늘 도움이 됩니다.
    감사합니다.

    1. 안녕하세요?

      글제목(다운로드) 식으로 하셔서 다운로드를 누르면 파일의 URL로 연결되어 다운로드가 되도록 하면 어떨까요?

      파일명을 가져올 수 있다면 글 제목( 파일명)으로 하셔도 될 것 같습니다.

  5. 안녕하세요. 이 코드를 어디에 써야 하나요? page의 텍스트 부분에 위 코드를 붙여넣기 하니, 자동 코드 변환이 되어 안먹히네요ㅠ

    1. 안녕하세요?

      위의 내용은 카테고리 템플릿이나 Index.php 파일 등 테마 소스에 적용해야 하는데요, 워드프레스에 대한 지식이 조금 필요합니다. 이러한 부분에 대해 잘 모르시면 플러그인을 사용하시면 좋을 듯 합니다.

      List category posts 같은 플러그인이 있습니다(위의 본문에 언급됨).
      https://wordpress.org/plugins/list-category-posts/

      다른 방법으로 PHP 코드를 페이지에 추가할 수 있도록 해주는 플러그인이 있습니다.
      https://www.thewordcracker.com/intermediate/insert-php-in-wordpress-posts-or-pages/ 글을 참고해보세요.

      참고로 PHP 코드를 직접 페이지/글에 추가하는 방식은 별로 바람직하지 않고요, 가급적 숏코드를 만들어서 적용하는 것이 좋습니다. 위에 링크된 글에서 소개한 "Insert PHP Code Snippet 플러그인"이 더 바람직할 것입니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.