カテゴリー: Web / design / develop

結論

チェックボックスと同じ名前で、hiddenを作る
hiddenはチェックボックスの前に配置（空白を無理やり挿入する）

タグの構造としては以下になる。例えばcheckboxの名前が checkbox_name の場合

[hidden checkbox_name]
[checkbox checkbox_name use_label_element "チェックボックス項目A" "チェックボックス項目B" "チェックボックス項目C"]

checkboxは何も選択していない場合ではnullを返す。Contact Form 7の機能である「nullを空白に変換」にContact Form 7 Multi-Step Formsが対応しておらず、メールテンプレートで呼び出された [checkbox_name] がそのままメールの文面に出力されてしまう。
そこでhiddenを前に設定し、値として空白を渡す。もしチェックボックスが選ばれた場合は、空白は上書きされるという寸法。(nullは出力出来ないけど、空白はデータとして扱えるため)

checkboxのnullを、 [hidden checkbox_name] で空白に事前設定するという対抗策。

When checkbox fields are left unchecked they appear as [field-name] in the email. How do I resolve this?

チェックボックスフィールドのチェックを外したままにしておくと、メールに[フィールド名]として表示されます。どうすれば解決できますか？

When checkboxes are not checked they aren’t submitted through the form so the last step of the form doesn’t know the unchecked checkbox field exists. To get around this issue add a hidden form tag like [hidden field-name] to the last step. This way the last step will either submit the previously set value or a blank value.

チェックボックスがチェックされていないとき、それらはフォームを通して送信されないので、フォームの最後のステップはチェックされていないチェックボックスフィールドの存在を知りません。この問題を回避するには、最後のステップに [hidden field-name] のような hidden フォームタグを追加します。こうすることで、最後のステップでは前回設定した値か空白の値が送信されます。

https://ja.wordpress.org/plugins/contact-form-7-multi-step-module/

地味に厄介でQ&Aに書いてある英文翻訳は解決策がよくわからなかったので備忘録メモ。
ボクも確認画面いるかー？派なのだけど、これ好きな人多いんだよな……。

困り人の役に立てば幸い。

簡潔に結論。公開鍵形式に起因。
ed25519形式は認証できない。
RSA形式で再作成して再登録する。

XSERVERに登録したSSH公開鍵がed25519形式の場合、ssh接続は可能でも、データベース操作でdumpファイルを出力しようとするとSSHで認証ゴケする。マジで謎。
（ed25519形式でも、rsyncによるテーマファイルやプラグイン等のダウンロード・アップロードは可能。 wordmove push / pull -dだけ失敗する）

256 SHA256:####################### (ED25519). ← DB dumpのときにSSH認証エラー
4096 SHA256:****************************** (RSA) ← こちらはOK

さくらインターネットはいつもどおり上手くいくのに、Xserverだとできないのマジで謎だった。Docker / nginx / wordpree / wordmoveというニッチな環境でやってると類例がでなくて大変困る。

何回やってもエラーが発生するし、サーバー側のデータベース指定の箇所を、XSERVERがMySQL5.7からMariaDBに変更され、mysql***.xserver.jpからlocalhost指定になったのが原因なのでは？これ詰んだかなー？と試行錯誤した結果、SSHの鍵の種類だった。マージでうんこー。

困っている方のお役に立てば幸いです。（’A’

マージでハマったので備忘録

解決策

devServer: {
  static:path.resolve(__dirname, 'public_html/***/wp-content/themes/***/assets/dest'),
  hot: 'only',
  compress: true,
  port: 3000,
  https: true,
  proxy: {
    '*': {
      target: 'https://localhost:＊＊＊＊', // nginxで稼働してるwordpressのアドレス
      secure: false,
      changeOrigin: true,
    },
  },
  devMiddleware: {
  	writeToDisk: true,
  }
}

devMiddlewareでwriteToDisk:trueで解決できた。
海の彼方にいる名も知らぬ友よ。
幾千の感謝を。

