웹사이트에는 항상 홈(Home)이라는 페이지가 있습니다. 홈은 사이트에 접속할 때 기본적으로 보여지는 페이지를 말합니다.
일반적으로 홈은 회사사이트의 경우 회사 홍보나 간략한 소개로 꾸며지는 경우가 많습니다.
사용자가 사이트에 접속해서 처음 보는 화면이기 때문에 가장 신경이 쓰이는 페이지이도 합니다.

개인 사이트의 경우에도 사이트의 성격을 가장 잘알수 있는 것은 메인 페이지입니다. 워드프레스에서는 메인 페이지를 전면 페이지라는 용어로 사용합니다. 여기에서는 전면 페이지의 디자인 측면은 배제하고 워드프레스를 사용해서 전면 페이지를 만드는 방법을 알아보도록 하겠습니다.

전면 페이지 설정하기


전면 페이지를 꾸미기 위해서는 먼저 Home 이라는 페이지를 만들고 워드프레스 설정 > 읽기 에서 전면 페이지 표시여부에서 정적인 페이지를 선택해야 합니다

먼저 왼쪽 사이트바에서 워드프레스 설정 > 읽기를 클릭합니다.



읽기 설정의 전면 페이지 표시 여부는 디폴트로 최근 글로 되어있습니다. 워드프레스의 태생이 블로그이다 보니 전면 페이지가 글목록이 나오는 최근 글로 선택되어져 있습니다. 이 옵션을 정적인 페이지로 바꾸고 앞으로 만들 전면페이지를 Home 이라는 페이지를 선택해야 전면 페이지가 사이트에서 디폴트 메인페이지로 보이게 됩니다. 정적인 페이지를 선택하고 Home 이라는 페이지를 선택하려면 Home 이라는 페이지를 만들어야 합니다.




Home 이라는 공백의 페이지 만들기


왼쪽 사이드바 메뉴에서 페이지 > 새 페이지 추가 를 클릭합니다.



일단 콘텐츠 내용은 작성하지 않고 정적인페이지로 연결하기 위해서 필요한 물리적인 페이지를 만들기 위해서 제목에 Home 이라고 작성하고 공개하기 버튼을 클릭합니다.




설정 > 읽기 화면에 들어갑니다.



읽기 설정에서 정적인 페이지의 라디오 버튼을 선택하고 전면 페이지에서 Home을 선택한 뒤 일기 설정의 저장버튼을 클릭합니다.



전면 페이지가 Home 으로 지정되었기 때문에 사이트에 접속하면 조금 전 만들었던 HOME 화면이 나타납니다. 이제 화면에 보여지는 전면페이지를 꾸며보도록 하겠습니다. 전면 페이지를 꾸미는데는 지난 시간에 공부한 Shortcodes Ultimate 플러그인을 활용하도록 하겠습니다.




무엇을 어떻게 만들지 먼저 눈으로 확인하면 공부하는데 이해가 빠를 것입니다. 우리가 만들 화면은 아래와 같습니다.

만들어 볼 전면 페이지 화면


아래 보여지는 전면 페이지를 하나하나 만들어 가겠습니다. 숏코드를 활용하기 때문에 HTML과 CSS를 알지 못해도 아래와 같은 화면을 만들어낼 수 있습니다. 그럼 시작하겠습니다.




홍보용 제목과 유튜브 홍보 영상 배치하기


홍보용 제목은 숏코드의 인용구를 사용해서 만들겠습니다. Insert shorcodes 버튼을 클릭합니다.



인용구 숏코드를 사용하기 위해서 Quote를 클릭합니다.



옵션 박스에서 아래와 같이 홍보 영상 제목을 입력한 뒤에 Insert shorcode 버튼을 클릭합니다.



[su_quote] 숏코드가 본문에 자동 입력되었습니다. 오른쪽에 변경내용 미리보기 버튼을 클릭해서 적용화면을 미리 확인하겠습니다. 변경내용 미리보기 버튼을 클릭합니다.



