WordPress 사이트에 게시물 필터를 쉽게 추가하는 방법

내가 자주 접하는 요청은 사용자가 웹 사이트의 프런트 엔드에서 게시물을 필터링하거나 정렬할 수 있도록 하는 기능입니다.

사용자가 게시물을 알파벳순으로 보고 싶어하거나 미리보기 이미지가 있는 게시물만 보고 싶어할까요? 이것은 이미 일반 게시물에 적합하지만 제품, 사진 또는 기타 콘텐츠 유형의 경우 훨씬 더 의미가 있을 수 있습니다.

오늘의 주말 WordPress 프로젝트에서는 Twenty Fifteen 테마에서 이와 같은 기능을 구현하는 방법에 대해 간략히 설명하겠습니다. 크랙하자!

• 자식 테마 만들기
• 컨트롤 생성
• 쿼리 수정
• 더 스마트한 양식
• 워드프레스 동작
• 결론

자식 테마 만들기

항상 그렇듯이 자식 테마가 필요합니다. WPMU DEV에 하위 테마에 대한 가이드가 있습니다. 하위 테마에 익숙하지 않은 경우 읽어보는 것이 좋습니다.

컨트롤 생성

세 가지 컨트롤을 추가해 보겠습니다. 하나는 게시물 순서 지정, 다른 하나는 정렬 방향 설정, 다른 하나는 썸네일이 있는 게시물만 표시하는 것입니다.

첫 번째 단계는 부모 테마의 index.php 를 자식 테마로 복사하는 것입니다.

하위 테마에서 index.php 파일을 열고 기본 컨테이너(20행에 있어야 함) 아래에 다음 HTML을 붙여넣습니다.

그리고 프론트 엔드에서 보이는 것은 다음과 같습니다.

보시다시피 스타일이 약간 부족합니다. 스타일시트에 몇 가지 스타일을 추가하여 문제를 해결해 보겠습니다.

프로그래밍을 처음 접하는 사람들로부터 자주 듣는 반응은 "이것이 테마에 혼합되도록 만드는 스타일이라는 것을 그가 어떻게 알았습니까?"입니다.

해결책은 매우 간단합니다. 나는 속입니다. Chrome의 개발자 도구를 사용하여 일반 기사 요소를 검사합니다. 이 경우 요소가 상자 그림자와 여백을 얻는 방법을 볼 수 있으며 이 규칙을 내 요소에 간단히 적용했습니다.

쿼리 수정

"제목별 정렬", "오름차순" 및 "썸네일이 있는 게시물"을 선택하고 양식을 제출합시다. 코드에 아무 것도 하지 않고 실제로 변경 사항을 확인해야 합니다.

그 이유를 알아보기 위해 URL을 살펴보겠습니다. 다음과 같아야 합니다.

 http://yourdomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

$_GET 변수를 사용하여 PHP 스크립트에서 간단한 정보를 불러올 수 있습니다. WordPress는 이미 order 및 orderby 매개변수가 의미하는 바를 알고 있으며 기본 쿼리에서 사용합니다. 결과적으로 주문과 주문 방향만 필요하면 실제로 모든 작업이 완료된 것입니다.

다 좋은데 내가 이걸 어떻게 알았지? "orderby" 대신 "order_by"를 매개변수로 사용할 수도 있습니다. 이 경우 WordPress는 우리의 의도를 받아들이지 않습니다. URL에서 사용할 수 있는 많은 매개변수가 있는 WordPress Codex의 WP_Query 문서를 살펴보았습니다.

이제 포스트 썸네일 매개변수를 구현해 보겠습니다. 게시물에 _thumbnail_id 키가 연결된 메타데이터가 있는 경우 게시물에 미리보기 이미지가 있습니다. 이것이 고려되었는지 확인하기 위해 쿼리를 수정해야 합니다. 이제 query_posts() 를 사용하여 이 작업을 수행해 보겠습니다.

파일 상단의 get_header() 함수 위에 다음 코드를 붙여넣습니다.

원래 쿼리의 매개변수를 자체 새 매개변수와 병합하여 다른 게시물 집합이 생성됩니다. 이제 양식이 작동하지만 선택 항목을 기억하지 못합니다. 양식을 다시 작성하고 PHP를 사용하여 문제를 해결해 보겠습니다.

더 스마트한 양식

선택기로 주문의 모든 옵션을 나열하는 것 외에도 어떤 것이 선택되었는지 나타내는 방법이 필요합니다. 루프 없이 이 작업을 수행하면 다음과 같이 보일 것입니다.

당신은 그 중 하나를 이해합니까? 나는 당신을 비난하지 않습니다! 각 옵션 내에서 현재 선택한 값이 옵션 값과 같은지 확인합니다. 그렇다면 선택한 속성을 출력합니다. 루프를 사용하여 훨씬 더 깔끔하게 만들어 보겠습니다.

이것은 조금 더 길지만 세 가지 옵션이 있기 때문입니다. 이것은 모든 종류의 선택을 관리하는 데 더 나은 형식입니다. 이것을 전체 형식으로 확장해 보겠습니다.

모두 완료되었습니다. 이제 양식은 URL의 $_GET 변수를 기반으로 선택한 항목을 기억해야 합니다.

워드프레스 동작

내가 WP_Query 문서를 보았기 때문에 "order"와 "orderby"를 사용할 줄 안다는 것을 어떻게 언급했는지 기억하십니까? 이는 좋은 방법이지만 예기치 않은 결과를 초래할 수 있습니다. 가지고 있는 카테고리의 슬러그를 찾고 이 카테고리가 "wordpress"라고 가정합니다.

이제 다음 URL을 사용하십시오. http://yourwebsite.com/?category_name=wordpress. 모든 WordPress 게시물을 나열하는 카테고리 아카이브가 표시되어야 합니다. 이것은 괜찮지만 두 가지 문제가 있습니다.

예쁜 퍼머링크가 켜져 있으면(꼭 해야 함) 페이지가 새 URL로 리디렉션된 것입니다. 아마도 http://yourwebsite.com/category/wordpress일 것입니다. archive.php 파일이 index.php 가 아닌 이 보기를 처리하기 때문에 필터가 표시되지 않습니다. 또한 카테고리 이름은 URL 매개변수로 전달되지 않으므로 필터가 작동하도록 하려면 몇 가지 추가 속임수를 사용해야 합니다.

이 작업을 수행하는 가장 빠른 방법은 WordPress에서 사용하는 것과 동일한 매개변수를 의도적으로 사용 하지 않는 것입니다. WordPress가 이를 선택하지 않기 때문에 URL의 catname 매개변수를 사용하여 카테고리 이름을 전달할 수 있습니다. 그런 다음 올바른 매개변수 이름을 사용하여 쿼리에 이를 제공할 수 있습니다. 이 같은:

대안은 index.php 의 양식을 있는 그대로 출력하는 대신 함수를 사용하는 것입니다. WordPress 쿼리 자체에서 카테고리를 감지하고 이를 기반으로 현재 선택 항목을 표시해야 합니다.

결론

자신의 필터를 추가하는 것은 그리 어렵지 않지만 약간의 손재주가 필요합니다. 우리의 경우 순서가 무작위로 설정되었을 때 페이지 매김이 제거되었는지 확인하고 싶을 수 있습니다. 단순히 페이지를 새로고침하는 "더 많은 무작위성 표시" 버튼으로 대체될 수 있습니다.

이 기사가 스스로 이를 수행하는 방법에 대한 기본 사항을 제공하고 필요한 필터를 구축할 수 있기를 바랍니다.

• 주말 워드프레스 프로젝트