close
프로필 배경
프로필 로고

테크 삽질 연구소

실무개발/BackEnd · 2026. 6. 20. fullscreen 넓게보기

Docker로 워드프레스 설치하고 알뜰폰 위젯 플러그인 만들기

이번에는 Docker를 이용해서 로컬에 워드프레스를 설치하고, 플랜앱트하우 알뜰폰 요금제 위젯 플러그인을 직접 만들어봤습니다.

최종 목표는 워드프레스에서 아래 기능을 지원하는 플러그인을 만드는 것이었습니다.

  • 숏코드 지원
  • 관리자 설정 페이지 지원
  • Gutenberg 블록 편집기 지원
  • 사이드바 위젯 지원
  • ZIP 설치 지원
  • GitHub Release 배포

1. Docker Compose로 워드프레스 설치하기

먼저 워드프레스와 MySQL을 Docker Compose로 실행했습니다.

docker-compose.yml

version: '3'

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    volumes:
      - ./plugins:/var/www/html/wp-content/plugins
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wp
      WORDPRESS_DB_PASSWORD: wp1234
      WORDPRESS_DB_NAME: wordpress
    depends_on:
      - db

  db:
    image: mysql:8.0
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: wp1234
      MYSQL_ROOT_PASSWORD: root1234

실행은 아래 명령으로 했습니다.

docker compose up -d

접속 주소는 다음과 같습니다.

http://localhost:8080

처음 접속하면 워드프레스 설치 화면이 나오고, 관리자 계정을 만든 뒤 관리자 페이지에 접속할 수 있습니다.

http://localhost:8080/wp-admin

2. 플러그인 디렉토리 만들기

Docker Compose에서 아래 볼륨을 연결했습니다.

volumes:
  - ./plugins:/var/www/html/wp-content/plugins

그래서 로컬의 plugins 폴더가 워드프레스 플러그인 폴더와 연결됩니다.

플러그인 폴더를 생성했습니다.

mkdir -p plugins/plan-apthow-widget

최종 구조는 아래와 같습니다.

plugins/
└── plan-apthow-widget/
    ├── plan-apthow-widget.php
    ├── block.js
    ├── readme.txt
    ├── README.md
    ├── LICENSE
    └── assets/
        ├── icon-128x128.png
        └── banner-772x250.png

3. 플러그인 기본 파일 만들기

메인 파일은 아래 위치에 만들었습니다.

vi plugins/plan-apthow-widget/plan-apthow-widget.php

플러그인 헤더는 다음과 같이 작성했습니다.

https://plan.apthow.com/widget/
Description: 최저가, 평생할인, 데이터 무제한 등 알뜰폰 요금제 TOP 정보를 워드프레스에 쉽게 표시할 수 있습니다.
Version: 1.0.0
Author: Plan Apthow
Author URI: https://plan.apthow.com/
License: GPLv2 or later
Text Domain: plan-apthow-widget
*/

if (!defined('ABSPATH')) {
    exit;
}

이 파일만 있어도 워드프레스 관리자 플러그인 목록에 플러그인이 표시됩니다.

4. 기본 옵션 만들기

위젯 종류, 망 선택, 표시 개수, 테마, 가로폭, 세로높이를 기본값으로 관리했습니다.

function plan_apthow_default_options() {
    return [
        'type' => 'lowest',
        'network' => 'all',
        'limit' => '5',
        'theme' => 'light',
        'width' => '100%',
        'height' => '380',
    ];
}

5. 숏코드 만들기

워드프레스 글이나 페이지에서 아래처럼 사용할 수 있도록 숏코드를 만들었습니다.

[plan_apthow_widget]

숏코드 함수는 iframe을 생성합니다.

