사용자정의 필드에 입력한 부가 정보 표시하기

사용자정의 필드에 입력한 부가 정보 표시하기

사용자 정의 필드의 기능을 이용하면 기사의 편집 화면에 자유롭게 항목을 늘리거나 부가 정보를 입력할 수 있다. 여기에서는 날씨와 기온 정보를 입력해서 기사의 개별 페이지에 추가로 표시한다.

  1. 기사마다 날씨와 기온 정보 표시하기
  2. 사용자정의 필드 기능을 이용해서 “날짜”와  “기온”이라는 항목을 입력한다. 이 정보는 기사의 개별 페이지에 표시하고, 노란색 테두리로 장식하여 기사 본문 왼쪽에 배치한다. 날씨 정보는 아이콘 이미지로 변경해서 표시한다.

  3. 날씨 표시 아이콘 준비하기
  4. ‘맑음’, ‘구름’, ‘비’라고 입력할 때 표시할 아이콘을 준비해서 테마 폴더에 업로드한다.

  5. 사용자 정의 필드에 데이터 입력하기
  6. ‘이름’을 ‘날씨’, ‘값’을 ‘맑음’이라고 지정한 후 [사용자 정의 필드 추가] 버튼을 클릭한다. 같은 방법으로 ‘이름’을 ‘기온’, ‘값’을 ’25℃’로 입력하고 업데이트 한다.

  7. 다른 기사에서도 사용자 정의 필드에 데이터 입력하기
  8. 다른 기사에서 날씨와 기온 정보를 입력하려면 사용자정의 필드 ‘이름’을 입력하는 항목이 ‘선택하기’라고 표시되며, 풀다운 메뉴 방식으로 바뀐 것을 확인할 수 있다. 마찬가지로 ‘기온’도 풀다운 메뉴에서 선택하고 값을 입력한다.

  9. 기사의 개별 페이지 전용의 사용자정의 파트 템플릿 작성하기
  10. 사용자 정의 필드에 입력한 날씨와 기온 정보를 기사의 개별 페이지로 표시한다. 그러나 출력 내용을 content.php에 설정을 추가하면 톱페이지 등에도 표시되기 때문에, content-single.php라는 사용자 정의 템플릿을 작성해서 테마 폴더로 업로드한다. 그리고 content.php의 소스를 모두 복사한다.

  11. content-single.php 로딩하기
  12. 기사의 개별 페이지에서 content.php 대신에 content-single.php를 사용하도록 지정한다. 개별 페이지를 생성하는 single.php를 열고 get_template_part()의 파라미터를 ‘content’에서 ‘content’,’single’로 변경하면 content-single.php가 로딩된다.->MEMOget_templage_part(‘content’,’single’); 이라고 지정하면 content-single.php가 로딩되지만 테마 폴더 안에 content-single.php 파일이 없는 경우 content.php가 로딩된다.
    single.php

  13. 날씨와 기온 정보 출력하기
  14. content-single.php를 열고 날씨와 기온 정보를 출력하도록 지정한다. 사용자 정의 필드에 입력한 값은 ID, ‘~’, true); ?>로 필드의 이름을 지정해서 출력할 수 있다.
    content-single.php

  15. 날씨 정보를 PHP로 처리하기
  16. 날씨 값을 아이콘 이미지로 변경해서 표시한다. 먼저 날씨 값을 PHP로 처리하기 쉬운 형태로 수정하기 위해,’ echo’를 ‘$tenkival=’로 변경한다. 이렇게 수정하면 날씨 값은 $tenkival이라는 변수에 대입되기 때문에 브라우저 화면에는 출력되지 않는다.
    날씨 정보를 PHP로 처리하기
    content-single.php

    content-single.php

  17. 날씨 정보를 이미지 파일 이름으로 변경하기
  18. 이번에는 날씨 값에 대응하는 이미지 파일을 지정한다. 이때 값은 로 지정하고, “날씨 값” =>”이미지 파일 이름”으로 바뀐다. 각 지정은 「,」(콤마)로 구분해서 입력한다. 이제  으로 지정하면 ‘hare.png’라는 이미지 파일 이름으로 출력된다. 따라서 ‘맑음’ 부분에 날씨 값이 자동적으로 삽입되도록 하기 위해 $tenkival을 이용해서 이라고 지정한다.
    content-single.php

  19. 날씨의 아이콘 이미지 표시하기
  20. 날씨 아이콘 이미지를 표시하기 위해 위에서 출력한 파일 이름을 의 src 속성 값으로  지정한다. 이때 업로드한 테마 폴더의 URL은 로 출력한다. 또한 이미지 설명을 입력하는 alt 속성 값에는 로 지정하고 ‘맑음’이라는 값이 삽입되도록 한다.

  21. 날씨와 기온의 디자인 지정하기
  22. style.css에 설정을 추가해서 날씨와 기온의 디자인을 지정한다. 날씨 이미지를 노란색 테두리로 장식하고 본문의 왼쪽에 배치하도록 지정한다.

  23. 다른 개별 페이지의 표시 확인하기
    날씨와 기온 정보를 입력하지 않은 기사의 경우 이미지가 발견되지 않기 때문에 노란색 테두리만 표시된다.
  24. 날씨 정보가 없는 경우 출력하지 않기
  25. 날씨 값이 입력되지 않은 경우 불필요한 소스가 출력되지 않도록 한다. $tenkival에 대입한 날씨 값이 없는 경우

    를 출력하지 않도록 지정한다.
    날씨 정보가 없는 경우 출력하지 않기
    content-single.php


    content-single.php

