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

この記事が気に入ったら
いいね ! しよう

Twitter で

新卒採用をはじめるならディーレクトにご相談ください

新卒採用に踏み出せない人事担当者の方、 そのお悩み、ディーレクトが解決します!

ABOUTこの記事をかいた人

アバター画像

株式会社D-rect CTO 専務取締役。大学院在学中よりITベンチャー企業にてプログラマ・エンジニアとして活躍。有名アーティストや海外ブランドのECサイト構築に携わる。その後、求人サイト全てのシステム設計・構築に携わり、現在に至る。 勉強会の主催や、職業訓練校においてプログラミングの講師を務めるなど、若手技術者の育成にも力を注いでいる。サーバ構築を本業としており、得意な事は、粗探しとあげ足取り。