메뉴 구성하기


홈페이지에서 사용할 페이지와 카테고리를 등록했으면 홈페이지 메뉴에서 보이도록 하는 연결 작업을 진행해야 합니다.
메뉴 연결 작업은 메뉴 편집기에서 할 수 있습니다. 메뉴 편집기는 왼쪽 사이드바의 외모 > 메뉴를 클릭하여 들어갑니다.



메뉴 편집하기 탭에서 메뉴를 구성하고 편집할 수 있습니다.



메뉴에 사용하기 위해서 이미 만들어놓은 페이지와 사용자정의 링크, 카테고리가 왼쪽 박스에 나타납니다. 

메뉴를 구성하는 작업순서는 다음과 같습니다.
첫 번째, 메뉴에 연결할 페이지를 배치
두 번째, 메뉴에 연결할 카데고리를 배치



모두 보기 탭을 클릭해서 추가했던 모든 페이지를 확인합니다.



메뉴에 추가 하기를 원하는 항목을 체크한 뒤에 '메뉴에 추가' 버튼을 클릭합니다.



오른쪽 박스에 메뉴가 추가된 것을 볼 수 있습니다. 




메뉴를 원하는 트리 구조로 구성하는 것은 어렵지않습니다. 단지 메뉴를 마우스로 클릭해서 드래그해서 원하는 곳에 가져다 놓으면 됩니다. 서브메뉴로 만드는 것도 간단합니다. 메뉴 간의 상하위 구조를 만들기 위해서 살짝 오른쪽으로 움직이면 서브메뉴로 만들어집니다.
회사 비전을 드래그해서 회사 소개 쪽으로 아래 그림과 같이 배치합니다.




이러한 방법으로 나머지 메뉴도 배치해서 메뉴 구성 작업을 완료합니다.



이번에는 카데고리를 메뉴에 추가해보겠습니다. 왼쪽 박스에서 카테고리를 선택한뒤에 모두 보기 탭을 클릭합니다.



조금 전에 페이지에서 했던 작업처럼 메뉴에 구성하기 원하는 항목을 체크한 뒤에 메뉴에 추가 버튼을 클릭합니다.





오른쪽 박스에 카테고리 항목도 새롭게 추가된 것을 볼 수 있습니다.


카데고리 항목도 마우스로 드래그해서 메뉴 구성을 진행합니다. 금주 제품서비스 안내 카데고리를 드래그해서 제품서비스 안내 밑으로 배치합니다.



메뉴의 배치가 다음과 같이 완료되었습니다. 



이제 메뉴 설정부분에 '상단 주 메뉴' 체크박스 부분에 체크를 한 뒤에 메뉴 저장 버튼을 클릭하여 메뉴 구성을 완료합니다.



웹사이트 화면에 등록한 메뉴가 정상적으로 보이는지 확인하기 위해서 왼쪽 상단의 사이트명을 클릭해서 사용자 화면으로 이동합니다.



사용자 웹사이트 화면을 확인하면 오른쪽 상단에 메뉴가 생성된 것을 볼 수 있습니다.




 
일전에도 강조했듯이 메뉴를 만들기 위해서 무엇보다도 중요한 것은 사이트맵을 기획하거나 메뉴구조도를 미리 만들어 보는 것입니다.

자신의 생각을 글이나 그림, 도표로 정리되지 않은 상태에서 메뉴를 구성하면 여러 번 변경하는 일이 빈번하게 발생할 수 있기 때문입니다. 먼저 내가 만들 워드프레스 사이트의 목적을 생각하고 목적에 입각해서 메뉴 구성을 그려보고 워드프레스에 적용하면 됩니다.



워드프레스의 사이트 메뉴를 구성하는 방법을 알아보도록 하겠습니다.
왼쪽 메뉴바에서 외모 > 메뉴를 클릭합니다. 아래에 나오는 화면이 메뉴를 편집하는 화면입니다. 이곳에서 내 사이트의 메뉴를 구성할 수 있습니다.


현재 사이트 화면에서 오른쪽 상단의 메뉴 부분에는 아직 메뉴를 구성하지 않았기 때문에 디폴트로 샘플페이지가 보입니다.



