WordPressエンジニアになって2ヶ月後にしたスキルアップの方法

WordPressエンジニアになって
2ヶ月後にしたスキルアップの方法
2019/2/17 Saitama WordPress Meetup

自己紹介
• 小川果純
• プライム・ストラテジー株式会社
マーケティング部のエンジニア
（入社して４年半とちょっと）
• フロントエンド（PHPまで）が好き
• 公式プラグイン公開しています
• 同一ユーザー/別端末のログインを防ぐ「Ban Double Login」
• Transient をボタン一つで全部クリア「Clear Transient From Dashboard」

もくじ
• 簡単な経歴
• スキルアップのきっかけ
• やったこと
• この方法を実施したことによるメリット
• まとめ

簡単な経歴
• 2014/06 プライムに入社（エンジニア）
• 2014/08 スキルアップのきっかけ
• 2015/05 某コーポレートサイトを仕様策定から実装、納品
• 2015/07 大型プロジェクトの一部機能の仕様策定、実装
• 新規開発のディレクター兼エンジニア、営業
• 運用フェーズ案件のディレクター兼エンジニア
• 2019/02 マーケティング部のエンジニア

そのときのスキル – 入社時
HTML・CSS：独学してきたからできる！
PHP： Hello World！
WordPress：名前を知りました！
MySQL： ( '-' )
サーバ： ( '-' )

そのときのスキル – きっかけの時
HTML・CSS：仕事としてできるようになってきた！
PHP：判別式とループを会得！
WordPress：コピペで頑張ります！
MySQL： ( '-' )
サーバ： ( '-' ) さ、最低限のコマンドなら…

そのときのスキル – １年後
HTML・CSS： Sassも会得！やっぱりたのしい！！
PHP：ガリガリ書けるよ！プラグインも作れるよ！
WordPress：ガリガリ書けるよ！仕様もほぼ理解したよ！
MySQL：簡単なことならできるよ！
サーバ：簡単なことならできるよ！

スキルアップのきっかけ

• 当時社内で新人を対象に隔週でやっていた「PHP勉強会」
• 対象範囲を各自勉強してきて、
うち１名がスライドにまとめて発表する。
• 発表は（確か）20分ほど。

• 私が発表担当。出された課題。

• 私が発表担当。出された課題。
WordPressループについて

ざっくりしすぎ・・・！！

• ここでいうWordPressループとは
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title();
the_content();
endwhile;
endif;

• 当時のスキルのおさらい
HTML・CSS：仕事としてできるようになってきた！
PHP：判別式とループを会得！
WordPress：コピペで頑張ります！
MySQL： ( '-' )
サーバ： ( '-' ) さ、最低限のコマンドなら…

やったこと

やったこと
• ひたすらぐぐる

やったこと
• ひたすらぐぐる
• ６割：「おまじない」
「とりあえずこれ書けばOK」
• ３割：ふんわり解説。数行解説。
• １割：解説の表現が
サイトによって違う。

やったこと
• ひたすら書籍を読む

やったこと
• ひたすら書籍を読む
• ７割：ふんわり解説。数行解説。
• ３割：解説の表現が書籍によって違う。

やったこと
• 一週間後…一番やりたくなかった「やったこと」

やったこと
コアファイルを読む！
※コアファイル：
テーマやプラグインを除いた、WordPressじたいのプログラムファイル

やったこと
こんなPHP初心者に
読めるものなの？
正確な情報を得るには、
もうやるしかない…
発表まで時間がない…
ハードル高そう。
間に合うかな。

やったこと
コアファイルを読む！

やったこと
• WordPressループで使用している関数を
片っ端から調べて掘り下げていく。
• grep(文字列検索用のLinuxコマンド)で検索して、
PHPのコードを読んでの繰り返し。
• 読んでわからなければ、ひたすら var_dump() で表示してみる。
• オブジェクトとかスコープとかの概念がわからず、
何度か挫折しそうになる。
• でも、意外と読める。
ここ、なんとなく、こんなことやってるんだろうな…

