연구실

워드프레스로 나만의 홈페이지 제작하기

2020년 12월 30일

아임웹 활용 강의

 

Chapter. 01 기초 개발 지식 익히기

웹 개발 -> 호스팅 -> 서버

개인 컴퓨터에 호스팅하면 컴퓨터를 계속 실행시켜야 하므로 서버를 입대하여 호스팅한다.

클라이언트 -> 브라우저 -> 서버 -> 로드 -> 클라이언트

IP 주소: 인터넷에 연결된 기기를 식별하는 유일한 번호. 아이피 주소에 쉽게 접속하기 위해 도메인을 사용한다.

DNS 서버 -> IP 주소 -> 클라이언트 -> 도메인 네임 -> DNS 서버

 

Chapter. 02 홈페이지 개설하기

예전에는 코딩을 통해 홈페이지를 제작했지만, 현재는 서비스를 이용하여 제작한다.

가장 최적화 되어있는 아임웹에서 홈페이지를 제작한다.

로그인 -> 내 사이트 -> 무료 사이트 개설 버튼 클릭 -> 웹사이트 템플릿 선택 -> 커스터마이징 -> 개설하기 -> 사이트 이름 (추후 변경 가능) -> 도메인 이름 설정 -> 개설하기 -> 홈페이지 개설 완료

무료 버전은 무료로 개설 가능하며, 제한적인 기능을 가진다. 유료 버전으로 전환하면 추가적인 기능을 사용할 수 있다.

 

Chapter. 03 홈페이지 관리자페이지 익히기

웹사이트는 사용자 화면과 관리자 화면으로 나뉜다.

대시보드는 대략적인 매출, 사용자 등 정보를 보여준다.

디자인 모드는 사용자 화면의 디자인을 수정할 수 있다.

사용자 관리는 가입자 목록, 알림, 운영진 설정, 메시지 보내기, 메일 발송, SMS/알림톡 설정이 가능한다.

쇼핑은 쇼핑몰의 기능들을 사용할 수 있다.

예약은 예약 관리할 때 사용한다.

컨텐츠 관리는 게시물, 댓글, 입력폼 등을 설정할 수 있다.

마케팅 관리는 전환추적/리타겟팅 관리, 페이스북 마케팅 (FBE), 에이스카운터 기능을 사용할 수 있다.

App 신청은 웹을 App 으로 만들 수 있다.

 

Chapter. 04 SSL, 파비콘, PG사, 도메인 설정 등

환경설정 -> 기본설정
파비콘/사이트이름/사이트 설정 순으로 노출된다.
대표 이미지는 카카오톡 등으로 도메인을 보낼 때 노출되는 이미지다.
PG사: PG사 등록 후 연결

도메인: 도메인을 구입하여 개인 도메인으로 연결한다.
SSL은 보완설정을 말하며, https 가 보완 설정된 상태이다. 전자상거래가 이루어지는 쇼핑몰은 의무화 대상이다.

 

Chapter. 05 SEO & 헤더설정

스크립트는 크게 헤드 섹션과 바디 섹션, 푸터 섹션으로 나뉘어져 있다.
헤드 섹션은 기능적인 역할을 하는 스크립트 (구글 태그 등 삽입)
바디 섹션은 구조화를 이루는 스크립트

헤더, 바디 코드란에 스크립트를 설치하여 페이스북 픽셀 등을 활용한다.
공통 레이아웃 또는 전체 템플릿이라고 말하며, 스크립트를 설치하면 모든 페이지에 적용된다.

Meta 코드는 소유확인용 메타태그 등을 설치하는 곳이다.

 

Chapter. 06 상품 등록

상품 관리 메뉴에서 썸네일 이미지,
상품명, 상품 문구 (고객들에게 노출되는 곳이므로 중요, 문맥 타겟팅이기 때문에 한글로 핵심 키워드를 사용하여 작성하는게 필요함),
상세설명 (상품 상세 페이지), 자체 상품 코드 (상품 고유 아이디 SKUID) 등을 설정할 수 있다.

SEO: 포털사이트에 검색 시 노출되는 제목과 문구 설정란.

 

Chapter. 07 페이지 디자인 편집

디자인모드 선택 -> 수정모드 진행 -> 디자인 수정

왼쪽 상단에 메뉴 관리에서 메뉴 추가, 삭제, 수정을 할 수 있다.

홈페이지는 박스 단위로 디자인된다. 가장 큰 박스는 섹션이라고 한다. 섹션 안에는 단일 혹은 다수의 컬럼이 있다. 컬럼 안에는 위젯이 들어간다(이미지, 영상, 코드 등). 오버 이미지는 마우스 오버를 했을 때 바뀌는 이미지다.

