Thumbnail
개발 · 프로그래밍 웹 개발
워드프레스 제대로 개발하기 - 클라이언트 편
54명이 수강하고 있어요.

66,000원

지식공유자 : 안형우
총 57개 수업˙총 9시간 30분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 44 공유
중급자를 위해 준비한
[웹 개발] 강의입니다.

워드프레스, 테마도 많고 플러그인도 많습니다. 하지만 내 필요에 딱 맞는 것은 결국 직접 개발을 해야 합니다. 그래서입니다. 이 강의는 워드프레스 개발을 알려 줍니다. 사용법이 아니라 개발을 알려 줍니다. 나에게만 필요한 기능을 개발해야 한다면? 그렇다면 문서를 봐야 합니다. 그런데 영어로 돼 있습니다. 일목요연한 문서도 드뭅니다. 그래서 이 강의가 필요합니다. 어드민 커스터마이징에 이어 클라이언트 커스터마이징을 배워 봅시다.

✍️
이런 걸
배워요!
워드프레스로 웹사이트 만들기
워드프레스 사이트 유지보수
워드프레스 플러그인 늪에서 벗어나기

워드프레스 개발의 세계 💾
클라이언트 커스텀까지 도전해보세요!

수강 전 확인해주세요!

  • “워드프레스 제대로 개발하기” 시리즈는 “어드민편”과 “클라이언트편”으로 구성됩니다.
  • 어드민 편이 파트1에 해당하고 클라이언트 편이 파트2에 해당하지만, 개별 강의로 들어도 학습하시는 데 큰 문제는 없습니다.
  • 어드민 편을 듣지 않고 클라이언트 편을 바로 들으시는 분들을 위해서 “클라이언트 편 Only” 영상들을 추가하고, 연관된 내용이 나오는 어드민 편 강의들을 들을 수 있도록 안내해 두었습니다. 필요한 어드민 편 강의들은 무료로 들으실 수 있습니다.
  • 혹시 개별 강의 수강 중 궁금하신 내용이나 부족한 부분이 있다면 질문/답변 게시판에 남겨주세요.


왜 워드프레스 개발인가요?

워드프레스 개발 강의, 왜 보러 오셨나요? 아마 비슷한 문제의식 때문일 겁니다.
워드프레스, 테마도 많고 플러그인도 많습니다. 하지만 내게 딱 맞는 해결책을 찾기 위해서는 결국 직접 개발을 해야 합니다.

워드프레스 사용법 대신,
“워드프레스 개발”을 알아야 합니다.

워드프레스 사용법은 사실 개발자들이라면 금세 익힐 수 있습니다. 테마 설치? 플러그인 설치? 개발자들이라면 매뉴얼을 볼 필요가 없을 정도로 쉽게 돼 있습니다.

하지만 나에게만 필요한 기능을 개발해야 한다면? 그렇다면 문서를 봐야 합니다. 그런데 영어로 돼 있습니다. 일목요연하지도 않습니다. 그래서 이 강의가 필요합니다.

즉, 이 강의는 워드프레스로 개발을 하는 강의입니다. 사용법이 아니라 진짜 개발을 알려드립니다.


이번 편에서는 클라이언트단 개발을 배웁니다.

관리자 단 개발이 궁금하다면?

워드프레스 제대로 개발하기 - 어드민 편
직접 배우는 워드프레스 어드민 개발

<워드프레스 제대로 개발하기> - 어드민 편에서는 관리자단을 커스터마이징하는 방법을 배웠습니다. 워드프레스라는 CMS가 굉장히 유연해서 여러가지 요구사항을 소화할 수 있다는 것을 느끼셨을 겁니다.

이제 커스터마이징한 내용을 클라이언트단에 표현할 때입니다. 이번 편에서는 바로 그 방법을 배웁니다.

사이드
아이덴티티 및
메뉴 구성

노드 교과서

상세 페이지 및
목록 페이지
구성

인덱스 페이지
구성 및
글 처리 클래스

사이트 아이덴티티, 메뉴 구성

워드프레스는 강력한 클라이언트단 표현 기능을 갖추고 있습니다. 대표적으로 사이트 아이덴티티 표현 기능과 메뉴 구성 기능이 있습니다.

상세 페이지와 목록 구성

커스텀 포스트 타입을 만들고 커스텀 분류를 만들었다면, 주소 표시줄에 해당 글이나 분류를 호출하는 URL을 적어주는 것만으로도 우리가 입력한 데이터를 불러올 수 있습니다. 원하는 대로 표현하려면 어떤 템플릿 파일을 어떤 식으로 준비해야 하는지, 정석대로 배웁니다. 물론 상세 페이지, 목록 페이지 커스터마이징도 얼마든지 가능합니다.

