워드프레스 숏코드 만들기 플러그인 만들기, 애드센스 예시

01

of 06

add_shortcode 함수

기본적으로 워드프레스 숏코드를 만들 때는 아래 숏코드 함수를 사용하면 된다.

add_shortcode( string $tag, callable $callback )
Code language: PHP (php)

간단하게 말하자면

① $tag : 실제 글을 작성할 때 입력해야 할 문구 (예 : [문구])

② $callback : 숏코드를 입력했을 때 실제 실행하는 함수

02

of 06

간단하게 워드프레스 숏코드 만들기

워드프레스의 functions.php 파일에 숏코드 함수를 입력하면 된다. 본 테마에 직접 입력하기 보단 되도록 차일드 테마의 functions.php 파일에 작성해야 테마 업데이트 이후에도 입력한 코드가 그대로 남아 있다.

function display1() {
  return '
  ----------------------------
  |
  | 실제 실행시켜야 할 코드 입력
  |
  ----------------------------
  ';
}
add_shortcode('ad1', 'display1');
Code language: PHP (php)

기본적으로 위 함수의 파란색 5줄을 미리 입력하고, 가운데에 실제 실행할 코드만 넣어주면 된다.

① ad1 : 실제 글 작성 시 입력해야 할 문구로, 되도록 짧게 만들어야 편하다.

② display1 : 맨 위 display1과 맨 아래 display1은 동일해야 한다.

※ ad1, display1 대신 원하는 글자 아무거나 사용해도 된다. 하지만 중복해서 사용하면 안 된다. 중복해서 사용할 경우 오류가 발생하거나 맨 마지막 하나만 적용될 수 있다.

03

of 06

예시) 애드센스 숏코드 만들기

① 우선 위 코드 5줄을 입력한다.

function display1() {
  return '
  ';
}
add_shortcode('ad1', 'display1');
Code language: PHP (php)

② 5줄 사이에 애드센스 코드를 삽입한다.

function display1() {
  return '
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>
<!-- 워프 게시판 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  ';
}
add_shortcode('ad1', 'display1');
Code language: HTML, XML (xml)

③ 만약 숏쿄드 2개를 만든다면 똑같이 2개를 만들면 된다. 3개 이상을 만들 때도 똑같이 계속 추가하면 된다. 이때 주의할 건 ad1, display1은 중복되지 않게 다른 문구로 작성해야 한다. 보통 난 동일한 항목을 하나로 묶어서 ads1 ~ 10, aw1 ~ 10 같은 방식으로 만들어 놓는다.

/**
* 숏코드 2개 일 때
*/

function display1() {
  return '
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>
<!-- 워프 게시판 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  ';
}
add_shortcode('ad1', 'display1');

function display2() {
  return '
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>
<!-- 워프 본문 최상단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="1111111111"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  ';
}
add_shortcode('ad2', 'display2');
Code language: HTML, XML (xml)

④ 실제 워드프레스에 글을 작성할 때 [ad1], [ad2]… [ad10]을 입력하면 해당 위치에 애드센스 광고가 표시된다.

※ 실제 난 애드센스 광고와, 폰트어썸 두 가지만 숏코드로 만들어서 사용하고 있다.

04

of 06

숏코드를 워드프레스 플러그인으로 만드는 이유

위 방법으로 만든 숏코드는 워드프레스의 functions.php 파일에 작성해야 한다. 이럴 때 차일드 테마를 사용하지 않는다면 테마가 업데이트될 때마다 초기화가 되어 다시 작성해야 한다.

만약 차일드 테마를 사용할 수 없는 경우라면 위 만들어 놓은 숏코드를 플러그인으로 만들어 등록하면 된다.

플러그인으로 만들어 놓는다면 테마가 업데이트되어도 계속 유지가 되고, 플러그인의 활성화, 비활성화를 통하여 잠시 만들어 놓은 숏코드를 필요에 따라 활성화, 비활성화할 수도 있다. 워드프레스의 functions.php 파일에 작성할 때보다 오히려 장점이 생기게 된다.

05

of 06

간단하게 워드프레스 플러그인 만들기

위 만들어 놓은 숏코드를 이용하여 단순하고 기본적인 플러그인을 간단하게 만들 수 있다. 메모장을 열어 short-code-ad.php라는 파일명으로 아래와 같이 7줄을 작성한다. (파일명은 마음에 드는 다른 파일명으로 작성해도 된다.)

<?php
/*
Plugin Name: 플러그인 네임 작성
Description: 플러그인 설명 작성
Author: 만든이 작성
*/
  ----------------------------
  |
  | 만들어 놓은 숏코드 입력
  |
  ----------------------------
?>
Code language: HTML, XML (xml)

기본적으로 플러그인의 네임, 설명, 작성자 정도만 작성하면 된다. 이렇게 3가지만 작성해도 워드프레스의 플러그인 메뉴에서 충분히 어떤 플러그인인지 구분할 수 있게 된다.

06

of 06

예시) 애드센스 플러그인 만들기, 적용하기

① 우선 메모장으로 short-code-ad.php라는 파일명으로 아래 코드를 작성한다.

※ 플러그인이라고 해서 머 특별한 건 없다. php 시작과 끝 그리고 플러그인 정보 정도만 만들어 주면 된다.

<?php
/*
Plugin Name: 플러그인 네임 작성
Description: 플러그인 설명 작성
Author: 만든이 작성
*/
?>
Code language: HTML, XML (xml)

② 7줄 사이에 위에서 만들어 놓은 숏코드를 그대로 복사 붙여넣기로 삽입한다.

<?php
/*
Plugin Name: 애드센스 숏코드 삽입
Description: 본문에 숏코드를 이용하여 애드센스 삽입
Author: 비비드
*/
function display1() {
  return '
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>
<!-- 워프 게시판 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  ';
}
add_shortcode('ad1', 'display1');

function display2() {
  return '
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>
<!-- 워프 본문 최상단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="1111111111"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  ';
}
add_shortcode('ad2', 'display2');
?>
Code language: HTML, XML (xml)

③ 방금 만든 short-code-ad.php 파일을 FTP를 이용해서 플러그인 폴더에 업로드 한다.

※ 현재 클라우드웨이즈 서버를 이용하는데 경로는 public_html → wp-content → plugins이다. 만약 다른 서버업체를 이용한다면 plugins 폴더만 찾으면 된다.

④ 워드프레스 설정의 “플러그인 – 설치한 플러그인” 메뉴를 클릭하면 방금 업로드한 플러그인을 우측 플러그인 목록에서 찾을 수 있다. 단순하게 만든 플러그인이라 플러그인 네임, 설명, 작성자만 표시되고, 활성화, 비활성화, 삭제 메뉴만 표시된다.