やったこと – have_posts()
[kusanagi@minkapi DocumentRoot]$ grep -irn 'function have_posts' *
wp-includes/class-wp-query.php:3112: public function have_posts() {
wp-includes/query.php:861:function have_posts() {
• grep コマンドで関数を検索する。

861 function have_posts() {
862 global $wp_query;
863 return $wp_query->have_posts();
864 }
• wp-includes/query.php

• grep コマンドで関数を検索する。
[kusanagi@minkapi DocumentRoot]$ grep -irn 'function have_posts' *
wp-includes/class-wp-query.php:3112: public function have_posts() {
wp-includes/query.php:861:function have_posts() {

3112 public function have_posts() {
3113 if ( $this->current_post + 1 < $this->post_count ) {
3114 return true;
3115 } elseif ( $this->current_post + 1 == $this->post_count && $this->post_count > 0 ) {
3123 do_action_ref_array( 'loop_end', array( &$this ) );
3125 $this->rewind_posts();
3126 } elseif ( 0 === $this->post_count ) {
3134 do_action( 'loop_no_results', $this );
3135 }
3137 $this->in_the_loop = false;
3138 return false;
3139 }
• wp-includes/class-wp-query.php

3114 return true;
3135 }
3138 return false;
3139 }
今の投稿＋１が、投稿数より少なかったら、true を返す。
→ループが続く。

3114 return true;
3135 }
3138 return false;
3139 }
今の投稿＋１が投稿数と同じで、かつ投稿数が０より多かったら、
ループが終わるアクションフックを実行して、
rewind_posts() を実行する。
※ rewind = 巻き戻す

3146 public function rewind_posts() {
3147 $this->current_post = -1;
3148 if ( $this->post_count > 0 ) {
3149 $this->post = $this->posts[0];
3150 }
3151 }

3146 public function rewind_posts() {
3147 $this->current_post = -1;
3148 if ( $this->post_count > 0 ) {
3149 $this->post = $this->posts[0];
3150 }
3151 }
今の投稿に「－１」を代入する。
投稿数が０より多ければ、そのページに表示する全投稿のうち、最初の投稿を
「post」に代入する。
→ループしているうちに増えていた「今の投稿」のカウントをリセットして、
「ループ内で今表示しようとしている投稿」をリセットする。

3114 return true;
3135 }
3138 return false;
3139 }
投稿数が０なら、結果がなかった（表示する投稿がそもそもない）という
アクションフックを実行する。

3114 return true;
3135 }
3138 return false;
3139 }
ループ中であるかどうかのフラグを false にし、関数自体も false を返す。
→ループ終了。

• have_posts() という関数は、
表示させる投稿がまだあるかどうかの判別のみならず、
ループ内で変更されたプロパティをリセットする役割も持ってい
る！
…こんな感じで、それぞれの関数の中身を調べていくと、
どういったことをやっているのか、詳しいことまでわかってくる。
新しい発見もある。

やったこと – grep コマンドのオプション
• grep -irn 'hogehoge’ *
 i：大文字と小文字の区別をなくす。
 r：再帰的に検索をかける。
 n：該当箇所が何行目にあるのかを表示する。

[kusanagi@minkapi DocumentRoot]$ grep 'wordpress' *
license.txt: https://wordpress.org/download/source/
readme.html: <a href="https://wordpress.org/"><img alt="WordPress" src="wp-
admin/images/wordpress-logo.png" /></a>
wp-load.php: __( 'https://codex.wordpress.org/Editing_wp-config.php' )
wp-login.php: $login_header_url = __( 'https://wordpress.org/' );
wp-login.php: __( 'https://codex.wordpress.org/Cookies' ),
__( 'https://wordpress.org/support/' ) ) );
wp-login.php: __( 'https://codex.wordpress.org/Cookies' ) ) );
wp-settings.php: * @link https://codex.wordpress.org/AJAX_in_Plugins
xmlrpc.php: <engineLink>https://wordpress.org/</engineLink>
• オプションなし

[kusanagi@minkapi DocumentRoot]$ grep -i 'wordpress' *
index.php: * Front to the WordPress application. This file doesn't do anything, but
loads
index.php: * wp-blog-header.php which does and tells WordPress to load the theme.
index.php: * @package WordPress
readme.html: <dt><a href="https://planet.wordpress.org/">WordPress
Planet</a></dt>
readme.html: <dd>The WordPress Planet is a news aggregator that brings
together posts from WordPress blogs around the web.</dd>
readme.html: <dt><a href="https://wordpress.org/support/">WordPress Support
Forums</a></dt>
• i オプション

[kusanagi@minkapi DocumentRoot]$ grep -r 'wordpress' *
wp-includes/comment-template.php: * the {@link
https://developer.wordpress.org/themes/basics/conditional-tags/
wp-includes/comment-template.php: * comment. See
https://core.trac.wordpress.org/changeset/36512.
wp-includes/date.php: * @link
https://codex.wordpress.org/Function_Reference/WP_Query Codex page.
wp-includes/l10n.php: * the {@link
https://developer.wordpress.org/themes/basics/conditional-tags/
wp-load.php: __( 'https://codex.wordpress.org/Editing_wp-config.php' )
wp-login.php: $login_header_url = __( 'https://wordpress.org/' );
• r オプション

[kusanagi@minkapi DocumentRoot]$ grep -n 'wordpress' *
wp-load.php:83: __( 'https://codex.wordpress.org/Editing_wp-config.php' )
wp-login.php:117: $login_header_url = __( 'https://wordpress.org/' );
wp-login.php:898:
__( 'https://codex.wordpress.org/Cookies' ),
__( 'https://wordpress.org/support/' ) ) );
wp-login.php:903:
__( 'https://codex.wordpress.org/Cookies' ) ) );
wp-settings.php:484: * @link https://codex.wordpress.org/AJAX_in_Plugins
xmlrpc.php:38: <engineLink>https://wordpress.org/</engineLink>
• n オプション

