作成動機

以前、ブログテーマのカウンターを改造してみたのですが、これはテーマ純正プラグインを更新すると消し飛んでしまうことがわかり、実際消し飛んでしまったので、消し飛ばないように分離するようにしてみました。

作成工程

ウィジェットプラグインの情報を作成

まずは、どうやったらウィジェットを作れるのかについて簡単に調べました。 wp-content/plugins/配下に適当なフォルダを作れば作れそうな気配はしていたのですが、手順がよくわからないのでまずはそこから。

プラグインの作成 – WordPress Codex 日本語版を読むと wp-content/plugins/ か、そのサブディレクトリに配置するみたいに書いているので、適当にこの下にフォルダを作り、プラグインファイルを配置します。

次にファイル・ヘッダーの項目で標準プラグイン情報を記述する必要があるとあるので、適当に書きました。こんな感じ。YAHMAN Add-onsのコードを一部使っているためライセンスは継承。

<?php
/*
Plugin Name: YAHMAN Pageview Extend
Description: Show PV counter Extend
Version: 0.0.1
Author: Lycolia
License: GNU General Public License v3 or later
*/

<?php

Plugin Name: YAHMAN Pageview Extend

Description: Show PV counter Extend

Version: 0.0.1

Author: Lycolia

License: GNU General Public License v3 or later

ウィジェットプラグインの中身を作成

これで取り敢えずWordPressがこのファイルをプラグインとして認識し、インストール可能な状態となったので、次に中身を作ります。作ると言っても前作ったやつの転用なのでほぼコピペですが。

当然なんか書けば動くというわけではないので、まず関数リファレンス/register widget – WordPress Codex 日本語版でウィジェットのフォーマットを確認します。

要するに全体的にはこんな感じですね。

<?php
/*
Plugin Name: (プラグインの名前)
Plugin URI: (プラグインの説明と更新を示すページの URI)
Description: (プラグインの短い説明)
Version: (プラグインのバージョン番号。例: 1.0)
Author: (プラグイン作者の名前)
Author URI: (プラグイン作者の URI)
License: (ライセンス名の「スラッグ」 例: GPL2)
*/

class MyNewWidget extends WP_Widget {

	function MyNewWidget() {
		// Instantiate the parent object
		parent::__construct( false, 'My New Widget Title' );
	}

	function widget( $args, $instance ) {
		// Widget output
	}

	function update( $new_instance, $old_instance ) {
		// Save widget options
	}

	function form( $instance ) {
		// Output admin widget options form
	}
}

function myplugin_register_widgets() {
	register_widget( 'MyNewWidget' );
}

add_action( 'widgets_init', 'myplugin_register_widgets' );

<?php

Plugin Name: (プラグインの名前)

Plugin URI: (プラグインの説明と更新を示すページの URI)

Description: (プラグインの短い説明)

Version: (プラグインのバージョン番号。例: 1.0)

Author: (プラグイン作者の名前)

Author URI: (プラグイン作者の URI)

License: (ライセンス名の「スラッグ」例: GPL2)

class MyNewWidget extends WP_Widget {

function MyNewWidget() {

// Instantiate the parent object

parent::__construct( false, 'My New Widget Title' );

}

function widget( $args, $instance ) {

// Widget output

}

function update( $new_instance, $old_instance ) {

// Save widget options

}

function form( $instance ) {

// Output admin widget options form

}

function myplugin_register_widgets() {

register_widget( 'MyNewWidget' );

}

add_action( 'widgets_init', 'myplugin_register_widgets' );

今回作成したウィジェットはこんな感じになりました。

<?php
/*
  Plugin Name: YAHMAN Add-ons PV widget extend
  Description: YAHMAN Add-ons page-view widget extend
  Version: 0.0.1
  Author: Lycolia
  License: GNU General Public License v3 or later
*/
class YAHMAN_PV_Widget_Ext extends WP_Widget {

	public function __construct() {
		parent::__construct(
      'yahman_pv_wid_ext',// Base ID
			'YAHMAN Add-ons PV widget extend', // Name
			array( 'description' => 'YAHMAN Add-ons page-view widget extend.' ) // Args
		);
	}

	/**
	 * display widget
	 *
	 * @param array $args
	 * @param array $instance
	 */
	public function widget( $args, $instance ) {
    # get counter value
    $yahman_addons_count = get_option('yahman_addons_count');

    # put header
    echo $args['before_widget'];
    # put title
    echo '<h3 class="widget_title sw_title">カウンター</h3>';

    $i = 1;

    echo '<p class="ta_r">';
    $count_string = (string)$yahman_addons_count['pv']['all'];
    $count_length = strlen($count_string);
    $wp_content_url = content_url();
      
    # configure image width
    $img_width = 45 * $count_length;
    # create canvas
    $base_img = imagecreatetruecolor($img_width, 100);
    # fill canvas with purple
    imagefill($base_img, 0, 0, imagecolorallocate($base_img, 255, 0, 255));
    # set transparent color
    imagecolortransparent($base_img, imagecolorallocate($base_img, 255, 0, 255));
      
    # get png
    for ($idx = 0; $idx < 10; $idx++) {
      $counter_imgs[$idx] = imagecreatefrompng("./wp-content/plugins/yahman-add-ons-pv-ext/assets/". $idx . ".png");
    }
      
    # join png
    for ($idx = 0; $idx < $count_length; $idx++) {
        # dstImg, srcImg, dstX, dstY, srcX1, srcY1, srcX2, srcY2
      imagecopy($base_img, $counter_imgs[$count_string[$idx]], 45 * $idx, 0, 0, 0, 45, 100);
    }
      
    # destory png
    for ($idx = 0; $idx < 10; $idx++) {
      imagedestroy($counter_imgs[$idx]);
    }
      
    # output png
    ob_start();
    imagepng($base_img);
    imagedestroy($base_img);
    $img = ob_get_clean(); 
    $enc_img = base64_encode($img);
    echo "<img src=\"data:image/png;base64,{$enc_img}\" width=\"{$img_width}\" height=\"100\">";        echo '</p>';

    # put footer
    echo $args['after_widget'];
  }

