oksambari

#15-5. 글(post) 상세 페이지 템플릿 만들기 - Vogue 워드프레스 사이트 따라 만들기

2025-04-19T11:56:10Z

글이 나열된 목록에서 하나를 클릭했을 때 열리는 글의 상세 페이지 템플릿을 만들 차례입니다. 15-4에서 카테고리들의 목록 화면을 템플릿화 해서 알아서 열리게 했던 것처럼, 글(post)도 템플릿을 통해 DB에 있는 내용이 불러와져서 화면에 표시가 됩니다. 완성된 모습을 먼저 보면 이렇습니다. 이번 글에는 칼럼을 반응형 화면 사이즈에 맞게 크기 조정을

#15-4. 카테고리 템플릿 만들기 - Vogue 워드프레스 사이트 따라 만들기

2024-09-11T09:58:08Z

먼저, 페이지로 글들을 모아 보여주는 것과, 워드프레스의 템플릿 구조를 활용하여 글들을 표시하는 차이부터 설명을 해 보겠습니다. 참고한 V 사이트의 경우 글들을 모아 보여주는 방법으로 '페이지(page)'를 활용했습니다. 하위 카테고리의 글들도 마찬가지로 페이지로 제작을 한 것으로 확인됩니다. (body 태그의 class명으로 확인) 즉, 모든 목록들을

#15-3. 카테고리 상위 페이지 만들기 - Vogue 워드프레스 사이트 따라 만들기

2024-09-10T10:13:55Z

참고 사이트의 콘텐츠들은 헤더에 있는 내비게이션 메뉴들과 같이 총 5가지로 나뉘어 있습니다. 메뉴 중 하나(예:Fashion)를 클릭하면 그 주제의 모든 글을 조금씩 모아 보여주는 페이지가 나오게 됩니다. 타이틀 아래에는 큰 주제 안의 세부 카테고리 링크들이 표시가 되어 한 번 더 원하는 분류의 글들만 모아보기가 가능하도록 해 놓았습니다. 이걸 워드프레스

#15-2. 메인(main) 페이지 만들기 (2) - Vogue 워드프레스 사이트 따라 만들기

2024-09-10T04:22:51Z

