kdcsライブラリー

advanced custom fieldsでチェックボックスの値を利用して出力するhtmlを変える（すべて出力する）方法。

copilotに尋ねた結果

<?php
$selected = get_field('checkbox_field_name');
if (in_array('option1', $selected)) {
  echo '<p>選択肢1が選ばれました</p>';
}
if (in_array('option2', $selected)) {
  echo '<p>選択肢2が選ばれました</p>';
}
?>

実際のコード
フィールドは「room_tobacco」で選択肢として、禁煙はno、喫煙はyes

<?php $selected = get_field('room_tobacco');
if (in_array('no', $selected)) {
echo '<span class="no-smoking"><i class="fa iconx-no-smoking"></i> 禁煙</span>';
  }
if (in_array('yes', $selected)) {
echo '<span class="smoking"><i class="fa iconx-yes-smoking"></i> 喫煙</span>';
  }
?>

こうすると、チェックボックス未入力の場合に$selectedの値がnullになり、「in_array(): Argument #2 ($haystack) must be of type array, null given」というエラーになる。

解決策１【nullチェックを追加する】-WordPressデバッグモードでエラー出ず
is_array()で配列かどうかを確認してからin_array()を使う

<?php $selected = get_field('room_tobacco');
if (is_array($selected) && in_array('no', $selected)) {
    echo '<span class="no-smoking"><i class="fa iconx-no-smoking"></i> 禁煙</span>';
  }
if (is_array($selected) && in_array('yes', $selected)) {
    echo '<span class="smoking"><i class="fa iconx-yes-smoking"></i> 喫煙</span>';
  }
?>

解決策２【(array)を入れる】
in_arrayの第2引数$selectedの前に(array)を入れる

<?php $selected = get_field('room_tobacco');
if (in_array('no', (array)$selected)) {
    echo '<span class="no-smoking"><i class="fa iconx-no-smoking"></i> 禁煙</span>';
  }
if (in_array('yes', (array)$selected)) {
    echo '<span class="smoking"><i class="fa iconx-yes-smoking"></i> 喫煙</span>';
  }
?>

解決策３【elseを入れて値が無い場合の処理をさせる】

<?php $selected = get_field('room_tobacco');
if (in_array('no', $selected)) {
    echo '<span class="no-smoking"><i class="fa iconx-no-smoking"></i> 禁煙</span>';
  }
if (in_array('yes', $selected)) {
    echo '<span class="smoking"><i class="fa iconx-yes-smoking"></i> 喫煙</span>';
  }
else {
    echo '';
  }
?>

ページがレスポンシブ対応の場合、フォントサイズも可変させたい場合がある。
cssのclamp関数を使うと画面幅に応じてフォントサイズを可変させることができる

font-size: clamp(最小値, 基準値, 最大値);

基準値はvwでフォントサイズを指定し、その計算方法はこちら
例：コンテンツの幅が1200pxの時にフォントサイズを16pxで表示させる

vwの計算方法
（基準となる文字サイズ）÷（基準となる幅）× 100

16 ÷ 1200 × 100 = 1.33...

この基準値に合わせてフォントサイズの最小値13px、最大値16pxとすると以下の通り

font-size: clamp(13px, 1.33vw, 16px);

min() max() clamp()のサポートブラウザを見る

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