【備忘録】Wordpressでプラグインを作ろう！

ゴール：プラグインを作成して、自分のダッシュボードで有効化できるところまで
（プラグインの機能はなんでも良い。）


■下準備
Wordpress
FTP

##まず、デスクトップでもどこでも良いので、フォルダ、ファイルを作成する。
（例：desktop/todays_comments/todays_comments.php）

次に作成した「todays_comments.php」に以下を記載しましょう。

```php5:todays_comments.php
<?php
/*
Plugin Name: Todays Comments
Description: 今日のひとことを設定・表示するプラグイン
Author: Mitsuki
Version: 1.0
*/
```
Plugin Name：プラグインの名前をお好きなように記載してください。
Description:プラグインの説明をお好きなように記載してください。
Author:プラグインの作成者のお名前を記載してください。
Version:バージョンを記載してください。一旦1.0でいいと思います。


##次に「add_action」を追記しましょう。

```php5:todays_comments.php
<?php
/*
Plugin Name: Todays Comment
Description: 今日のひとことを設定・表示するプラグイン
Author: Mitsuki
Version: 1.0
*/

add_action('admin_menu', function () {
  add_menu_page(
    '今日のひとこと',
    '今日のひとこと',
    'edit_posts',
    'todays_comment',
    'show_admin_todays_comment',
    'dashicons-smiley',
    22
  );
});
```

##add_actionの説明
add_action( **$hook**, **$function_to_add**, **$priority**, **$accepted_args**)

####$hook
$function_to_add がフックされるアクション名を記載する。
admin_menuと記載すると管理画面メニューの基本構造が配置された後に**$function_to_add**を実行する。

####$function_to_add
フックする関数名 **add_menu_page** を記載する。
これで管理画面のメニューに表示されるようになる。

**add_menu_pageとは**
具体的には、管理者メニューのサイドバーに新しいトップレベルのメニューのセクションを作成します。
以下のプロパティを設定してください。
引数１(page_title):（必須）メニューが選択されたとき、ページのタイトルタグに表示されるテキスト。
引数2(menu_title):（必須）メニューとして表示されるテキスト
引数3(capability):（必須） メニューを表示するために必要な権限。注:ユーザーレベルは非推奨ですので使用しないでください。
引数4(menu_slug):（必須） メニューのスラッグ名。一意であり、小文字の英数字、ダッシュ、下線のみを含む必要があります。スラッグ名とは後にURLの名前の一部となるもの。
引数5(function):（オプション） メニューページを表示する際に実行される関数。
引数6(icon_url):（オプション） メニューのアイコンを示す。下記のURL参照。
https://developer.wordpress.org/resource/dashicons/
引数7(position):（オプション） メニューが表示される位置。省略時はメニュー構造の最下部に表示されます。大きい数値ほど下に表示されます。


##次にプラグインの機能を設定する。
（今回はショートコードによって、自分で登録した今日の一言が表示できる機能を作成。）

```php5:todays_comments.php

<?php
function show_admin_todays_comment()
{
  $html = '';
  $html .= '<div class="wrap">';
  $html .= '<h1 class="wp-heading-inline">今日のひとこと設定</h1>';
  $html .= '<form action="options.php" method="POST">';
  ob_start();
  settings_fields('group_todays_comment');
  do_settings_sections('todays_comment');
  submit_button();
  $html .= ob_get_contents();
  ob_end_clean();
  $html .= '</form>';
  $html .= '</div>';
  print $html;
}
function _init_setting_api_todays_comment()
{
  add_settings_section(
    'setting_section_todays_comment',
    '',
    'show_setting_section_text_todays_comment',
    'todays_comment'
  );
  add_settings_field(
    'todays_comment_text',
    '今日のひとこと',
    'show_input_todays_comment',
    'todays_comment',
    'setting_section_todays_comment'
  );
  register_setting('group_todays_comment', 'todays_comment_text');
}
add_action('admin_init', '_init_setting_api_todays_comment');
function show_input_todays_comment()
{
  $html = '';
  $html .= sprintf(
    '<textarea id="todays-comment-text" class="regular-text" name="todays_comment_text" rows="3">%s</textarea>',
    get_option('todays_comment_text', '')
  );
  $html .= '<div><input class="btn-reset button button-secondary" type="reset" value="メッセージを削除"></div>';
  print $html;
}
function show_setting_section_text_todays_comment()
{
  $html .= '';
  $html .= '<p>今日のひとことを設定しましょう！</p>';
  $html .= '<p>ひとことが入力されている場合のみ、表示されます。</p>';
  print $html;
}
function get_todays_comment_area()
{
  $sText = '';
  $sText = get_option('todays_comment_text', '');
  if ($sText == false) {
    return;
  }
  $html = '';
  $html .= '<section class="todays-comment">';
  $html .= '<span class="todays-comment-title">今日のひとこと</span>';
  $html .= '<p class="todays-comment-text">' . nl2br($sText) . '</p>';
  $html .= '</section>';
  return $html;
}
add_shortcode('show_todays_comment', 'get_todays_comment_area');

```

どこでもいいので以下のショートコードを記載すると管理画面にて登録した「今日のひとこと」がフロントページに表示される。
[show_todays_comment]


##また、フロント画面でCSS、管理画面でJSを使用したい場合、以下のコードを最後に記載する必要があるので、ご注意ください。
フォルダ構成は以下のようになります。
todays_comments/assets/css/style.css
todays_comments/assets/js/todays_comments_admin.js

```php5:todays_comments.php

<?php
add_action( 'admin_enqueue_scripts', function( $hook_suffix ){
  if( $hook_suffix == 'toplevel_page_todays_comment' ){
    wp_enqueue_script(
      'todays-comment-admin',
      plugins_url( '/assets/js/todays-comments-admin.js', __FILE__ ),
      array( 'jquery' ),
      array(),
      true
    );
  }
});
add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style(
    'today-comment-style',
    plugins_url( '/assets/css/style.css', __FILE__ )
  );
});
```


```css:style.css
.todays-comment-title{
    display: block;
    margin: 0 0 0.5em 0;
  }
```

```js:todays-comments-admin.js
jQuery(document).ready(function($){  

    alert('hello');

    $('.btn-reset').click(function(e){
      e.preventDefault();
      $('#todays-comment-text').html('');
    });
  });
  
```


以上！