->MEMO

는 $tenkival에 대입한 값이 있는 경우, 즉 “날씨” 값이 입력된 경우에만 출력된다.

->TIPS 사용자 정의 필드의 정보 출력하기

  • 파라미터로 지정한 필드의 값을 출력한다. 파라미터는 ‘$post->ID’,’필드 이름’, ‘true’라는 형태로 지정하며, ‘true’의 지정은 필드가 복수의 값을 가지고 있는 경우에 첫 번째 값만을 출력한다. 예를 들어 사용자 정의 필드에서는 ‘기온’ ’25℃’, ‘날씨’ ‘맑음’ , ‘구름’과 같이 같은 필드 이름의 지정을 여러 개 추가할 수 있다. 그러나 예제에서는 ‘날씨’와 ‘기온’의 정보를 하나씩 표시하기 위해 여러 개의 값이 있는 경우에도 하나만 출력하도록 한다.

    ‘날씨’ 값이 2개 지정된 기사의 경우 첫 번째 ‘맑음’ 값이 출력된다.

    여러 개의 값을 모두 출력하기 위해 ‘true’를 ‘false’로 변경하고, PHP의 foreach()를 이용해서 다음과 같이 지정한다.

  • 를 이용하면 모든 필드 이름과   값을 목록 형식으로 출력할 수 있다.

    – 기온: 25℃
    – 날씨: 맑음, 구름

->TIPS 사용자 정의 필드를 쉽게 사용하기

Custom Field Template이라는 플러그인을 이용하면 기사의 편집 화면에서 사용자 정의 필드의 입력 항목을 항상 표시해서 사용하기 쉽게할 수 있다.

  • Custom Field Template
  • 우선 Custom Field Template 플러그인을 설치하고 활성화한다. [설정]-[TEMPLATE #0]의 ‘Template Title’을 ‘날씨와 기온’으로 지정한다.
    ‘Template Content’는 다음과 같이 지정해서 기사의 편집 화면에 ‘날씨’와 ‘기온’ 2가지 항목이 표시되도록 지정한다. 여기에서는 ‘날씨’를 라디오 버튼 형태로 선택할 수 있게 지정하고, ‘기온’을 텍스트 박스 형태로 표시하도록 지정한다.

 

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

“사용자정의 필드에 입력한 부가 정보 표시하기”에 대한 한개의 댓글

답글 남기기