Code Stock

トップページの内容は、front-page.php です。
front-page.php を変更してトップページを作成してください。
※固定ページ「Front-page」は削除しないでください。

このテーマの詳細については、「Theme Guide」を確認してください。

セクション毎に div.section > div.container でブロック組み。
よく使うコーディング集は下記のサンプルを参考に。

横並びBOXのコーディング(1)
.listbox と .item でブロックを定義します
display:flex; を使えば、 .item の横marginは省略できる。
テキストは .txt_ellipsis で丸め込みできます(語尾が「…」になる)

横並びBOXのコーディング(2)
BOX内で左右に分割したい場合は .box_l .box_r で分割できます
画像はあらかじめ定義済みの比率に固定できます。(1x1, 4x3, etc...)

横並びBOXのコーディング(3)
表示件数が奇数個のときなど、スマホ表示でitem幅50%, 33% では表示しずらいときは、
100%表示にして画像とテキストを左右に分ける

動画のレスポンシブ埋め込み(常に16:9で表示される)

画像のレスポンシブ切り替え
picture, source, imgタグで実装できます。 767px以下で画像が切り替わります

①WP Mail SMTP by WPForms でSMTP送信の設定を行う。

②Flamingos で送信履歴を残す。
デフォルトの[your-name][your-email][your-subject]フィールドがない場合は下記のように「その他設定」で補足する

flamingo_email: "[the-email-field]"
flamingo_name: "[the-name-field]"
flamingo_subject: "お問い合わせ"

③Contact Form 7 add confirm を使う場合は、確認用メッセージを表示するようにする。
.wpcf7c-elm-step1 … 入力画面だけで表示される内容
.wpcf7c-elm-step2 … 確認画面だけで表示される内容
.wpcf7c-elm-step3 … 完了画面だけで表示される内容

④「郵便番号」から自動で住所入力する場合のフィールド設定
郵便番号 … zipcode
都道府県 … addr1
住所 … addr2
都道府県 + 住所 … address
自動入力ボタン … class="addr_auto wpcf7c-elm-step1" を付ける
※カスタムは「js/main.js」

都道府県プルダウン用の独自ショートコード
[select_addr1 addr1 include_blank]