메뉴구조도 만들기

메뉴를 구성하기 위해서는 먼저 메뉴구조도를 만드는 것이 중요합니다.

메뉴 구조도는 사이트를 기획할 때 가장 중요한 요소 중의 하나입니다. 잘 구성된 메뉴구조도는 구글 검색엔진 최적화(SEO)에도 좋은 결과를 나타냅니다. 사이트 기획의 핵심 요소인 메뉴구조도를 만드는 것은 어렵지 않습니다.
메뉴 구조도를 만들 때 앞서 설명한 알마인드를 사용해도 되고 MS 엑셀이나 구글 스프레드시트를 이용해도 됩니다.

참고 포스팅)

아니면, 컴퓨터 프로그램이 아닌 단순히 종이에 연필만 있어도 메뉴구조도를 만드는데는 문제가 없습니다.
여기에서는 스프레드시트를 사용해서 메뉴구조도를 만들고, 워드프레스 메뉴 관리화면에 적용하도록 하겠습니다. 

먼저는 머리속에 만들려는 사이트에 대한 구상을 하고 그 다음은 생각했던 내용을 메뉴 구조도로 만들면 됩니다.
메뉴 구성은 대분류, 중분류로 2단계 구성합니다. 


항목 중에 구분이라는 항목을 두었는데 구분은 메뉴에 연결된 화면의 종류에 따라서 페이지, 카데고리, 사용자 정의로 분류할 예정입니다.

머리속에 구상한 가상 회사의 메뉴 구조도를 아래와 같이 작성하였습니다.



사이트 메뉴 구성 준비하기

이제 메뉴구조도를 기반으로 워드프레스 사이트의 메뉴를 구성하겠습니다. 



현재까지 메뉴 이름 왼쪽에 페이지, 사용자정의 링크, 카테고리 부분이 비활성화 되어있습니다. 



메뉴를 구성하기 위해서는 먼저 메뉴를 생성해야 합니다. 메뉴 이름 란에 기본 메뉴 라고 입력한 뒤 메뉴 생성 버튼을 클릭합니다.




조금전에 비활성화 되어있던 왼쪽의 페이지, 사용자정의 링크, 카테고리 부분이 활성화 되고, 오른쪽에 메뉴 설정 부분도 설정이 가능하게 변경되었습니다.




워드프레스에서 메뉴를 구성하는 방법은 왼쪽(페이지, 사용자정의 링크, 카테고리) 부분에서 메뉴를 구성하기를 희망하는 것을 선정해서 메뉴에 추가하면 됩니다.

그렇지만, 메뉴를 구성하기 위해서는 실제로 구성할 페이지와 사용자정의 링크, 카테고리가 존재해야 합니다. 그래야 메뉴와 연결할 수 있습니다. 카데고리, 페이지등 메뉴 연결에 필요한 세부적인 작업은 바로 다음 글에서 이어서 진행하겠습니다.

이어지는 포스트)
카테고리 만들고 구성하기


글쓰기 메뉴


워드프레스에서 본격적인 글쓰기를 하기위해서 사용하는 것이 글쓰기 메뉴입니다. 왼쪽 메뉴바에서 글 부분에 마우스를 가져다 댑니다.



마우스를 가져다 대면 글에 대한 서브 메뉴가 나오는 것을 확인할 수 있습니다.



왼쪽 메뉴에 글 부분에 마우스를 가져다 대지 않고, 바로 글 부분을 클릭하면 오른쪽 화면은 글의 목록이 나타나고, 왼쪽 메뉴는 글에 대한 서브 메뉴가 나타납니다.



왼쪽의 글 메뉴 아래에는 모든 글, 새 글 쓰기, 카데고리, 태그 이렇게 네 개의 서브메뉴가 존재합니다.



모든 글


먼저 서브 메뉴 중에서 모든 글을 클릭합니다.



모든 글을 클릭할 때 나타나는 화면입니다. 이 화면은 왼쪽 메뉴에서 글을 클릭했을 때 나타나는 화면과 동일합니다. 사이트의 모든 글을 관리하는 화면입니다.


