独自の「QRコード」ウィジェットを追加する方法

はじめに

THE THORには「QRコード」ウィジェットがありますが、これと同様の独自のショートコードを追加します。

『THE THOR』専用ウィジェットアイテム全11種類の使い方！

この記事では、WordPressテーマ『THE THOR(ザ・トール)』専用ウィジェットアイテム全11種類の使い方について解説しています。

how2navi.com

さらに、QRコードを表示するウィジェットも作成します。

この記事では、この方法について説明します。

完成イメージ

• WordPressテーマCocoonスキン「メイド・イン・ヘブン」公式ページです。
• Cocoonカスタマイズなどを纏めています。
• 本ページはスキン「メイド・イン・ヘブン」で動作しています。

使用方法

以下にショートコードを示します。

[my_qr_code]本文[/my_qr_code]

実装手順

以下のコードを追加します。

add_shortcode('my_qr_code', function ($atts, $content = null) {
  $atts = shortcode_atts([
    'url' => '',
  ], $atts);

  if (empty($atts['url'])) {
    return '';
  }

  $qr_url = 'https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=' . urlencode($atts['url']);

  ob_start();
  ?>
  <style>
  .qr-code__figure {
    margin-bottom: 1.8em;
    text-align: center;
  }
  </style>

  <div class="qr-code">
    <figure class="qr-code__figure"><img src="<?= esc_url($qr_url); ?>" alt="QRコード"></figure>
    <?php if (!empty($content)): ?>
      <div class="qr-code__content"><?= do_shortcode($content); ?></div>
    <?php endif; ?>
  </div>
  <?php
  return ob_get_clean();
});

拡張：ウィジェットを追加

ショートコードを拡張して、ウィジェットを追加します。

完成イメージ

実装手順

上記のコードに加え、以下のコードをfunctions.phpに追加します。

// ウィジェットを追加
add_action('widgets_init', function () {
  register_widget('QR_Code_Widget');
});


/**
 * ウィジェットクラスを定義
 */
class QR_Code_Widget extends WP_Widget {
  public function __construct() {
    parent::__construct(
      'qr_code_widget',
      'QRコード',
      ['description' => 'URLのQRコードを表示します。']
    );
  }

  /**
   * ウィジェットを表示
   *
   * @param array $args ウィジェット引数
   * @param array $instance 保存された値
   * @return void
   */
  public function widget($args, $instance) {
    $url     = $instance['url']     ?? '';
    $content = $instance['content'] ?? '';
    $title   = apply_filters('widget_title', $instance['title'] ?? '');

    echo $args['before_widget'];

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

    if (!empty($url)) {
      echo do_shortcode('[my_qr_code url="' . esc_url($url) . '"]' . $content . '[/my_qr_code]');
    }

    echo $args['after_widget'];
  }

  /**
   * ウィジェットの設定フォーム
   *
   * @param array $instance 保存された値
   * @return void
   */
  public function form($instance) {
    $title   = esc_attr($instance['title'] ?? '');
    $url     = esc_attr($instance['url']   ?? '');
    $content = esc_textarea($instance['content'] ?? '');

    ?>
    <p>
      <label for="<?= $this->get_field_id('title'); ?>">タイトル:</label>
      <input class="widefat" id="<?= $this->get_field_id('title'); ?>" name="<?= $this->get_field_name('title'); ?>" type="text" value="<?= $title; ?>">
    </p>
    <p>
      <label for="<?= $this->get_field_id('url'); ?>">URL:</label>
      <input class="widefat" id="<?= $this->get_field_id('url'); ?>" name="<?= $this->get_field_name('url'); ?>" type="text" value="<?= $url; ?>">
    </p>
    <p>
      <label for="<?= $this->get_field_id('content'); ?>">本文（HTML可）:</label>
      <textarea class="widefat" rows="5" id="<?= $this->get_field_id('content'); ?>" name="<?= $this->get_field_name('content'); ?>"><?= $content; ?></textarea>
    </p>
    <?php
  }

  /**
   * ウィジェットの設定を保存
   *
   * @param array $new_instance 新しい値
   * @param array $old_instance 古い値
   * @return array 保存する値
   */
  public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title']   = strip_tags($new_instance['title'] ?? '');
    $instance['url']     = strip_tags($new_instance['url']   ?? '');
    $instance['content'] = $new_instance['content'] ?? '';

    return $instance;
  }
}

さいごに

今回紹介した方法を使えば、「QRコード」ショートコードを追加できます。
さらに、機能を拡張し、THE THORのようなウィジェットを追加することで、ウィジェットとショートコードの両方を利用できるため、設置場所や表示方法を柔軟にカスタマイズできます。