Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style

4,445 views

Published on

2017年3月24日に開催されたWordBench東京「WordPressプラグイン祭り」でのセッションスライドです。 https://wbtokyo.doorkeeper.jp/events/58337

Published in: Technology
  • Be the first to comment

ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style

  1. 1. ノンプログラマーのための WordPress プラグイン作成 超入門 みにょん すたいる Mignon Style
  2. 2. いまい みずえ WordPress公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPressスターターテーマ「_s」コントリビューター Webデザイナー @mignon_style mignonxstyle https://profiles.wordpress.org/mignonstyle Adobe Bracketsの WordPress用 コードヒントも 作ってます! http://mignonstyle.com/ Mignon Style みにょん すたいる
  3. 3. テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/ WordPress 公式ディレクトリの テーマを 作ったり
  4. 4. WordPress 公式ディレクトリの プラグインを 作ったり プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/
  5. 5. WordPressの スターターテーマ 「 _s 」に WordPressスターターテーマ「 _s 」 http://underscores.me/
  6. 6. コントリビュート したりしてます WordPressスターターテーマ「 _s 」 http://underscores.me/
  7. 7. プラグインとは 0 1
  8. 8. WordPressに機能を 追加・拡張するための プログラム(ツール) プラグインとは
  9. 9. プラグ イン テーマ WordPress
  10. 10. デザインは テーマ 機能は プラグイン
  11. 11. Analyticsのスクリプト SEOのオプション SNSの共有ボタンやリンク ショートコード カスタム投稿・カスタムタクソノミー
  12. 12. プラグイン テリトリー
  13. 13. テーマ固有 の機能 テーマに記述 汎用性の ある機能 プラグイン
  14. 14. 汎用的な機能を プラグインにすれば メンテナンスも楽々!!
  15. 15. プラグインを 作ってみよう!
  16. 16. プラグインの作り方 02
  17. 17. <?php /* Plugin Name: My Plugin Plugin URI: https://github.com/mignonstyle/my-plugin Description: 練習用のプラグインです Version: 1.0 Author: Mignon Style Author URI: http://mignonstyle.com/ License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ my-plugin.php 必 須 プラグイン名には半角英数字と ハイフン、スペースが使用できます ファイルの作成
  18. 18. my-plugin.php <?php /* Plugin Name: プラグインの名前 Plugin URI: プラグインのサイトURI Description: プラグインの説明 Version: プラグインのバージョン番号 Author: プラグインの作者の名前 Author URI: プラグインの作者のサイトURI License: ライセンス名 License URI: ライセンスのサイトURL */ プラグインの ファイルの文頭に ヘッダーを記述すると プラグインとして 認識されます
  19. 19. プラグイン用の ファイルをいれる フォルダ(ディレクトリ) を作成します ファイル名やフォルダ名には 小文字の半角英数字と ハイフンが使用できます フォルダの作成
  20. 20. プラグイン用のフォルダに my-plugin.phpを入れます フォルダのアップロード
  21. 21. プラグイン用のフォルダをZIP 形式に圧縮 管理画面からアップロードする場合
  22. 22. 管理画面の プラグイン > 新規追加 プラグインのアップロード で zipファイルを選択 今すぐ インストール zip ファイルを 選択
  23. 23. FTPでアップロードする場合 プラグインのフォルダをWordPressをインストールしてる サーバーの wp-content/plugins にアップロード
  24. 24. 管理画面の プラグイン > インストール済みプラグイン プラグインを選んで有効化 プラグインが 表示された! プラグインを有効化
  25. 25. ショートコード 03
  26. 26. PHPのコードやテンプレートタグなどを 投稿ページ・固定ページ・ カスタム投稿タイプの本文や テンプレートファイルで 簡単に使用するための仕組み ショートコードとは
  27. 27. ショートコード Contact Form 7 [contact-form-7 id="1234" title="お問い合わせフォーム"] Simple Map [map]スカイツリー[/map]
  28. 28. ショートコード [$tag] と書くと $func で作成した関数が実行される ショートコードの登録 add_shortcode( $tag , $func ); ショートコードのタグ コールバック関数
  29. 29. 古い記事にメッセージを 表示するショートコードを 作ってみよう!
  30. 30. 更新されていない期間を計算 記事が1年以上更新されていなかったら 「 ○年以上前の記事です」とメッセージを返す ショートコードに登録
  31. 31. <?php /* Plugin Name: My Plugin Plugin URI: https://github.com/mignonstyle/my-plugin Description: 練習用のプラグインです Version: 1.0 Author: Mignon Style Author URI: http://mignonstyle.com/ License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ // ここにコードを記述します my-plugin.php
  32. 32. function my_old_post_year() { $diff = strtotime( date( 'Ymd' ) ) - strtotime( get_the_modified_time( 'Ymd' ) ); $diff = $diff / 60 / 60 / 24; $diff = ( $diff > 365 ) ? floor( $diff / 365 ) : ''; return $diff; } function my_old_post_message_shortcode() { $year = my_old_post_year(); if ( !empty( $year ) ) { $text = sprintf( 'この記事は%d年以上前の記事です。 内容が古い可能性がありますのでお気を付け下さい。', $year ); $text = '<div class="old-post-message"><p>' . esc_attr( $text ) . '</p></div>'; } else { $text = ''; } return $text; } add_shortcode( 'my_old_post_message', 'my_old_post_message_shortcode' ); my-plugin.php 記事が更新されていない 期間を計算
  33. 33. 「 ○年以上前の記事です」と メッセージを返す
  34. 34. ショートコードに登録
  35. 35. my-plugin.php function my_old_post_year() { $diff = strtotime( date( 'Ymd' ) ) - strtotime( get_the_modified_time( 'Ymd' ) ); $diff = $diff / 60 / 60 / 24; $diff = ( $diff > 365 ) ? floor( $diff / 365 ) : ''; return $diff; } 記事が更新されていない期間を計算
  36. 36. 更新されていない期間を計算 get_the_modified_time() 投稿の更新日を取得
  37. 37. 記事が1年以上更新されていなかったら 期間(年数 )を取得して 取得した値を返す
  38. 38. function my_old_post_message_shortcode() { $year = my_old_post_year(); if ( !empty( $year ) ) { $text = sprintf( 'この記事は%d年以上前の記事です。 内容が古い可能性がありますのでお気を付け下さい。', $year ); $text = '<div class="old-post-message"><p>' . esc_attr( $text ) . '</p></div>'; } else { $text = ''; } return $text; } メッセージを返す my-plugin.php
  39. 39. 更新されていない期間の 値を受けとる
  40. 40. 値があったらメッセージを取得 取得した値を返す
  41. 41. my-plugin.php ショートコードに登録 function my_old_post_message_shortcode() { // メッセージを返すコード } add_shortcode( 'my_old_post_message', 'my_old_post_message_shortcode' );
  42. 42. ショートコードのタグ コールバック関数 ショートコードで 実行する関数名
  43. 43. [my_old_post_message] ショートコードを使用
  44. 44. メッセージが 表示された!
  45. 45. ウィジェットでショートコードを使用するには add_filter( 'widget_text', 'shortcode_unautop' ); add_filter( 'widget_text', 'do_shortcode' ); WordPressが改行を段落タグに変えるのを防ぐ ショートコードを動作させる 1、2の順番で コードを追加
  46. 46. フィルターフックと アクションフック 04
  47. 47. フックとは WordPressのコア・テーマ・ プラグインなどのPHPの処理に対して 特定のタイミングで他の関数を 実行するための仕組み
  48. 48. WordPressのフック フィルター フック 処理の変更・削除 アクション フック 処理の追加・削除
  49. 49. 薄力粉120gと砂糖40gを混ぜる バター60gを加えてよく練る 綿棒で生地を5ミリくらいの厚さにのばす WordPressの処理をレシピにたとえると 処理 処理 処理
  50. 50. 材料の混ぜ方を 変更できるように しておこう! フィルター フック
  51. 51. 薄力粉120gと砂糖40gを 混ぜる 混ぜ方を変更できるように フィルターフックを作成
  52. 52. 薄力粉120gと砂糖40gを ふわっと混ぜる 処理を 変更
  53. 53. バターを加えた後で いろいろ入れれるように しておこう! アクション フック
  54. 54. バター60gを加えてよく練る バターの後に処理を追加できるよう アクションフックを作成
  55. 55. バター60gを加えてよく練る 冷蔵庫で生地を寝かす 処理を 追加
  56. 56. フィルターフックと アクションフックは 役割が違います!
  57. 57. フィルターフック 05
  58. 58. フィルターフックの使い方 add_filter( $tag, $function_to_add ); function $function_to_add(){ // コードを記述 } フィルターフックの名前 コールバック関数
  59. 59. フィルターフックを使って 古い記事にメッセージを 自動的に表示させよう!
  60. 60. my-plugin.php function my_old_post_year() { $diff = strtotime( date( 'Ymd' ) ) - strtotime( get_the_modified_time( 'Ymd' ) ); $diff = $diff / 60 / 60 / 24; $diff = ( $diff > 365 ) ? floor( $diff / 365 ) : ''; return $diff; } 記事が更新されていない期間を計算 ショートコードで 作成した 関数を使います
  61. 61. function my_old_post_message_content( $content ) { $year = my_old_post_year(); if ( !empty( $year ) ) { $text = sprintf( 'この記事は%d年以上前の記事です。 内容が古い可能性がありますのでお気を付け下さい。', $year ); $text = '<div class="old-post-message"><p>' . esc_attr( $text ) . '</p></div>'; } else { $text = ''; } return $text . $content; } 本文の前にメッセージを表示 my-plugin.php
  62. 62. 投稿の本文のデータが入っている 投稿の本文の前に メッセージを追加して返す
  63. 63. my-plugin.php フィルターフックを登録 function my_old_post_message_content( $content ) { // コード } add_filter( 'the_content', 'my_old_post_message_content' );
  64. 64. フィルターフックの名前 コールバック関数 ショートコードで 実行する関数名
  65. 65. 自動的に メッセージが 表示された!
  66. 66. アクションフック 06
  67. 67. アクションフックの使い方 add_action( $hook, $function_to_add ); function $function_to_add(){ // コードを記述 } アクションフックの名前 コールバック関数
  68. 68. アクションフックを使って CSSでメッセージの デザインを変えよう!
  69. 69. CSSファイルのアップロード .old-post-message のスタイルを記述した CSSファイルをプラグイン用のフォルダに入れます
  70. 70. function my_plugin_enqueue_scripts() { wp_enqueue_style( 'my-plugin', plugins_url( 'my-style.css', __FILE__ ) ); } add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' ); スタイルシートの読込 my-plugin.php
  71. 71. スタイルシートのURL スタイルシートのID
  72. 72. my-plugin.php アクションフックを登録 function my_plugin_enqueue_scripts() { wp_enqueue_style( 'my-plugin', plugins_url( 'my-style.css', __FILE__ ) ); } add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' ); アクションフックの名前 コールバック関数 ショートコードで 実行する関数名
  73. 73. スタイルが 反映された!
  74. 74. CSS・Javascriptのファイルを 読み込むアクションフック 表示されるページに読み込む add_action( 'wp_enqueue_scripts', 'function_name' ); 管理画面のページに読み込む add_action( 'admin_enqueue_scripts', 'function_name' ); ログインページに読み込む add_action( 'login_enqueue_scripts', 'function_nam' );
  75. 75. WordPressには フィルターフックや アクションフックがたくさん 用意されています フックが用意されてる テーマやプラグインも たくさんあるよ!
  76. 76. どこで 調べれば いい?
  77. 77. https://codex.wordpress.org/Plugin_API/Filter_Reference WordPress Codex Plugin API/Filter Reference
  78. 78. https://codex.wordpress.org/Plugin_API/Action_Reference WordPress Codex Plugin API/Action Reference
  79. 79. https://developer.wordpress.org/reference/hooks/ Code Reference
  80. 80. コアファイルを読もう apply_filters() で フィルターフックに 追加された 関数を呼び出し
  81. 81. WordPressの API
  82. 82. プラグインを 作成する Plugin API
  83. 83. 管理画面のページに 設定フォームを作成する Settings API
  84. 84. データベースに データを保存する Options API
  85. 85. ウィジェットを 作成する Widgets API
  86. 86. カスタマイザーに 項目を追加する Customize API
  87. 87. https://codex.wordpress.org/WordPress_APIs WordPress Codex WordPress APIs
  88. 88. まとめ
  89. 89. プラグインは フックでできている
  90. 90. プラグインを作ったら 公式ディレクトリに 登録してみよう!
  91. 91. 登録は とっても簡単!
  92. 92. あとは アイデア次第!
  93. 93. すてきな プラグインを 作ってください

×