본문 바로가기

SELF IMPROVEMENT/WEBPAGE 제작

21.08.22.SUN - 워드프레스 이용해서 웹페이지만들기 1탄

워드프레스

전세계 웹사이트의 40%가 쓴다.

워드프레스는 웹사이트를 만들고 관리하기 쉽게 도와준 저작도구이다.

전세계 웹사이트의 40%가 워드프레스로 만들어져 있다.

 

 

기존에는 홈페이지를 만들려면 홈페이지 디자인을 먼저 하고,

그 다음 각 홈페이지에 탑재되는 게시판 같은 기능을 따로 구현해야 했다.

디자인을 완성했다 해도 각 웹브라우저와 웹사이트에서 제대로 굴러갈 수 있게 만들려면

호스팅 서버도 따로 구축해야 할 만큼 손이 많이 든다.

그 뿐이랴. 웹사이트를 꾸준히 관리하기 위해 신경도 써야 한다.

 

 

콘텐츠관리시스템(CMS)은 이런 과정을 모두 단순하게 만들어주는 도구다. 

CMS만 있으면 누구든 홈페이지, 블로그, 쇼핑몰 서비스, 사회관계망 서비스(SNS) 등을 뚝딱 완성할 수 있다.

 

https://ko.wordpress.org/

 

Blog Tool, Publishing Platform, and CMS - WordPress.org 한국어

Open source software which you can use to easily create a beautiful website, blog, or app.

ko.wordpress.org

 

 

 


가이드빈

 

동영상을 찾아서 일단 따라해보자.

 

https://youtu.be/DbQTHmc15KQ

 

 

이 영상은 40분정도로 되어있고,

도메인과 호스팅 등록부터 시작한다.

구성은 아래와 같이 안내 해 두었다.

 

 

 

[STEP 1 - 등록가능한 도메인 주소를 확인하기]

[STEP 2 - 도메인 주소 & 웹 호스팅 등록하기]

[STEP 3 - 워드프레스 사이트 설치하기]

[STEP 4 - 워드프레스 관리자 페이지 살펴보기]

[STEP 5 - 워드프레스 테마 설치 및 적용하기]

[STEP 6 - 워드프레스 테마 편집하기]

[STEP 7 - 새 페이지 만들기 & 메뉴에 추가하기]

[STEP 8 - 워드프레스 플러그인 설치 및 적용하기]

 

 

 

이영상을 홈페이지로 정리해둔 것도있다.

여기들어가면 영상내용을 

블로그 포스팅 내용처럼 볼 수 있다.

주소는 아래 링크로 남겨두었다.

 

https://guidebean.com/

 

무료 가이드 - 가이드빈

무료 가이드 워드프레스 홈페이지 만들기 8단계 (초보자) 홈페이지 만들기가 처음인 초보자들을 위한 가이드입니다! 가이드를 그대로 따라하고 나면 어떻게 혼자서 홈페이지를 만들고, 관리하

guidebean.com

 

 

 


 

 

 

자 그럼 이제 따라해보자.

 

[STEP 1 - 등록가능한 도메인 주소를 확인하기]

[STEP 2 - 도메인 주소 & 웹 호스팅 등록하기]

 

도메인구매 및 웹호스팅 사이트는 FASTCOMET으로 추천해줬다.

다른 도메인, 웹호스팅 사이트도 찾아봤는데,

지금 FASTCOMET은 할인 중이라서 

다른 웬만한 곳보다 싸서 선택했다.

그리고 속도나 관리적 측면에서 좋다고해서

일단 초보니까 부딪혀보자! 하고 가입했다.

https://www.fastcomet.com/

 

 

 

처음에는 어떤 분이 나한테 채팅을 걸어서 당황했는데,

그래도 천천히 잘 결제했다.

일단은 한개의 웹사이트만 운영할 계획이라서

FAST CLOUD를 선택했다.

매달 4000원 정도내야한다.

나중에 웹사이트를 더 만들 계획이라면

그때가서 FASTCLOUD PLUS로 변경가능하다.

 

 

 

아래그림처럼

상품구매를 진행하면,

 

 

 

상품구매 이메일과

사이트에는 웹사이트주소가

오픈되었다는 메세지가 뜬다.

왼쪽) 가입완료되었다는 이메일 / 오른쪽) 웹사이트주소가 오픈되었다는 메세지

 

 

 

[STEP 3 - 워드프레스 사이트 설치하기]

그다음에는 http로 우리 웹페이지가 열리게해야하는데,

그게 Enable SSL을 이용하는것이다.

FASTCOMET 로그인 후,

자신의 페이지에서

홈아이콘 클릭후,

아래로 내리면 Enable SSL아이콘이 있다.

이걸 활성화 해주면된다.

 

 

 

이게 오픈된 웹페이지 첫화면이다.

http://www.motifcommunication.com/

 

 

 

이제 드디어

워드프레스를 설치한다.

설치하는 아이콘

 

 

 

설치하고나면 아래그림과 같은 페이지가 나온다.

Administrative URL은 관리자전용페이지로

북마크해두고 사용하면 유용하다.

기억해두도록하자.

설치완료 후 뜨는 페이지

 

 

 

[STEP 4 - 워드프레스 관리자 페이지 살펴보기]

자신의 도메인+wp-admin을 치면

(예를들어 https://motifcommunication.com/wp-adim)

로그인창이 뜨고,

로그인 후,

관리자 페이지에 접근가능하다.

로그인화면
관리자페이지

이건 영상으로 간단히 소개만 보고

직접 만져보면서 체득하는 게 빠를 듯하다.

 

 

 

단, 여기서 한가지는 해두는게 좋은데,

설정에서 고유주소 설정

글이름으로 한다.

이는 검색엔진 최적화를 기반한 사이트운영에

도움이되기 때문이다.

 

 

 

 

[STEP 5 - 워드프레스 테마 설치 및 적용하기]

이제 만들어진 템플릿을 적용하기위해

다양한 디자인의 템플릿을 서치하고,

저장해두고, 적용한다.

 

관리자페이지>외모아이콘(붓모양)>테마>새로추가

새로추가버튼을 누르고 들어가서

'astra' 를 검색하고 다운로드 후,

활성화한다.

 

 

 

그럼 이제 <외모>에

아스트라옵션이 생기는데,

여기서 가져오기플러그인 링크를 클릭해서

활성화시켜준다.

그럼 Builder를 선택하라고하는데,

Elementor를 선택해주면 된다.

그럼이제  astra에서 제공하는

데모템플릿들을 적용할 수 있다.

 

 

 

 


오늘은 step5까지 따라해보고,

나머지 step6부터는 다음날로 미루고

잠을 자야겠다.