kdcsライブラリー

wordpressに動画を埋め込んで再生する場合、youtubeであればyoutube画面に再生回数が表示されるが、mpg4などで作成した動画をアップロードして投稿に直接埋め込んだ場合、再生回数を取得するにはjavascriptで動画再生イベントをGA4に送信する必要がある。

document.querySelectorAll("video").forEach(video => {
    video.addEventListener("play", function() {
        gtag("event", "video_play", {
            event_category: "Video",
            event_label: window.location.pathname // 投稿ページのURLを記録
        });
    });
});

1. GA4のカスタムイベントを作成
GA4の管理画面でカスタムイベントを作成。

例：イベント名「video_play」ブログのシングルページ内の動画なのでpage_locationの値を「/blog/」にする。

1. GA4管理画面 → 「イベント」 → 「カスタムイベントを作成」
2. 「イベント名」を video_play に設定
3. 「条件」に event_name = video_play を指定
パラメーター：event_name　演算子：次と等しい　値：video_play
4. 「パラメータ」に page_location（投稿ページのURL）を追加
パラメーター：page_location　演算子：次を含む　値：/blog/

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);

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

datepickerで第1・第3・第5など、毎週ではない休みを選択できないようにする記述。
追加（2025.1.31）指定した日付も選択できないようにするように変更

例は、翌日（明日から）2か月間選択可能で毎週木曜日と第1・第3・第5水曜日が定休日の場合

$(function() {
// 休日の指定
var disabledDates = ["2025-01-01", "2025-01-02", "2025-01-03"];

$('#calendar').datepicker({
    showOn: 'button',
    buttonImageOnly: true,
    buttonText: 'カレンダーから選択',
    buttonImage: 'https://fujita-megane.com/wp-content/themes/fujita-h2021s/images/ico_calendar.png',
    minDate: '1d', //明日から
    maxDate: '+2m', //2ヶ月間（約60日）が選択可能範囲
    dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)

    beforeShowDay: function(date) {
        var day = date.getDay();
        var dateString = $.datepicker.formatDate('yy-mm-dd', date);
        var dateOfMonth = date.getDate();
        var weekOfMonth = Math.ceil(dateOfMonth / 7);
        // 木曜日かどうかをチェック
        if (day === 4) {
            return [false, "", "定休日です"];
        }
        // 水曜日かどうかをチェック（第1・第3・第5水曜日）
        if (day === 3 && (weekOfMonth === 1 || weekOfMonth === 3 || weekOfMonth === 5)) {
            return [false, "", "定休日です"];
        }
        // 指定した日付を選択できないようにする
        if (disabledDates.indexOf(dateString) !== -1) {
            return [false, "", "この日は選択できません"];
            }
            return [true, ""];
        }
    });
});

WordPressとjQueryのバージョン
※基本的にテーマをカスタマイズしているのでWordPress内部のjQueryは使用しない。

jQueryは公式からダウンロードするかcdnjsやgoogleなどから取得する
【cdnjs】
jQueryはこちら
jQuery-migrateはこちら