kdcsライブラリー

wordpressの投稿で改行するとpタグに が入って空白の改行が出来てしまう。
この空白の改行がスマホ画面で邪魔になる場合に非表示にする方法。

例は画面幅640px以下の場合に 入りのpタグを非表示にする方法

javascript

//画面幅640px以下で空白のpタグを非表示にする----------------
const mediaQuery = window.matchMedia("(max-width: 640px)");

function hideEmptyPTags(event) {
  if (event.matches) {
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "none";
      }
    });
  } else {
    // 画面幅が640pxを超えた場合、元に戻す（必要に応じて）
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "block";
      }
    });
  }
}

// イベントリスナーを追加
mediaQuery.addEventListener("change", hideEmptyPTags);

// 初回チェック
hideEmptyPTags(mediaQuery);

iphone（ios14.8）で確認。
横向きにするとフォントサイズが大きくなり、縦向きに戻しても文字が大きいままになってしまう現象があった。

cssで自動調整を無効にできる

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

※値を「none」ではなく「100%」にする

バリデーションを設定する

※お問い合わせ内容がテキストエリア[your-message*]と必須になっている場合（*が付いている）
「wpcf7_validate_textarea*」こちらにも*を付けることによって指定できる。
未入力の場合は指定したエラーメッセージ、例えば「必須項目に入力してください。」、URLを入力した場合「URLの入力はできません」というエラーメッセージを出す。
URLはhttps、httpどちらもエラーになる。

functions.php

add_filter('wpcf7_validate_textarea*', 'custom_validate_no_urls', 20, 2);

function custom_validate_no_urls($result, $tag) {
    $name = $tag->name;
    $value = isset($_POST[$name]) ? $_POST[$name] : '';

    if (preg_match('/https?:\/\/[^\s]+/', $value)) {
        $result->invalidate($tag, 'URLの入力はできません');
    }
    return $result;
}

cssとjavascript「infiniteslide」で無限ループスライダーを作成したがpcとspどちらとも左右動作できるパターン無しという結果。

お問い合わせ内容の入力にURLが含まれる場合はエラーメッセージを出す。

functions.php

function wpcf7_validate_custom($result, $tag) {
    $value = esc_attr($_POST['your-message']);
    if (!empty($value)) {
        if (preg_match('/https?:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+/', $value)) {
            $result->invalidate($tag, 'URLは入力できません');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_textarea', 'wpcf7_validate_custom', 10, 2);