서브 메뉴의 모든 글을 클릭하면 글의 목록이 나타나고, 해당 글에 대한 편집과 삭제 및 일괄 처리가 가능합니다. 그리고 글의 중요한 상태 정보인 글의 발행여부를 확인할 수 있습니다. 내가 작성한 글은 발행이라는 과정을 거쳐야지만 다른 사람들에게 보여지는 글로 바뀝니다. 즉, 발행이라는 과정을 거쳐야 나의 글이 인터넷의 바다에 나아가는 것입니다.(단, 호스팅 서비스를 받아야 가능합니다. 지금은 워드프레스를 로컬PC에 설치하고 작업하고 있기 때문에 다른 사람에게 보여지지 않습니다.)



글 목록 화면에서는 일괄작업 콤보 박스가 있습니다. 일괄작업 콤보 박스를 클릭하면 아래와 같이 일괄작업을 할 수 있는 목록이 나타납니다.
편집, 휴지통으로 이동의 작업을 일괄로 작업할 수 있습니다.



일괄작업 적용 방법 : 원하는 작업을 할 글을 체크박스에서 선택하고 일괄작업을 편집이나 휴지통으로 이동으로 선택한 뒤에 적용 버튼을 클릭하면 됩니다.

모든 날짜, 모든 카데고리 필더 : 날짜나 카데고리로 필터를 걸어서 원하는 조건으로 글을 조회하는 기능입니다. 지금은 글이 없어서 조회할 필요를 느끼지 못하지만 글이 100개만 넘어가도 필터 기능이 없으면 무척 불편합니다.




새 글 쓰기



서브 메뉴 중에서 새 글 쓰기를 클릭하면 글을 작성하는 편집기 화면으로 이동하게 됩니다.
새 글 쓰기는 위에서 처럼 화면 왼쪽 메뉴에서 클릭을 해도 되고 글목록이 나오는 오른쪽 화면에서 새 글 쓰기 버튼을 클릭해도 됩니다.



새 글 쓰기 버튼을 클릭합니다. 새 글 쓰기 를 클릭하면, 일반적인 HTML 편집기와 유사한 글을 작성하기 위한 화면이 나옵니다. 



워드프레스에서 글을 쓰는 화면은 다음과 같이 구성되어 있습니다.

실제 글을 입력하는 제목 입력 부분, 본문 입력부분이 있고,
글에 대한 옵션을 정의하는 공개 범위 선택, 글 형식 세팅, 카데고리, 태그 선택 부분이 있습니다.

먼저 글을 작성하고 글에 대한 옵션을 지정하도록 하겠습니다.



제목 란에 제목을 워드프레스란 무엇일까요? 와 같이 작성하고 본문 란에 내용을 다음과 같이 간략히 작성합니다.



간략한 본문 작성이 완료되었습니다. 이제는 이미지를 첨부해보겠습니다. 이미지 첨부는 미디어 추가 버튼을 통해서 할 수 있습니다. 미디어추가 버튼을 클릭합니다.


포스팅에 업로할 이미지를 드래그하거나 '파일을 선택하세요' 버튼을 클릭합니다.



미디어 라이브러리 탭에 선택한 이미지 화일이 나타납니다. 


첨부되는 이미지의 크기는 디폴트로 보통으로 선택됩니다. 원본크기로 업로드 하려면 전체 크기를 선택하면 됩니다.
설정이 완료되면 화면 우측 하단의 '글에 삽입하기' 버튼을 클릭합니다.




본문에 선택한 이미지가 추가된 것을 볼 수 있습니다.



글쓰기 집중 모드란?


 오른쪽에 글쓰기 집중모드라는 기능이 있습니다. 글쓰기 집중모드 부분을 클릭하겠습니다.





글쓰기 집중 모드를 클릭하면 그림과 같이 글쓰는 것외에는 모든 옵션이 사라집니다. 글쓰는 집중력을 높이기 위한 기능입니다.



공개하기 옵션


글의 작성이 완료되면 공개하기 옵션을 선택해야합니다. 아직 미완성이거나 공개하지 않을 때에는 임시 글로 저장하기 버튼을 클릭하면 됩니다.



