WordPress워드프레스로 웹사이트 만들기강의 8개 중 4번째난이도 입문

페이지 & 콘텐츠 구성 — 메뉴, 블로그, 연락처 폼

발행 읽는 시간 약 1 분

  • WordPress
  • 페이지
  • 메뉴
  • 블로그
  • 연락처폼
  • Contact Form 7

강의 소개

홈·소개·서비스·블로그·연락처 등 사이트에 필요한 페이지를 만들고, 내비게이션 메뉴와 Contact Form 7로 연락처 폼을 구성합니다.

사이트 페이지 구조 예시#

Diagram · Mermaid

필수 페이지 만들기#

Text
페이지 > 새로 추가

권장 페이지 목록:
- 홈 (Home)
- 소개 (About)
- 서비스 (Services)
- 블로그 (Blog) — 글 목록 자동 표시
- 연락처 (Contact)
- 개인정보처리방침 (Privacy Policy)
- 이용약관 (Terms of Service)

홈 페이지로 지정하기:

Text
설정 > 읽기
→ 첫 페이지 표시: 정적인 페이지
→ 첫 페이지: 홈
→ 글 페이지: 블로그
→ 저장

내비게이션 메뉴 구성#

Text
외모 > 메뉴

1. 메뉴 이름: 메인 메뉴
2. 메뉴에 추가:
   - 페이지: 홈, 소개, 서비스, 블로그, 연락처
   - 사용자 링크: 외부 URL 추가 가능
3. 메뉴 구조 (드래그로 순서/계층 조정):
   홈
   소개
   서비스
     └ 서비스 A    (하위 메뉴)
     └ 서비스 B
   블로그
   연락처
4. 메뉴 위치: 기본 메뉴 ☑ → 메뉴 저장

블로그 글 작성#

Text
글 > 새로 추가

구텐베르크 에디터 주요 블록:
  /paragraph  — 본문 텍스트
  /heading    — 제목 (H2~H6)
  /image      — 이미지
  /list       — 목록
  /quote      — 인용구
  /code       — 코드 블록
  /table      — 표
  /button     — 버튼
  /group      — 그룹 컨테이너

오른쪽 패널:
  카테고리   : 주제별 분류 (URL에 영향)
  태그       : 키워드
  특성 이미지: 썸네일 (1200×630px 권장)
  슬러그     : URL 경로 (한글 금지, 영문·하이픈만)

카테고리 & 태그 관리#

Text
글 > 카테고리
→ 새 카테고리 이름: 마케팅 팁
→ 슬러그: marketing-tips  (영문으로)
→ 설명: 검색 결과 페이지에 표시
→ 새 카테고리 추가

카테고리 URL 예시:
https://yourdomain.com/category/marketing-tips/

태그 URL 예시:
https://yourdomain.com/tag/seo/

Contact Form 7 — 연락처 폼#

Text
플러그인 > 새로 추가 > "Contact Form 7" 설치 및 활성화
→ 문의 > 새로 추가

기본 폼 구성#

HTML
<!-- 폼 탭 -->
<label>이름 (필수)
  [text* your-name placeholder "홍길동"]
</label>

<label>이메일 (필수)
  [email* your-email placeholder "example@email.com"]
</label>

<label>전화번호
  [tel your-tel placeholder "010-0000-0000"]
</label>

<label>문의 유형
  [select your-subject "서비스 문의" "견적 요청" "기타"]
</label>

<label>내용 (필수)
  [textarea* your-message placeholder "문의 내용을 입력해주세요" rows:6]
</label>

[submit "문의 보내기"]

메일 탭 설정#

Text
받는 사람: admin@yourdomain.com
제목: [your-subject] — [your-name]님의 문의
본문:
이름: [your-name]
이메일: [your-email]
전화: [your-tel]
문의 유형: [your-subject]

내용:
[your-message]

---
발송 IP: [_remote_ip]
발송 시각: [_date] [_time]

연락처 페이지에 폼 삽입#

Text
페이지 > 연락처 > 편집
→ 구텐베르크: 블록 추가 > Shortcode
→ [contact-form-7 id="123" title="Contact form 1"]

또는 Elementor: Contact Form 7 위젯 검색 후 추가

위젯 설정#

Text
외모 > 위젯

사이드바 위젯 예시:
  - 검색
  - 최근 글 (5개)
  - 카테고리
  - 태그 클라우드

푸터 위젯 (열 1):
  - 텍스트: 회사 소개 + 로고 이미지

푸터 위젯 (열 2):
  - 내비게이션 메뉴: 빠른 링크

푸터 위젯 (열 3):
  - 텍스트: 주소, 전화번호, 이메일

댓글 설정#

Text
설정 > 토론

권장 설정:
☑ 사람들이 새 글에 댓글을 남길 수 있도록 허용
☑ 댓글 작성자는 이름과 이메일을 남겨야 합니다
☑ 댓글이 게시되기 전에 반드시 수동 승인
☑ 스팸 방지: Akismet Anti-Spam 플러그인 설치

정리#

기능방법
홈 페이지 지정설정 > 읽기 > 정적 페이지
메뉴 구성외모 > 메뉴
블로그 글 작성글 > 새로 추가
연락처 폼Contact Form 7 플러그인
사이드바 위젯외모 > 위젯

다음 편에서는 SEO & 성능 최적화 — Yoast SEO, 캐싱, 이미지 최적화로 빠르고 검색에 잘 걸리는 사이트를 만드는 방법을 배웁니다.

Follow · Ask · Work

이 글이 도움이 됐다면

짧은 작업 기록과 데모는 인스타그램에 올립니다. 만들고 싶은 것이 있다면 프로젝트 의뢰나 협업 제안도 편하게 보내 주세요.

글쓴이

파란여우

직접 만든 AI 앱·제품의 개발·배포를 공개하는 실전형 테크 크리에이터

파란여우 소개 Instagram @bluefox._.hi

이어서 보기

만들고 싶은 것이 있다면 프로젝트 의뢰로 알려 주세요.