이미지 맵 링크는 이미지 위 면적을 지정하고 클릭 시 특정 행동(전화 걸기, 링크 등)을 할 수 있게 한다.

여백은 위젯 사이에 공간이 필요할 때 사용된다.

 

Chapter. 08 랜딩페이지 기획 및 구성

노출 -> 유입 -> 고려 -> 전환 중 고려 단계에서 상세 페이지의 역할이 중요하다.

  1. 헤드 배너
    상품이나 서비스의 네이밍이 중요(고유명사).
    전달할 메시지를 집약적으로 작성.
  2. 필요성 및 관심 소구
    통계자료
    문제점 지적
    타겟에 대한 공감
    >>우리 상품 및 서비스가 왜 필요한지 설명.
  3. 기대 효과
    기대 결과
    신뢰성을 뒷받침해줄 수 있는 요소
    >>처음부터 결론을 먼저 말해줘서 공감과 흥미를 유발한다.
  4. 서비스 비교
    타 제품 및 서비스와 차이점
    경쟁력 부각
  5. 서비스 내용
    나의 내용을 뒷받침해줄 수 있는 이미지 또는 영상
    신뢰성 요소
    >> 본론. 서비스에 대한 내용부터 말하면 이해가 힘들기 때문에 서론으로 흥미를 유발하는게 중요하다. 이미지와 영상, GIF를 활용하여 신뢰성을 높인다.
  6. 띠배너
    내용이 길다면 띠배너를 활용하여 한 번씩 잘라준다.
  7. 프로모션
    지금 당장 사야할 이유를 언급.

 

워드프레스 활용 강의

 

Chapter. 01 홈페이지 제작 기초

홈페이지 구축 시 필요 사항: 도메인 URL 주소, 호스팅사, 콘텐츠

도메인: 집 주소 / www.aaa.com
호스팅: 땅 / 닷홈, 카페24, 후이즈 등
콘텐츠: 가구 / 영상, 상세페이지, 이미지 등

 

Chapter. 02 도메인-호스팅 연결과 워드프레스 설치

닷홈을 통해 호스팅

도메인 구입 방법: 도메인 검색 -> 구매(연단위 결제) -> 신청하기 -> 소유자 정보 입력 -> 결제

호스팅 구입 방법: 무제한 웹 호스팅 -> 정보 입력 -> 테마 설정 (워드프레스) -> 웹 호스팅 설정 정보 입력 -> 도메인 연결 -> PHP 버전을 7.0으로 변경 -> 결제

 

Chapter. 03 워드프레스 관리자 페이지 둘러보기

닷홈 -> my닷홈 -> 도메인 관리 -> 도메인 사용 현황 에서 도메인 정보 확인 가능
닷홈 -> my닷홈 -> 호스팅 관리 -> 무제한 웹호스팅 목록 에서 호스팅 정보 확인 가능

.com/wp-admin 으로 접속 -> 로그인 -> 관리자 페이지 접속

설정 -> 일반 -> 사이트 제목 변경 (홈페이지명 기입) -> 태그라인 변경 (사이트에 대한 설명 기입)

설정 -> 토론 -> 댓글 작성 허용 여부 (모든 체크박스 해제)

설정 -> 고유주소 -> 사용자 정의 구조 선택 -> 카테고리 + 포스트네임 으로 선택 (사용자 임의로 변경 가능)

 

Chapter. 04 테마 세팅 및 사용자 정의

테마는 템플릿

관리자 페이지 -> 외모 -> 테마
새로 추가를 클릭하여 원하는 테마 선택 후 설치
설정 -> 읽기 에서 홈페이지를 최근 글에서 정적인 페이지로 변경 (메인페이지 설정)

메인페이지 상단 -> 사용자 정의하기 클릭
사이트 아이덴티티 설정(로고 등)
외모 설정 -> 일반 설정(페이지 레이아웃 설정) -> 글자 (폰트 등 설정)
전면 페이지 영역 -> 메인페이지 영역 변경 가능

관리자 페이지 -> 플러그인 -> 폼 설치 -> 사용자 정의하기 내 단축코드에 숏 코드를 삽입하면 폼을 사용할 수 있다 (폼 플러그인 내 폼을 원하는 방식으로 변경할 수 있다.)

 

Chapter. 05, 06, 07 필수 플러그인 설치

메인페이지 상단 -> 사용자 정의하기 클릭

