WordPress 新マニュアル「HelpHub」の 言語リンク用プラグイン作成顛末 Making of HelpHub Language Selector Plugin WordPressコントリビュート勉強会 第5回 in タロスカイ (株) 2016年12月10日 第1.2版 立花 明 (@atachibana)

自己紹介 • 立花 明 • IT 関連会社勤務 (非 WordPress) • 好きなこと: 何かを集めること、並べること – モットー: これ以上集め始めない、並べ始めない 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 2

WordPress マニュアル Codex 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 3 https://codex.wordpress.org/Administration_Screens

もうすぐリタイヤ予定 • 2017年中? • 主な移行先 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 4 Codex 移行先 構文、関数、クラス etc. Code Reference 使い方、FAQ HelpHub 開発者向け 各種ハンドブック

鋭意、制作中 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 5 https://developer.wordpress.org

求人、募集中 • 募集一覧 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 6 お仕事 備考 HelpHub - コンテンツ移行 Codex からのコピー& ペースト [募集終了] - コンテンツリライト 募集中 - テーマ制作、修正 急募 Theme Handbook - ライター、レビューア 急募

• 我こそはと思わん方、是非 => 募集案内のリンク HelpHub の例 - 道まだ半ば 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 7 http://wphelphub.com/getting-started/administration-screens/

ただしこれは英語版の話し • 英語版 Codex は消える予定 – 2017年中は元のページから HelpHub 等に転送される • 国際化の方針は未定 • それまで各国語版 Codex は残る予定 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 8

でも、HelpHub のページには、 日本語版 Codex へのリンクがない! 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 9

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

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}} }}

そのショートコード版を考える • 仕様 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" ...]

Languages: English - 日 本語 - Français ...

ショートコード版 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]

ショートコード版 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"]

ショートコード版 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( ' • ' . $lang_table[$i][1] . '', $value ); } $i++; } ...

ショートコード版 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 = '

Languages: English'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value ); } $i++; } $str .= "

"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

リファクタリング • ファイルの移動 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; }

テスト • ショートコードに「-」(ハイフン)が含まれると挙動がお かしい。 • 以下の言語はハイフンを除く指定方法に(例: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"

仕様 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" ...]

ショートコード版 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 = '

Languages: English'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value ); } $i++; } $str .= "

"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

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

買った 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 22

プラグイン版 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

プラグイン版 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; }

プラグイン版 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 = '

Languages: English'; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value ); } $i++; } $str .= "

"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 26 できました! クラスにしてよ。よろしく。 ... あ、はい...。

プラグインのクラス版 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 ) { : } }

プラグインのクラス版 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; } }

プラグインのクラス版 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' );

プラグインのクラス版 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 ); } }

プラグインのクラス版 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/' ); } }

プラグインのクラス版 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’ huh?' ), '1.0.0' ); } public function __wakeup () { _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ), '1.0.0' ); } }

プラグインのクラス版 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

HelpHub で有効化 • 出た! 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 34

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 35 できました! OK。おつかれー。 で、結局、今の Codex の言語リンクを どんな形に変換すればいいんだっけ? こんな感じ。

※ 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}} }}

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 37 ...。 ...。 ... あ、はい...。

MedaiWiki/HelpHub コンバーター作成 • 左にコードを貼って、ボタンを押すと、変換 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 38 http://unofficialtokyo.com/codex-converter/

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 39 できました! OK。おつかれー。 ... あ、はい...。 ところでさ、Theme Handbook の執筆で 人でが足らないんだけど、やらない?

まとめ • Codex は移行中 – 絶賛、コントリビュータ募集中 • 言語リンクを作成 – ショートコード – プラグイン – クラス化 • Codex(MediaWiki) -> HelpHub コンバーター も作成 • 最後に、Jon はとても優しい人なので念のため。 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 40

ありがとうございました • 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