Zenn
🦍

CoinGeckoAPIで作るWordPress仮想通貨価格トラッカーウィジェット

に公開
WordPress
仮想通貨
tech

CoinGeckoAPIを使用して、WordPressサイトに仮想通貨価格を表示するウィジェットを作る方法を紹介します。無料で使えるAPIを活用した実践的な開発手順を解説します。
準備
CoinGeckoは7,000種類以上の仮想通貨情報を提供するサービスで、APIは無料枠でも1分間に10〜30リクエストまで利用可能です。APIキー不要で始められるのが大きな利点です。
実装手順

1. プラグインの基本設定

php<?php
/**
 * Plugin Name: 仮想通貨価格トラッカー
 * Description: CoinGeckoAPIを利用して仮想通貨の価格を表示
 * Version: 1.0
 * Author: Satoshi Nakamoto
 */

// 直接アクセス禁止
if (!defined('ABSPATH')) exit;

2. ウィジェットクラスの作成

class Crypto_Price_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'crypto_price_widget', 
            '仮想通貨価格トラッカー',
            array('description' => '選択した仮想通貨の価格を表示します')
        );
    }
    
    // ウィジェット表示部分
    public function widget($args, $instance) {
        $title = apply_filters('widget_title', $instance['title']);
        $crypto = $instance['crypto'];
        
        echo $args['before_widget'];
        if (!empty($title)) echo $args['before_title'] . $title . $args['after_title'];
        
        // APIから価格データ取得
        $price_data = $this->get_crypto_price($crypto);
        
        if ($price_data) {
            echo '<div class="crypto-price-container">';
            echo '<div class="crypto-name">' . esc_html($price_data['name']) . '</div>';
            echo '<div class="crypto-price">¥' . number_format($price_data['price']) . '</div>';
            echo '<div class="crypto-change ' . ($price_data['change'] >= 0 ? 'positive' : 'negative') . '">';
            echo esc_html($price_data['change']) . '%</div>';
            echo '</div>';
        } else {
            echo 'データを取得できませんでした';
        }
        
        echo $args['after_widget'];
    }

    // API呼び出し関数
    private function get_crypto_price($crypto_id) {
        $url = "https://api.coingecko.com/api/v3/coins/{$crypto_id}?localization=false&tickers=false&market_data=true";
        $response = wp_remote_get($url);
        
        if (is_wp_error($response)) return false;
        
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        
        if (empty($data['market_data'])) return false;
        
        return array(
            'name' => $data['name'],
            'price' => $data['market_data']['current_price']['jpy'],
            'change' => $data['market_data']['price_change_percentage_24h'],
        );
    }

    // 管理画面設定フォーム
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '仮想通貨価格';
        $crypto = !empty($instance['crypto']) ? $instance['crypto'] : 'bitcoin';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">タイトル:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('crypto'); ?>">通貨:</label>
            <select class="widefat" id="<?php echo $this->get_field_id('crypto'); ?>" name="<?php echo $this->get_field_name('crypto'); ?>">
                <option value="bitcoin" <?php selected($crypto, 'bitcoin'); ?>>Bitcoin</option>
                <option value="ethereum" <?php selected($crypto, 'ethereum'); ?>>Ethereum</option>
                <option value="solana" <?php selected($crypto, 'solana'); ?>>Solana</option>
            </select>
        </p>
        <?php
    }
}

// ウィジェット登録
function register_crypto_price_widget() {
    register_widget('Crypto_Price_Widget');
}
add_action('widgets_init', 'register_crypto_price_widget');

3. スタイルの追加

function crypto_price_widget_styles() {
    echo '<style>
        .crypto-price-container { padding: 10px; background: #f5f5f5; border-radius: 5px; }
        .crypto-name { font-weight: bold; }
        .crypto-price { font-size: 1.2em; }
        .crypto-change { font-weight: bold; }
        .positive { color: green; }
        .negative { color: red; }
    </style>';
}
add_action('wp_head', 'crypto_price_widget_styles');

使い方

  • 上記コードを crypto-price-widget.php として保存
  • WordPressの「プラグイン」ページからアップロード・有効化
  • 「外観」→「ウィジェット」から好きな位置に配置
  • 表示したい仮想通貨を選択して保存

これだけで、サイトにリアルタイムの仮想通貨価格を表示できます。24時間の価格変動も色分けされるため、一目で市場動向がわかります。
このシンプルな実装をベースに、複数通貨の表示やチャート追加など、機能を拡張していくことも可能です。

執筆：Satoshi Nakamoto（仮想通貨総合研究所アナリスト・エンジニア）

Discussion