헤더 옵션 -> 최상단바 설정 가능
헤더 옵션 -> 내비게이션 -> 레이아웃 및 위젯 설정 가능
헤더 옵션 -> 헤더 설정 -> 레이아웃 설정 가능

관리자 페이지 접속
플러그인: 기능을 풍부하게 만들어주는 어플리케이션
WPForms 를 제외한 2개의 플러그인 삭제
필수 플러그인:
elementor page builder
wp fastest cache: 홈페이지 로드 속도를 최적화하기 위해 캐시를 관리해주는 플러그인
woocommerce: 상품을 판매하기 위한 플러그인
Google analytics dashboard for wp by exactmetrics: GA 대시보드 활용 가능
yoast SEO
shortcodes ultimate
google fonrs for wordpress: 추가적인 폰트 사용
disable comments: 스팸 댓글 차단용, 모든 댓글 차단
imsert header and footer: 헤더와 푸터에 스크립트 삽입 가능
live chat with facebook messenger: 페이스북 메신저로 소통할 수 있는 채팅 기능

검색에 나타나지 않는 플러그인 설치하기

코스모스팜 접속 -> 제품 -> KBoard -> 2개의 플러그인 다운로드
관리자 페이지 -> 플러그인 -> 플러그인 업로드

 

Chapter. 08 페이지 꾸미기-1(With Elementor)

관리자 페이지 -> 페이지

새 페이지 추가
제목, 내용 등 입력 후 공개를 클릭하면 게시물 게시

외모 -> 메뉴
게시물을 메뉴에 추가하면 상위 메뉴 설정 가능

페이지 -> 편집
Edit with Elementor -> 다양한 섹션 및 위젯 설정 가능 (이미지, 텍스트, 폼 등)

 

Chapter. 09 페이지 꾸미기-2(With Elementor)

Divider : 공간을 나눠주는 획
버튼 : 링크 삽입, 전화 연결
ICON : 아이콘 삽입
Image box : 이미지 삽입 – 타이틀, 캡션, 설명에 원하는 키워드를 기입 시 SEO에 용이
Image Gallery : 갤러리형 이미지 박스
Tabs : 탭별 섹션 삽입
Accodion : 드롭다운형 섹션
Social Icons : 소셜미디어 아이콘 삽입
Map : 지도 삽입

 

Chapter. 10 페이지 배너 및 게시판 만들기

페이지 헤드 꾸미기
Elementor -> one 섹션 -> edit 섹션 -> 스타일 -> 백그라운드 타입 (클래식) -> 이미지 업로드 -> 레이아웃 -> 높이 키우기 -> 포지션(가운데정렬) -> 사이즈 (커버) -> 업데이트

세부페이지 꾸미기
KBoard (게시판 플러그인) -> 게시판 생성 -> 이름 설정 -> 게시판 자동 설치 (원하는 페이지 설정) -> 게시판 스킨 선택 (디폴트) -> 저장

이미지 뿐만 아니라 비디오도 넣을 수 있음
다른 여러 플러그인으로 원하는 게시판을 설정할 수 있다.

Chapter. 11 회원가입 & 로그인 만들기

WP Members 플러그인 설치 (홈페이지 회원을 관리하는 플러그인)
새 페이지 생성 -> 이름을 ‘로그인’ 설정 -> WP Members 버튼 클릭 -> 로그인폼 선택 -> 숏코드가 자동적으로 생성됨 -> 업데이트

설정 -> WP Members -> 필드 -> 편집 -> 한글로 변경
Dlalogs -> 상태메시지 설정 가능 -> 한글로 변경

외모 -> 메뉴 구조 -> 로그인 페이지 추가

 

Chapter. 12 페이스북 로그인 만들기

Nextend Social Login (소셜로그인 할 수 있게 해주는 플러그인) -> 페이스북 (SSL 필요) -> 닷홈 -> 기타서비스 SSL 보안인증서 발급 -> 페이스북 디벨로퍼 이동 -> 새 앱 추가 -> 설정 -> 유효한 OAuth 리디렉션 URL 추가(플로그인 설정에 있음)
Nextend Social Login -> 앱 시크릿코드와 앱 아이디 설정 -> 적용

 

Chapter. 13 메인페이지 슬라이드배너 만들기

새 페이지 -> 이름을 ‘메인 페이지’로 설정 -> Smart Slider (슬라이더를 만드는 플러그인) -> Edit with elementor -> Smart Slider 메뉴 선택 -> 슬라이더 선택 -> 업데이트 -> 대시보드로 이동 -> Smart Slider 메뉴 -> 템플릿 생성 -> Free -> 원하는 슬라이더 Import -> edit -> 글자 및 이미지 변경 -> 메인 페이지 -> 슬라이더 변경