	/**
	 * 管理用のオプションのフォームを出力
	 *
	 * @param array $instance ウィジェットオプション
	 */
	public function form( $instance ) {
		// TODO: そのうち作る
	}

	/**
	 * ウィジェットオプションの保存処理
	 *
	 * @param array $new_instance 新しいオプション
	 * @param array $old_instance 以前のオプション
	 */
	public function update( $new_instance, $old_instance ) {
		// TODO: そのうち作る
	}
}

# Plugin Register

function myplugin_register_widgets() {
	register_widget( 'YAHMAN_PV_Widget_Ext' );
}

add_action( 'widgets_init', 'myplugin_register_widgets' );

100

101

102

103

104

<?php

Plugin Name: YAHMAN Add-ons PV widget extend

Description: YAHMAN Add-ons page-view widget extend

Version: 0.0.1

Author: Lycolia

License: GNU General Public License v3 or later

class YAHMAN_PV_Widget_Ext extends WP_Widget {

public function __construct() {

parent::__construct(

'yahman_pv_wid_ext',// Base ID

'YAHMAN Add-ons PV widget extend', // Name

array( 'description' => 'YAHMAN Add-ons page-view widget extend.' ) // Args

);

}

/**

* display widget

* @param array $args

* @param array $instance

public function widget( $args, $instance ) {

# get counter value

$yahman_addons_count = get_option('yahman_addons_count');

# put header

echo $args['before_widget'];

# put title

echo '<h3 class="widget_title sw_title">カウンター</h3>';

$i = 1;

echo '<p class="ta_r">';

$count_string = (string)$yahman_addons_count['pv']['all'];

$count_length = strlen($count_string);

$wp_content_url = content_url();

# configure image width

$img_width = 45 * $count_length;

# create canvas

$base_img = imagecreatetruecolor($img_width, 100);

# fill canvas with purple

imagefill($base_img, 0, 0, imagecolorallocate($base_img, 255, 0, 255));

# set transparent color

imagecolortransparent($base_img, imagecolorallocate($base_img, 255, 0, 255));

# get png

for ($idx = 0; $idx < 10; $idx++) {

$counter_imgs[$idx] = imagecreatefrompng("./wp-content/plugins/yahman-add-ons-pv-ext/assets/". $idx . ".png");

}

# join png

for ($idx = 0; $idx < $count_length; $idx++) {

# dstImg, srcImg, dstX, dstY, srcX1, srcY1, srcX2, srcY2

imagecopy($base_img, $counter_imgs[$count_string[$idx]], 45 * $idx, 0, 0, 0, 45, 100);

}

# destory png

for ($idx = 0; $idx < 10; $idx++) {

imagedestroy($counter_imgs[$idx]);

}

# output png

ob_start();

imagepng($base_img);

imagedestroy($base_img);

$img = ob_get_clean();

$enc_img = base64_encode($img);

echo "<img src=\"data:image/png;base64,{$enc_img}\" width=\"{$img_width}\" height=\"100\">"; echo '</p>';

# put footer

echo $args['after_widget'];

}

/**

* 管理用のオプションのフォームを出力

* @param array $instance ウィジェットオプション

public function form( $instance ) {

// TODO: そのうち作る

}

/**

* ウィジェットオプションの保存処理

* @param array $new_instance 新しいオプション

* @param array $old_instance 以前のオプション

public function update( $new_instance, $old_instance ) {

// TODO: そのうち作る

}

# Plugin Register

function myplugin_register_widgets() {

register_widget( 'YAHMAN_PV_Widget_Ext' );

}

add_action( 'widgets_init', 'myplugin_register_widgets' );

GitHub

Lycolia/yahman-add-ons-pv-ext

https://github.com/Lycolia/yahman-add-ons-pv-ext

WordPress YAHMAN Add-ons page-view widget extend. Contribute to Lycolia/yahman-add-ons-pv-ext development by creating an account on GitHub.

使いたい人はいないと思いますが、なんとなくGitHubにも上げておきました。

ねこみみカウンタはまだ生きていた？

全然関係なくどうでもいい話ではあるんですが、Node.jsでねこみみカウンタを使ったカウンタを作っている人がいました。かなり古いカウンタ画像なのに新たに起用する人が私以外にもいるのは正直驚きました。（私の場合は新規というより引き継ぎですが…ｗ）

3846masa's memo

画像を貼るだけお手軽アクセスカウンタ Kauntah の派生 Kauntah-SVG を作った話 - ...

https://3846masa.hatenablog.jp/entry/2017/03/18/144129

画像を貼るだけで動く最高アクセスカウンタ Kauntah というものがある． Node.js で雑に Kauntah 派生版を作った話．

なお、ねこみみカウンタ配布所では以下のようにあるため、私のリポジトリでは画像の同梱はしていません。

著作権に関しましては各キャラ(0～8)をキャラデザされた絵師の方々にあります。9のキャラの著作権は放棄してます(改変自由)

ウェブサイト上でアイコンとしての利用はOKですがTOP絵や看板、バナーなどアイコン以外のご利用に関しましてもお断り致しております

最後に

兎にも角にもこれで今後は心置きなく各種アップデートが出来ます。気が向いたらプラグインをもうちょっとまともにするかもしれないし、しないかもしれません。