워드프레스 DB 데이터를 소스개발하여 화면에 표시하는 방법

IT/워드프레스|2020. 5. 29. 09:15

워드프레스 사이트를 개발하면서 페이지나 포스트, 포트폴리오에 컨텐츠를 작성할 때 직접 입력하여 개발하면 되는 방식을 주로 사용합니다.

 

하지만 최근에 포스트 처럼 정기적으로 발행하거나 페이지 처럼 동적인 정보가 있는 사이트가 아닌 정보조회용 페이지가 포함된 사이트를 개발할 필요가 생겼습니다.

 

결국 DB에 데이터를 넣고 워드프레스 페이지에서 버튼 이벤트로 데이터를 조회하는 기능이 필요한 것인데, 우선 페이지에서 DB에 접근하여 데이터를 호출하고 표시하는 기능을 고민하게 되었습니다.

 

 

 

 

소스를 건드리거나 하는 방식이 아닌 비 개발자인 저에게 좀 더 편리한 방식을 찾아보다 플러그인을 통해 DB 데이터를 조회할 수 있는 방식이 있어 정리해 봅니다.

 

 

1. Insert PHP Snippet 플러그인

 

 

 

 

이 플러그인은 플러그인에서 소스를 작성하여 저장 및 숏코드 형식으로 워드프레스 사이트 개발자가 편리하게 사용할 수 있는 기능을 제공합니다.

 

먼저 무료 버전을 사용해도 되고 저도 아직 사용해보진 않았지만 유료로 업그레이드 하여 사용하는 버전도 있는데 제가 필요한 기능은 무료로도 충분했습니다.

 

이 Insert PHP Snippet 플러그인을 사용하는 방법에 대해서 별도 포스팅을 한 적이 있으니 참고하시면 좋을 것 같습니다.

 

 

 

워드프레스에서 자바스크립트 소스를 별도로 사용하는 방법

워드프레스로 공공데이터를 활용한 사이트를 개발하다 보니 자바스크립트나 JQuery를 종종 사용하게 되는 경우가 있었습니다. 당시에는 두가지 방법(직접 페이지에 소스 삽입 또는 별도 파일 작?

funfundata.tistory.com

 

우선 Insert PHP Snippet 플러그인을 워드프레스 플러그인 메뉴에서 검색하여 설치 및 활성화 합니다. 어렵지 않게 설치를 완료할 수 있습니다.

 

 

 

 

2. 워드프레스 DB 접속 및 조회 소스 입력

 

아래 소스 코드는 제가 인터넷에서 이리저리 알아보고 나름 조금 수정해서 최종적으로 사이트에서 테스트해본 소스 코드 입니다.

 

사용 방법은 Insert PHP Snippet 플러그인 메뉴에서 Add PHP Snippet Code를 통해 신규 PHP를 하나 만들고 이름을 입력하고 아래 소스 코드를 입력한다음 저장하면 됩니다.

 

<?php

$user_count = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->users" );
$user_name = $wpdb->get_var( "SELECT user_id FROM $wpdb->users" );
echo "<p>User count is {$user_count}</p>";
echo "<p>User count is {$user_name}</p>";

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Searching Spots</title>

</head>
<p id="demo"></p>

<script>
var object_no_one= <?php echo $user_count; ?>; 
document.getElementById("demo").innerHTML = object_no_one;
</script>

</body>
</html>

 

소스코드 입력 후 저장까지 정상적으로 되면 PHP Snippet 리스트에 방금 저장한 PHP파일의 숏코드가 있습니다. 이 숏코드를 원하는 페이지나 포스트에 입력하면 소스 내역이 표시되게 됩니다.

 

위 소스코드를 간단히 설명하자면,

 

먼저 PHP파일이기 때문에 PHP선언을 '<?php'로 선언한 다음 PHP 소스코드를 입력합니다. $user_count변수에 $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->users" ); 명령어를 사용해서 DB 접속 및 users 테이블의 전체 건수를 저장합니다.

 

$wpdb변수는 워드프레스에서 DB접속에 관련한 접속 정보를 정의한 Global 변수 입니다. 이 변수를 사용해서 DB에 접속할 수 있습니다.

 

$user_count 변수의 값을 echo 명령어를 사용하여 바로 출력할 수도 있지만 제 소스코드는  <?php echo $user_count; ?>;  명령어를 사용하여 자바스크립트 변수에 이관하여 사용한 내용입니다.

 

이유는 제가 개발 진행중인 사이트의 목적 상 자바스크립트로 데이터 Handing이 되기 때문입니다. 그래서 소스코드는 자바스크립트 object_no_one변수로 $user_count데이터를 치환한 다음 표시하는 내용입니다.

 

 

 

이렇게 플러그인을 사용해서 워드프레스 DB의 데이터를 직접 페이지에 표시하는 방식에 대해서 설명하였습니다. 도움이 되셨길 바랍니다.

댓글()