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 は極力使わない方がいい、ということかな。

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つです。

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

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

npm dployを使って自動デプロイしてみた。

日頃、極々小規模の開発しかしないので、Transmit で充分満足していたのですが、 npm で自動デプロイが出来ると知って試してみました。

npm : dploy – npm

公式サイト:DPLOY

git の差分をみて自動デプロイしてくれる賢い子。sftp もいけるよ!

“npm dployを使って自動デプロイしてみた。” の続きを読む

vue.jsとAxiosを使ってWP REST APIからタグを取得してみる

REST APIと私とvueと、みたいなのが流行っているらしいとは聞いていましたが、静的コンテンツまで生成出来るとか聞いて、ガタっとなりました。それ私がやりたいやつじゃん、と。GW最終日のネタに決定。

でもまあ、先ずはvueもREST APIも全然分からんので、取り敢えずWordPressからデータを取得するアレコレを触ってみたのでメモしておきます。

要るもの

  • vue.js — Javascriptのフレームワーク。たぶん。簡単簡単って書いてあるけど、まだ全然仲良くなれない。最近人気らしい。
  • axios.js — ブラウザとNode.jsのためのHTTPクライアント。かしこい。
  • wordpress — ディファクトスタンダードなCMS。腐れ縁。4.7から勝手にREST APIを出すようになってます。肥大化したCMSの起死回生なるか。

・・・これしか要らない、という意味では超簡単かも。コマンドラインも基本必要ない。

“vue.jsとAxiosを使ってWP REST APIからタグを取得してみる” の続きを読む

【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう

JavaScriptが時の人になって暫く経ちましたが、まだまだ喧々諤々やっているよう(に見える)ので、なるべく近づかないで済ませる方法を模索しています。
その方が軽いはずだしゆーざーふれんどりーだと思っています。(JS自体は好きです。いつもお世話になっております。ハンバーガーメニューがゆーざーふれんどりーかどうかとか難しい話は振らないでください。)

この数年、Sassを導入して、命名規則を変えてから、とうとう、ようやく、ねんがんの、CSSのモジュール化が出来るようになってきたので、ちまちま書き溜めて行こうかと思っています。
ヒトサマに使ってもらえるようなソースでは全然無いのですが、人目に晒してブラッシュアップしていくのが良いかなと思うので。

今日は良くあるハンバーガーメニューをCSSだけで作るというのを書いておこうと思います。
方法は色々とあって、たくさんソースも落ちていますが、アテクシ流の書き方をメモしておきたいと思います。
(タイトルのライブラリ化とは別になんかnpmとかで呼び出せるとかそんなんじゃなくて、コピペで済むぐらいのフワッとした意味なので怒らないでください。)

大体の仕組みとしてはcheckboxでオンオフの判別をして、transformtransitionでアニメーションを作ります。
~(チルダ)で要素を紐付けられるようにするのが肝
iOSでは動作確認済み。Chrome系も大丈夫なはず。

CSSと言っていますが、SASSで書いています。
PostCSSとかnextcssとか試したいけれどまだ手を出せていません。

あと命名規則は最近SMACSSとBEMをベースに、

prefix-block__element–modifier(ex. l-global__header)

みたいな書き方するようにしてて気持ち悪かったらごめんなさい。
m-はモジュール、l-はレイアウトです。

で、もいっこのポイントとしては、ハンバーガーメニューではほぼ無いと思うんですが、後々やっぱりJS使うかーとかにもなりがちなので、動きの部分を別に書くようにしています。これオススメ。

“【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう” の続きを読む