미리보기는 글을 공개하기 전에 사전에 어떻게 보여지는지를 확인하는 기능이고, 임시 글로 저장하기 버튼은 저장은 되나 공개는 되지 않는 기능입니다.

워드프레스는 공개하기 버튼을 클릭해야 다른 사람이 볼 수 있는 글로 인터넷상에 퍼블리싱 됩니다. 따라서 글을 포스팅하다가 아직 미완성 중이라면 공개하기 버튼을 클릭하지 않는 것이 좋습니다. 미완성된 글에 공개하기 버튼을 클릭하면 완성되지 않은 글이 다른 사람에게 보여지기 때문입니다. 미완성된 글을 실수로 공개해버리면 구글의 검색엔진은 그 글을 완성된 글이라 판단하고서 해당 글의 완성도 점수를 줄 것입니다. 그렇다면 완성되지 않은 글이기 때문에 그 글에 대한 구글의 최적화 지수는 낮아질 것이고, 전반적으로 자신의 사이트에 좋지 않은 영향을 미치게 됩니다. 그래서 꼭 공개하기 버튼은 글의 모든 작성이 완전히 완료된 뒤에 클릭해야합니다.



글 형식 옵션


글형식 옵션은 기본은 표준으로 세팅되어 있습니다. 이미지나 비디오 위주의 포스팅을 한다면 글 형식을 이미지나 비디오로 변경해서 사용하면 됩니다.



카데고리 옵션


아직까지 카데고리를 등록하지는 않았습니다. 카데고리를 등록하고 해당글을 어떤 카데고리에 속할 지를 결정할 수 있습니다. 추후에 서브 메뉴에 있는 카데고리 기능을 설명하면서 카데고리의 등록과 구성을 어떻게 하는지 알아보도록 하겠습니다.




태그 옵션


태그는 작성한 글에 대한 일종의 요약 정보라 할 수 있습니다. 포스팅을 끝낸 뒤 해당 글을 가장 잘 표현할 수 있는 태그를 달아놓으면 글을 찾거나 관리하는데 무척 유용합니다. 사용자 입장이나 검색엔진 입장에서도 태그는 해당 글을 판별하는 중요한 정보가 됩니다.

입력 필드에 신규 태그를 입력하고 추가하기 버튼을 클릭하면 태그가 생성이 됩니다.




특성이미지 옵션


특성이미지는 하나의 포스팅 글에 여러개의 이미지를 포함하고 있을 때, 여러개의 이미지 중에서 대표해서 보여줄 이미지를 이야기 합니다.
특성 이밎 설정을 클릭해서 이미지를 첨부하거나 선택하면 됩니다.




공개하기 버튼


모든 설정이 끝나면 '공개하기' 버튼을 클릭해서 글의 내용을 포스팅합니다. 공개하기 버튼을 클릭합니다.


공개하기가 완료되면 '글이 발행되었습니다.'라는 메시지가 상단에 나타납니다.



또한 글이 발행되고 나면, 공개하기 옵션에서 공개하기 버튼은 업데이트 버튼으로 변경된 것을 확인 할 수 있습니다.





관리자 화면 구조 파악하고 테마 바꿔보기

지난 시간에 로컬 컴퓨터에 오토셋과 워드프레스를 모두 설치 및 설정을 완료하였습니다. 
워드프레스 설치가 완료되고 나면, 웹브라우저인 크롬이나 익스플로러에 http://localhost/wordpress 입력함으로 자신이 설치한 워드프레스 사이트에 접속할 수 있습니다.

웹브라우저를 열고 http://localhost/wordpress로 접속합니다. 화면에 다음과 같은 화면이 나타납니다.
이 화면은 워드프레스 4.2.2. 버전 설치시 기본으로 적용되어 있는 Twenty Fifteen 테마가 적용된 화면입니다.

Twenty Fiftteen 테마 적용 화면)



위의 그림에 나타난 워드프레스 사이트는 자신의 로컬PC에 설치한 것으로 아직까지 인터넷 상에서 다른 사람들이 볼 수는 없습니다. 웹호스팅 서비스하는 서버에 워드프레스를 별도로 설치하거나 자신의 로컬PC에 있는 워드프레스 화일들을 FTP를 사용해서 웹호스팅 서버에 파일을 업로드하고 호스팅을 위한 설정을 완료한 뒤에 다른 사람들에게도 보여지는 것입니다.

