사이트 메뉴 및 포스트 페이지 링크

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

로그인 후 프런트 페이지에는 다음 그림처럼 사이트 헤더 영역에 검색 폼이 없는 내비게이션이 나옵니다. 프런트 페이지가 아니면 검색 폼과 함께 ‘활동’ 메뉴가 ‘로그인’ 메뉴로 변경됩니다.

사이트 헤더 내비게이션

‘둘러보기’ 메뉴를 제외하면 모두 페이지 템플릿을 사용하여 page 타입의 포스트로 구성한 것이며, ‘둘러보기’ 포함하여 각 메뉴의 링크를 템플릿 파일에 직접 추가하였습니다.

‘연습장’ 메뉴는 사이트 완성 후 삭제하므로 염두에 두지 마세요.

다음은 프런트 페이지의 ‘둘러보기’ 링크로, 헤더 영역의 ‘둘러보기’와 링크 정보가 같습니다.

프런트 페이지 둘러보기 링크

예제에서 ‘둘러보기’는 워드프레스에서 다음의 정보와 연결되어 있습니다.

  • Posts page(글 페이지)
  • 사용할 page 포스트 : Pics (관리페이지 읽기 설정)
  • 데이터베이스 _options 테이블 page_for_posts 옵션 필드에 포스트 ID 저장
  • is_home 조건 태그

관리페이지 읽기 설정

따라서 ‘둘러보기’ 메뉴는 유동적인 링크로 변경할 수 있습니다. 다음 3개 파일을 편집기로 엽니다.

  • page-templates/front-page.php
  • template-parts/navigation/navigation-top.php
  • footer.php

Posts page Permalink

편집기에 열린 navigation-top.php 파일 14번 줄과 front-page.php 파일 99번 줄에 다음처럼 ‘둘러보기’ 메뉴의 링크가 있으며, page 포스트의 퍼머링크로 설정하였습니다.

// page 포스트 퍼머링크로 설정
echo esc_url( home_url( '/pics' ) );

예제의 ‘둘러보기’는 워드프레스 Post page이므로 옵션 데이터를 가져와 메뉴의 링크를 정의하면 다음과 같습니다.

// 옵션 데이터로 둘러보기 메뉴의 링크 설정
echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) );

직접 변경하여 사이트에서 결과를 확인하세요.

미디어 분류 목록

완성 예제는 다음 그림처럼 사이트 아래 mediacat 분류의 term 목록을 출력하는데, 프런트 페이지에서는 출력하지 않습니다. 사이트 메뉴의 범주는 아니지만, 주소를 직접 입력 또는 검색 외에 해당 분류의 term 아카이브 페이지에 바로 접근하는 방법이 없으므로 가상 사이트 구성 기준에 의해 추가합니다.

사이트 아래 mediacat 분류 term 리스트

프런트 페이지에 이미 구성한 photocat 분류의 term과 마찬가지로 쿼리 클래스를 사용하여 쉽게 정의할 수 있으며, 다음과 같습니다.

// 사이트 아래 mediacat 분류의 term 목록 출력
if ( !is_front_page() ) {
    $mediacat_terms = new WP_Term_Query( array(
        'taxonomy' => 'mediacat',
        'hide_empty' => false,
    ) );
    if ( ! empty( $mediacat_terms ) ) {
        echo '<div class="mediacats_list">';
            echo '<ul>';
            if ( ! empty( $mediacat_terms ) ) {
                foreach ( $mediacat_terms->terms as $term ) {
                    $term_id = $term->term_id;
                    $term_name = $term->name;
                    echo '<li>';
                    echo '<a href="'. esc_url( get_term_link( $term_id ) ) . '">' . $term_name . '</a>';
                    echo '</li>';
                }
            }
            echo '</ul>';
        echo '</div>';
    }
}

지난 과정에서 반복하여 경험하였으므로 이번 장의 완성 파일을 제공하는 것으로 정리합니다. 다음 링크의 파일을 받고, 압축을 풀어 테마 루트에 덮어쓰세요.

중복 쿼리

지금 과정까지의 예제 사이트는 검색 폼에서 2가지 분류의 term 데이터를 쿼리 클래스로 출력하고 있으며, 검색 폼은 사이트 전역에 걸쳐 출력합니다. 프런트 페이지에서는 photocat 분류의 term 데이터를, 프런트 페이지를 제외한 사이트 전체 페이지에서는 mediacat 분류의 term 데이터를 사이트 아래 출력합니다. 검색 폼의 쿼리와 겹치는 쿼리 요소가 존재합니다. 나중에 이 부분을 개선합니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

» 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어