WordPressプラグイン作成方法

5月 19, 2020

WordPress でブログを書いていると、なんとなく function.php を触ることが多い。今回、いくつかの記事をサブブログに分けようと決心し、ついでに function.php に書いたコードをプラグイン化してみようとトライしてみた。

あたい、10年以上前に C++/Javaメインで開発に携わっていた経験はちょいありますが、PHPはWordPressで初めて触ったレベルです。

Contents

1. 必要なもの
2. 命名規則とこの記事での例
3. プラグインを格納するディレクトリを作成
4. PHP ファイルの作成
- 4.1. その他のコメント
5. WordPressダッシュボードでプラグインを認識
6. CSSを適用する方法
7. さいごに
8. 参考URL

必要なもの

FTP転送ツール：FileZilla や ffftp が有名
SSHできるターミナルソフト：TeraTerm が有名。当方はなんとなく RLogin を使っている

命名規則とこの記事での例

メモ欄に命名に関する注意点を書いた。「例」は、本記事でのサンプルだ。

項目	例	メモ
プラグイン名	CG List Articles	プラグインが何を行うかを考えて命名する。プラグイン名は唯一の名前に。配布サイトやGoogle 検索して被ってないかチェックすると良い。
ディレクトリ名	cg-list-articles	特に決まりは無いようだが、ほとんどのプラグインは、プラグイン名を小文字にしてスペースを「-」ハイフンで置き換えている。
ファイル名	cg-list-articles.php	プラグインの名前が「Fabulous Functionality」であれば fabfunc.php などが考えられる。唯一の名前を選ぶこと。wp-content/plugins/配下に、同じ PHP ファイル名のプラグインは複数存在できないため。

プラグインを格納するディレクトリを作成

SSHでサーバーにアクセスする。
WordPress インストール配下にある、wp-content/plugins にプラグイン用のディレクトリを作成する。

コマンド例：

$ mkdir cg-list-articles        // 現在の場所に cg-list-articles ディレクトリを作成
$ chmod 755 cg-list-articles    // パーミッションを 755 に変更

// パーミッションの確認
$ ll
drwxr-xr-x  2 xxxx xxxxx   42 May 18 17:32 cg-list-articles

mkdirとは

Unix/Linuxなどで使われる mkdir (make directory) コマンドは、新しいディレクトリを作るのに使われる。

chmodとは

chmod（Change access permissions）は、指定されたファイル（複数可）のアクセスパーミッションを変更する。

chmodのパーミッションに関しては、鋭意、記事作成中（予定）。

PHP ファイルの作成

cg-list-articles.php を作成し、文字コード [UTF-8]、改行コード [CR+LF] で保存する。私は、Windowsで php ファイルを作成し、FTPツールで転送したが、SSH で vi コマンドなどを使ってファイルを作成しても、もちろん良い。

PHPの書式が重要だチュー。

PHPファイル冒頭のコメントが重要で、必ず「Plugin Name」を記載すること。ここがないと、WordPressのダッシュボードにてプラグインが正しく認識されない。

<?php
/*
Plugin Name: CG List Articles
*/
// ここにコードを書く
?>

その他のコメント

Plugin Name以外のコメントは以下の通り。なるべく丁寧に書いたほうが良いでしょう。

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

WordPressダッシュボードでプラグインを認識

cg-list-articles.php を配置したら、ダッシュボードにログインして[インストール済みプラグイン]を表示する。作成したプラグインが表示されるはずなので、[有効化] を押下する。

ヒント：プラグインエディター

プラグインが正しく認識されると、[プラグインエディター] > [編集するプラグインを選択] でファイルを編集することができる。

注意！コメント内のプラグイン名は固有なものに！

プラグイン名（PHPコメント内記載のもの）が既存のプラグインと被ると、既存プラグインで認識されてしまうので、固有の名称にしなければならない。

私は、最初「List Articles」というざっくりしたプラグイン名で試したら、「WordPress List Articles」という既存プラグインが認識されてしまい、そちらがインストールされてしまった。ガーン。

動作確認

自作プラグインのショートコードを呼び出して確認する。

CSSを適用する方法

自作プラグインが出力したタグに独自スタイルを適用したい場合。自作の*.css を HTML の HEAD タグ内に挿入する方法のコード例を以下に記載しておく。

<?php
/*
Plugin Name: CG List Articles
*/

add_action('init', 'CgListArticles::getInstance');

class CgListArticles {

	private static $singleton;
	
	public static function getInstance() {
		if ( is_null( self::$singleton ) ) {
			self::$singleton = new CgListArticles();
		}
		return self::$singleton;
	}

	private function __construct() {
		global $wp_version;
		$this->wp_version = $wp_version;
		
		add_action( 'wp_head'     , array( $this, 'print_css' ) );
	}

    // 専用CSSの出力
	function print_css() {
		echo '<link rel="stylesheet" href="' . WP_PLUGIN_URL . str_replace( str_replace( '\\', '/', WP_PLUGIN_DIR ), '', str_replace( '\\', '/', dirname( __file__ ) ) ) . '/css/category_card.css" type="text/css" media="all" />' . "\n";
		echo '<link rel="stylesheet" href="' . WP_PLUGIN_URL . str_replace( str_replace( '\\', '/', WP_PLUGIN_DIR ), '', str_replace( '\\', '/', dirname( __file__ ) ) ) . '/css/read_more_card.css" type="text/css" media="all" />' . "\n";
	}


// 省略

デザインパターンのシングルトンパターンを使ってみた（懐かしい）。大昔、私が読んだ時は感動したが、今はもう流行らないのだろうか。

【中古】単行本(実用) 日本科学技術大学教授・上田次郎のどんと来い、超常現象 V・I・P用 / 上田次郎