OleinPressというWordPressテーマを公式リポジトリに申請して承認されるまでの流れ

OleinPress@wordpress.org

昨年くらいからかな?一昨年くらいからかな?Twitterでたまに「公式にテーマ申請したいな」というようなことをつぶやき始めてました。しかし、ずーっとやるやる詐欺を続けていたわけですが、今回やっと承認されて晴れて公式リポジトリに掲載されました!

今回は簡単なテーマ申請の流れと所管、あとどうやったら僕みたいなのが簡単にテーマ申請できたかという秘話(?)も少しお伝えできればな、と思います。

続きを読む OleinPressというWordPressテーマを公式リポジトリに申請して承認されるまでの流れ

事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました

OleinDesignのウェブサイトを子テーマで作ってみました

最近、お仕事でもWordPressに関わることがめっきり多くなってきました。そして、その中でもほとんどのお仕事はオリジナルテーマの制作となってきます。

実際にデザインを制作することもありますし、完成したデザインをいただいて実装だけ行う場合もあります。

そして、そうやって業務をこなしていく上で感じていたことは「オリジナルテーマだけがWordPressじゃないよな」ということ。いや、当然なんですよ。仕事だからオリジナルテーマを作ることが多いだけで、実際のユーザーさんの統計を取ってみると、既存テーマを使ったブログやウェブサイトの方が多いはずです。

であれば僕も実験的に公式リポジトリに掲載されているテーマを使って事業用ウェブサイトを作ってみようかな、と思いつきました。
続きを読む 事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました

第2回WordBench岐阜を開催、そして登壇してきました

みんなの森 ぎふメディアコスモス

2017年8月12日(土)、お盆の始まりの時期ではありましたが、第2回WordBench岐阜を開催しました。

第0回、第1回と開催しましたが、開催場所などに必要な費用と参加人数のバランスがうまく取れず、一時期開催を中断していた時期がありました。

しかし、周りからの声もいただきまして、約1年ぶりに稼働再開する流れとなりました。

続きを読む 第2回WordBench岐阜を開催、そして登壇してきました

[WordPress]テーマ制作を手軽にスタートできるスモールスターターテーマを作りました

WordPressのテーマを作ろうと、いざコーディングを始めても、書くのは毎回同じようなコードだったりしませんか?

レイアウトもヘッダーがあってコンテンツとサイドバー、下にフッターというオーソドックスな形だと書くコードも似てくることがほとんどです。

当然、デザインによって違ってくる部分も大きいと思いますが、同じ記述部分をベースに、案件によって違う必要な部分を加えたり削除したりする。

そうすることによって、ゼロから築き上げていく工数を削除して、スピード感をもって制作を進めることができます。

また、クライアントには実際に触ってもらえるレベルにまで早く持っていくことができますので、コンテンツの入力をスタートしてもらうことも場合によっては可能ですし、好きなように触っていただいてウェブサイト運営開始前にWordPressに親しんでもらう機会も生み出せるでしょう。

まさに自分のために作ったWordPressスモールスターターテーマではありますが、肌感覚の合う方にはぜひ活用していただければと思います。

ファイル群の紹介

まずは、テーマ内にあるファイルについて説明します。

上の画像の左上から順に補足を表にまとめてみました。

ファイル名 役割
404.php アクセスしたページが存在しない場合に表示します。
検索やカテゴリー、タグクラウドなどのウィジェットを表示して再訪問を促しています。
archive.php カテゴリーやタグでの記事一覧を表示します。category.phpやtag.phpなどはこちらをベースに作成します。
comments.php コメントフォームやコメント表示部分のテンプレートです。
footer.php フッター部分のテンプレートです。全ページ共通です。
複製して別のパターンを作りwp_footer( '***' );といった感じで読み込んでもOK
functions.php よく使う機能や記述をまとめてあります。(常に使わなくてもよく使う記述は、今後、コメントアウトにて増やしていく予定)
header.php ヘッダー部分のテンプレートです。全ページ共通です
index.php ブログトップページのテンプレートです。今後コーポレートサイトに対応するためにfront-page.phpを作成した際には管理画面での設定やファイル名の変更(そのままにしておくと初期でトップページになってしまうので)などが必要になると思います。
page.php 固定ページのテンプレートです。スラッグごとのテンプレートなどを作る場合にはベースにします。
prepros-6.config これはGitHubには上がっていないローカル専用のファイルなので無視してください。(コンパイルソフトのPreprosの設定ファイルになります)
readme.html、readme.md GitHubでの説明用のドキュメントなので基本無視してください
screenshotフォルダ GitHubの説明箇所で掲載しているスクリーンショットを格納しているフォルダです。削除して構いません。
scssフォルダ 詳しくは後述します
search.php サイト内検索の結果を表示するテンプレートです。
sidebar.php サイドバーのテンプレートです。全ページ共通です。
single.php 記事詳細を表示するテンプレートになります。カスタム投稿タイプの記事専用のテンプレートなどを作る際にベースにすることができます。
style.css CSSファイルです。scssフォルダ内のstyle.scssをコンパイルして書き出しています。

scssフォルダ内にはこのようなファイルが入っています。

ファイル名 役割
_settings.scss ページ内各箇所の幅やメディアクエリのブレイクポイントなどの変数を設定しています
style.scss ベースとなるCSSを書き出しSCSSファイルです
ownedフォルダ mixinや変数、各種リセット用CSSなど自由に選ぶことができるように格納しています。_myresets.scssには自身でよく使うリセット系の記述をまとめてあります。