지난 글(#15-1)로 여기까지 완성이 됐습니다. 만들었던 그리드를 활용(복사)하여 남은 페이지 구성 방법도 소개해 보겠습니다. 1. 캐러셀 글 목록 레이아웃 만들기 pc 화면을 기준으로 한 번에 총 4개의 글이 보이고, 화살표를 누르면 좌우로 넘어가는 캐러셀 형태의 구조입니다. 사용된 레이아웃은 바로 위쪽의 4개짜리 레이아웃과 같은데, 단 모바일

#15-2. 메인(main) 페이지 만들기 (1) - Vogue 워드프레스 사이트 따라 만들기

2024-09-09T14:30:35Z

참고 사이트의 메인 페이지에는 크게 아래와 같은 목록 리스트 디자인이 존재합니다. 1. 사진을 배경으로 그 위로 카테고리, 작성일, 제목이 표시되는 카드 형태 2. 사진, 카테고리, 제목, 작성일, 작성자가 순서대로 표시되는 형태 크게 두 종류의 것에서 가로 세율의 이미지 비율이 달라진다던지, 텍스트의 정렬 및 글자 사이즈가 달라지는 정도의 변화만 있습

#15-1. 사이트 헤더, 푸터 만들기 - Vogue 워드프레스 사이트 따라 만들기

2024-09-09T00:37:38Z

참고 사이트의 헤더를 먼저 확인해 보겠습니다. 두 가지 모양의 헤더가 있는데, 하나는 메인 페이지에서만 표시되는 로고가 가운데 있는 헤더이고, 그 외 나머지 페이지나 목록 템플릿 페이지에서는 로고가 왼쪽에 있는 헤더입니다. 즉, 헤더를 2개 준비를 해야 합니다. 다음은 푸터입니다. 안에 있는 콘텐츠 영역 위아래로 공간이 있고, 그 안쪽에는 이미지와 메뉴

#15-0. 리뉴얼된 Vogue 따라 만들기 - 워드프레스 사이트 따라 만들기

2024-09-08T08:46:13Z

지난번 보그 온라인 사이트를 따라 만들기를 해 본 후 디자인이 리뉴얼이 되었네요. 새 사이트는 1600px의 넓어진 콘텐츠 폭과, 심플한 디자인의 목록들이 각이 딱 잡힌 모습으로 바뀐 것 같습니다. 각이 딱 잡혀 있다는 느낌이 왜 드나 했더니, 전체 목록들에서 아이템들의 좌우 간격은 모두 30px로 맞춰져 있었습니다. 본문의 폰트도 Pretendard로 최

풀스크린 검색폼 & 메뉴 만들기 - IMPREZA 테마로 워드프레스 웹사이트 만들기

2024-08-25T15:11:40Z

신문 사이트들을 둘러보다가 따라 만들기를 하면 좋을 구조를 하나 발견했습니다. 바로 검색폼이 있는 풀스크린 메뉴인데, 이것도 사이트에 따라 종종 구현이 필요한 구조라, 이참에 wpcomponent 모음 사이트를 이용해서 한 번 미리 제작을 해 봤습니다. 먼저, 이런 구조를 만들 때 해야 하는 큰 흐름을 요약해 봅니다. 1. 헤더에 아이콘 버튼을 만

워드프레스 왜 써? - 안전하게 내 콘텐츠를 모아 놓을 수 있으니까

2024-07-22T10:57:59Z

제가 워드프레스를 소개할 때 하는 얘기 중에 하나는 바로, 내 콘텐츠를 한 곳에 안전하게 모아 놓을 수 있다는 점입니다. 워드프레스 사이트에 만들어 놓은 콘텐츠들은 언제든 내가 관리할 수 있고, 백업도 받을 수 있습니다. 웹 호스팅 서비스가 집이라 하면, 거기 들어간 모든 내 살림은 다 내 거라는 거죠. 이게 너무나 당연한 얘기처럼 들릴 수 있지만, 저는

게시글들만 검색하는 폼 추가하기 - 워드프레스 & 게시판 #4

2024-08-25T15:10:43Z

이전에 워드프레스의 기본 포스트 타입을 이용한 게시판 운영에 대한 얘기까지 정리를 해 봤었습니다. https://brunch.co.kr/@oksambari/118 글을 작성하는 방법과 보통의 게시판처럼 보이는 부분까지 구성을 했다면, 여기에 검색 기능까지 들어가면 더 좋겠지요. 워드프레스의 개발 방식들을 활용해서 콘텐츠들이 작성이 됐기 때문에 검색 또한

서브 메뉴가 있는 브레드크럼(현재 위치 표시) 만들기 - 워드프레스용 화면 요소 만들기

2024-08-25T15:08:53Z

웹사이트에서 브레드크럼(Breadcrumbs)은 어느 동화책에서 나온 얘기처럼 지나온 길을 표시해 주는 용도로 사용됩니다. 이를 통해 방문자는 현재 페이지가 어느 분류에 속해 있는지도 확인할 수 있고, 상위 페이지로 바로 이동할 수 있는 방법도 얻을 수 있습니다. 여기에 더하여 좀 더 다양한 콘텐츠를 가진 사이트의 경우, 브레드크럼에 서브 메뉴 구조를

GSAP 적용을 위한 워드프레스 플러그인 - 워드프레스 사이트에 GSAP 애니메이션 적용하기

2024-08-25T15:07:46Z

지난번 gsap를 한 번 소개하는 글을 작성해 봤었는데, 혹 적용 방법이 어려워 보여 아직 시도를 못 해 보셨다면, 간단한 플러그인을 설치해서 사이트에 애니메이션을 적용하는 방법을 이용해 보세요. > 지난 글 참고 https://brunch.co.kr/@oksambari/105 gsap가 왜 좋은지는 구글 검색을 해 보면 다양한 가이드나 소개 내용들이

국내형(?) 메가메뉴 만들기 - IMPREZA 테마로 워드프레스 웹사이트 만들기

2024-08-25T15:06:57Z

메가 메뉴는 웹사이트에서 일반적인 드롭다운 메뉴보다 훨씬 큰, 여러 가지 하위 카테고리나 항목들을 한 번에 표시하는 데 있어 매우 효과적인 메뉴입니다. 구글에서 메가 메뉴를 한 번 검색해 봤습니다. 그런데, 국내 사이트 구축 시 원하는 메가 메뉴란 상위 메뉴마다 다른 주제들로 드롭다운 내용을 구성하는 위 검색 내용과 같은 방식이 아니라, 한 번에 전체

사이트에 로딩 화면(Preloader)을 추가하는 방법 - 워드프레스 활용 이야기

2024-08-25T15:06:25Z

사이트 주소를 열었을 때 각 화면 요소가 로딩이 되면서 제자리를 찾는 모습을 보여주는 대신 html과 css, javascript가 모두 다 동작을 하여 준비가 완벽히 끝난 모습을 방문자에게 보여주고 싶을 때 페이지 위에 잠시 로딩 화면을 보여주면 좋습니다. 또는 페이지의 특성상 부득이 약간의 로딩이 되는 시간이 필요한 경우 화면에 빈 페이지가 나오는 것보

사이트 백업, 복구, 이전, 버전 관리 쉽게 하는 방법 - 워드프레스 활용 이야기

2023-11-20T23:45:05Z

워드프레스 사이트를 업데이트를 하기 전 꼭 해야 하는 과정이 있습니다. 바로 백업! 워드프레스 마이너 업데이트(a.b.c 세 번째 c의 버전 변화)가 아닌 경우에는 테마나 플러그인까지 이어서 업데이트를 전체적으로 해야 할 경우도 있기에 반드시 백업을 진행한 다음 업데이트를 하고 있습니다. (※ 이용하는 호스팅의 서비스 중에 일별 백업 옵션이 있는 경우 마

워드프레스 & 게시판. #3 - IMPREZA 테마로 워드프레스 웹사이트 만들기

2024-08-25T15:05:30Z

리스트만 게시판 모양이 아니라 방문자나 회원이 프런트앤드에서 글을 작성할 수 있는 방법은 없나? 흔히 말하는 게시판, 말 그대로 방문자나 회원도 글을 쓰고 답변도 받고 하는 게시판은 그럼 워드프레스의 기본 구조로 만들 수 없을까라는 아쉬움이 있어서 저는 이렇게 해결을 했었습니다. 이전에 사용했던 방법으로는 'caldera forms'라는 플러그인

사이트 오른쪽에 고정된 버튼, 폼 추가하기 - 워드프레스 사이트 셀프 수정하기

2023-11-13T03:47:48Z

사이트 한쪽에 떠있는(스크롤해도 고정) 버튼이나 구조를 넣고자 할 때 관련 플러그인을 설치해서 적용할 수도 있지만, 구조나 원리만 알면 셀프로 적용할 수 있습니다. 화면에 떠 있는 요소를 사이트에 추가하려면 어떤 게 필요할까요? 1. html 구조 2. css 스타일 정의 3. js 동작 체크 및 제어 이 세 가지 조합이면 어떤 테마에도 떠 있는 요

워드프레스 사이트에 대한 생각 정리 - 워드프레스 기본 사용 방법

2024-02-06T22:48:00Z

워드프레스로 사이트를 제작하던 일을 한 번 정리해 봐야겠다는 생각이 들었습니다. (올해 초에 작성하던 글을 이제야 다시 꺼내 봅니다.) 워드프레스의 변화 워드프레스를 접했던 건 Head First 시리즈 중 PHP&MySQL 책 내용 말미에 CMS로서 이런 툴이 있다는 소개글이 있어 사이트를 들어가 본 때였던 것으로 기억합니다. 워드프레스 사이트 제작

#14-4. 글(post) 상세 페이지 템플릿 만들기 - 워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들

2024-08-25T15:03:47Z

글의 상세 페이지가 표시되는 템플릿은 워드프레스에서는 테마 폴더 안에 single.php 파일을 만들어 준비합니다. 목록에서 글의 사진이나, 제목을 클릭하면 글의 내용을 볼 수 있는 상세 페이지로 이동이 되는데 한 번 열어 보겠습니다. 딱 편집기에서 작성한 글 내용만 나오게 되네요. 참고용 템플릿 사이트를 통해 원하는 디자인의 구조도 같이 확인해 봅니다.

#14-3. 블로그 홈, 카테고리별 목록 템플릿 만들기 - 워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들

2024-08-25T15:03:15Z

1. 블로그 홈(모든 글을 표시하는 곳) 만들기 모든 글이 최신 글부터 순서대로 표시되면 되는 블로그 홈(All articles)은 어떻게 만들어야 할까요? 워드프레스에서는 이렇게 설명하고 있습니다. 워드프레스 사이트에서 홈페이지를 지정하지 않으면 최신 글 목록이 메인에 표시됩니다. 이때, 테마의 파일들 중에 home.php 파일이 있다면 이걸 통해서