워드프레스 4.2.2 Powell 버전 설치시 기본 테마는 Twenty Fifteen 입니다.



Twenty Fifteen 테마는 홈페이지 느낌보다는 블로그 느낌이 강한 테마입니다. 이 테마는 워드프레스 4.1 버전이후에 탑재되었습니다.
여기서는 블로그보다 웹사이트 느낌이 있는 워드프레스 3.8 버전이후에 탑재된 Twenty Fourteen 테마를 사용하겠습니다.



테마를 변경하기 위해서는 워드프레스 관리자 화면에 로그인 해야합니다.
워드프레스 관리자 화면은 웹브라우저 주소창에 http://localhost/wordpress/wp-admin URL로 접속할 수 있습니다.
접속 경로 중에 wp-admin 부분이 있는데 이 부분은 향후 워드프레스 보안을 위해서 다른 이름으로 변경하는 것이 좋습니다.
변경 방법은 차후 보안 관련 포스팅에서 설명하도록 하겠습니다.

웹브라우저에서 http://localhost/wordpress/wp-admin 로 접속합니다. 로그인 할 수 있는 화면이 나옵니다.




워드프레스 설치 시 자신이 설정했던 사용자명과 비밀번호를 입력합니다. 입력이 완료된 뒤 로그인 버튼을 클릭합니다.




관리자 화면 구조 파악하기

워드프레스 관리자 화면입니다. 관리자 화면에서는 워드프레스 사이트를 자신의 원하는데로 변경하고 설정할 수 있는 모든 기능을 가지고 있습니다. 관리자 화면은 크게 세 가지 부분으로 나누어집니다. 첫번째, 관리자 메뉴 부분. 두번째, 알림판 사이트 현황 부분. 세번째, 자주 사용하는 기능을 모아 두는 상단 툴바 부분입니다.



1번 영역 : 관리자 메뉴
2번 영역 : 알림판 사이트 현황
3번 영역 : 자주 사용하는 기능을 모아 놓은 상단 툴바



대부분 우리나라 사람들은 티스토리나 네이버 블로그에 익숙해져 있습니다.
티스토리나 네이버 블로그에 익숙한 유저에게 워드프레스 관리자 화면은 어렵게 느껴지기 마련입니다.
워드프레스 관리자 화면에 처음 접할 때 어렵다고 느껴지는 이유는 화면 구조가 생소하고 익숙하지 않은 용어 때문입니다. 그렇지만 자주 접하면 워드프레스 화면과 용어도 금세 자기 것처럼 익숙해지게 됩니다. 


관리자 화면에서 사용자 화면으로 전환하기

관리자 화면에서 사용자 화면으로의 이동은 상단 툴바를 사용하면 간단히 화면 전환이 가능합니다.
워드프레스 화면의 왼쪽 상단에서 자신의 사이트이름에 마우스를 가져다 되면, 사이트보기라는 메뉴가 아래로 펼쳐지고 사이트보기를 클릭하면 사용자 화면으로 전환하게 됩니다.
마우스를 자신의 사이트이름 위에 가져다 댑니다.



그러면 아래 화면과 같이 사이트 보기라는 메뉴가 보입니다. 사이트보기를 클릭합니다.





사이트보기를 클릭하면, 다음과 같이 웹사이트가 나옵니다. 다시 관리자 화면으로 되돌아 가려면 왼쪽 상단의 웹사이트명을 클릭하면 됩니다. 웹사이트 명을 클릭합니다.





기본 테마 변경하기

다시 관리자 화면으로 돌아왔습니다. 이제는 블로그 느낌이 많이나는 Twenty Fifteen 테마 대신에 조금더 일반 웹사이트 느낌에 가까운 Twenty Fourteen 테마로 기본 테마를 변경 하겠습니다.



왼쪽 관리자 메뉴에서 외모 부분에 마우스를 올려놓습니다. 다음과 같이 오른쪽 방향으로 외모에 대한 세부메뉴가 펼쳐지는 것을 볼 수 있습니다. 



테마 부분을 마우스로 클릭합니다.




