WordPressの投稿を追加画面にボタンをつける（プラグイン作成）

今日は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グループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。