初めての自作WordPressプラグイン。Twitterフォローボタンを作ろう。

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

まえがき

WordPressのプラグインを作ってみよう!

とゆう今回のお題です。

今回紹介するのはとても簡単で入門向けです。

 

予備知識

プラグインを作るにあたってある程度の知識が必要です。

簡単なものをつくるには深い知識は必要ありませんがプログラミングも

WordPressもHTMLもわからない人には敷居が高いかと思います。

 

箇条書きにするとこんな感じ↓

 

– おそらく必須な知識。

・Wordpressがなんとなくわかる。

・HTMLがある程度わかる。

・PHPがある程度わかる。

 

– あるとよりリッチなプラグインが作れそうな知識。

・SQLの知識。

・Javascript

・CSS

・JSON

 

今回のお題

こんな感じのフォローボタンをつくります。

20130712022705

設定画面で自分のTwitterIDを登録しておいて。

ブログの記事にフォローボタンを出すとゆうものです。

「プラグインするまでもないやんけ!」とゆうのが本音ですが、

今回はプラグインを作ることが目的なのです!

 

プラグインを設置する

/wp-content/plugins

のフォルダの中に作成するプラグインのフォルダを作成します。

20130712023238

作成したなかに

wp-plugin_twitter-follow.php

とゆう名前でPHPのファイルを作ります。

こいつにガシガシコードを書いていきます。

 

プラグインの情報を記入

<?php 
/*
Plugin Name: WP Twitter Follow Plugin
Plugin URI: http://www.absolute-keitarou.net/blog/
Description: ツイッターのフォローボタンプラグイン
Author: keitarou
Version: 1.0
Author URI: http://www.absolute-keitarou.net/blog/
*/

このようにコメントを使ってプラグインの情報を書いてあげます。

するとWordpressのインストール済プラグインに作成したプラグインが現れます!

20130712023802

 

設定画面を作る

wp-plugin_twitter-follow.php

<?php 
/*
Plugin Name: WP Twitter Follow Plugin
Plugin URI: http://www.absolute-keitarou.net/blog/
Description: ツイッターのフォローボタンプラグイン
Author: keitarou
Version: 1.0
Author URI: http://www.absolute-keitarou.net/blog/
*/
$TwitterFollow = new TwitterFollow();
class TwitterFollow
{
	private $name        = 'TwitterFollow';
	private $option_name = 'TwitterFollow';

	public function __construct() {
		// アクションの設定。
		add_action('admin_menu', array($this, 'add_menu'));
		add_action('admin_init', array($this, 'update_tf'));

	}

/**
	管理画面で利用するメソッド
*/
	// 設定一覧に追加する
	public function add_menu() {
		add_options_page($this->name, $this->name, 8, $this->name, array($this, 'set_tf'));
	}

	// 更新処理
	public function update_tf() {
		if (isset($_POST[$this->option_name]) && !empty($_POST[$this->option_name])) {
			update_option($this->option_name, $_POST[$this->option_name]);
		}
	}

	// 設定画面を呼び出す
	public function set_tf() {
		require 'set_tf.html';
	}

}

wp-plugin_twitter-follow.phpと同じフォルダの中に

set_tf.html

を作成。設定画面ではこのHTMLを呼び出すようにします。

<h2><?php echo $this->name; ?></h2>

<form action="" method="post">
<p>@<input type="text" name="<?php echo $this->option_name;?>" value="<?php echo get_option($this->option_name);?>" /></p>
<p><input type="submit" value="更新" class="button button-primary" /></p>
</form>


テキストボックスに自分のTwitterのIDを入力して更新しておきましょう

20130712024110

 

データベースにプラグインのオプションの値が入ったのが確認できます。

20130712024219

 

ついでに wp_optionsテーブルの構造をチェック。

20130712024231

かなり簡単な構造になっているのがわかります。

複雑な値を1つのオプションテーブルで管理するときなどはjson形式で格納するなどすると

便利そうです。

 

記事内にフォローボタンを表示する

wp-plugin_twitter-follow.php を完成させます

<?php 
<?php 
/*
Plugin Name: WP Twitter Follow Plugin
Plugin URI: http://www.absolute-keitarou.net/blog/
Description: ツイッターのフォローボタンプラグイン
Author: keitarou
Version: 1.0
Author URI: http://www.absolute-keitarou.net/blog/
*/
$TwitterFollow = new TwitterFollow();
class TwitterFollow
{
	private $name        = 'TwitterFollow';
	private $option_name = 'TwitterFollow';

	public function __construct() {
		// アクションの設定。
		add_action('admin_menu', array($this, 'add_menu'));
		add_action('admin_init', array($this, 'update_tf'));

		// フィルターの設定
		add_filter('the_content', array($this, 'show_tf'));
	}

/**
	管理画面で利用するメソッド
*/
	// 設定一覧に追加する
	public function add_menu() {
		add_options_page($this->name, $this->name, 8, $this->name, array($this, 'set_tf'));
	}

	// 更新処理
	public function update_tf() {
		if (isset($_POST[$this->option_name]) && !empty($_POST[$this->option_name])) {
			update_option($this->option_name, $_POST[$this->option_name]);
		}
	}

	// 設定画面を呼び出す
	public function set_tf() {
		require 'set_tf.html';
	}

/**
	表示の際に利用するメソッド
*/
	// Followボタンの表示
	public function show_tf($content) {
		$id = htmlspecialchars(get_option($this->option_name), ENT_QUOTES);
		require 'show_tf.html';
		return $content;
	}
}

 ※ 投稿から1日後少し表示メソッドの修正をしました。

表示用のHTMLを作成します。(wp-plugin_twitter-follow.phpと同じフォルダ)

show.tf

<a href="https://twitter.com/<?php echo $id;?>" class="twitter-follow-button" data-show-count="false" data-lang="ja">@<?php echo $id;?>さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

これでOK!

本記事の最初の画像のように記事内にフォローボタンが現れれば完成です!

 

Github

ソースコードのダウンロードはこちらから

https://github.com/keitarou/wp-plugin_twitter-follow

 

参考になったサイト

・WORDPRESS私的マニュアル

http://elearn.jp/wpman/

 

・WORDPRESSのwiki

ここ

 

あとはなんといっても既存のプラグインたちが参考になると思います。

関連記事

PHPでRedisを使ってみる

  まえがき RedisをPHPから操作するためのメモ   開...

記事を読む

no image

RedisとMYSQLでランキングベンチマーク作ってみたよ

      まえがき Redisを使って簡易なランキン...

記事を読む

imgres

wgetコマンドを使ってWordPressを簡単ダウンロード

まえがき wgetコマンドでWordPressをダウンロードしたら楽...

記事を読む

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

imgres-5

【ゲーム実況】シャア専用ダークソウルがおもしろすぎるのでまとめてみる

個人的に今一番おもしろいと思うゲーム実況です!!   [nicom...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