Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress 新マニュアル「HelpHub」の言語リンク用プラグイン作成顛末 - Making of HelpHub Language Selector Plugin

WordPress 新マニュアル「HelpHub」の言語リンク用プラグイン作成顛末 - Making of HelpHub Language Selector Plugin

2016年12月10日 WordPressコントリビュート勉強会 第5回 in タロスカイ (株) ショートセッション用資料 2016/12/11 更新

Akira Tachibana

December 10, 2016
Tweet

More Decks by Akira Tachibana

Other Decks in Technology

Transcript

  1. WordPress 新マニュアル「HelpHub」の 言語リンク用プラグイン作成顛末 Making of HelpHub Language Selector Plugin WordPressコントリビュート勉強会

    第5回 in タロスカイ (株) 2016年12月10日 第1.2版 立花 明 (@atachibana)
  2. 自己紹介 • 立花 明 • IT 関連会社勤務 (非 WordPress) •

    好きなこと: 何かを集めること、並べること – モットー: これ以上集め始めない、並べ始めない 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 2
  3. WordPress マニュアル Codex 2016/12/10 Contribute Study - Making of HelpHub

    Language Selector Plugin by Akira Tachibana 3 https://codex.wordpress.org/Administration_Screens
  4. もうすぐリタイヤ予定 • 2017年中? • 主な移行先 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 4 Codex 移行先 構文、関数、クラス etc. Code Reference 使い方、FAQ HelpHub 開発者向け 各種ハンドブック
  5. 鋭意、制作中 2016/12/10 Contribute Study - Making of HelpHub Language Selector

    Plugin by Akira Tachibana 5 https://developer.wordpress.org
  6. 求人、募集中 • 募集一覧 2016/12/10 Contribute Study - Making of HelpHub

    Language Selector Plugin by Akira Tachibana 6 お仕事 備考 HelpHub - コンテンツ移行 Codex からのコピー& ペースト [募集終了] - コンテンツリライト 募集中 - テーマ制作、修正 急募 Theme Handbook - ライター、レビューア 急募
  7. • 我こそはと思わん方、是非 => 募集案内のリンク HelpHub の例 - 道まだ半ば 2016/12/10 Contribute

    Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 7 http://wphelphub.com/getting-started/administration-screens/
  8. ただしこれは英語版の話し • 英語版 Codex は消える予定 – 2017年中は元のページから HelpHub 等に転送される •

    国際化の方針は未定 • それまで各国語版 Codex は残る予定 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 8
  9. でも、HelpHub のページには、 日本語版 Codex へのリンクがない! 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 9
  10. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 10 国際化が遅れるのはわかりました。 では、せめて各国語版の Codex リンクはつ けてください。お願いします。 OK。じゃあショートコードで作って。 Issue 投げとく。 ... あ、はい...。 (ショートコード書いたことないけど...)
  11. Codex の言語リンク • ソースコード (MediaWiki) 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 11 {{Languages| {{en|Administration Screens}} {{fr|Panneaux Administration}} {{hr|Administracijski Zasloni}} {{ja|管理画面}} {{pt-br|Painel de Administração}} {{ru|Административные панели}} {{th|Administration Panels}} {{zh-cn|管理页面}} {{ko|Administration Panels}} }}
  12. そのショートコード版を考える • 仕様 Version 1.0 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 12 [codex_languages en="Administration Screens" ja="管理画面" fr="Panneaux Administration" ...] <p class="language-links">Languages: <strong>English</strong> - <a href="http://wpdocs.sourceforge.jp/管理画面">日 本語</a> - <a href="https://codex.wordpress.org/fr:Panneaux Administration">Français</a> ...
  13. ショートコード版 Version 0.1 • はじめの一歩: add_shortcode 2016/12/10 Contribute Study -

    Making of HelpHub Language Selector Plugin by Akira Tachibana 13 // functions.php 追加 function codex_languages_func() { return 'Languages'; } add_shortcode( 'codex_languages', 'codex_languages_func' ); 投稿内 [codex_languages]
  14. ショートコード版 Version 0.2 • 引数サポート: shortcode_atts 2016/12/10 Contribute Study -

    Making of HelpHub Language Selector Plugin by Akira Tachibana 14 // functions.php 追加 function codex_languages_func( $atts ) { extract( shortcode_atts( array( ‘en' => '', 'ja' => '', 'fr' => '' ), $atts ) ); return “Languages: $en - $ja - $fr”; } add_shortcode( 'codex_languages', 'codex_languages_func' ); 投稿内 [codex_languages en="Administration Screens" ja="管理画面" fr="Panneaux Administration"]
  15. ショートコード版 Version 0.3 • 51か国分の処理挿入 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 15 ... static $lang_table = array( array("Arabic", "ةيبرعلا","ar",https://codex.wordpress.org/ar:%1s), array("Azerbaijani", "Azərbaycanca","azr","https://codex.wordpress.org/azr:%1s"), array("Azeri", " یرذآ " , " azb","https://codex.wordpress.org/azb:%1s"), array("Bulgarian", "Български","bg","https://codex.wordpress.org/bg:%1s"), array("Bengali", "বাাংলা","bn","https://codex.wordpress.org/bn:%1s"), : array("Japanese", "日本語","ja","http://wpdocs.sourceforge.jp/%1s"), ... ); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' . $lang_table[$i][1] . '</a>', $value ); } $i++; } ...
  16. ショートコード版 Version 1.0 • とりあえず完成 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 16 // functions.php function codex_languages_func( $atts ) { static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '<p class="language-links"><a href="https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>: <strong class="selflink">English</strong>'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' . $lang_table[$i][1] . '</a>', $value ); } $i++; } $str .= "</p>"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );
  17. リファクタリング • ファイルの移動 2016/12/10 Contribute Study - Making of HelpHub

    Language Selector Plugin by Akira Tachibana 17 // functions.php 追加 require get_template_directory() . '/inc/codex-languages.php'; // inc/codex-languages.php ショートコード本体 function codex_languages_func( $atts ) { : : // style.css 追加 .entry-content .language-links { border:1px solid #ccc; }
  18. テスト • ショートコードに「-」(ハイフン)が含まれると挙動がお かしい。 • 以下の言語はハイフンを除く指定方法に(例:ptbr) – pt-br – zh-cn

    – zh-tw 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 18 投稿内 [codex_languages ja="管理画面" pt-br="Painel de Administração"
  19. 仕様 Version 2.0 • HelpHub 国際版が出た際には、移行中に新旧リ ンクが混ざるはず • 「ja」「fr」等の短い名称はHelpHub用にしたい 2016/12/10

    Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 19 [codex_languages en="Administration Screens" ja_codex="管理画面" fr_codex="Panneaux Administration" ...]
  20. ショートコード版 Version 2.0 • 完成 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 20 // inc/codex-languages.php function codex_languages_func( $atts ) { static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '<p class="language-links"><a href="https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>: <strong class="selflink">English</strong>'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' . $lang_table[$i][1] . '</a>', $value ); } $i++; } $str .= "</p>"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );
  21. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 21 できました! functions.php 変更しないでよ。 プラグインにしてね。よろしく。 ... あ、はい...。 (プラグイン書いたことないけど...)
  22. 買った 2016/12/10 Contribute Study - Making of HelpHub Language Selector

    Plugin by Akira Tachibana 22
  23. プラグイン版 Version 0.1 • はじめの一歩: Plugin Name 2016/12/10 Contribute Study

    - Making of HelpHub Language Selector Plugin by Akira Tachibana 23 // helphub-codex-languages/helphub-codex-languages.php <?php /** * Plugin Name: Helphub Codex Languages * Plugin URI: http://www.wordpress.org * Description: Short code to link codex translated articles from HelpHub * Version: 1.0.0 * Author: Akira Tachibana : */ function codex_languages_func() { return 'Languages'; } add_shortcode( 'codex_languages', 'codex_languages_func' ); ?>
  24. プラグイン版 Version 0.2 • CSS の読み込み: wp_enqueue_style 2016/12/10 Contribute Study

    - Making of HelpHub Language Selector Plugin by Akira Tachibana 24 // helphub-codex-languages/helphub-codex-languages.php 内 function codex_languages_func( $atts ) { wp_enqueue_style( 'helphub-codex-languages-style', plugin_dir_url( __FILE__ ) . 'css/codex-languages.css', array(), '1.0.0' ); // helphub-codex-languages/css/codex-languages.css 内 .entry-content .language-links { border:1px solid #ccc; }
  25. プラグイン版 Version 1.0 • 完成 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 25 // helphub-codex-languages/helphub-codex-languages.php function codex_languages_func( $atts ) { wp_enqueue_style( 'helphub-codex-languages-style', plugin_dir_url( __FILE__ ) . 'assets/css/codex-languages.css', array(), '1.0.0' ); static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '<p class="language-links"><a href="https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>: <strong class="selflink">English</strong>'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' . $lang_table[$i][1] . '</a>', $value ); } $i++; } $str .= "</p>"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );
  26. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 26 できました! クラスにしてよ。よろしく。 ... あ、はい...。
  27. プラグインのクラス版 Version 0.1 • はじめの一歩: add_shortcode の第2引数 2016/12/10 Contribute Study

    - Making of HelpHub Language Selector Plugin by Akira Tachibana 27 // helphub-codex-languages/helphub-codex-languages.php 内 $helphub_codex_languages = new HelpHub_Codex_Languages(); final class HelpHub_Codex_Languages { public function __construct () { add_shortcode( 'codex_languages', array ( $this, 'codex_languages_func' ) ); } public function codex_languages_func( $atts ) { : } }
  28. プラグインのクラス版 Version 0.2 • シングルトン = 1つのインスタンスだけ作成を許す 2016/12/10 Contribute Study

    - Making of HelpHub Language Selector Plugin by Akira Tachibana 28 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { private static $_instance = null; public static function instance () { if ( is_null( self::$_instance ) ) self::$_instance = new self(); return self::$_instance; } }
  29. プラグインのクラス版 Version 0.2 • インスタンス生成のタイミング: plugins_loaded 2016/12/10 Contribute Study -

    Making of HelpHub Language Selector Plugin by Akira Tachibana 29 // helphub-codex-languages/helphub-codex-languages.php 内 // 削除 $helphub_codex_languages = new HelpHub_Codex_Languages(); function HelpHub_Codex_Languages() { return HelpHub_Codex_Languages::instance(); } add_action( 'plugins_loaded', 'HelpHub_Codex_Languages' );
  30. プラグインのクラス版 Version 0.3 • インストーラ対応 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 30 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { public function __construct () { $this->token = 'helphub'; $this->plugin_url = plugin_dir_url( __FILE__ ); $this->version = '1.0.0'; register_activation_hook( __FILE__, array( $this, 'install' ) ); } public function install () { update_option( $this->token . '-version', $this->version ); } }
  31. プラグインのクラス版 Version 0.4 • テキストドメイン 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 31 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { public function __construct () { add_action( 'init', array( $this, 'load_plugin_textdomain' ) ); } public function load_plugin_textdomain() { load_plugin_textdomain( $this->tokoen, false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); } }
  32. プラグインのクラス版 Version 0.5 • 保護 (調査中...) 2016/12/10 Contribute Study -

    Making of HelpHub Language Selector Plugin by Akira Tachibana 32 // helphub-codex-languages/helphub-codex-languages.php 内 if ( ! defined( 'ABSPATH' ) ) exit; final class HelpHub_Codex_Languages { public function __clone () { _doing_it_wrong( __FUNCTION__, __( 'Cheatin&#8217; huh?' ), '1.0.0' ); } public function __wakeup () { _doing_it_wrong( __FUNCTION__, __( 'Cheatin&#8217; huh?' ), '1.0.0' ); } }
  33. プラグインのクラス版 Version 1.0 • 完成 2016/12/10 Contribute Study - Making

    of HelpHub Language Selector Plugin by Akira Tachibana 33 // helphub-codex-languages/helphub-codex-languages.php <?php /** * Plugin Name: Helphub Codex Languages * Plugin URI: http://www.wordpress.org * Description: Short code to link codex translated articles from HelpHub * Version: 1.0.0 * Author: Akira Tachibana * Author URI: http://www.helphubcommunications.com/ * Requires at least: 4.0.0 * Tested up to: 4.0.0 * * Text Domain: helphub * Domain Path: /languages/ * * @package HelpHub_Codex_Languages * @category Core * @author Akira Tachibana */ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly /** * Returns the main instance of HelpHub_Codex_Languages to prevent the need to * use globals. * * @since 1.0.0 * @return object HelpHub_Codex_Languages */ function HelpHub_Codex_Languages() { ...
  34. HelpHub で有効化 • 出た! 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 34
  35. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 35 できました! OK。おつかれー。 で、結局、今の Codex の言語リンクを どんな形に変換すればいいんだっけ? こんな感じ。
  36. ※ HelpHub は人手で移行しています。 • Codex • HelpHub 2016/12/10 Contribute Study

    - Making of HelpHub Language Selector Plugin by Akira Tachibana 36 [codex_languages en="Administration Screens" fr_codex="Panneaux Administration" hr_codex="Administracijski Zasloni" ja_codex="管理画面 " ptbr_codex="Painel de Administração" ru_codex="Административные панели" th_codex="Administration Panels" zhcn_codex="管理页面" ko_codex="Administration Panels"] {{Languages| {{en|Administration Screens}} {{fr|Panneaux Administration}} {{hr|Administracijski Zasloni}} {{ja|管理画面}} {{pt-br|Painel de Administração}} {{ru|Административные панели}} {{th|Administration Panels}} {{zh-cn|管理页面}} {{ko|Administration Panels}} }}
  37. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 37 ...。 ...。 ... あ、はい...。
  38. MedaiWiki/HelpHub コンバーター作成 • 左にコードを貼って、ボタンを押すと、変換 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 38 http://unofficialtokyo.com/codex-converter/
  39. Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of

    HelpHub Language Selector Plugin by Akira Tachibana 39 できました! OK。おつかれー。 ... あ、はい...。 ところでさ、Theme Handbook の執筆で 人でが足らないんだけど、やらない?
  40. まとめ • Codex は移行中 – 絶賛、コントリビュータ募集中 • 言語リンクを作成 – ショートコード

    – プラグイン – クラス化 • Codex(MediaWiki) -> HelpHub コンバーター も作成 • 最後に、Jon はとても優しい人なので念のため。 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 40
  41. ありがとうございました • GitHub – HelpHub Codex Languages – https://github.com/atachibana/helphub-codex- languages/

    – Codex Converter – https://github.com/atachibana/codex-converter 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 41