WordPress Contact Form7 + ajaxzip3 で郵便番号住所検索

今日は、みみです。

自作する時間が無かったので、みんな大好き Contact Form7 を使わせてもらって、ちょっと項目多めなフォームを作ってみたのですが、郵便番号検索の導入方法をメモ。

ajaxzip3 https://github.com/ajaxzip3/ajaxzip3.github.io

を使ってみました。Contact Form 7の設定で、郵便番号入力と出力先にIDを付与すればOK。(出力先へのID付与は要らないかも?)

凄い簡単に導入できるようになったなあ…。

ついプレーンJavaScriptで書いちゃったけれど、そもそも jQuery 使われているのであった…。

iOS の text-align: justify のバグ

font-family-apple-systemを指定して、text-align:justify な要素に、before疑似要素を inline-block で追加すると、iOSだけで先頭の特定の?文字で文字化けが起こるバグに遭遇したのでメモ。

デモ

単純に複数行だと起こるのか?とかアルファベットで起こるかどうかとかの細かい検証はやっていませんが再現できちゃったので書いておきます。

こんな感じに表示されます。

んーと、つまりは text-align:justify は極力使わない方がいい、ということかな。

簡易スタイルガイド(パターンライブラリ)を作ろう

こんにちは、みみです。

今日は先日の WordBench 三鷹の LT でお話した簡易スタイルガイド(パターンライブラリ)の作り方というか、テンプレをご紹介します。

スタイルガイドって今、色々ツールがでてるんですけれど、よっぽど大規模な案件で無い限り(あとそういう大規模な案件をあんまり WordPress だけで作らない方が良いし)そんなの導入しなくても WordPress で固定ページか投稿ページを非公開で作って開発しながらメモっていくのがローコストでハイリターンなやり方だと思います(※ 個人の感想です)。

CSSに大体慣れてきた人向けのアドバイスとしてご紹介したのですが、スライドだけだと現物が無いのでアレだなーと思って(LTでは実例をお見せしました)。

でも、パッとお見せ出来るものも無いんですよ、基本納品物だし非公開だから。なのでこのサイトで適当に作りました。色も嘘っぱちですしボタンとか無いしSVGも使ってないし、カスタムしているところがほぼないので、例としていまいちなのですけれど。

こんな感じのものです。

という凄い単純なものですが、すぐ導入できて、開発時の簡易テストにもなるし、クライアントさんに納品する時に簡易ドキュメントになるし、HTML分かる人だったら自分で活用して貰えるし、何より数カ月後とか数年後(!)とかに再開発になった時に楽ちんです。

これは別に玄人さん向けだけの話じゃなくて、個人ブログでコツコツとカスタムスタイルを積み上げて行っている方とか、テーマをちょこっとだけ弄ってる人にも便利だと思うのです。

何故なら、

人はコードを忘れるから。

… イイコトっぽく書いてみたけど、情けない事実であります。

でも良いの。外部記憶装置に任せるのが一番だよ!

“簡易スタイルガイド(パターンライブラリ)を作ろう” の続きを読む

人生初のLTハシゴ – WordBench 東京編

ゆるりとした三鷹編から電車移動で東京編@渋谷 GMO へ。(GMO の名前から連想して、電車の中で前の会社での大顧客だった某企業名を思い出せなくて唸ってたのは内緒。)

WordBench東京 6月勉強会 LT 大会 @ 渋谷 GMO Yours – WordBench東京 | Doorkeeper

に参加してきました。

ドーンと大きなビル。入館パス。警備員さん。まじか。同じWordBenchの会場とは思えないぜ…。

“人生初のLTハシゴ – WordBench 東京編” の続きを読む

2回目のWordBench三鷹にて – 人生初のLTハシゴ

2回目のWordBench三鷹で、LTをしてきました。

今回はほぼスタートから参加出来たので、主催の岡部さんの軽妙なトークを楽しめました。自分がLTやったから余計に、岡部さんのトーク術凄いなと改めて思いました。あのゆるりとした感じ、WordPressの敷居をさらにぐっと下げてくれる感じ、素晴らしいなあ。

“2回目のWordBench三鷹にて – 人生初のLTハシゴ” の続きを読む

Gutenberg にカスタムブロックを追加してみよう

こんにちは、mimiです。

Gutenberg 3.0 がリリースされて、本年中のWordPress 5.0 リリースが現実味を帯びてきましたね。そろそろ、カスタムブロックの作り方ぐらい予習しておいても良さそうな感じなのでやってみました。

といってもやり方は
Creating Block Types – The new Gutenberg editing experience – WordPress
に全部載っているんですけども。

前提として Gutenberg プラグイン自体もインストールされている必要があります。

1. gutenberg-examples をダウンロード

https://github.com/WordPress/gutenberg-examples をダウンロードします。

これが WordPress のプラグインとして扱われます。ダウンロードしたものをプラグインディレクトリに入れてください。

2. 有効化の前にコメントアウト

現状、2018/06/14の時点では、そのまま有効化するとエラーが出るので、gutenberg-examples-master/index.php 内をいくつかコメントアウトします。

include '01-basic/index.php';
//include '01-basic-esnext/index.php';
include '02-stylesheets/index.php';
include '03-editable/index.php';
//include '03-editable-esnext/index.php';
include '04-controls/index.php';
//include '04-controls-esnext/index.php';
include '05-recipe-card/index.php';
//include '05-recipe-card-esnext/index.php';

ESnext で書いた場合のサンプルも入っているのですが、npm install して build しないと動かないようになっています。

ESnext の記述に慣れておいた方が良いので、書き方はそちらで覚えた方が良いと思いますが、ここでは取り敢えずカスタムブロックを表示することを目標にします。

3. サンプルがレイアウト要素として表示されます

有効化して、記事作成すると、「ブロックの追加」から追加したサンプルがレイアウト要素として表示されます。Example: Basic、Example: Stylesheets、Example: Recipe Cardの3つです。

日本語化してない時に撮ったスクショですみません。

ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。

Gutenberg 3.0.1がリリースされました

ああ!ちょっとPythonと遊んでいたら、Gutenbergがまたアップデートしてましたね!言い訳すると、WordPressの画面の更新のお知らせをスルーするのが長年の癖になってしまっていて、いつも気付くのが遅れてしまいます。

What’s new in Gutenberg? (5th June)

ブロックのリストの中身が変わっている!が、惜しいなー、よく使うブロック(Most Block)と共通ブロックのリストは被ってほしくないなあ…。でも改善されてて使い勝手がまたあがっています。

カスタムHTMLが!動き出したぞ!

そして。入れ子ブロックも進化しているー!

The editor has had support for nesting blocks since around the beginning of this year. With 3.0, a block author can now also register a block as being a child of another block by declaring parent: [ 'block-name' ]. This now causes a few changes in the interface: the root inserter won’t show child blocks unless the user is within the context of the right parent block. (It aims to reduce the amounts of blocks shown at any given time by making the inserter more contextual.)
Note that for a block to be effectively a child two conditions must apply:
The block must provide a valid parent property.
The parent must have an InnerBlocks area declared.

が、引用ブロックへの入れ子はまだ出来ないのね。でもこの感じだと作れそうな気配。

やっとこ、名前負けしない雰囲気が出てきたかもしれません。これは、そろそろ、ほんとに開発してみたくなってきましたね…。