ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
•
5 recomendaciones•5,060 vistas
2017年3月24日に開催されたWordBench東京「WordPressプラグイン祭り」でのセッションスライドです。 https://wbtokyo.doorkeeper.jp/events/58337
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
Similar a ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style (20)
Último
Último (10)
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
- 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. テーマ「 Chocolat 」 https://wordpress.org/themes/chocolat/ WordPress 公式ディレクトリの テーマを 作ったり
- 4. WordPress 公式ディレクトリの プラグインを 作ったり プラグイン「 MS Custom Login 」 https://wordpress.org/plugins/ms-custom-login/
- 5. WordPressの スターターテーマ 「 _s 」に WordPressスターターテーマ「 _s 」 http://underscores.me/
- 6. コントリビュート したりしてます WordPressスターターテーマ「 _s 」 http://underscores.me/
- 7. プラグインとは 0 1
- 12. プラグイン テリトリー
- 15. プラグインを 作ってみよう！
- 16. プラグインの作り方 02
- 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. my-plugin.php <?php /* Plugin Name: プラグインの名前 Plugin URI: プラグインのサイトURI Description: プラグインの説明 Version: プラグインのバージョン番号 Author: プラグインの作者の名前 Author URI: プラグインの作者のサイトURI License: ライセンス名 License URI: ライセンスのサイトURL */ プラグインの ファイルの文頭に ヘッダーを記述すると プラグインとして 認識されます
- 22. 管理画面の プラグイン > 新規追加 プラグインのアップロード で zipファイルを選択 今すぐ インストール zip ファイルを 選択
- 24. 管理画面の プラグイン > インストール済みプラグイン プラグインを選んで有効化 プラグインが 表示された！ プラグインを有効化
- 25. ショートコード 03
- 27. ショートコード Contact Form 7 [contact-form-7 id="1234" title="お問い合わせフォーム"] Simple Map [map]スカイツリー[/map]
- 28. ショートコード [$tag] と書くと $func で作成した関数が実行される ショートコードの登録 add_shortcode( $tag , $func ); ショートコードのタグ コールバック関数
- 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. 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 記事が更新されていない 期間を計算
- 34. ショートコードに登録
- 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; } 記事が更新されていない期間を計算
- 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
- 41. my-plugin.php ショートコードに登録 function my_old_post_message_shortcode() { // メッセージを返すコード } add_shortcode( 'my_old_post_message', 'my_old_post_message_shortcode' );
- 44. メッセージが 表示された！
- 45. ウィジェットでショートコードを使用するには add_filter( 'widget_text', 'shortcode_unautop' ); add_filter( 'widget_text', 'do_shortcode' ); WordPressが改行を段落タグに変えるのを防ぐ ショートコードを動作させる 1、2の順番で コードを追加
- 57. フィルターフック 05
- 58. フィルターフックの使い方 add_filter( $tag, $function_to_add ); function $function_to_add(){ // コードを記述 } フィルターフックの名前 コールバック関数
- 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. 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
- 63. my-plugin.php フィルターフックを登録 function my_old_post_message_content( $content ) { // コード } add_filter( 'the_content', 'my_old_post_message_content' );
- 66. アクションフック 06
- 67. アクションフックの使い方 add_action( $hook, $function_to_add ); function $function_to_add(){ // コードを記述 } アクションフックの名前 コールバック関数
- 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
- 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. スタイルが 反映された！
- 74. CSS・Javascriptのファイルを 読み込むアクションフック 表示されるページに読み込む add_action( 'wp_enqueue_scripts', 'function_name' ); 管理画面のページに読み込む add_action( 'admin_enqueue_scripts', 'function_name' ); ログインページに読み込む add_action( 'login_enqueue_scripts', 'function_nam' );
- 76. どこで 調べれば いい？
- 77. https://codex.wordpress.org/Plugin_API/Filter_Reference WordPress Codex Plugin API/Filter Reference
- 78. https://codex.wordpress.org/Plugin_API/Action_Reference WordPress Codex Plugin API/Action Reference
- 81. WordPressの API
- 88. まとめ
- 89. プラグインは フックでできている
- 91. 登録は とっても簡単！
- 92. あとは アイデア次第！