Chapter. 14 메인페이지 추가 꾸미기

섹션 추가 -> iner section -> header 추가 -> 비디오 추가 -> 백그라운드 영역에서 이미지 삽입 -> Form, Text Editer 추가

 

Chapter. 15 위젯설명 및 추가하기

플러그인 -> 위젯 -> 원하는 영역에 원하는 위젯 드래그 앤 드롭
최근 글, 탐색, 검색 등 다양한 위젯 선택 가능
사이드바, 푸터 등 원하는 영역에 노출 가능

Chapter. 16 글설명 및 숏코드 활용하기

글과 페이지의 차이
페이지 > 카테고리 > 글

플러그인 Shortcodes Ultimate 를 사용하여 숏코드 사용 가능
유튜브, 메뉴, 동영상 등의 카테고리를 간편하게 사용 가능

Chapter. 17 SEO최적화 페이지&글 만들기

플러그인 Yoast SEO : 최적화를 하기 위해서 확인을 하는 플러그인
가독성 분석, 포털 사이트 노출 미리 보기 등 글을 분석하여 SEO 최적화에 필요한 사항을 분석 및 추천

 

Chapter. 18 쇼핑몰솔루션 기본세팅 – 우커머스&PGALL

우커머스 : 상품을 팔기 위한 기본적인 기능이 포함된 플러그인
PGALL.co.kr 접속 -> codeMshop -> 쇼핑몰 플러그인 -> 결제 플러그인 -> 플러그인 다운로드

플러그인 메뉴 -> 플러그인 업로드 -> pgall와 paall npay 설치 및 활성화 -> 결제 대행사 중 KG 이니시스 체크 및 저장
KG 이니시스 설정 -> 결제 수단 추가 및 변경 -> KG 이니시스 홈페이지 접속 및 서비스 신청

 

Chapter. 19 코드엠샵 – 결제창세팅

코드엠샵에서 웹표준 사인키, 상점 키파일, 상점 아이디 받기 -> 웹표준 사인키 및 상점 키파일 삽입

Chapter. 20 상품등록-1

우커머스를 활성화하면 결제, 내 계정, 상점 페이지 자동 생성
상품 메뉴 -> 상품 제목 및 상세페이지 설정 -> 상품 데이터 설정 (가격, 할인 가격, 재고 등 설정 가능)

 

Chapter. 21 상품등록-2

연결된 상품 : 상향 판매, 교차 판매 설정. 관심 상품 노출
고급 : 구매 메모 (구매 후 고객에게 노출되는 메시지)

새 페이지 생성 -> 개인정보 처리방침 페이지 생성 -> 금융감독원 참고 -> 우커머스 설정 -> 계정 및 개인정보 -> 개인정보페이지를 개인정보 처리방침 페이지로 변경 -> 보호 정책 메시지를 한글로 번역

외모 -> 메뉴 -> 장바구니 추가

Chapter. 22 홈페이지 스크립트 설치 – Insert headers and footers

설정 -> Insert headers and footers -> 스크립트 복사 -> Header 부분에 삽입
특정 페이지에 삽입 방법 : SOGO Add Script Header Footer 설치 -> 페이지 하단에 스크립트 삽입 or 태그매니저를 사용하여 설치

Header : 사이트를 작동시키기 위한 소프트웨어가 위치
Body : 홈페이지의 시각적 요소들이 위치, footer = body

Chapter. 23 포털엔진 웹사이트 등록

구글 서치콘솔 접속 -> 속성 추가 -> 웹사이트 주소 입력 후 추가 -> 대체 방법 -> HTML 태그 -> 스크립트를 Header 섹션에 삽입

구글 서치콘솔 -> 크롤링 -> sitemap -> Yoast SEO의 Features 내 XML sitemap의 ‘?’ 클릭 -> 사이트맵 복사 (도메인 뒤의 URL) -> 구글 서치콘솔에서 추가 후 제출 -> /rss 제출

네이버 웹마스터 도구 접속 -> 구글과 동일한 방법으로 사이트맵과 rss 등록

Chapter. 24 워드프레스 홈페이지 Tip

설정 -> 읽기 -> 홈페이지란은 원하는 페이지로 메인페이지 변경 가능

페이지 -> 하단부분에 디바이스를 선택 -> 모바일, 데스크탑, 태블릿 화면 확인 가능