아래 화면과 같이 결과 화면이 디스플레이 되었습니다. 이제는 홍보용 유튜브 영상을 본문에 보이게 하겠습니다.


숏코드에서 Youtube를 선택합니다.



옵션 박스에서 유튜브 홍보영상의 URL을 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.     



본문에 [su_youtube] 로 유튜브 숏코드가 입력되었습니다. 미리보기로 현재까지 화면을 확인하겠습니다.


현재까지 완성된 화면입니다. 조금씩 홈페이지 메인이 완성되고 있습니다.




서비스 내역 소개하기


홈페이지에서 제공하는 서비스 내역을 소개하는데에는 Heading, ROW, Service, Button  총 4개의 숏코드를 사용하였습니다.

숏코드에서 Heading 을 선택합니다.


Heading 옵션 박스에서 Size 항목을 20로 조정하고 Content 항목에 아래 내용을 입력합니다.



본문에 [su_heading] 숏코드가 입력되었습니다. 



지금까지의 적용화면을 확인합니다.



이번에는 서비스 내용을 소개하는 부분을 만들겠습니다. 먼저 Row 숏코드를 사용해서 화면을 삼등분하고 각 각에 서비스 숏코드를 사용해서 상세 설명을 적어가겠습니다. 

숏코드에서 ROW를 선택합니다.


옵션 박스는 디폴트로 그대로 저장합니다.



본문에는 다음과 같이 숏코드가 입력되었습니다. 이제 본문에서 숏코드를 편집하도록 하겠습니다.


위 코드를 정리해보면 아래와 같습니다. 코드는 정리하는 습관을 들이는 것이 좋습니다. 정리된 코드는 가독성을 높이는 효과를 나타냅니다. 아래에 Content 부분에 서비스 숏코드가 들어갈 것입니다. 


첫번째 Content를 지우고 그곳에 마우스 커서를 위치시킨 다음에 숏코드 선택화면을 띄웁니다.


Service를 선택합니다.



옵션 박스에서 제목에 3D 프린팅을 입력하고 Icon picker 버튼을 클릭해서 서비스 제목앞에 들어갈 아이콘을 선택합니다. 서비스 설명은 Content 항목에 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.



본문에 숏코드 소스가 아래와 같이 자동으로 입력되었습니다. 변경내용 미리보기 버튼을 클릭해서 숏코드 적용화면을 확인합니다.



3D 프맂팅 서비스 제목과 내역이 입력된 화면을 아래와 같이 확인할 수 있습니다.  나머지 두 개의 콘텐츠도 서비스 숏코드를 활용해서 입력합니다.




버튼을 입력하기 위해서 버튼 숏코드를 클릭합니다.



아이콘 피커를 사용해서 버튼의 아이콘을 선택하고 버튼 제목을 입력합니다.




전면 페이지 구성을 위한 숏코드 입력이 모두 끝났습니다. 업데이트 버튼을 클릭해서 적용을 완료합니다.



엔드유저 화면에서 정상적으로 디스플레이 되는지 확인하겠습니다. 웹브라우져에 들어가서 http://shuman.kr 사이트로 접속합니다.
모든 코드가 적용되어서 다음과 같은 화면이 디스플레이 된 것을 확인할 수 있습니다.









글 리스트 화면 만들기


읽기 설정에서 정적인 페이지 전면 페이지를 지정하면 이전에 보이던 글 목록 화면은 사라지게 됩니다. 따라서 이때는 글 목록을 볼 수 있는 별도의 '글 리스트'이라는 더미페이지를 만들고 설정 > 읽기 > 읽기 설정의 글 페이지에서 연결을 해주어야 합니다.

새 페이지를 추가해서 제목에 글 리스트라고 작성하고 공개하기 버튼을 클릭합니다.



글 페이지에서 글 리스트를 선택하고 저장합니다.



이제 '글 리스트' 페이지를 메뉴에 추가해도 되고 그렇지 않으면 다음 URL http://shuman.kr/글-리스트/ 로 접속하면 글 목록 화면을 볼 수 있습니다.


+ Recent posts