今日はCatch the Change vol.2 エンジニアDayです。
喋り倒したいと思います。中神です。
さて今回は、WordPressのプラグインって簡単に作れるんですよ、っということを伝えたいのと、今日のイベントのネタバレ的なものを含みたいので、この内容にしました。
WordPressの投稿を追加画面にボタンをつける(プラグイン作成)
実際の画面は、これです。

おっと、パーマリンク下の「メディアを追加」というボタンの右にありますね。
「音声入力」というボタン。

そう、これを作ります。
※なぜ、「音声入力」なのかは、Catch the Change vol.2 エンジニアDayをお楽しみに。
プラグイン準備
準備は、WordPressフォルダの以下の場所にプラグインフォルダを作ってください。
- wp-contents/plugins/<プラグインの名前>
<プラグインの名前>はケバブケース(ハイフンで繋げる)のがコーディング規約で良しとされています。
つぎにその中に、プラグインの名前と同じ名前でphpファイルを作成してください。
- wp-contents/plugins/<プラグインの名前>/<プラグインの名前>.php
作成したphpの中身はこのようになります。
<?php /* Plugin Name: Gami3 Write Speech Description: 「Web Speech Api」を使って喋って記事を書く Version: 0.1 Author: nakagami */
- Plugin Name: 管理画面のプラグインページで表示される名前
- Description: 管理画面のプラグインページで表示される説明
- Version: バージョン情報
- Author: プラグイン作成者名
のようにコメントを書いてください。
プラグインの有効化
すると、プラグイン管理画面で作成したプラグインが表示されます。

「有効化」をクリックすると、プラグインが動くようになります。
が、、、なにも書いてないので動きません。
ボタンを表示させる
元々のソースを見るとこの「メディアを追加」ボタンは、以下のようなhtmlタグで書かれています。
<div id="wp-content-media-buttons" class="wp-media-buttons"> <button id="insert-media-button" class="button insert-media add_media" type="button" data-editor="content"> メディアを追加</button> </div>
ので、id=”wp-content-media-buttons”にボタンを追加してやればいいですね^^
実際に書いたコードはこれ。
<?php /* Plugin Name: Gami3 Write Speech Description: 「Web Speech Api」を使って喋って記事を書く Version: 0.1 Author: nakagami */ function add_custom_button() { ?> <script> (function($) { $('#wp-content-media-buttons').append('<a id="recording_start" class="button">音声入力<span id="loading"></span></a>'); }(jQuery)); </script> <?php } add_action( 'admin_footer-post-new.php', 'add_custom_preview_button' ); add_action( 'admin_footer-post.php', 'add_custom_preview_button' );
ポイントはadd_actionです
add_action( 'admin_footer-post-new.php', 'add_custom_button' ); add_action( 'admin_footer-post.php', 'add_custom_button' );
どこに、actionを追加するかってことですが、
- admin_footer-post-new.php・・・新規投稿画面
- admin_footer-post.php・・・・・投稿編集画面
となっています。
あとは、jsとか色々書けるので、このボタンのクリックに対して、いろんなイベントを書けばいいですね。
まずは、コピペからはじめてみてください。
おしらせ
「宮崎でITの勉強会に参加したいけど、情報がない!」というあなたへ
宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。