엘리멘터 프로를 통해 워드프레스를 어느 정도 만들 수 있는 수준이 되었나요? 그렇다면 이제는 css나 javascript를 수정하거나 추가할 준비가 되었다고 볼 수 있습니다. 워드프레스는 굉장한 높은 자율성을 가지고 있기 때문에 css를 수정하여 원하는 그래픽을 입힐 수가 있고, javascript를 추가하여 원하는 기능을 수행할 수도 있습니다. 지금부터 워드프레스에 css와 javascript를 입력할 수 있는 방법에 대해 알아보도록 하겠습니다.
css, js로 할 수 있는 것은?
우리 웹은 크게 html, css, javascript로 이루어져 있습니다. 우리 사람으로 비유하자면 html는 뼈대, css는 살, javascript는 움직임입니다. html로 큰 구조를 세우면 css로 꾸밀 수 있고, javascript로 동작을 부여할 수 있습니다. 물론 요즘에는 css로도 기본적인 동작(애니메이션)을 구현할 수 있지만 js만큼 광범위하고 자율적으로 부과하기는 힘듭니다. 이 3개를 마스터하면 웬만한 웹사이트는 구현할 수 있다고 볼 수 있죠.
워드프레스는 이런 html, css, js의 문법을 정확히 몰라도 웹사이트를 구현할 수 있도록 도와주는 툴에 불과합니다. 물론 몰라도 전혀 상관없지만 만약 이 3가지를 자유자재로 다룰 수 있게 된다면 정말 원하는 대로 웹사이트를 제작할 수 있게 됩니다.
정리하자면 워드프레스에서 css를 수정, 추가할 경우에는 워드프레스 내에서 조작할 수 없도록 해놓은 부분도 css코드수정으로 조작이 가능하게 만들 수 있습니다. js를 추가할 경우에는 워드프레스에서 제공하지 않는 기능들을 구현할 수 있도록 해줍니다. 대표적으로 플러그인의 스타일 변화를 원할 때 css수정을 사용하고, 풀 스크린 스크롤 기능을 구현할 때 js의 추가가 필요합니다.
css, js 추가하는 플러그인
간단하게 워드프레스에 플러그인을 추가함으로서 css와 js를 추가, 수정할 수 있습니다. 플러그인 이름은 [Simple Custom CSS and JS]입니다. 이 플러그인을 설치해주기만 하면 됩니다. 플러그인 설치 방법은 알고 있다고 가정하고 진행하도록 하겠습니다. (간단하게 설명하자면 '메뉴-플러그인-새로추가-css검색-설치' 순서입니다.)
그럼 왼쪽에 Custom CSS&JS 라는 메뉴가 새로 생긴 것을 볼 수 있고, 이것을 클릭할 경우 코드를 추가할 수 있는 버튼들을 상단에서 볼 수 있습니다. 저것들을 누르고 코드를 작성하기만 하면 끝입니다. 정말 쉽죠?
대충 작동방식을 설명드리도록 하겠습니다. 작동방식을 이해하면 이 플러그인의 한계도 어느 정도 이해가 되실 것이라 생각합니다. 우리가 웹퍼블리싱을 진행할 때(웹사이트를 제작할 때) 관리의 편의를 위해 여러 css와 js를 분리하여 외부 파일로 저장한 뒤, 링크 기능으로 중심 파일에 연결합니다. 첨부파일 같은 느낌이라 보시면 편할 것 같습니다. 우리가 저 플러그인을 이용하여 html, css, js의 파일을 만들면 이 파일은 외부 파일로 저장되어 우리 워드프레스 사이트에 외부파일로 첨부가 되게 됩니다.
다만 이런 방식으로 플러그인이 작동하기 때문에 본 워드프레스의 구조는 변경하기 힘들다는 단점이 있습니다. css는 이런 단점을 거의 대부분 극복하지만, js는 그렇지 못합니다. 보통 페이지마다 작동하게 할 수도, 작동하지 않도록 할 수 있지만 워드프레스에서는 이런 링크를 페이지마다 설정하지 못하기 때문에 모든 페이지에서 작동하던지 안 하던지 둘 중 하나만 할 수 있습니다. 이 부분에 대해서 해결점을 찾게 된다면 다음에 알려드리도록 하겠습니다.
플러그인 사용시 주의할 점
1. HTML를 추가할 때
1-1. jsDelivr에서 Bootstrap library를 가져와야 하는 경우
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">위의 코드를 삽입하여야 합니다.
1-2. Google CDN에서 jQuery library를 가져와야 하는 경우
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>위의 코드를 삽입하여야 합니다.
2. CSS를 추가할 때
고려해야 할 사항이 없습니다. 원하는 class나 id를 지정한 뒤 외모를 수정하세요.
3. JS를 추가할 때
3-1. jQuery를 사용하여 js를 구현하는 경우
jQuery(document).ready(function( $ ){
// Your code in here
});위의 코드를 삽입하여야 합니다. Your code in here 부분에 원하시는 코드를 작성합니다.
지금까지 워드프레스에 css, js코드를 삽입하는 방법에 대해 알아보았습니다. 정말 별거 없죠? 한마디로 정리하면 그냥 플러그인 설치해서 원하는 코드를 삽입하면 된다입니다. 물론 코드를 전혀 모르면 말짱 도루묵이지만, 여러분들이 어느 정도 워드프레스를 다룰 줄 알게 된다면, 더 통제하고 싶은 욕구가 99% 들게 될 겁니다. 그때 이 포스팅을 잊지 않고 꼭 다시 찾아와 주시면 좋을 것 같습니다.
저도 계속해서 웹퍼블리싱 공부를 지속해나가며 종국에는 워드프레스에 대해서는 완벽히 통제할 수 있는 수준이 되는것이 목표입니다. 그때같이 함께 해주시면 좋을 것 같습니다! 도움이 되셨으면 좋겠네요.
'워드프레스 > 테마, 플러그인' 카테고리의 다른 글
| 워드프레스 테마가 중요한 이유 (0) | 2021.09.02 |
|---|
댓글