Peep

이번에는 페이지 제작하기 위한 빌더를 다운로드 받도록 하겠습니다.

빌더가 뭐쥬 ~? 페이지 제작 툴 정도로 알면 됩니다. 

설치 및 예시를 보여드리겠습니다.

플러그인 설치 합니다.

[Page builder by siteOrigin]

이 전 게시글에서 확인 할 수 있듯 검색을 통해 설치하고 > 활성화까지 해 줍니다.

이제 플러그인 설치, 활성화는 기본이죠?

tip

별점, 최근업데이트, 버전호환 확인 필수!

별점이 낮음 

- 뭐든 평점이 낮으면 별로겠죠?

 최근 업데이트

- 오래되었을 경우 잘 관리되는 플러그인이 아닐 확률이 높습니다.

버그가 발견되면 대응이 늦을 수 있습니다.

워드프레스 호환

- 충돌이 나거나 사용하지 못하는 경우가 생길 수 있습니다.

무료 플러그인들은 일반 사용자가 만들어 배포하는 것들도 있기때문에 특히나 확인이 필요합니다.

설치 후 활성화!

[페이지 > 모든페이지> 편집]

에디터 오른쪽 상단에 page builder 클릭하면 빌더 사용할 준비완료!

[Add widget] 

페이지에 어떠한 것을 작성하려는지 설정하는 것이다.

예로 들어 이미지로 해보겠다!

이미지 위젯 클릭

창이 닫히고 이미지라고 항목이 생긴게 확인된다.

마우스를 항목 위로 올리면 Edit, Duplicate, Delete가 나오는데 Edit 눌러준다.

설정창에서 이미지 추가 클릭

헤드 배경이미지 예시 들 때 추가한 이미지들이 있는데 예시니까 아무이미지나 체크하여 위젯에 추가하기 클릭.

그 후 펜치 모양에 마우스 올린 다음 Edit Row 클릭

이건 한 영역에 몇 분할해서 사용할 것인지 설정하는 항목이다.

Set row Layout을 1에서 4로 수정하면 4분할로 설정이 됩니다.

(100%에서 자동 비율) 

Done누르면 분할된 것이 확인가능하다.

보시면 4분할 되었죠?

위젯 항목에 마우스 올리면 Edit, Duplicate, Delete 뜨는데 Duplicate를 눌러 복사해 준 뒤, 

마우스 드래그 앤 드롭해서 분할한 영역에 하나하나 옮겨줍니다.

4개 보이시죠? 그리고 업데이트 버튼 클릭

업데이트는 글 등록하기(저장)로 보면 됩니다.

내 홈페이지 주소 입력해서 접속하거나(메인이니까) 제목아래에 고유주소 옆 링크 클릭해서 들어가도 된다.

빌더 사용해서 이런식으로 이미지, 글, 동영상 등등등 많은 작업을 할 수 있다.

페이지를 꾸미기 전에 플러그인을 설치를 해보도록 하겠습니다.

테마는 집 전체 구조라 생각하면 플러그인은 가구라고 생각하면 됩니다.

슬라이드 플러그인, 사이드 메뉴 플러그인 등등..

[플러그인 > 새로추가]

추천, 인기, 추천됨, 즐겨찾기에서 플러그인 확인 및 다운로드 받을 수 있고 

키워드 검색을 통해 다운받을 수 있습니다.

1. WPS Hide Login

관리자 페이지 접속할때

www.okayoon.com/wp-admin으로 들어오는데, 

이게 보안에 안좋다고 합니다. 

다 똑같은 wp-admin 이기 때문에 일반 사용자도 관리자 로그인 페이지 접근이 수월하다는거죠.

이것 만으로도 보안에 문제가 있기 때문에 일단 저 부분을 수정하는 플러그인을 다운 받겠습니다.

검색창에 WPS Hide Login 검색

지금설치 후 활성화

활성화를 누르면 플러그인 > 설치된 플러그인으로 페이지가 이동됩니다.

그리구 WPS Hide Login 플러그인이 활성화되어 있는 모습이 확인 가능 합니다.

Setting 클릭

클릭 시 설정>일반으로 이동 됩니다.

(설정>일반에서 수정 가능)

WPS Hide Login 영역이 추가 되었고 설정하는 부분이 생겼습니다!

Login Url : wp-admin 대신 어떤 경로로 로그인 페이지를 접근할지

Redirection Url : 잘못된 url로 접근 시 어떤 경로로 보낼지

저는 테스트를 위해 hello로 설정하겠습니다. 

*현재는 변경했습니다.

이제 로그인 페이지는 

www.okayoon.com/hello 로 접근 가능합니다.

www.okayoon.com/wp-admin으로 접속하면 

www.okayoon.com/404로 이동되며 페이지가 없음을 알립니다.

1. 무료 테마 다운로드를 해보겠습니다.

외모 > 테마

새 테마 추가하기

테마 설치 페이지로 이동이 되는데, 

미리보기를 통해 어떤 페이지 제작이 되는지 대-충 보고 설치하면 됩니다.

(설치 했다가 아니면 삭제도 손 쉽게 가능함)

[테마 삭제 방법]