Docker / nginxでWordpressを立ち上げて開発しつつ、webpackでbrowserSyncしていたのだけど、browserSyncのバージョンがあがってしまい、browserSync-webpack-pluginが死んだ。
正直pluginだけの問題だからバージョン下げるってのも考えはしたけど、そういうのが嫌でgulpを投げ捨ててwebpackにしたので、なんとか解決した。

ニッチな製作していると突然死んでしまう。

解決策ででてくるblogのタグが動かないのでお願いChatGPTで解決したので備忘録。

function generate_image_tag($atts) {
    $atts = shortcode_atts( array(
        'img' => '',
        'alt' => '',
        'webp' => true,
        'theme_url' => get_bloginfo('template_url'),
        'picture_class' => '',
    ), $atts );

    // File path details
    $file_info = pathinfo($atts['img']);
    $file_dir = $file_info['dirname'] != '.' ? $file_info['dirname'].'/' : '';
    $file_url = $file_dir . $file_info['filename'];

    $output = '<picture';

    // クラスが指定されていれば追加
    if (!empty($atts['picture_class'])) {
        $output .= ' class="' . esc_attr($atts['picture_class']) . '"';
    }

    $output .= '>';

    if (strtolower($file_info['extension']) === 'svg') {
        // If the file is an SVG
        $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.svg" type="image/svg+xml">';
        $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.svg" type="image/svg+xml">';
        $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.svg" alt="'.esc_attr($atts['alt']).'">';
    } else {
        // For other image types (non-SVG)
        $use_webp = $atts['webp'] && in_array(strtolower($file_info['extension']), array('png', 'jpg'));

        // WebPが指定されている場合
        if ($use_webp) {
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.webp" type="image/webp">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.webp" type="image/webp">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        } else {
            // WebPが指定されていない場合
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        }
    }

    $output .= '</picture>';

    return $output;
}
add_shortcode('generate_image', 'generate_image_tag');

これで固定ページに以下のショートコードを挿入することで、SVGの時はSVGとして、jpg/pngでwebp用意している・していない時を切り替えることができる。

使い方は

[generate_image img="ディレクトリ+ファイル名" picture_class="pictureへのclassを入力（複数可）" alt="alt属性を入力" webp="true/false"]

img=””にファイル名を入力。拡張子がsvgの時は、webp=””は省略可能。
webp=””はファイル拡張子がpngまたはjpgの時、用意しているのであればtrue、用意していないときはfalseを設定。

迷い人の解決になれば。

最近ローカルdockerで開発したあとに、Wordmoveで一式アップロード後、ごくまれにこの現象が発生していて難儀していたので備忘録がてらメモ。

結論

wordpress格納フォルダのパーミッションが777になっている場合は、755に変更する

[cgi:error] [pid 00000] [client 000.000.000.000:0] AH01215: suexec policy violation: see suexec log for more details:

CGI使ってないのになんでエラーが……という理由はわからないが、調べたらパーミッションエラーとのことだったので確認すると、フォルダのパーミッションが777だった。

検証サーバなので、管理画面からインストールしている他のサイトのWordperssフォルダは確認すると755だったので、ならって755に修正すると500エラーが解除された。

ハマっている方の役に立てば幸い。

知識を提供してくれるblogサイトに感謝を。

CDNでswipe.jsを読み込んだときに、「このコードで動作します」というコードをコピーペーストしても何故か進む・戻るだけが動作しなくて頭をひねった。
もっともswipe.jsのドキュメントを読めば話は終わりなのだが、時間がないの！助けて！というときはドツボにハマってそんなことにすらたどり着けない。
今日のボクです。

そんなわけでオチとしては、戻る・進むボタンに指定する方法がswipe.jsのバージョンで異なる。

最新のcdn読み込みswipe.js用の指定方法（2021.09.15現在 v7.0.5）

// CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.5/swiper-bundle.min.js"></script>

<script>
// 最新のcdn読み込みswipe.js用（2021.09.15現在 v7.0.5）
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>

旧versionのswipe.js用の指定方法

<script>
// 旧バージョンのswipe.js（サンプルサイトのコードによくある記述）
   var swiper = new Swiper ('.swiper-container', {
     nextButton: '.swiper-button-next',
     prevButton: '.swiper-button-prev',
   });
</script>

お困りの方のお役に立てば幸い。