인덱스 페이지 구성

워드프레스는 기본으로는 블로그 툴이지만, 우리는 개발자니까 못할 게 없습니다. 워드프레스의 기본 구성을 따르면서 보통 웹사이트처럼 얼마든지 인덱스 페이지를 꾸밀 수 있습니다.

이를 위해 WP_Query라는 워드프레스의 가장 기본이 되는 글 처리 클래스에 대해서 배웁니다. 수박 겉핥기 식이 아니라 정석대로, 깊이 배웁니다.

기본 사용법만 배우는 게 아닙니다. 우리가 책 정보를 커스텀 필드(post meta)를 이용해서 만들었으니 커스텀 필드를 조건으로 해서 글을 정렬할 수도 있어야겠죠. 커스텀 분류(Taxonomy)도 사용했으니 커스텀 분류(Taxonomy)에 따라 글을 가져오는 방법도 알아야 합니다. 모두 알려드립니다. 마지막으로, SwiperJS와 결합해서 메인 슬라이더를 만드는 방법까지 배웁니다.


워드프레스 개발에 적응할 수 있게 해드립니다.

시리즈로 이어지는 이 강의는 온라인 서점 테마를 바닥부터 새로 만드는 과정입니다.
남의 테마는 이제 그만 고치세요. 우리는 직접 한 땀 한 땀 만듭니다. 기본적인 PHP와 프론트엔드 개발 지식만 있다면 누구든지 따라올 수 있습니다.

제대로 배웁니다. 워드프레스 문서가 가르쳐 주는 정석 그대로.


학습 내용 살펴보기

관리자단에서 로고를 교체할 수 있도록 코딩합니다.

로고를 SVG로 쓰려면 SVG 업로드를 허용해야겠죠? 굳이 플러그인을 사용하지 않고 코딩으로 해결합니다.

워드프레스의 메뉴 기능을 활용해 메인 내비게이션을 만듭니다. 강력한 기능입니다.

상세 화면을 구성하는 방법을 배웁니다.

워드프레스의 템플릿 구조를 익히고 활용법을 배웁니다.

PHP의 기본적 디버깅 방법을 배웁니다.

목록 화면을 구성합니다

첫 화면을 만들며 워드프레스의 기본적인 내부 작동(WP_Query, Loop)을 배웁니다.

첫 화면에 메인 슬라이드를 붙여 봅니다.


누구에게 도움이 되나요?

선수 지식을 확인해주세요!

  • 기본적인 PHP 개발을 할 수 있고, Javascript, MySQL 관련 지식이 있다면 강의를 이해할 수 있습니다.

워드프레스 개발을
제대로 배우고
싶은 분

학습 시간을 아껴
실무에 바로
워드프레스를 쓰고픈 분 

워드프레스 테마를
커스터마이징해서
사이트를 운영하고픈 분

워드프레스로
웹사이트를 만들어야
하는 분

워드프레스 사이트를
유지보수해야
하는 분

워드프레스
클라이언트 개발을
제대로 배우고픈 분

그러면 같이 워드프레스 개발의 세계로 가 봅시다 😀


강의 자료를
확인하세요.

예제 소스코드 - Git Repository

👉 https://github.com/mytory/bookstore

실습하면서 참고할 수 있도록 작업한 모든 코드는 Github에 올려 뒀습니다. 단, 테마 부분만 있는 것이니 워드프레스 코드는 따로 다운로드를 하셔야 합니다. 선호하는 Git 툴을 이용해서 소스를 받아 두고 참고하시면 됩니다.

각 강의별 소스코드 다운로드

각 강의별로 태그를 붙여 두었습니다. 45강이 끝난 직후 소스코드의 Git Tag는 45입니다. 따라서 Git 사용이 익숙하시면 태그로 이동해서 강의가 끝난 시점의 소스코드를 살펴 보시면 됩니다.

익숙하지 않으시면 아래 링크로 들어가서 각 태그의 소스코드 압축 파일을 다운로드하셔도 됩니다.
👉 https://github.com/mytory/bookstore/tags


연관 강의 함께 보기