테마를 관리하는 화면이 나타납니다. 오른쪽에는 설치된 테마가 어떤 것들이 있는지 나타납니다. 아직까지 우리에게 테마라는 용어가 익숙하지 않을 수 있습니다. 테마는 영어 Theme 으로 우리가 이해하기 쉽게 표현하자면 스킨이라고 보아도 무방합니다. 현재 적용된 테마는 맨 왼쪽 상단에 위치하게 되며, 활성화 라고 표시가 되어있습니다. 활성화 되어있는 테마가 현재 웹사이트에 적용된 테마입니다.



현재는 기본 테마인 Twenty Fifteen 테마가 적용되어있습니다. 테마를 변경하는 것은 간단합니다. 원하는 테마를 클릭하고 활성화 버튼을 클릭하면 모든 작업이 끝납니다. 세부적이 설정부분도 있지만, 그 부분은 상세 설명시에 다루도록 하겠습니다.

가운데 Twenty Fourteen 테마 부분에 마우스를 가져다 댑니다.



Twenty Fourteen 부분에 마우스를 가져다 대면 다음과 같이 화면이 변경됩니다. 여기서 활성화 버튼을 클릭하면 바로 테마가 변경됩니다. 활성화 버튼을 클릭합니다.




두 번째에 있던 Twenty Fourteen 테마가 첫 번째로 오면서 활성화 되었음을 확인할 수 있습니다. 




그럼 왼쪽 상단에 사이트보기를 클릭해서 웹사이트 화면으로 이동하겠습니다. 사이트 보기를 클릭합니다.




웹사이트 화면이 변경되었습니다. 일반적으로 워드프레스에서 글을 쓰고 작업을 할 때, 워드프레스 관리자화면과 웹사이트 화면을 자주 왔다갔다 해야합니다. 포스팅을 위한 글을 쓰거나 테마나 플러그인을 설치해도 변경되고 적용된 결과는 웹사이트 화면을 통해서 확인이 가능하기 때문입니다.




관리자 화면과 웹사이트 화면 편리하게 사용하기

관리자 화면에서 왼쪽 상단에 사이트보기를 눌러서 화면을 전환하게 되면 지금 보고 있는 화면이 사라집니다. 관리자 화면이 사용자 화면으로 전환되면서 관리자 화면이 사라지게 되는 것입니다. 이러면 관리자 화면에서 작업을 계속할 때 필요할 때마다 관리자 화면을 웹브라우저에서 열어야 되므로 불편합니다. 이때는 아래 세 가지 방법을 사용하는 것이 편리합니다.

첫 번째 방법, 새 탭으로 열어서 작업하기

왼쪽 상단 사이트명에 마우르를 가져다대고 마우스 오른쪽 버튼을 클릭하면 다음과 같은 화면이 나옵니다. 여기서 '새 탭에서 링크 열기'를 클릭하면 됩니다. 새 탭에서 링크 열기를 클릭합니다.




다음과 같이 새 탭이 열릴 것이고, Ctrl + Tab을 눌러서 화면 전환을 하면서 사용하면 됩니다.





두번째 방법, 새 창으로 열어서 작업하기

이번에는 새 창으로 링크 열기를 클릭합니다. 이때는 별도의 새창이 열립니다. 새창이 열렸으므로 작업시에는 Alt + Tab 키를 단축키로 사용해서 화면 전환을 하면서 사용하면 편리합니다.




세번째 방법, Ctrl 키를 클릭해서 새 Tab을 띄우는 방법

저의 경우 이 방법이 가장 편리해서 자주 사용합니다. 키보드에서 Ctrl 키를 누른 상태에서 마우스로 자신의 사이트이름을 클릭하는 것입니다. Ctrl 키를 누른 상태에서 사이트이름을 클릭합니다. 오른쪽에 관리자 화면 탭이 생성된 것을 확인할 수 있습니다.


Ctrl 키를 누른 상태에서 사이트명을 누르면 사용자 화면은 관리자 화면을, 관리자 화면은 사용자 화면을 새 탭을 열어서 띄우게 됩니다. 토글 기능처럼 간편하게 사용할 수 있습니다.


+ Recent posts