워드프레스에서 블록 편집기를 사용하여 사이트 네비게이션 메뉴 만들기

워드프레스에서 블록 편집기를 사용하여 사이트 네비게이션 메뉴 만들기

1)워드프레스 관리자 페이지 좌측 appearance 메뉴의 theme에서 현재 활성화 및 사용중인 테마를 확인할수있습니다.
Twenty Twenty-Five는 워드프레스(WordPress)에서 제공하는 공식 기본 테마(Default Theme) 중 하나로 블록 편집기를 사용하여 전체 웹사이트를 구성 가능한(Header, Footer, Post 등) 블록 기반 테마입니다.

 

2)웹사이트를 편집 및 구성하려면 appearance 메뉴의 editor로 이동합니다. 

 

3)웹사이트의 홈페이지를 표시하며 블록 편집기를 사용하여 웹사이트의 외형을 커스터마이징할수있습니다.

 

 

4)좌측의 Templates를 선택합니다.

 

5)Templates(템플릿)는 사이트의 페이지 유형(글, 페이지, 아카이브, 404 오류 페이지 등)이 어떻게 표시될지 정의하는 디자인 레이아웃 구조입니다.

 

6)Blog home 템플릿을 선택 및 편집으로 이동합니다(edit)

Blog Home(블로그 홈)은 일반적으로 블로그 최신 글 목록이 표시되는 메인 페이지를 의미합니다(기본 설정인 경우)
사이트 메인 페이지 유형을   Blog Home으로 설정하기(블로그 최신 글 목록이 표시)

 

7)페이지 상단 또는 우측 상단에서 현재 편집중인 템플릿이 사전정의된 Blog Home Template인것을 확인할수있습니다.

 

8)posts per page는 페이지에 표시하는 최대 post 개수를 의미합니다.

 

9)Content의 Header를 선택하면 Blog Home 템플릿의 헤더(사전구성된)를 선택합니다. 헤더(header)는 일반적으로 사이트 상단 영역에서 사이트 제목, 로고, 메뉴, 검색, 로그인 버튼 등을 포함합니다.

 

10)Content의 Footer를 선택하면 Blog Home 템플릿에서 푸터(사전 구성된)를 선택합니다. 푸터(footer)는 사이트 하단 영역에서 저작권, 연락처, 하단 메뉴, 소셜 링크, 푸터 위젯 등을 포함합니다.

 

11)Design에서 Blog Home 템플릿 전체에 적용할수있는 디자인을 확인할수있습니다.

 

11)상단의 헤더 및 블록(Block)을 선택합니다. 해당 블록에 적용할수있는 사전 설정된 디자인을 확인할수있습니다.

 

12)디자인을 선택하면 해당 블록에 반영합니다.

 

13)헤더 내부의 네비게이션(navigation) 블록을 선택합니다. 네비게이션은 일반적으로 헤더 또는 푸터에 위치하여 사용자가 사이트의 주요 페이지(홈, 소개 페이지, 카테고리, 연락처등)로 이동할 수 있도록 도와주는 메뉴입니다.
네비게이션의 메뉴가 page list, sample page로 기본 설정되있는것을 확인할수있습니다.

 

14)page list를 제거합니다(remove page list)

 

15)네비게이션 메뉴에 목록이 존재하지않는것을 확인할수있습니다.

 

16)네비게이션 새로운 블록 추가(add block)에서 page link를 선택합니다.

 

17)새로운 페이지 링크 URL을 입력 또는 현재 워드프레스에서 공개된 페이지 중 하나를 선택합니다.

 

18)사이트에서 현재 공개된 페이지 목록을 확인하려면 워드프레스 관리자 페이지의 pages 메뉴로 이동합니다.

 

19)페이지를 선택하면 해당 페이지를 열기했을때 표시할 내용을 확인할수있습니다.

 

20)네비게이션에 페이지 링크를 포함하는 메뉴가 추가된것을 확인할수있습니다.

 

21)추가한 메뉴의 페이지 링크에서 해당 페이지에 사전 설정된 링크 주소를 확인할수있습니다.

 

22)같은 방법으로 네비게이션에 다수의 새로운 메뉴를 추가합니다.

 

23)추가한 메뉴의 Text에서 메뉴의 이름을 입력합니다.

 

24)블록 편집기에서 편집한 내용을 저장하면(save) 추가 구성한 메뉴를 표시하며 해당 사이트를 열기했을때 정상적으로 표시되는것을 확인할수있습니다.

 

 

페이지 링크 주소 설정하기(Slug)

25)관리자페이지 좌측의 pages 메뉴에서 all pages로 이동합니다. 링크 주소를 설정하련는 페이지의 quick edit로 이동합니다.

 

26)Slug에 페이지 링크에 사용할 문자열을 입력하고 업데이트합니다(update)

 

27)블록 편집기의 네비게이션 메뉴에서 해당 페이지 링크를 선택하고 링크 주소를 확인합니다(LINK)
사이트 주소/ 뒤에 입력된 문자열을 확인합니다.

 

28)사이트 주소/ 뒤에 해당 페이지의 Slug를 입력하고 저장합니다.

 

29)브라우저에서 해당 페이지 주소를 입력합니다. 사이트의 해당 페이지를 정상적으로 표시하지않는것을 확인할수있습니다(404 Not Found)

 

30)워드프레스 관리자 페이지 좌측 Settings 메뉴에서 Permalinks로 이동합니다.

 

31)permalink structure에서 Plain으로 기본설정되어있는것을 확인할수있습니다.

 

32)post name으로 변경하고 저장합니다(save changes)

 

33)사이트의 해당 페이지를 정상적으로 표시하는것을 확인할수있습니다.