著書「あなたもアフィリエイト✕アドセンスで稼げる!はじめてのWordPress本格ブログ運営法」付属テーマの技術的解説

株式会社mgnのメガネさんこと大串さんにお誘い頂いて、WordPress の書籍に関わらさせて頂きました。Amazon の商品ページにも著者として名前が載って感動しました。といっても僕は本書のためのテーマの開発が主なミッションで、執筆したのは自分のプロフィールくらいしかないので著書というのもちょっとどうなのという気もしたりしています。ということで本書の付属テーマである earn-pocket-money について技術的な面からの解説記事を書きたいと思います。

どういうテーマ?

「あなたもアフィリエイト✕アドセンスで稼げる!はじめてのWordPress本格ブログ運営法」という書名からも分かる通り、本書ではアフィリエイトやアドセンスの始め方やポイントについても書かれています。それらのパートは「ブログ飯」で有名な染谷さんが書かれているのですが、染谷さんがアフィリエイトやアドセンスの専門家ということで、染谷さんを中心に皆でどのような機能があったら嬉しいか、どういうテーマなら使いやすいかということを話し合い、テーマの開発を行いました。そういうことで、アフィリエイトのコードをカスタム投稿で管理してショートコードで使いまわしやすくしたり、登録したアフィリエイト商品のランキングをつくれるようになっていたりします。また、アドセンス等の広告が効果を発揮しやすい位置にウィジェットエリアが用意されていたりもしていて、広告も結構気軽に設置しやすいのではないかと思います。

WordPress テーマは GPL なんだから、GitHub でも公開しちゃいましょうという話になり、GitHub で公開しています(他の書籍ではこの辺どうなんでしょうね?僕は他は全然知りませんが、執筆者の皆さんも出版社さんも全然OKな感じだったのでとても素晴らしいと思いました)。ということで自分でダウンロードして使うことはできますが、書籍の中でセットアップの方法をはじめ、アフィリエイト✕アドセンス本ということでそれらの登録方法やら何やらも詳しく解説してありますので、初心者の方やこれから WordPress でアフィリエイト✕アドセンスを始めようという方におかれましてはぜひ購入して書籍に沿って進めていくのをお勧めします。

ライブラリ

TGM Plugin Activation

なんでもかんでもテーマの中に実装してしまうのは開発コストの面でも今後の運用(ユーザーがテーマを変えたくなったとか)でもリスクが高いので、TGM Plugin Activation というライブラリを使ってテーマを有効化したらダッシュボードに必須のプラグインはこれですと表示されるようになっています。(ちなみに、TGM Plugin Activate が表示するメッセージは英語だったのですが、先日 Web デザイナーの森山真祐子さんが日本語訳をつくってくれました。ありがとうございます!)

breadcrumbs ( inc2734/wp-breadcrumbs )

functions.php にだらだらコードを書くのはメンテナンス性が悪いので、earn-pocket-money ではいくつかの機能をライブラリとして切り出しています。当初は Composer でインストールできるように切り出していたのですが、earn-pocket-money は PHP 5.2 にも対応させよう!ということになり、それなら Composer のパッケージにするのもなんだかなぁということでフォークしてテーマ内におくことにしました(/themes/earn-pocket-money/inc 内にいろいろあります)。
※本書で使用しているプラグインの中には PHP 5.2 より上のバージョンでないと動かないものもあるため、PHPの 推奨バージョンは7となっています。テーマだけであれば一応 PHP 5.2 でも動きはする、というだけなので、できるだけ 7 以上での使用をお勧めします。

パンくずリストを表示する breadcrumbs もその1つ。以前「「プラグイン無しでパンくずリスト」みたいな記事がよくあるけど、ちゃんとやろうとすると結構大変だという話」という記事でも書きましたが、パンくずって結構簡単に思われがちですが汎用的に使えるものにしようとするとわりと大変だったりします。eacn-pocket-money のパンくずはその辺もちゃんと考えてつくっているので、あとで自分でカスタム投稿タイプとかカスタムタクソノミーを追加したりしてもよしなに表示してくれるはずです。

customizer framework ( inc2734/wp-customizer-framework )

こちらも以前ブログにちょろっと書いたことがありますが、WordPress のカスタマイザー API は普通に使おうとすると結構冗長になりがちで、項目が多くなってくると辛くなってきます。そこで標準のカスタマイザー API をラップしてもうちょっとラクにかけるようなライブラリをつくりました。こんな感じ。

