워드프레스에서 제이쿼리 사용하기

#wordpress #generatePress #JQuery #javascript #자바스크립트 #커스터마이징

포스팅 목차 바로가기

안녕하세요, 배곧동개발자 입니다.

이제야 워드프레스를 시작한 초짜로써, 여러가지 환경을 구축하는게 너무 재미있는거 있죠? 근데 생각보다 기본으로 제공해주는 것으로는 제약이 심했습니다. 특히나 generatePress!

근데 그렇다고 유료결제를 하자니, 내가 개발자인데 굳이? 내가 바꾸면 되지! 라는 생각으로 하나하나 하다보니까 여러 이벤트들을 추가로 해주거나 변경해줘야 되는 부분들이 보였고 그러자니 자바스크립트를 만져야했지요.

어? 자바스크립트 쓸수있나? 하고보니까 되더라구요!! 개이득. 자, 어떻게 하는지 알아봅시다.

1. 제이쿼리

그럼 자바스크립트 짤 때에 필수요소인 제이쿼리부터 알아볼까합니다. 사실상 이번 포스팅의 핵심!

모르시는분들을 위해 설명해보자면, 제이쿼리란 정말 간단하게 말해서 자바스크립트라는 것을 좀 편하게 사용할 수 있도록 만들어주는 도구라고 보시면 됩니다.

// 자바스크립트
document.getByElementId("bgDev").value = "제이쿼리를 알아봅시다";

// 제이쿼리
$("#beDev").val("제이쿼리를 알아봅시다");

딱 봐도 아래 제이쿼리가 훨씬 직관적이고 보기 쉽고 사용하기 쉽죠?

하지만, 처음 워드프레스로 블로그를 만들고자 하시는 분들은 이 제이쿼리가 안깔려있으실거에요. 제이쿼리를 설치하기에 앞서서 먼저 플러그인>새로추가에 가셔서 header and footer라고 검색해봅시다.

그러고 나오는거 중에 유명한거, 안전해보이는거로 설치해줍니다. 아마 이거는 유튜브 보시거나 강사분들 따라서 플러그인 설치하셨으면 설치되어있으실수도 있어요.

이게 뭐를 하는거냐면 웹페이지를 구성할 때에 윗부분(header), 아랫부분(footer)에 공간을 할당하여 그 공간에 자바스크립트나 css와 같은 사용자가 원하는 코드를 넣을 수 있게 해주는 플러그인입니다.

header and footer를 설치하셨으면 열어봅시다. 그러면 뭔가 코드를 넣을 수 있는 공간들이 나왔을텐데, 거기에 무엇을 넣어줘야 제이쿼리를 쓸 수 있을까요?

제이쿼리를 사용하기 위해서는 몇가지 방법이 있습니다. 대표적으로 직접 다운로드 받아서 서버에 저장을 한 다음 불러오거나 남의 서버에 있는 걸 불러올 수 있지요. 우리는 구글이 올려놓은걸 가져와서 사용해봅시다. (대충 이걸 CDN이라 한다.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

이게 구글이 제공하는 CDN입니다. 굳이 뭐 직접 보시겠다면 ( https://developers.google.com/speed/libraries?hl=ko#jquery ) 여기 들어가보시면 됩니다.

CDN도 땄으니 적용을 해봅시다. 아까 설치했던 플러그인 header and footer에 들어가봅시다.

그리고 hedaer라고 적힌곳 아래에 제이쿼리 CDN을 넣어줍니다. 그런 다음 저장만 하면 끝-

body 혹은 footer에 넣으면 안되냐고 물으신다면? 되긴합니다. 하지만 그냥 header에 넣어주세요. 굳이 설명하자면 절차지향언어 며 인터프리터며 어쩌구 다 설명해야합니다. 그냥 개발자들의 약속 뭐 이런거라 봅시다.

열심히 따라오셔서 제이쿼리를 설치(?)하기까진 했는데 잘 작동 되는지 궁금하시지요? 테스트를 한번 해봅시다.

현재 운영하시는 블로그의 메인화면으로 넘어가주세요. 그리고 F12를 눌러서 개발자도구를 열어주신 다음에 console(또는 콘솔)을 눌러줍니다.

$(".entry-title").hide();

그런 다음 위에 적힌 코드를 입력해주신 다음 엔터를 눌러주시면 됩니다. 일단 에러가 안뜨면 잘된거고 이제 메인화면을 한번 봐주세요.

내 메인화면에 보여지던 글들의 제목이 싹 사라졌네? 이러면 정상입니다. 아, generatePress 기준으로 다른 테마 쓰시면 안될수도 있습니다. 에러만 안뜨시면 적용된거 맞아요!

제이쿼리까지 깔았고, 이제 여러 이벤트들을 줘가며 좀 더 이쁘고 쓸만하게 꾸며볼까합니다.

다 같이 따라오셔서 부자됩시다(?)

이만, 배곧동개발자였습니다.