ざっくりとテーマ内に含まれているファイルはこのようなものがあります。実際のソースはGitHubにてご覧ください。

当テーマ制作の際に気をつけていること

テーマを作り始めると、どんどん便利な機能をつけたくなってしまいます。例えば、

  • カスタマイザーで背景色や文字色を変える
  • 痒いところに手がとどくウィジェットエリアを数多く作る
  • Google Fontを切り替えられる

などなど、便利な機能というのは際限なく浮かんできてしまいます。

しかし、販売したり公式サイトに掲載したりするためのテーマであれば、そういう機能が喜ばれたりするのですが、当テーマを作った趣旨としては「クライアントワークでWordPressテーマを作る際のスタートダッシュを素早く切れるスモールスターターテーマ」ということを考えていましたので、あまりにも多機能にして使わないものを増やすことはしたくありませんでした。

また、クライアントワークでカスタマイザーを利用したカスタマイズに対応することも経験上さほどありませんでしたので、このケースではあまり重宝しないだろうと思い、最低限のカスタマイザー対応で良いかと考えています。(カスタム背景とかカスタムヘッダー程度)

あとは、何にせよテーマ制作をスピーディーにできるように考えています。このまま有効化してもテーマとして当然機能しますが、かなりシンプルな作りになっています。

そこにスタイルや機能、動きを案件によって必要なものだけ付け加えていく。もしくは削っていく。そういった形で制作をスムースに進められるように配慮しています。

デモサイトについて

実際にプレーンのOD-Baseを触っていただけるようデモサイトを用意しました。

http://demo.olein-design.com/od-base/

今後の開発について

今後の開発については、このような点を考えています。

  • よく利用する細かな機能や関数を事前にコメントアウトで用意
  • よくあるレイアウトに対応できるようにテンプレートを増やす?(たぶんやらない)
  • SCSSファイルをもっと読みやすくする(でもモジュールごとに別ファイルにはしない)

日々草を生やしながらGitHubにて開発を進めていこうと思います。ご意見等お待ちしています。

Contact Form 7にYubinBangoで郵便番号から住所を自動入力させる方法

お問い合わせフォームや申し込みフォームなど、住所の入力を必要とするフォームにはよく付いています郵便番号を入力すると自動的に住所を入力してくれる機能ですが、導入するの大変なんじゃないの?と思いませんか?

僕も面倒なんだろうなぁと調べもせず勝手な先入観を持っていたのですが、ひょんな拍子で調べてみたらこんなライブラリを見つけまして、しかもWordPressで利用されるお問い合わせフォームを設置するプラグインの代表格と言っても過言ではないContact Form 7に導入する方法も試してみましたので共有してみます。

先にお伝えしておきます。めっちゃ簡単です。

YubinBangoライブラリとは

こちらのGitHubページで公開されているライブラリになります。

https://github.com/yubinbango/yubinbango

これまでにない設定方法(なんとclassを指定するだけ!)のまったく新しいライブラリが誕生いたしました!
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。

ほんと当たり前になったら、もっと導入が進んでユーザーも便利になるはず。

まずはライブラリを読み込む

まずはWordPressテーマ側、functions.phpにてYubinBangoライブラリを読み込みます。

Contact Form 7の設定

まずは、Contact Form 7のフォームを作成するところで、このようにフォームを作成します。詳しくは後述します。

上記コードはこちらから引用させていただきました。

form内に国名(p-country-name)をJapanに指定

form内であればどこでも良いのですが、下記のコードをどこかに挿入しましょう。(上では7行目に掲載されています)

郵便番号入力inputにp-postal-codeをクラス指定する

郵便番号を入力させるフォーム部分にp-postal-codeをclass指定します。

郵便番号を最初の3桁と後の4桁とで分ける場合にも、同様に同じclass名を2つの入力フォームに設定します。(後述)

上の例では9行目に当たります。

都道府県、市町村区、町域、以降の住所の欄にそれぞれclassを設定する

下記の表にまとめたように、各入力フォームにクラスを設定します。

住所欄 指定するクラス名
都道府県名 p-region
市町村区 p-locality
町域 p-street-address
以降の住所 p-extended-address

formタグにh-adrクラスを設定する

設置するformタグにh-adrクラスを設定します。

Contact Form 7ではformタグは自動的に出力されるので、ショートコードに追記して追加します。

通常、このようなショートコードだと思います。

ここに、html_class="h-adr"という記述を加えて、

としてあげることによって、formタグにclassを追加することができます。

郵便番号入力フォームを2つに、各項目をそれぞれのフォームにする場合

郵便番号入力フォームにp-postal-codeというクラスを付与しなくてはならないと上で書きましたが、その際にフォームを2つに分ける場合は後述しますと書きました。

また、都道府県や市町村区をそれぞれ別のフォームにしたい場合も合わせてサンプルコードを掲載しておきます。

このように分けることによって、郵便番号フォームを2つ埋められた瞬間に住所を自動入力してくれるようになります。

まとめ

勝手な先入観で「郵便番号からの住所自動入力導入は面倒」と思い込んでいましたが、実際に組み込むまでに5分くらいで完了しました。

実際にはスタイリングなどもありますので、もう少しかかるかとは思いますが、既存のフォームに導入するのもそれほど難しいことではないかと感じました。

ぜひ、こういった便利な機能を制作者が簡単に導入できるようになり、それが最終的にユーザーの利便性向上へと繋がるお手伝いに当記事がなれば幸いです。