function plan_apthow_widget_shortcode($atts) {
    $options = get_option('plan_apthow_options', plan_apthow_default_options());
    $options = array_merge(plan_apthow_default_options(), $options);

    $atts = shortcode_atts($options, $atts);

    $src = 'https://plan.apthow.com/widget/lowest-price/?' . http_build_query([
        'type' => $atts['type'],
        'network' => $atts['network'],
        'limit' => $atts['limit'],
        'theme' => $atts['theme'],
    ]);

    return sprintf(
        '
        ', esc_url($src), esc_attr($atts['width']), esc_attr($atts['height']) ); } add_shortcode('plan_apthow_widget', 'plan_apthow_widget_shortcode');

이제 글이나 페이지에 아래 코드를 넣으면 알뜰폰 위젯이 바로 출력됩니다.

[plan_apthow_widget]

옵션을 직접 지정할 수도 있습니다.

[plan_apthow_widget type="lifetime" network="skt" limit="5" theme="light"]

6. 관리자 설정 페이지 만들기

관리자가 기본 위젯 옵션을 선택할 수 있도록 설정 페이지를 만들었습니다.

function plan_apthow_add_admin_menu() {
    add_options_page(
        '플랜앱트하우 위젯 설정',
        '플랜앱트하우 위젯',
        'manage_options',
        'plan-apthow-widget',
        'plan_apthow_settings_page'
    );
}
add_action('admin_menu', 'plan_apthow_add_admin_menu');

function plan_apthow_register_settings() {
    register_setting('plan_apthow_settings_group', 'plan_apthow_options');
}
add_action('admin_init', 'plan_apthow_register_settings');

관리자 메뉴는 아래 위치에 생성됩니다.

설정 > 플랜앱트하우 위젯

설정 항목은 다음과 같이 구성했습니다.

  • 위젯 종류
  • 망 선택
  • 표시 개수
  • 테마
  • 가로폭
  • 세로높이

위젯 종류는 플랜앱트하우 위젯 페이지의 실제 타입값에 맞췄습니다.

<option value="lowest">최저가 TOP</option>
<option value="lifetime">평생할인 TOP</option>
<option value="zero">100원 이하 요금제 TOP</option>
<option value="unlimited">데이터무제한 TOP</option>
<option value="data_10gb">10GB 이상 TOP</option>
<option value="parents">부모님 추천 TOP</option>
<option value="students">학생 추천 TOP</option>
<option value="lifetime_qos">평생요금제 + QoS</option>

7. Gutenberg 블록 지원하기

숏코드만 지원하면 사용자가 직접 코드를 입력해야 합니다.

그래서 블록 편집기에서 바로 추가할 수 있도록 Gutenberg 블록을 만들었습니다.

파일을 생성했습니다.

vi plugins/plan-apthow-widget/block.js

블록 이름은 다음과 같이 등록했습니다.

blocks.registerBlockType('plan-apthow/widget', {
    title: '플랜앱트하우 위젯',
    icon: 'smartphone',
    category: 'widgets',

    keywords: [
        '플랜앱트하우',
        '플하',
        '알뜰폰',
        '요금제',
        'mvno'
    ],
});

오른쪽 설정 패널에서 다음 값을 선택할 수 있게 했습니다.

  • 위젯 종류
  • 망 선택
  • 표시 개수
  • 테마
  • 가로폭
  • 세로높이

PHP에서는 블록 스크립트를 등록했습니다.

function plan_apthow_register_block() {

    wp_register_script(
        'plan-apthow-block',
        plugin_dir_url(__FILE__) . 'block.js',
        ['wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components'],
        '1.0.0',
        true
    );

    register_block_type(
        'plan-apthow/widget',
        [
            'editor_script' => 'plan-apthow-block',
            'render_callback' => 'plan_apthow_render_block',
            'attributes' => [
                'type' => ['type' => 'string', 'default' => 'lowest'],
                'network' => ['type' => 'string', 'default' => 'all'],
                'limit' => ['type' => 'string', 'default' => '5'],
                'theme' => ['type' => 'string', 'default' => 'light'],
                'width' => ['type' => 'string', 'default' => '100%'],
                'height' => ['type' => 'string', 'default' => '380'],
            ],
        ]
    );
}
add_action('init', 'plan_apthow_register_block');

function plan_apthow_render_block($attributes) {
    $defaults = plan_apthow_default_options();
    $atts = shortcode_atts($defaults, $attributes);

    return plan_apthow_widget_shortcode($atts);
}

이제 글 작성 화면에서 + 버튼을 누르고 플랜앱트하우 위젯을 검색하면 블록을 추가할 수 있습니다.

8. 사이드바 위젯 지원하기

클래식 테마나 커스터마이저에서 위젯으로 추가할 수 있도록 WP_Widget도 지원했습니다.

class Plan_Apthow_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'plan_apthow_sidebar_widget',
            '플랜앱트하우 위젯',
            [
                'description' => '알뜰폰 요금제 TOP 위젯을 사이드바에 표시합니다.'
            ]
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];

        if (!empty($instance['title'])) {
            echo $args['before_title'] . esc_html($instance['title']) . $args['after_title'];
        }

        echo plan_apthow_widget_shortcode([
            'type' => $instance['type'] ?? 'lowest',
            'network' => $instance['network'] ?? 'all',
            'limit' => $instance['limit'] ?? '5',
            'theme' => $instance['theme'] ?? 'light',
            'width' => $instance['width'] ?? '100%',
            'height' => $instance['height'] ?? '380',
        ]);

        echo $args['after_widget'];
    }
}