やったこと – 結果、得たこと
• ぐぐって得た情報をソースに、発表なんてできない。
• 信憑性は？本当に？信じていいの？
• サイト/書籍ともに、古い情報のときがある。
• codex（日本語版）だって、更新されていない関数はたくさん。
• 書籍だって間違えていることがある。
• もしかしたら、情報が古くなっただけなのかもしれない。
• コアファイルを読むことに抵抗がなくなる。
• こんなスキルでも頑張れば読めるのか！という発見。

コアファイルを読んだ経験によるメリット
コアファイルを読むことに抵抗がなくなって…

メリット１：自分の判断に自信が持てる
• クライアントに「こういう機能がほしい」と言われたとき、
特に“できない”の判断に自信が持てる。
 「調べてみたのですが検索にHITせず、できなさそうです。」
 「WordPressのコードを確認しましたが、簡単なカスタマイズを行っての実
装はできないようなので、１から機能を開発する必要があります。」
さらに・・・
• 「こういった代替案でしたら簡単なカスタマイズで実現できそうです。」

• 実例１： “できた”例
「投稿画面のメタボックスの並び順を全ユーザー統一したい。」
https://minkapi.style/web/post-75/

• 実例２： “できない”例
「WordPressログイン時にはTransientを無効化したい。」
https://minkapi.style/web/post-176/
 代替案：管理画面からTransient一括クリアできる機能があればいいよね。
→プラグイン「Clear Transient From Dashboard」をつくるきっかけ。

メリット２：プラグインが開発できる
• WordPressエンジニアとしては避けられない機能開発。
• 独自テーマにガリガリ書いてもいいが、汎用性に欠けるし、『見
た目のテーマ/機能のプラグイン』と機能分けできていない。
プラグインを作れるようになろう！

• プラグイン開発のキモは、
如何にフィルターフックとアクションフックを使いこなせるか。
• どういったフックがあるのか。
• それがどのタイミングで実行されるのか。
• どういったデータが使えるのか。
 コアファイルを読むのが一番！

• 例えば…「Ban Double Login」
• ログイン後、トークンが発行された後で、かつそのトークンを使
用できるフックである必要があった。

メリット３：デバッグができる
• WordPressやテーマ、プラグインをアップデートしたら、想定外
の動きをするようになった！でも、エラーログには何もはかれな
い。
• こんなときでも慌てず対処できるようになる。
• コアファイルを読むことに慣れると、テーマやプラグインのコー
ドを読むことにも抵抗がなくなる。
• ダウングレードして様子見もありだが、問題点を見つけて応急処
置＆作者に連絡がベスト！

メリット（おまけ）：コーディングルールが定まる
• WordPressをメインに扱っている会社で働くのであれば、
WordPressのコーディングルールに合わせた方がスムーズ。
• これでも動くし、PHP的には間違っていないけど、もやる。
「ですます調」の中にいきなり「である調」のような感覚。
if ($a<$b)
{
echo $a."is smaller than".$b;
}

まとめ
• コアファイルを読んでみることが、
WordPressエンジニアとしてのスキルアップにつながる。
• コアファイルはPHP初心者でも読める。
• 判別式とループが読めれば大丈夫。
• オブジェクトが理解できていればなおよし。
• 早いうちに、少し頑張って、コアファイルを読む癖づけを。
• 最初の一歩に勇気がいるけど、それが今後の大きな力になる。
• 調べる前に読んでみる。
• ぐぐったりするより、早く正確な情報が手に入る。

まとめ
• いきなり読もうと言われても、どうすれば・・・
• WordPressループについて調べてみよう！
• 否が応でも、WordPressの動作の根本である
$wp_query に触れることになるよ！
• DocumentRoot 直下で grep すると時間がかかる…
• wp-includes： WordPress全体に関わるプログラム
• wp-admin：管理画面に関わるプログラム

WordPressエンジニアになって2ヶ月後にしたスキルアップの方法

More Related Content

Similar to WordPressエンジニアになって2ヶ月後にしたスキルアップの方法 (20)

WordPressエンジニアになって2ヶ月後にしたスキルアップの方法