워드프레스 플러그인 없이 외부 코드 적용

글쓴이 /

외주 받은 워드프레스 사이트에서 자체 로그인 페이지를 따로 만들고 워드프레스 메인에서 로그인 Cookie값이 있으면 특정 폼을 노출해주는 기능이 필요했다. 스니펫 플러그인은 구상한 작업에 적절하지 않았고, 약간의 편법을 섞어서 사용할 수 있는 코드를 만들었다.

워드프레스에서 플러그인 없이 PHP 조건에 부합하는 JavaScript 동작을 구현하는 코드에 대하여 설명하겠다.

1. 동작 구현 파일 작성

아래 코드 내에 조건문과 동작 코드를 작성하여 파일을 만든 후 서버에 업로드한다.
서버에서 PHP가 먼저 실행되고 이후 브라우저 클라이언트에서 JavaScript가 실행되기 때문에 코드는 정상적으로 작동하지만, 권장하는 방식은 아니기에 편법 정도로 인지하고 필요할 때만 사용하는 것을 추천한다.

<?php
if(PHP 특정 조건문){
?>
    <script type="text/javascript">
        JavaScript 동작 코드
	</script>
<?
}
?>

2. functions.php 쇼트코드 생성 함수 추가

워드프레스 관리자 페이지 > 테마 파일 편집기 > functions.php 에 들어가서 아래 쇼트코드 생성 함수를 파일 하단에 추가한다.

쇼트코드는 워드프레스 내장 기능이며, 단순히 파일을 불러오는 단축어라고 생각하면 된다. (자세한 정보는 여기 가이드 문서를 참고)
쇼트코드를 생성하는 add_shortcode 함수의 파라미터는 쇼트코드명, 함수명 순으로 입력한다.

function 함수명(){
    include_once($_SERVER['DOCUMENT_ROOT']."동작 구현 파일 경로");
}
add_shortcode("쇼트코드명" , "함수명");

함수 추가 후 파일 업데이트를 클릭하여 적용한다.

3. 워드프레스 페이지에 쇼트코드 추가

워드프레스 페이지 요소 추가를 클릭하여 쇼트코드를 검색한다.

추가된 쇼트코드 폼에서 생성한 쇼트코드명을 대괄호 사이에 입력하고 페이지를 업데이트한다.

Ctrl + F5로 캐시 메모리 삭제 및 새로고침 후 워드프레스 페이지를 확인해 보면 동작 구현 파일에 작성한 코드가 쇼트코드로 연동되어 정상적으로 동작하는 것을 확인할 수 있다.

위로 스크롤