워드프레스 제대로 개발하기 - 어드민 편
직접 배우는 워드프레스 어드민 개발

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
워드프레스 개발을 제대로 배우고 싶은 사람
워드프레스 학습 시간을 아껴 바로 실무에 쓰고 싶은 사람
워드프레스 테마를 커스터마이징해서 자신의 사이트를 운영하고 싶은 분
워드프레스로 웹사이트를 만들어야 하는 사람
워드프레스 사이트를 유지보수해야 하는 사람
📚
선수 지식,
필요한가요?
기본적인 PHP 개발
기본적인 javascript 지식
기본적인 MySQL 사용

안녕하세요
안형우 입니다.
안형우의 썸네일

웹으로 말하기 블로그 운영.

워드프레스 플러그인 Mytory Markdown, Mytory Markdown for Dropbox 개발자.

커리큘럼 총 57 개 ˙ 9시간 30분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 들어가며
워드프레스 제대로 개발하기 - 클라이언트편 소개 미리보기 06:55 어드민 편 복습 미리보기 05:08
워드프레스 문서 05:07
사용하는 툴 (클라이언트 편 Only)
워드프레스 설치하고 살펴 보기 (클라이언트 편 Only) 01:49
예제 소스 코드 설치하고 살펴 보기 (클라이언트 편 Only) 06:48
예제 소스 코드 살펴 보기 (클라이언트 편 Only) 08:20
액션과 필터의 개념 (클라이언트 편 Only) 01:29
섹션 1. 사이트 아이덴티티 기능 활용
출판사 분류 추가 안내 (클라이언트 편 Only) 02:48
출판사 분류 추가 04:05
커스텀 로고 기능 09:05
svg, hwp 파일 타입 허용하기 1 10:58
svg, hwp 파일 타입 허용하기 2 10:00
섹션 2. 내비게이션 기능 활용
메뉴 기능 활용해 내비게이션 만들기 1 07:40
메뉴 기능 활용해 내비게이션 만들기 2 07:08
메뉴 기능 활용해 내비게이션 만들기 3 10:45
메뉴 기능 활용해 내비게이션 만들기 4 10:22
섹션 3. 상세 화면 구성
상세화면용 표지 불러 오기 1 10:57
상세화면용 표지 불러 오기 2 09:29
post meta 정보에 대한 간단한 설명 (클라이언트 Only) 03:41
post meta 정보 표시하기 1 12:39
post meta 정보 표시하기 2 09:39
taxonomy 정보 표시하기 1 12:33
taxonomy 정보 표시하기 2 14:34
taxonomy 정보 표시하기 3 07:39
섹션 4. 워드프레스 템플릿
대표적인 템플릿 태그들 14:59
템플릿 우선순위(Template Hierarchy) 17:15
이미지 파일 상세 화면 1 10:19
이미지 파일 상세 화면 2 16:06
섹션 5. [팁] PHP 디버깅
디버깅 1 미리보기 09:35
디버깅 2 08:40
디버깅 3 - xdebug 14:25
섹션 6. 책 주제/필자/역자/출판사 목록 화면 구성
목록 화면 기본 구성 13:17
목록에 제목 붙이기 09:36
페이지네이션 13:34
주제, 필자 목록 만들고 설명 붙이기 12:41
섹션 7. 글 목록과 상세 화면 구성
글에 들어간 이미지 스타일 1 07:29
글에 들어간 이미지 스타일 2 11:07
목록에서 특성 이미지 활용 1 08:12
목록에서 특성 이미지 활용 2 09:24
목록에서 특성 이미지 활용 3 16:11
섹션 8. 인덱스 화면 기본
WP_Query란 무엇인가 11:34
WP_Query로 글 가져오기 07:47
Loop 10:33
공지사항과 신간 가져오기 12:37
Loop 내 주요 함수 뜯어 보기 23:56
발행일 기준으로 신간을 가져와 보자 10:20
출판사 분류로 책을 가져와 보자 1 09:04
출판사 분류로 책을 가져와 보자 2 08:21
섹션 9. 메인 슬라이더
메인 슬라이더 만들기 - 기획 04:46
메인 슬라이더 적용하기 - 적용 1 14:32
메인 슬라이더 적용하기 - 적용 2 11:27
메인 슬라이더 적용하기 - 적용 3 13:33
메인 슬라이더 적용하기 - 적용 4 04:38
메인 슬라이더 적용하기 - 적용 5 12:56
메인 슬라이더 적용하기 - 적용 6 11:21
메인 슬라이더 적용하기 - 적용 7 20:24
강의 게시일 : 2021년 08월 03일 (마지막 업데이트일 : 2021년 08월 03일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

66,000원

폴더에 추가 44 공유
지식공유자 : 안형우
총 57개 수업˙총 9시간 30분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스