**[공지사항]** [개인적인 공부를 위한 내용입니다. 오류가 있을 수 있습니다.]
[ 워드프레스(wordpress) - 003 ]
[ page design ]
아래와 같은 디자인의 page를 제작하고자 한다.
admin dash board에서 pages-Add New로 새로운 page를 하나 생성한다.
title에 About Us라고 적고
내용은 This is the about page content.라고
그리고 하단에 Lorem ipsum 글을 추가한다.
publish 버튼을 눌러 발행한다.
그리고 예시 디자인으로 이용할 html 파일을 열고
거기서 header영역의 끝 바로 아래부터
아래 그림과 같이 복사해서
만들어놓은 page.php에 아래와 같이 붙여넣기 한다.
다시 admin dash board에서 pages 내 About Us의 view를 클릭하여
브라우저에서 디자인의 적용 여부를 확인한다.
banner-title과 본문 그리고 banner-title의
background image를 아래와 같이 변경한다.
header.php 內 title을 동적으로 바꿔보자
header.php 내 head 영역에 아래의 코드를 확인한다.
functions.php 內 아래와 같이 function과 add action을 추가한다.
브라우저에서 title(빨간 상자)이 글제목에 따라 동적으로 변화되는지 확인한다.
About Us 페지이의 화면 상단 Fictional University를 클릭하면
맨 첫페이지로 이동하는 링크와 Among Us 클릭 시
해당 페이지로 이동하는 링크 거는 법은
header.php 내 각 영역의 # 부분을 아래와 같이 변경하고
화면 상단에서 Fictional University와 About Us를 각각 클릭 시
정상적으로 이동되는지 확인한다.
위의 방법으로 header.php의 다른 링크와 footer.php의 링크들도
동일하게 적용하면 된다.
About Us 페이지에 두개의 children 페이지를 생성한다.
하나는 history이고 하나는 goal이다.
먼저 admin dashboard에 가서 Pages에 Add New를 클릭하여
page를 생성한다.
Title은 Our History를 적어주고
본문에는 dummy content를 붙여넣는다.
그리고 아래 그림과 같이 우측 메뉴에서 page를 클릭하고
우측 하단 Page Attributes에서 Parent page를
About Us를 선택한 후 Publish를 연속 눌러준다.
정상적으로 페이지가 생성되었다면 다시 admin dashboard에서
Title은 Our Goals 본문에는 dummy content를 붙여넣은
그리고 그 이하 옵션은 Our History 페이지와 동일하게 하여
페이지를 추가 생성한다.
Our Goals 페이지 중간에 있는 breadcrumb box 內 글자를
아래와 같이 코드를 추가하여 동적으로 연동시킨다.
breadcrumb box는 children page인 경우에만 보이면 되고
About Us같은 parent page에서는 보일 필요가 없다.
이 때 if문을 사용한다.
먼저 각 페이지마다 고유 번호를 가지고 있다.
이 번호(post id)는 get_the_ID()로 알아낼 수 있다.
만일 children page가 parent page의 글번호(post id)를 알고자 한다면
wp_get_post_parent_id(get_the_ID())으로 확인이 가능하다.
만일 parent page를 가지고 있다면 각 페이지의 고유한 post id를 알 수 있고
parent page를 가지고 있지 않다면 0을 출력해준다.
그리고 0은 false의 의미이다.
결과적으로 parent page의 post id값이 있다면
breadcrumb box를 보여주고
0이라면 breadcrumb 박스를 안보여주는 형태로 구현한다.
따라서 아래와 같이 관련된 코드를 추가한다.
parent page인 About US와 children page인 Our Goals page의
breadcrumb box의 존재 여부를 확인한다.
breadcrumb 박스의 parent page 이름과 링크를
새로 생성된 페이지에도 동적으로 자동 적용되게끔 구현하자.
page.php를 아래와 같이 수정하자.
아래와 같이 children page의 link를 동적페이지로 구현해보자
먼저 associated array에 대해 알아보자
짝을 지어 연동하면 아래의 그림과 같이 결과값이 출력된다.
side menu(page 글 list 출력)을 위해 아래와 같이 코딩하였다.
side menu(page 글 list 출력)가 정상적으로 구현되었다.
부모 또는 자식 페이지가 아닌 일반 단순 페이지에서는
side menu(page 글 list 출력)가 아예 보이지 않게 구현되었다.
side menu(page 글 list 출력)의 글목록 순서는 아래와 같이 조정이 가능하다.
댓글남기기