ワードプレスの「p」は大文字だと最近気が付きました。危うくカテゴリーを「Wordpress」として全世界に発信してしまうところでした。
ブログをWordPressで立ち上げて自分の好みにカスタマイズしようとすると、functions.phpにアクションフックやフィルターフックを書き足していくことも多いと思います。ひとつふたつぐらいならたいした問題ではないなのかもしれませんが、functions.phpが余りにも長くなると管理をするにも一苦労です。
そこで、ある程度まとまった機能をプラグインとして分離する方法を考えたいと思います。
プラグインの作成
プラグインの名前を決める
現在公開されているプラグインとかぶらないユニークな名前でなければなりません。初めてのWordPressプラグインであり、WordPressに標準で「Hello Dolly」というプラグインがインストールされてるので、プログラミング業界の慣習として「Hello ○○」にしましょうか。
WordPress管理画面から「プラグイン」→「新規追加」、「プラグインの検索」に試しに「hello」と打ち込んでエンターしましょう。
ずらずらとでてきてしまいました。2015年5月29日の時点で325項目、11ページものヒットがあります。「Hello World」はダメですね、すでに登録されています。「Hello Dalek」、「Hello HAL」、「Hello Pinky」、いろいろですね。「Hello Gandhi」とかあります、一体何に使うのでしょうか。わかりません。
「Hello Homura」で検索かけると「マッチするプラグインはありません。」とでましたので、これでいこうと思います。「Hello, Dolly」が同一世代のすべての人々の希望と情熱を象徴するものなのに、なんで闇堕ちしそうな名前にするの？とかいうツッコミはなしでお願いします。
フォルダとファイルの作成
「/wp-content/plugins」以下にフォルダとphpファイルを作成します。
/wp-content/plugins/hello-homura/hello-homura.php
雛形
以下が雛形です。
1 2 3 4 5 6 7 8 9 10 11 12 | <?php /* Plugin Name: (プラグインの名前) Plugin URI: (プラグイン用のURI) Description: (プラグインの説明) Version: (バージョン番号) Author: (作者の名前) Author URI: (作者のURI) */ // これ以下にプログラムを書く |
今回はこのように。
1 2 3 4 5 6 7 8 9 | <?php /* Plugin Name: Hello Homura Plugin URI: http://my-plugin.com/ Description: Kurasu no minnna niha naisyo dayo! Version: 1.0 Author: Madoka Kaname Author URI: http://my-plugin-author.com/ */ |
実はこれだけで動作します。「インストール済みプラグイン」から確認してみてください。
プログラム部分を書いていないので当然なにも変化しませんが、ちゃんと有効化できます。
文字を出力
簡単な関数を定義し、文字を出力してみましょう。先ほど作ったphpファイルを次のように改造してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php /* Plugin Name: Hello Homura Plugin URI: http://my-plugin.com/ Description: Kurasu no minnna niha naisyo dayo! Version: 1.0 Author: Madoka Kaname Author URI: http://my-plugin-author.com/ */ function homura_prpr() { echo '聞くだけのことは聞いたわ。消えなさい'; } |
これをどのように使うかというと、テンプレートファイルに「<?php homura_prpr(); ?>」と書くと文字が出力されます。試しにsingle.phpなどのどこかに「<?php homura_prpr(); ?>」を挿入し、文字が出力されるのを確認してみてください。ちゃんと動作したでしょうか？
ちなみに、phpファイルをシフトJISで保存すると文字化けするので、Unicode(UTF-8 BOM無)で保存してください。
CSSで装飾してみる
さらに改造してみましょう。hello-homura.phpファイルを以下のように書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php /* Plugin Name: Hello Homura Plugin URI: http://my-plugin.com/ Description: Kurasu no minnna niha naisyo dayo! Version: 1.0 Author: Madoka Kaname Author URI: http://my-plugin-author.com/ */ function homura_prpr() { ?> <div class="homuhomu"> 魔法少女の最期なんてそういうものよ </div> <?php } function hello_homura_style(){ $plugin_url = plugin_dir_url( __FILE__ ); echo '<link rel="stylesheet" href="' . $plugin_url . 'style.css"'.' type="text/css" />'; } add_action('wp_head', 'hello_homura_style'); |
hello-homura.phpと同じフォルダにstyle.cssというファイルを作成して以下のように保存します。
1 2 3 | .homuhomu { background: #FFFF00; } |
文字の背景の色が変わったはずです。この方法だとメインのCSSを書き換えなくてもHTMLを装飾できます。
functions.phpをプラグインに切り出してみる
functions.phpを使ったWordPressの定番といえば、投稿画面のテキストエディタへのボタンの追加ではないでしょうか。
一般的にはAddQuicktagプラグインをいれるか、functions.phpの編集だと思いますが、これを自作のプラグインとして実装してみましょう。
プラグイン作成の流れ
「/wp-content/plugins」以下にフォルダとphpファイルを作成します。
/wp-content/plugins/my-add-tags/my-add-tags.php
my-add-tags.phpを以下のように編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php /* Plugin Name: My Add Tags Plugin URI: https://naokixtechnology.net/wordpress/ Description: Add buttons to the text editor of post screen. Version: 1.0 Author: Naokix Author URI: https://naokixtechnology.net/ */ function my_add_tags() { if (wp_script_is('quicktags')) { ?> <script type="text/javascript"> QTags.addButton('eg_paragraph', 'p', '<p>', '</p>', '', '', 1); QTags.addButton('eg_h2', 'h2', '<h2>', '</h2>', '', '', 2); QTags.addButton('eg_h3', 'h3', '<h3>', '</h3>', '', '', 3); QTags.addButton('eg_h4', 'h4', '<h4>', '</h4>', '', '', 4); QTags.addButton('eg_cite', 'cite', '<cite>出典：', '</cite>', '', '', 5); </script> <?php } } add_action('admin_print_footer_scripts', 'my_add_tags'); |
日本語が含まれている場合はUnicode(UTF-8 BOM無)で保存しないと文字化けするので注意してください。あとはプラグインを有効にして動作を確認してください。
最後に
今回行ったWordPressのカスタマイズは自作のプラグインにしなくてもfunctions.phpを編集すればできることですが、大量のHTMLを吐き出すカスタマイズの場合、メインのCSSを編集せずにHTMLを装飾できることもあり管理の負担が減るメリットもあると思います。
Comment