Up next in 10
애드센스 RPM 2배 높아지는 워드프레스 카테고리 메뉴바 만들기! (승인 후 본격 홈페이지로 변신하기)
12K views
Jun 18, 2024
애드센스 승인이 되신 분들께 아주 효과적인 메뉴바 꾸미기 입니다. 자신이 이미 애드센스 승인을 받았다면 꼭 적용해보세요! * 주의: 기본 올백 테마 사용 중이며 애드센스 승인 받기 전이신 분들은 기본 올백 테마로 승인 받으시는게 좋습니다. 애드센스 승인 쉽게 받기 참고자료: 1. https://wplaybook.com/how-to-get-approved-adsense/ 2. https://wplaybook.com/how-to-get-adsense-approval-with-ai-writing/ 만약 자신이 애드센스 승인 전이지만, 미리 세팅을 하고 싶은 경우, 카테고리를 최대 2개로 제한, 각 카테고리 별 글 개수 8개 이상 작성하셔야 합니다.
View Video Transcript
0:00
아 좋습니다 이렇게 해주셔야지 되게 이쁘네요 그죠
0:04
오케이 굿 이쁜데요? 그죠? 이쁘죠? 지금 보시면은 저희 코리안 플레이북이라고 하는 것�
0:16
이렇게 왼쪽 위에 로고가 있고 오른쪽에 홈, 블로그, 어바웃 이렇게 있습니다 근데 이 워드프레스를 어느 정도 여러분이 익숙해졌으니�
0:27
글 개념, 포스트 개념이랑 페이지 개념은 아시죠? 포스트라고 하는 것은 이 블로그를 눌렀을 �
0:33
보여지는 글들, 그런 것들을 우리가 포스트라고 하고 그 다음에 페이지라고 하는 것�
0:38
이 About 페이지나 홈페이지라고 하는 이런 것들이 이제 페이지 개념이다. 그래서 페이지랑 포스트가 있어요
0:46
그 중에서 우리는 문의 페이지, Contact 페이지라고 하는 것을 만들 거고 그 다음에 그 전에 로고 위치를 좀 조정을 할 겁니다
0:54
이 로고 위치나 이런 거에 대해서 조정을 할 때는 항상 사용자 정의하기로 들어가는 거예요
0:59
홈페이지 설정 부분으로 그래서 여기 한번 들어가 보시기 바랍니다. 자 그러면 여기에서 왼쪽에 여러 가지 메뉴들이 있는�
1:08
사실 이것보다 이런 페이지에 어떤 것을 조정하고 싶을 때는 그 오른쪽 페이지 화면에다가 마우스를 이렇게 갖다 대�
1:15
이렇게 연필 표시가 나와요. 그래서 그거에 관련한 설정하는 메뉴를 왼쪽에다가 바로바로 띄울 수가 있습니다
1:23
근데 저희는 이 메뉴 위치나 이런 걸 조정하고 싶기 때문에 여기 있는 연필 이거를 클릭을 할 건데요
1:29
이거 한번 클릭을 해보도록 하겠습니다. 왼쪽 거 여기에다가 제가 마우스를 댔는데 연필이 두 개가 생겼죠
1:35
하나는 로고에 대한 게 연필, 앞에 아래 있는 연필이고 그 다음에 뒤쪽에 있는 거를 제가 눌러보�
1:43
이 메인 로우라고 하는 게 떠 있습니다. 그리고 이 밑에가 또 이런 식으로 화면이 바뀌었네요
1:50
이 화면 잘 보시고 띄우시고 있으시면 좋겠네요. 그래서 로고에 대한 거는 여기 사이트 아이덴티티라고 뜨�
1:59
그 다음에 여기 뒤쪽에 있는 연필을 누르면 메인 로우라고 하는 실제로 우리가 보고 있는 이 메뉴의 가장 중간을 메인 로우라고 해요
2:08
그래서 이 홈페이지 상단은 총 세 줄로 보이지는 않지만 세 줄로 구성이 되어 있습니다
2:14
그걸 어떻게 알 수 있냐? 이 밑에 이렇게 세 줄 있죠. 한 줄, 그 다음에 두 줄, 세 줄
2:19
그 중에서 우리는 메인 로우에 왼쪽에다가 지금 로고를 놓은 거고 그 다음에 오른쪽에다가 프라이머리 내비게이션을 이렇게 놓은 거예요
2:29
여기까지 되셨죠? 이 화면 보고 계시죠? 그러면은 이거 로고를 가운데로 드래그해 놓도록 하겠습니다
2:35
그리고 이 프라이머리 내비게이션이라고 하는 거 얘를 이 밑에다가 끌어놓도록 할게요. 이거 되셨으면 되셨다고 저한테 말씀해 주시�
2:45
제가 진행하기 좀 편할 것 같습니다. 그리고 한번 공개 눌러보도록 하겠습니다. 오케이 케빈님 잘 되셨�
2:52
존님도 잘 하셨고 좋습니다 좋습니다 다 하셨네요 자 그러면은 현재 코리안 플레이북이라고 하는 거 가운데로 가�
3:00
우리가 원하는 이런 메뉴들이 아래로 내려온 거겠죠 근데 여기에다가 저희가 우리의 카테고리들�
3:07
넣고 싶은 거예요 그걸 하려면 어떻게 하면 되냐 프라이머리 내비게이션이라고 하는 것을 수정을 하�
3:13
자동으로 여기에 반영이 되겠죠 자 이렇게 갔습니다 여기 지금 이렇게 된 상태에서 다시 대시보드로 한번 넘어가 보겠습니다
3:22
대시보드에서 메뉴를 수정할 때는 어디 있었나요? 그게 메뉴가 디자인에 있었죠. 디자인에서 메뉴, 디자인, 메뉴, 이거 클릭을 해�
3:35
메뉴를 저희가 수정하는 페이지로 한번 넘어가 보도록 하겠습니다. 이 메뉴 화면으로 가보면 편집을 할 수 있는 화면이다
3:43
메뉴 편집. 그리고 현재 어떤 메뉴를 편집을 할 것인가 내가 지금 선택을 할 수가 있습니다
3:50
메인 메뉴가 지금 선택이 된 게 아니라 저 같은 경우에는 블로그 카테고리라고 하는 이름의 메뉴가 선택이 되어 있는 거예요
3:58
근데 앞에서 우리가 이 화면에 가운데 최상단에다가 놓은 메뉴 이름은 뭐냐면 프라이머리 내비게이션이라고 하는 거였죠
4:06
그래서 지금 보면은 메인 메뉴가 현재 프라이머리나 모바일 이렇게 되어 있는 걸 확인할 수 있네요
4:12
메인 메뉴 한번 눌러볼게요. 선택을 눌러보도록 하겠습니다. 그러면 화면에 이렇게 지금 현재 메인 메뉴 아까 봤던 홈 블로�
4:21
어바웃이 이렇게 들어있다 라고 하는 걸 알 수가 있네요. 여기까지 되셨으면 잘 됐다. 따봉 표시 눌러주시�
4:44
그러니까 이 메뉴를 수정하는 과정이 어떻게 되냐면 이 오른쪽이 내가 보여주고 싶은 거�
4:50
왼쪽에 있는 것은 내가 보여줄 수 있는 겁니다. 그래서 여기 있는 것을 찾아다�
4:54
이 왼쪽에다가 넣을 수가 있어요. 그래서 우리는 카테고리를 넣고 싶으니까 지금 카테고리가 이렇�
5:00
지금 저는 topic1 이렇게 밖에 설정이 안되어 있네요. 그래서 저는 topic1을 모두보기 한번 보도록 하겠습니다
5:07
아 보니까는 저는 현재 topic1과 topic2 이 두개가 지금 이 워드프레스 korea 플레이북 이라고 하는 워프에는 있다
5:16
그래서 메뉴 추가 이렇게 눌러보도록 하겠습니다. 그러면 topic1 topic2 이렇게 뜨네요. 그리고 이거를 내가 원하는 순서대로 드래그 하셔�
5:27
끌어놓을 수가 있어요. 그래서 저는 홈 다음에다가 토픽1 놓고 그 다음에 토픽2 이렇게 놓도록 하겠습니다
5:35
이거를 자기가 원하는 식으로 배치를 하신 다음에 저장을 하면 되는데 또 하나 좀 알�
5:43
좋은 것들이 메뉴 중에서는 하위 메뉴, 상위 메뉴 상위 메뉴, 하위 메뉴 이런 개념이 있잖아요
5:50
그래서 사실 블로그 안에 토픽1과 토픽2가 들어가 있는 상태니까 이런 식으로 배치를 하셔도 됩니다
5:57
살짝 오른쪽으로 끌어다 놓으면은 블로그 하위에 토픽1, 토픽2 이렇게 들어가는데 일단 저희는 블로그에 토픽1과 토픽2
6:07
이렇게만 설정을 해놓고 그 다음에 블로그는 아예 지워버릴 거예요. 이 블로그 지우는 건 어떻게 하�
6:13
화살표 토글키 누르시면은 이거에 대한 레이블은 어떤 식으로 보여질 것인가를 설정하는 거�
6:22
그 다음에 원본이라고 하는 것은 그 메뉴를 눌렀을 때 어디로 이동할 수 있는가�
6:27
지금 어디에 걸려져 있는가 이 메뉴가 어디에 링크가 되어 있는가를 나타내는 겁니다
6:32
그래서 저는 제거 버튼 눌러서 이 블로그 메뉴는 그냥 지워버릴게요. 그래서 저는 지울 거�
6:38
그 다음에 이제 토픽1이라고 하는 것도 영어로 하면 조금 그러니까 주제1 그리고 토픽2도 주제2
6:49
이런 식으로 설정을 해놓도록 하겠습니다. 그래서 총 저는 지금 현재 보여지는 거�
6:55
홈, 주제1, 주제2, About까지 이렇게 보여지는 거 해서 메뉴 저장 눌러볼게요. 여기까지 되셨나요
7:04
오케이 좋습니다. 그러면 이제 항상 우리가 뭔가를 변경을 했다. 그럼 뭘 해야죠
7:12
오른쪽 위에 나이 스피드 가셔서 이 캐시보드 제거라고 하는 것을 눌러주셔야지 됩니다
7:18
이게 굳이 안 눌러도 되지만은 눌러주는 습관을 길러 두시면 좋아요. 왜냐하면 나중에 내가 바꿨는�
7:27
캐시가 반영이 안 돼가지고 안 바뀐 경우도 있을 거고 실제로 내가 설정을 잘못해가지고 안 바뀌는 경우가 있는�
7:35
이거를 습관이 안 돼 있으면 그것들과 좀 헷갈려서 시간을 많이 소개하는 경우가 있더라고요
7:41
그래서 놓고 가보시면 이렇게 홈, 주제1, 주제2, 어바웃까지 이렇게 잘 들어가 있는 걸 확인할 수 있는 거예요
7:49
여기까지 되셨죠? 그런데 보면은 조금 글씨체나 이런 게 조금 더 두꺼웠으면 좋겠다라는 생각이 드네요
7:56
그래서 다시 사용자 정의하기로 가보도록 하겠습니다. 알려드리는 김에 아예 이 띠 별로 이렇게 설정하는 걸 좀 알려드릴게요
8:04
지금 보면은 아까는 로고와 그 다음에 여기 메인 로고에 관련한 설정이 연필 표시가 두 개 겹쳐져 있었는�
8:12
따로따로 뜨는 걸 확인할 수 있네요. 그리고 또 하나는 밑으로 내린 세 번�
8:18
얘도 딱 갖다 대니까 여기에서 설정할 수 있게끔 이 토글이 딱 뜨는 걸 확인할 수 있�
8:24
이걸 눌러보면 얘가 지금 세 번째 바텀 로우에 관련한 설정이 지금 보면 레이아웃을 내가 Full Width라고 하는 것�
8:34
여기서부터 Full Width라고 하는 것은 이 화면 전체를 다 쓸 것인가 아니면 스탠다드는 아마 여기 이 정도일 거예�
8:43
패딩이 살짝 살짝 여기 들어가 있는 상태였던 것 같습니다 컨테인도 약간 마찬가지�
8:49
그래서 스탠다드로 놀 건지 풀 위드로 놀 건지 이런 것도 공간이 자기의 카테고리가 몇 개 있느냐에 따라�
8:56
한번 해보세요 해봤다가 퍼블리시 해봤다가 확인하고 그런 과정이 조금 힘들으실 겁니다 시간이 좀 필요하실 거�
9:04
저는 일단 스탠다드로 놀 테고요 90 90
9:20
그러면 조금 더 멀어졌네요 지금 보니까 90은 조금 더 큰 것 같기도 하고 한 70 이것도 여러분의 입맛대로 보시면 되고 그 다음에 디자인을 한번 가볼게요 디자�
9:35
디자인 보면은 Bottom row에 background라고 지금 되어 있습니다 즉, 이 뒤쪽에 배경을 저희가 바꿀 수가 있는 건�
9:43
배경 색을 일단은 이 색으로 바꿔 볼까요? 원래 저 theme의 두 번째 색깔을 일단 바꿔놨습니�
9:51
이렇게 바꾸면 문제가 생기긴 했죠 뭐냐면은 색깔 메뉴들의 글자 색이 마음에 안 드네�
9:58
근데 일단 여기는 저희가 Bottom row에 대한 설정이니까 이렇게만 해 놓도록 하겠습니�
10:03
여기까지 되셨나요? 그래서 일단 공개해놓고 그 다음에 안에 있는 메뉴들에 대한 것�
10:11
저희가 바꿔야 되니까 이 연필 들어가서 프라이머리 내비게이션에 관련한 설정으로 들어가 보도록 하겠습니다
10:20
이 내비게이션에 대해서 일단 가장 시급한 거는 색깔이 흰색으로 좀 바꿔야 될 것 같죠
10:27
그래서 이거는 지금 보면 여기 내비게이션 컬러라고 하는 이 부분이 색깔과 관련한 설정을 하는 부분인�
10:36
지금 보시면 이것도 알아두시면 좋아요. 모든 색깔 그리고 모든 WordPress 오브젝트의 색깔�
10:44
세 가지가 필요해요. 뭐가 왜 세 가지가 필요하냐? 그냥 봤을 때, 두 번째는 마우스를 올렸을 때
10:51
세 번째는 선택이 됐을 때. 지금 보면 그냥 우리가 이 메뉴를 현재 보고 있을 �
10:58
색깔은 어떻게 되어 있냐? 이 색깔이에요. 이 색깔로 지금 설정이 되어있는 겁니다. 그리�
11:04
현재 선택이 되어져 있는 색깔은 이 색깔. 왜냐? 지금 현재 홈페이지를 보고 있으니�
11:10
홈이라고 하는 이 페이지가 활성화가 되어있는 상태고 나머지 주제1, 주제2 그 다음에 about이라고 하는 것�
11:17
아무런 선택이나 이런게 마우스가 올려져 있지 않은 기본 상태가 됩니다. 기본 상태�
11:23
색깔 설정이 지금 이렇게 되어있는 첫번째 원. 그래서 나는 기본적으로 봤을 �
11:29
이게 지금 파란색이니까 이걸 흰색으로 바꿔주고 싶다. 라고 하면 이거를 가서 가장 마지막에 있는 흰색으로 바꿔주면 됩니다
11:39
이해되시죠? 그래서 기본적으로 흰색으로 보여지는 것까지 설정이 되어 있고 그 다음에 이 두 번째 색깔이 쿠버 마우스를 올렸을 때의 색깔입니다
11:50
그거는 어떻게 확인할 수 있냐. 저희가 진짜로 마우스를 올려보면 이렇게 이 색깔로 지금 바뀌게 되는 거죠
11:57
요거는 여러분이 어떤 식으로 지정하느냐에 따라서 어떤 식으로 지정하느냐에 따라서 뭐 달라질 때지�
12:04
조금 더 튀는 색으로 지정해 주면 살짝 좋습니다 그래서 뭐 여기에 있는 색깔이 아니더라�
12:12
여기 팔레트에 있는 걸로 제가 이렇게 한번 설정을 해볼게요 그럼 조금 더 이제 튀는 색깔이 됐�
12:20
그 다음에 마지막으로 액티브 컬러 내가 선택이 되어 있는 것 같은 경우에�
12:26
그거는 뭐 어떻게 하시든 상관이 없을 것 같습니다 요런식으로 해놓으면 뭐 선택이 됐다는 느낌일 수도 있�
12:33
조금 더 튀게 만드시고 싶으면 이렇게 요정도 해놓으면 좋을 것 같아요 그래서 이제 후버 했을 때 그리고 선택이 되었을 �
12:42
그냥 기본 색깔 3개가 다 좀 설정이 잘 됐네요 여기까지 괜찮으시죠? 자 그리고 만약에 여러분이 여�
12:51
바텀 로우에 대한 어떤 색깔을 내가 설정을 했는데 가운데 어떤 색깔이 튀는 색깔로 다른 색깔로 설정이 되어 있다 라고 하면은 여기 있는 내비게이션 백그라운드 컬러 라고 하는 걸 똑같�
13:02
이제 설정을 해주시면 됩니다 그 색깔을 맞춰 주시면 되요 그래서 그거는 일단 저는 안보이니까 넘어가는�
13:10
여기 색깔이 달라지시는 분들은 흰색으로 만약에 남아있는 분들은 여기를 조정을 해주시면 되겠습니다 똑같은 색깔을 설정해 주시면 되겠�
13:19
자 그 다음에 요거 폰트가 조금 마음에 안 들죠 조금 더 컸으면 좋겠는데 내비게이션 이니까 잘 보이게끔 좀 크게 만들어 주�
13:28
위해서는 이 내비게이션 폰트 부분을 손을 대도록 하겠습니다 요것도 보면은 폰트가 눌러 보시면 첫 번째 거는 어떤 폰트를 내가 쓸 것인�
13:39
600 700 600
13:57
700하면 약간 뚱뚱해지는 느낌 그래서 저는 일단 600으로 설정을 해놓도록 하겠습니다 근데 이거는 자기가 어떤 폰�
14:05
만약에 폰트를 커스터마이제이션 했다 아까 웹구단님처럼 커스터마이제이션 했다라고 하면 이것도 같은 내가 설치한 그 폰트 웨이트로 맞춰 주시는 게 좋습니�
14:17
안 그러면은 로딩을 할 때 만약에 내가 폰트를 700 폰트 웨이트로 설정을 했는�
14:23
이 타이틀을 600으로 했다라고 하면은 600을 700으로 보여주기 위해서 변환하는 과정이나 이런 시간이 들거든�
14:30
그런 것도 페이지 로딩 속도에 영향을 미칩니다 그래서 그것도 점수에 반영이 되니�
14:35
내가 어떤 폰트를 깔았는지에 따라서 달라진다 근데 이거를 시스템으로 설정을 해 놓으신 분들 저 같은 경우에 지금 기본 워플 올백 테마가 시스템으로 Germany
14:47
시스템 폰트로 설정을 해 놓는 이유는 뭐냐면 페이지 로딩을 할 때 폰트라고 하는 거가 엄청 파일이 큰 파일이거든�
14:56
근데 그 파일을 어딘가에서 불러오거나 다운받거나 그러지 않고 그냥 이 웹페이지를 보는 사람들의 컴퓨터에 깔려있는 걸 그냥 그대로 쓰겠다라고 하는 거예�
15:06
그래서 다운로드를 받지 않고 페이지 로딩이 되기 때문에 페이지 로딩 속도가 되게 빨라집니�
15:13
그래서 그런 것들이 있어서 시스템으로 설정이 돼 있거나 기본 올백 테마로 설정이 돼 있으신 분들�
15:19
600이나 700이나 아무거나 자기가 원하는 대로 해 놓으시면 되겠습니다 그리고 마지막으로 폰트 사이즈 같은 경우에�
15:28
조금 더 키웠으면 좋겠어요 그래서 이거 잘 보셔야 되는 게 현재는 상관이 없지�
15:34
위쪽에 있는 이 세 개 표시 있죠? 이게 PC로 접속했을 때 몇 포인트로 할 것인�
15:39
태블릿으로 접속한 사람들한테는 몇 포인트로 할 것인지 모바일로 들어온 사람한테는 내가 몇으로 보여줄 것인지�
15:47
다 세부 설정을 할 수 있다고 했죠. 그러나 지금 현재는 이 프라이머리 내비게이션이라고 하는 것�
15:54
PC에만 보여집니다. 그거는 어떻게 확인할 수 있냐? 여기 밑에 있는 컨트롤 부분에 보시�
16:00
웹, 태블릿, 모바일 이렇게 돼 있어요. 좀 이따 클릭을 해보시면은 이 프라이머리 내비게이션이 없어져요
16:07
다른 게 지금 떠 있는 상태. 그래서 기본적으로 이 프라이머리 내비게이션은 PC에서만 혹은 태블렛에서만 보여지는 거라�
16:16
저는 이거를 24 정도 이렇게 하면은 좀 잘 보이네요. 4 정도로 해놓고 완료를 공개를 해놓도록 하겠습니다
16:24
KR 플레이북으로 가보면은 저희가 해놓은 게 About 하면 About이 활성화되고 주제 2는 없고 주제 1에 저는 샘플 포스트 이렇게 들어있는�
16:34
여러분은 각각의 카테고리가 포스트가 쭉 보여지는 페이지가 나와야지 되겠죠 잘 되시나요? 이렇게까지 했으면은 여러분의 페이지에 포스팅이 주제별로 쭉쭉 보여지지어야지 됩니�
16:49
아 좋습니다 이렇게 해주셔야지 되게 예쁘네요 그죠? 오케이 굿. 이쁜데요? 이쁘죠? 여기서 저희가 또 할게 있습니다
17:01
뭐냐면은 지금 보면은 이 홈이랑 about 그 다음에 그 요 부분 있잖아요
17:07
요 부분 공간이 조금 늘려 놔야지 얘가 좀 벌어질 것 같거든요. 그래서 그거�
17:14
item spacing 여기 지금 primary navigation의 연필 표시 누르시면은 general section에 item set spacing 이라고 하는게 있습니다
17:24
그래서 요거는 각각의 주제들을 얼만큼씩guy 떨어뜨려 놓을 것인가를 설정을 하는거다 그래서 여기�
17:33
1.7 정도 하면은 조금 더 벌어지는 거죠 그래서 자기가 이제 봐서 좀 괜찮다 싶은 정도로 해놓으시면 되고 그 다음에 이제 스트레치 메�
17:43
라고 하는 것도 눌러보시면은 아예 현재 스탠다드로 이제 했으면 여기 끝에 조금 패딩이 있다고 했잖아�
17:51
패딩 남겨놓고 같은 어떤 스페이싱으로 제가 떨어뜨려 놓고 싶을 때는 이 스트레치 메뉴를 눌러주시면 좋긴 한�
17:59
그게 아니라 가운데로 몰아놓고 메뉴가 좀 적을 경우에는 스페이싱만 조정할 경우에는 이렇게 쓰시면 되겠�
18:06
여기까지 됐고 메뉴 설정하는 것은 끝이 난 것 같습니다 다음 영상에서 만나요
#Skins
# Themes & Wallpapers