외모 > 테마 > 삭제할 테마 클릭 > 우측 하단 삭제 클릭

여튼 저는 zillah 라는 테마를 받을거에요!

그냥 대-충 보고 고른거여서 다른 테마 해도 됩니다.

페이지에서 스크롤 아래로 내리면 있지만 검색을 통해서도 찾을 수 있습니다

설치 클릭 설치가 완료되면

2. 활성화

외모 > 테마 > 활성화 

3. 사용자 정의하기.

외모 > 테마 > 사용자 정의하기 버튼 클릭 or 외모 > 사용자 정의하기

설정 후 즉각적 확인이 가능한 페이지가 뜹니다.

맨 처음 접속했을때 외관과 다른 것은 테마가 바뀌었기 때문입니다.

4.간단히 몇가지 메뉴를 사용하겠습니다.

[> 사이트 아이덴티티]

사이트 제목, 태그라인, 로고, 아이콘 설정 가능

- 사이트 제목, 태그라인 등록 시 탭에 노출

사용하려는 사이트 제목, 태그 라인을 입력해 주세요.

사이트제목 : 내 홈피 제목

태그라인 : 내 홈피 설명

사이트 제목을 쓰고 태그라인을 비워두면 탭에 제목만 노출됩니다.

- 로고 등록 시 메인 페이지에 노출가능

(로고 무료 다운 https://www.flaticon.com - 상업, 비상업 확인하고 무료 다운받으세영)

'로고선택' 클릭 시 미디어 팝업 뜨고 '파일선택' 클릭

로고 이미지 선택하면 메인페이지에서 확인 할 수 있습니다.

- 사이트 아이콘 설정

탭에 아이콘 노출

[> 헤더 이미지]

메인 헤더 배경 이미지 등록 가능

새 이미지 추가, 1600 x 250 크기에 맞춰 올려주면 최적화 됩니다.

저는 그냥 구글에서 주워온 이미지 막 썼습니다. 

파일업로드 > 파일 선택

여러개 한번에 업로드 가능합니다.

미디어 라이브러리에서 설정할 이미지 선택하구 선택후 자르기 클릭해서 등록합니다.

tip.  여러 이미지를 올린 후 '업로든 된 헤더 랜덤화' 클릭하면 

내 사이트에서 확인 가능합니다.

F5 (새로고침) 하면 헤더 배경이미지가 랜덤으로 변경됩니다.

뭐 이런 기능도 있다.... 이고 나는 안 사용할 것입니다;

[> 메뉴]

새메뉴 생성 클릭하면 메뉴 이름 입력 가능하고

메뉴 이름은 관리자가 알만한 것으로 등록합니다.

메인 메뉴면 메인 메뉴 서브면 서브메뉴... 이런식으로 

메인 메뉴이므로 메뉴 위치는 메인 체크

아이템 추가 누르면 추가 탭이 등장합니다.

메뉴를 추가해줍니다.

 페이지에서 메뉴명 입력 후 추가버튼 클릭

반복해서 저는 메인, 포트폴리오, 문의하기, 찾아오는 길을 등록했습니다.

(다른 이름으로 해도 무관)

추가 된게 보이쥬? 

공개하기 까지 하면 저장완료.

[> 홈페이지 설정]

정적인 페이지 체크

홈페이지 선택 박스에 메인 설정 후 공개 버튼 클릭

이렇게 테마 설치, 사용자 정의하기 설정이 간단하게 마무리 되었습니다.

+ 추가

테마 설치 시 테마 내 기능을 사용하기 위해서 플러그인 설치도 해줘야 합니다.

[플러그인 > 설치된 플러그인]

상단에 알림창에 있는 설치 버튼 클릭.

설치 - 완료 반복.

완료되면 페이지가 이동되고 '플러그인을 활성화' 클릭 해주면 활성화가 됩니다.

알림창에 있는 플러그인들을 다 다운 받아 주세요.

관리자 페이지랑 친해져보도록 하겠습니다.

1. 로그인

자신의 도메인으로 접속할건데, 뒤에 /wp-admin을 붙여줍니다.

본인도메인/wp-admin

그러면 

아이디, 암호를 입력 페이지로 이동됩니다.

로그인 방식에 2가지가 있는데,

1.1

아이디는 admin

비밀번호는 호스팅 시 등록한 관리자 암호

1.2

아이디는 본인 등록한 이메일주소

비밀번호는 호스팅 시 등록한 관리자 암호

둘 다 같은 계정이므로 선택해서 로그인 하세요.

드디어 관리자 페이지로 들어왔습니다.

2. 관리자 별칭 변경을 해보겠습니다.

(내가 글을 작성하면 별칭으로 나타나지기 때문에요^^ admin으로 작성되는건 싫어요!)

사용자 > 모든 사용자 > 편집

별칭에 변경할 닉네임 작성 후 공개적으로 표시할 이름 선택박스 누르면 내가 작성한 닉네임 확인가능!

닉네임 선택 후 프로필 업데이트 하면

맨 우측 닉네임으로 설정 된 것을 확인 할 수 있습니다.

또한 글 등록 시에도 닉네임으로 등록됩니다.