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)

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

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

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

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

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

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

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

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

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

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

そのショートコード版を考える
• 仕様 Version 1.0
[codex_languages en="Administration Screens"
ja="管理画面" fr="Panneaux Administration" ...]
Languages:
English -
<a href="http://wpdocs.sourceforge.jp/管理画面">日
本語</a> -
<a href="https://codex.wordpress.org/fr:Panneaux
Administration">Français</a> ...

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

• 引数サポート: 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"]

• 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( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' .
$lang_table[$i][1] . '</a>', $value );
}
$i++;
}
...

• とりあえず完成
// 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 = '<a href="https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex"
class="mw-redirect">Languages</a>: English';
$str .= sprintf( ' • <a class="external text" href="' . $lang_table[$i][3] . '">' . $lang_table[$i][1] . '</a>', $value );
}
$i++;
}
$str .= "";
return $str;
}

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

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

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

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

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

買った

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

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

• 完成
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;
}

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

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

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

• インスタンス生成のタイミング: 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' );

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

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

• 保護 (調査中...)
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' );
}
}

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

HelpHub で有効化
• 出た!

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

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

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

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

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

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

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

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

Recommended

Recommended

More Related Content

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

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

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