$Customizer = Earn_Pocket_Money_Customizer_Framework::init();

$Panel = $Customizer->Panel( 'panel-name', [
	'title' => 'panel-name',
] );

$Section = $Customizer->Section( 'section-name', [
	'title' => 'section-name',
] );

$Control = $Customizer->Control( 'color', 'control-id', [
	'label'   => 'Header Color',
	'default' => '#f00',
] );

$Customizer->register( $Control )->join( $Section )->join( $Panel );

earn-pocket-money は初期状態ではすごく素っ気ない見た目ですが、カスタマイザーで色やら何やら結構カスタマイズできるようになっているので自分で CSS を追加しなくても結構好みの感じにできるのではないかなと思います。

oembed-blog-card ( inc2734/wp-oEmbed-blog-card )

WordPress には URL をエディタに貼り付けるだけで oEmbed でブログカードに変換して表示してくれる機能があるのですが、これはその URL のページが oEmbed に対応していないとダメなので、なんでもかんでも変換してはくれません。そこで、その URL のページの HTML を直接解析して、タイトルタグやら何やらを取得してある程度どんなページでもブログカードに変換して表示するようにしました(なので oembed-blog-card というライブラリ名ですがもはや oEmbed では無いですね… )。毎回その URL のページにアクセスして HTML を取得すると迷惑なので、一定時間キャッシュしたり、取得先のページの文字コードが UTF-8 じゃなくても良い感じにエンコードしたりなかなか使い勝手が良い物になっているのではないかと思います。

ogp ( inc2734/wp-ogp )

earn-pocket-money はプラグイン無しで OGP のメタタグを出力するようになっています。公式テーマハンドブックでは OGP のためのメタタグ出力をテーマでやるのはテーマテリトリー違反になるのですが、これ系のプラグインは OGP だけで良いのにその他のことも詰め合わせでやるものが主だったりするので(よく探せばライトなものもあるかもですが)、いっそライブラリつくってテーマに組み込んじゃえということで今のような形にしています。パンくずのライブラリをつくったときに「色々な条件を判定して出し分ける」という部分は作れていたので、それを応用してつくったりしています。

github-theme-updater ( inc2734/wp-github-theme-updater )

個人的にはこれがあることで earn-pocket-money の価値がグンとあがっていると思ったりしているのですが、要は野良テーマでも GitHub にホストすることでダッシュボードから自動アップデートできるようにするライブラリになります。野良テーマは zip で上げないとアップデートできなかったりして面倒だったりするのですが、これを組み込むことで GitHub のリポジトリが更新(タグ付け)されたらユーザーのダッシュボードに更新通知が飛ぶようになります。earn-pocket-money は今のちょこちょこアップデートしているので、これのおかげでユーザーがアップデートする手間も、こちらが最新版を提供する手間も短縮されるという一石二鳥の素晴らしいライブラリです(ちなみに、販売開始時点では組み込まれていなかったので、購入してまだ一度もテーマをアップデートしていない方は、ダウンロードページから一度 zip で更新することをお勧めします!!!)。

その他

テーマのデプロイも自動化していて、GitHub と Travis CI というサービスを連携してやっていたりするのですが、この Travis CI から GitHub に自動でプッシュするのに、これまで僕は GitHub Access Token を使っていました。ただ、この Token がプッシュが失敗したりしたときに漏洩してしまう可能性があるということで、earn-pocket-money では Deploy Key という鍵を使ったデプロイ方法にしました。自分でやるのはちょっと難しかったのですが、こちらの記事(Travis CIからgh-pagesへデプロイする設定 via SSH/git push)にあるライブラリを使わせて頂いて、何とか実装できました。ありがとうございます!

冒頭に書いたとおり、僕はほとんど執筆作業はしていないのですが、ネット越しに皆さんが執筆されているのをみてこれはなかなか大変だなぁと思うと同時に、みなさん書くの速いなぁと感心しましたw みなさん何冊も書かれているというのもあると思いますが、やっぱり向き不向きもあるのかなぁと思いました。僕はこんな校正もしていない口語調の記事でも1時間以上かかっちゃうので…。Amazon のカテゴリーのランキングでは結構上にあって人気があるようなので、気になっている方はぜひお手にとって頂ければと思います。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく