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

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

View Slide

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

View Slide

WordPress マニュアル Codex
https://codex.wordpress.org/Administration_Screens

View Slide

もうすぐリタイヤ予定
• 2017年中?
• 主な移行先
Codex 移行先
構文、関数、クラス etc. Code Reference
使い方、FAQ HelpHub
開発者向け各種ハンドブック

View Slide

鋭意、制作中
https://developer.wordpress.org

View Slide

求人、募集中
• 募集一覧
お仕事備考
HelpHub
- コンテンツ移行 Codex からのコピー&
ペースト [募集終了]
- コンテンツリライト募集中
- テーマ制作、修正急募
Theme Handbook
- ライター、レビューア急募

View Slide

• 我こそはと思わん方、是非 => 募集案内のリンク
HelpHub の例 - 道まだ半ば
http://wphelphub.com/getting-started/administration-screens/

View Slide

ただしこれは英語版の話し
• 英語版 Codex は消える予定
– 2017年中は元のページから HelpHub 等に転送される
• 国際化の方針は未定
• それまで各国語版 Codex は残る予定

View Slide

でも、HelpHub のページには、
日本語版 Codex へのリンクがない!

View Slide

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

View Slide

Codex の言語リンク
• ソースコード (MediaWiki)
{{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}}
}}

View Slide

そのショートコード版を考える
• 仕様 Version 1.0
[codex_languages en="Administration Screens"
ja="管理画面" fr="Panneaux Administration" ...]
Languages:
English -
日
本語 -
Français ...

View Slide

ショートコード版 Version 0.1
• はじめの一歩: add_shortcode
// functions.php 追加
function codex_languages_func() {
return 'Languages';
}
add_shortcode( 'codex_languages', 'codex_languages_func' );
投稿内
[codex_languages]

View Slide

• 引数サポート: shortcode_atts
function codex_languages_func( $atts ) {
extract( shortcode_atts( array(
‘en' => '',
'ja' => '',
'fr' => ''
), $atts ) );
return “Languages: $en - $ja - $fr”;
}
投稿内
[codex_languages en="Administration Screens" ja="管理画面"
fr="Panneaux Administration"]

View Slide

• 51か国分の処理挿入
...
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++;
}
...

View Slide

• とりあえず完成
// functions.php
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"));
}
$i = 0;
$str = 'class="mw-redirect">Languages: English';
$str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value );
}
$i++;
}
$str .= "";
return $str;
}

View Slide

リファクタリング
• ファイルの移動
require get_template_directory() . '/inc/codex-languages.php';
// inc/codex-languages.php ショートコード本体
:
:
// style.css 追加
.entry-content .language-links {
border:1px solid #ccc;
}

View Slide

テスト
• ショートコードに「-」(ハイフン)が含まれると挙動がお
かしい。
• 以下の言語はハイフンを除く指定方法に(例:ptbr)
– pt-br
– zh-cn
– zh-tw
投稿内
[codex_languages ja="管理画面" pt-br="Painel de Administração"

View Slide

仕様 Version 2.0
• HelpHub 国際版が出た際には、移行中に新旧リ
ンクが混ざるはず
• 「ja」「fr」等の短い名称はHelpHub用にしたい
[codex_languages en="Administration Screens"
ja_codex="管理画面" fr_codex="Panneaux
Administration" ...]

View Slide

• 完成
// inc/codex-languages.php
"
,
:
}
$i = 0;
}
$i++;
}
$str .= "";
return $str;
}

View Slide

できました!
functions.php 変更しないでよ。
プラグインにしてね。よろしく。
... あ、はい...。
(プラグイン書いたことないけど...)

View Slide

買った

View Slide

プラグイン版 Version 0.1
• はじめの一歩: Plugin Name
// helphub-codex-languages/helphub-codex-languages.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';
}
?>

View Slide

• CSS の読み込み: wp_enqueue_style
// helphub-codex-languages/helphub-codex-languages.php 内
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;
}

View Slide

• 完成
wp_enqueue_style( 'helphub-codex-languages-style', plugin_dir_url( __FILE__ ) . 'assets/css/codex-languages.css', array(),
'1.0.0' );
"
,
:
}
$i = 0;
}
$i++;
}
$str .= "";
return $str;
}

View Slide

できました!
クラスにしてよ。よろしく。
... あ、はい...。

View Slide

プラグインのクラス版 Version 0.1
• はじめの一歩: add_shortcode の第2引数
$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 ) {
:
}
}

View Slide

• シングルトン = 1つのインスタンスだけ作成を許す
private static $_instance = null;
public static function instance () {
if ( is_null( self::$_instance ) )
self::$_instance = new self();
return self::$_instance;
}
}

View Slide

• インスタンス生成のタイミング: plugins_loaded
// 削除 $helphub_codex_languages = new HelpHub_Codex_Languages();
function HelpHub_Codex_Languages() {
return HelpHub_Codex_Languages::instance();
}
add_action( 'plugins_loaded', 'HelpHub_Codex_Languages' );

View Slide

• インストーラ対応
$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 );
}
}

View Slide

• テキストドメイン
add_action( 'init', array( $this, 'load_plugin_textdomain' ) );
}
public function load_plugin_textdomain() {
load_plugin_textdomain( $this->tokoen, false, dirname(
plugin_basename( __FILE__ ) ) . '/languages/' );
}
}

View Slide

• 保護 (調査中...)
if ( ! defined( 'ABSPATH' ) ) exit;
public function __clone () {
_doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ),
'1.0.0' );
}
public function __wakeup () {
_doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ),
'1.0.0' );
}
}

View Slide

• 完成
/**
* 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() { ...

View Slide

HelpHub で有効化
• 出た!

View Slide

できました!
OK。おつかれー。
で、結局、今の Codex の言語リンクを
どんな形に変換すればいいんだっけ?
こんな感じ。

View Slide

※ HelpHub は人手で移行しています。
• Codex
• HelpHub
[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}}
}}

View Slide

...。
...。
... あ、はい...。

View Slide

MedaiWiki/HelpHub コンバーター作成
• 左にコードを貼って、ボタンを押すと、変換
http://unofficialtokyo.com/codex-converter/

View Slide

できました!
OK。おつかれー。
... あ、はい...。
ところでさ、Theme Handbook の執筆で
人でが足らないんだけど、やらない?

View Slide

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

View Slide

ありがとうございました
• GitHub
– HelpHub Codex Languages
– https://github.com/atachibana/helphub-codex-
languages/
– Codex Converter
– https://github.com/atachibana/codex-converter

View Slide

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

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

Akira Tachibana

More Decks by Akira Tachibana

Other Decks in Technology

Featured

Transcript