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でadvanced custom fieldsを使う場合、投稿編集画面に表示される入力フィールドの幅が100%指定で見た目が悪い。
この入力フィールドの幅をcssでカスタマイズする方法。

advanced custom fieldsのバージョンは6.3
カスタマイズ用のcssファイルを作成し、functions.phpで特定の投稿ポストの編集時に読み込ませるcssを指定する。

以下は特定のカスタム投稿タイプ用にcssフォルダ内にadmin-style.cssを作成し「your_custom_post_type」にカスタム投稿タイプを指定としている。
functions.php

function custom_admin_styles() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') { // カスタム投稿タイプを指定
        wp_enqueue_style('custom-admin-css', get_template_directory_uri() . '/css/admin-style.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

admin-style.cssの記述
入力フィールドのdata-nameにフィールド名が入っているのでそれぞれ入力し、widthを!important指定する

/* inputの場合 */
div[data-name="フィールド名"] input {
  width: 300px !important;
}
/* selectの場合 */
div[data-name="フィールド名"] select {
  width: 300px !important;
}

cssファイルを作らずにfunctions.phpだけで行う方法

function custom_admin_css() {
    global $post_type;
    if ($post_type === 'your_custom_post_type') {
        echo '<style>
            #poststuff .acf-field { background-color: #f9f9f9; padding: 10px; }
            #post-body-content { max-width: 800px; }
        </style>';
    }
}
add_action('admin_head', 'custom_admin_css');

(続きを読む…)

管理者以外はカスタム投稿タイプのサブメニューを非表示にしたい場合（新規投稿など出来なくする）

例：カスタム投稿タイプのスラッグは「hogehoge」でメニューはコメントアウトで表示させ、サブメニューを非表示にする記述

functions.php

// カスタム投稿タイプ「広告バナー」のサブメニューを非表示にする（管理者以外） ------------
function remove_custom_post_type_submenu() {
    if (!current_user_can('manage_options')) { // 管理者以外
//      remove_menu_page('edit.php?post_type=hogehoge'); // カスタム投稿タイプのメニューを削除
        remove_submenu_page('edit.php?post_type=hogehoge', 'post-new.php?post_type=hogehoge'); // 新規追加サブメニューを削除
    }
}
add_action('admin_menu', 'remove_custom_post_type_submenu', 100);

その他、全体的に管理者以外、使用しないメニューを非表示にする記述に追加でカスタム投稿タイプのメニューの非表示も行える

例：広告バナー（advertise）と商品管理（items）のメニュー非表示の記述を最下部に入れる

functions.php

// 使用しないメニューを非表示にする ------------------------------------------------------
function remove_admin_menus() {
 
    // level10以外のユーザーの場合
    if (!current_user_can('level_10')) {
 
        global $menu;
        global $submenu;
 
        // unsetで非表示にするメニューを指定
        unset($menu[2]);  // ダッシュボード
//      unset($menu[5]);  // 投稿
      unset($menu[10]); // メディア
//      unset($menu[20]); // 固定ページ
        unset($submenu['edit.php?post_type=page'][10]); //固定ページのサブメニュー
        unset($menu[25]); // コメント
        unset($menu[60]); // 外観
        unset($menu[65]); // プラグイン
        unset($menu[70]); // ユーザー
        unset($menu[75]); // ツール
        unset($menu[80]); // 設定
 remove_menu_page('wpcf7'); //コンタクトフォーム７
 remove_submenu_page( 'edit.php?post_type=advertise', 'post-new.php?post_type=advertise' ); //広告バナー新規作成
// remove_menu_page('edit.php?post_type=items', 'edit-tags.php?taxonomy=items_category&post_type=items'); //商品管理 カスタム投稿 タクソノミー
    }
}
add_action('admin_menu', 'remove_admin_menus');

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%」にする