function plan_apthow_register_sidebar_widget() {
    register_widget('Plan_Apthow_Widget');
}
add_action('widgets_init', 'plan_apthow_register_sidebar_widget');

테마에 따라 아래 위치에서 확인할 수 있습니다.

모양 > 사용자 정의하기

또는 직접 접속할 수도 있습니다.

http://localhost:8080/wp-admin/customize.php

9. 플러그인 목록에 설정 링크 추가

플러그인 목록에서 바로 설정 화면으로 이동할 수 있도록 설정 링크를 추가했습니다.

add_filter(
    'plugin_action_links_' . plugin_basename(__FILE__),
    function ($links) {

        $settings_link =
            '<a href="' .
            admin_url('options-general.php?page=plan-apthow-widget') .
            '">설정</a>';

        array_unshift($links, $settings_link);

        return $links;
    }
);

이제 플러그인 목록에서 아래처럼 보입니다.

설정 | 비활성화

10. readme.txt 작성

워드프레스 공식 저장소를 고려해서 readme.txt도 작성했습니다.

=== Plan Apthow Widget ===

Contributors: planapthow
Tags: mvno, mobile plan, telecom, widget, shortcode, iframe, korea, data plan, comparison
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

주요 내용은 다음을 포함했습니다.

  • Description
  • Installation
  • Frequently Asked Questions
  • Screenshots
  • Changelog
  • Upgrade Notice

11. README.md 작성

GitHub용 README.md도 별도로 작성했습니다.

포함한 내용은 다음과 같습니다.

  • 배지
  • 플러그인 소개
  • 주요 기능
  • 사용 방법
  • 제공 위젯
  • 숏코드 예시
  • 스크린샷 설명
  • 활용 사례
  • 장점
  • 지원 링크
  • 라이선스

12. LICENSE 추가

라이선스는 GPLv2 or later로 정리했습니다.

LICENSE

GPL v2 or later

This plugin is licensed under the GNU General Public License v2 or later.

You may use, modify, and distribute this plugin under the terms of the GPL v2 or any later version.

For the full license text, see:
https://www.gnu.org/licenses/gpl-2.0.html

13. 아이콘과 배너 추가

워드프레스 저장소용으로 아래 이미지를 추가했습니다.

assets/
├── icon-128x128.png
└── banner-772x250.png

나중에 공식 저장소 등록 시 아래 이미지도 추가하면 좋습니다.

assets/
├── icon-128x128.png
├── icon-256x256.png
├── banner-772x250.png
├── banner-1544x500.png
├── screenshot-1.png
├── screenshot-2.png
└── screenshot-3.png

14. ZIP 압축하기

플러그인 배포용 ZIP을 만들었습니다.

cd plugins

zip -r plan-apthow-widget.zip plan-apthow-widget \
-x "*.DS_Store" \
-x "__MACOSX/*"

압축 내용 확인:

unzip -l plan-apthow-widget.zip

정상 구조는 아래와 같아야 합니다.

plan-apthow-widget/
plan-apthow-widget/plan-apthow-widget.php
plan-apthow-widget/block.js
plan-apthow-widget/readme.txt
plan-apthow-widget/README.md
plan-apthow-widget/LICENSE
plan-apthow-widget/assets/icon-128x128.png
plan-apthow-widget/assets/banner-772x250.png

중요한 점은 ZIP 안에 파일이 바로 들어가면 안 되고, 반드시 plan-apthow-widget 폴더가 포함되어야 합니다.

15. Docker 워드프레스 완전 삭제 후 재설치 테스트

깨끗한 워드프레스에서 ZIP 설치가 되는지 테스트했습니다.

컨테이너 중지:

docker compose down

DB 볼륨까지 삭제:

docker compose down -v

다시 실행:

docker compose up -d

브라우저에서 다시 접속합니다.

http://localhost:8080

워드프레스 설치 화면이 다시 나오면 초기화가 잘 된 것입니다.

그 다음 관리자에 접속해서:

플러그인 > 새로 추가 > 플러그인 업로드

아까 만든 ZIP 파일을 업로드합니다.

plan-apthow-widget.zip

16. 테스트 체크리스트

새 워드프레스에서 아래 항목을 모두 확인했습니다.

