WordPress워드프레스로 웹사이트 만들기 · 4입문

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

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

사이트 페이지 구조 예시

flowchart TD
    HOME["홈 (/)"]
    ABOUT["소개 (/about)"]
    SERVICE["서비스 (/services)"]
    BLOG["블로그 (/blog)"]
    CONTACT["연락처 (/contact)"]
    POST["블로그 글\n(/blog/post-name)"]
    PRIVACY["개인정보처리방침"]
    TERMS["이용약관"]

    HOME --> ABOUT & SERVICE & BLOG & CONTACT
    BLOG --> POST
    HOME -.->|푸터| PRIVACY & TERMS

필수 페이지 만들기

페이지 > 새로 추가

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

홈 페이지로 지정하기:

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

내비게이션 메뉴 구성

외모 > 메뉴

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

블로그 글 작성

글 > 새로 추가

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

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

카테고리 & 태그 관리

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

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

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

Contact Form 7 — 연락처 폼

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

기본 폼 구성

<!-- 폼 탭 -->
<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 "문의 보내기"]

메일 탭 설정

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

내용:
[your-message]

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

연락처 페이지에 폼 삽입

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

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

위젯 설정

외모 > 위젯

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

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

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

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

댓글 설정

설정 > 토론

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

정리

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

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

궁금한 점이 있으신가요?

협업·의뢰는 아래로, 가벼운 소통은 인스타그램 @bluefox._.hi도 환영이에요.