✅ 플러그인 ZIP 업로드 설치
✅ 플러그인 활성화
✅ 설정 > 플랜앱트하우 위젯 메뉴 확인
✅ 설정 저장 확인
✅ 미리보기 출력 확인
✅ 숏코드 출력 확인
✅ Gutenberg 블록 추가 확인
✅ 블록 오른쪽 설정 패널 확인
✅ 사이드바 위젯 확인
✅ 플러그인 목록 설정 링크 확인

17. GitHub 저장소 생성

GitHub 저장소를 생성했습니다.

https://github.com/kerias1218/plan-apthow-widget

소스 업로드:

git init
git add .
git commit -m "Initial release v1.0.0"
git branch -M main
git remote add origin https://github.com/kerias1218/plan-apthow-widget.git
git push -u origin main

18. v1.0.0 태그 생성

릴리즈 버전은 v1.0.0으로 만들었습니다.

git tag v1.0.0
git push origin v1.0.0

19. GitHub Release 생성

GitHub에서 릴리즈를 생성했습니다.

Releases > Create a new release

입력값:

Tag: v1.0.0
Release title: Plan Apthow Widget v1.0.0

릴리즈 설명:

# Plan Apthow Widget v1.0.0

첫 번째 공개 버전입니다.

## 주요 기능

- 숏코드 지원
- Gutenberg 블록 지원
- 사이드바 위젯 지원
- 관리자 설정 페이지
- 반응형 iframe 위젯

## 지원 위젯

- 최저가 TOP
- 평생할인 TOP
- 100원 이하 TOP
- 데이터 무제한 TOP
- 10GB 이상 TOP
- 부모님 추천 TOP
- 학생 추천 TOP
- 평생할인 + QoS TOP

Release Assets에는 직접 만든 설치용 ZIP 파일을 첨부했습니다.

plan-apthow-widget.zip

GitHub가 자동으로 생성하는 Source code (zip)은 설치용 ZIP이 아니므로, 사용자에게는 반드시 plan-apthow-widget.zip을 다운로드하라고 안내해야 합니다.

20. 최종 결과

최종적으로 만든 플러그인은 아래 기능을 지원합니다.

✅ 숏코드 지원
✅ 관리자 설정 페이지 지원
✅ Gutenberg 블록 지원
✅ 사이드바 위젯 지원
✅ 반응형 iframe 지원
✅ GitHub Release 배포
✅ ZIP 설치 테스트 완료

이제 다음 단계는 플랜앱트하우 사이트에 워드프레스 플러그인 다운로드 페이지를 만드는 것입니다.

추천 URL:

https://plan.apthow.com/widget/wordpress

페이지에 넣을 내용:

  • 플러그인 소개
  • 주요 기능
  • 설치 방법
  • 스크린샷
  • GitHub 링크
  • ZIP 다운로드 버튼
  • 변경 이력

이렇게 하면 플랜앱트하우 알뜰폰 위젯을 워드프레스 사용자들이 쉽게 설치하고 사용할 수 있습니다.

 

플랜앱트하우 워드프레스 플러그인 | 알뜰폰 요금제 위젯

플랜앱트하우 워드프레스 플러그인으로 알뜰폰 최저가, 평생할인, 데이터 무제한 TOP 요금제 위젯을 숏코드와 Gutenberg 블록으로 자동 표시하세요.

plan.apthow.com

 

워드프레스 플러그인 만들기
워드프레스 플러그인 개발
Docker 워드프레스 설치
Docker Compose 워드프레스
워드프레스 Gutenberg 블록 개발
워드프레스 숏코드 만들기
워드프레스 위젯 개발
워드프레스 관리자 설정 페이지
워드프레스 플러그인 배포
GitHub Release 배포
워드프레스 플러그인 ZIP 설치
PHP 워드프레스 플러그인
알뜰폰 위젯
알뜰폰 요금제 위젯
MVNO 위젯
워드프레스 iframe 위젯

'실무개발 > BackEnd' 카테고리의 다른 글

워드프레스 플러그인 제작하기: 숏코드, 관리자 설정, iframe 위젯까지 직접 구현하는 방법  (0) 2026.06.21
PHP API 리팩토링 후기: SRP 원칙으로 요금제 검색 API 구조 개선하기  (0) 2026.06.18
스프링부트 Playwright로 HTML을 PDF로 변환할 때 500 에러 해결 방법  (0) 2026.06.17
PHP7 → PHP8 마이그레이션 오류 모음 및 실무 해결 방법 총정리  (0) 2026.06.12
Spring Boot WebSocket을 Shared Worker로 운영하는 방법: 여러 탭 연결 최적화 실무 정리  (0) 2026.06.09
실무개발/BackEnd 관련 글
더 보기

티스토리툴바