kdcsライブラリー

投稿やカスタム投稿でAdvanced Custom Fieldsを使って画像をアップロードしてページに掲載する場合、画像の設定が必須でないときは画像があったり無かったりするので投稿一覧でその「あり・なし」が分かるようにしたい。

functions.phpに記述
例はrestaurant_menuというカスタム投稿タイプでACFの画像フィールド名はrestaurant_menu_image

[php]
// カラムを追加
add_filter(‘manage_restaurant_menu_posts_columns’, ‘add_menu_image_column’);
function add_menu_image_column($columns) {
$columns[‘menu_image’] = ‘画像あり’;
return $columns;
}

// カラムの内容を表示
add_action(‘manage_restaurant_menu_posts_custom_column’, ‘show_menu_image_column’, 10, 2);
function show_menu_image_column($column, $post_id) {
if ($column === ‘menu_image’) {
$image = get_field(‘menu_image’, $post_id); // ACFの画像フィールド名
if ($image) {
echo ‘画像あり’;
} else {
echo ‘画像なし’;
}
}
}

]/php]

【未検証】（実際は’menu_image’もACFの画像フィールド名と同じ’restaurant_menu_image’にして実装した）
たぶん、一覧にカラムを追加するときにカラム名を’menu_image’にする場合は、項目の並べ替えの時にも’menu_image’を使う。

一覧にサムネイル画像を表示させる場合
(続きを読む…)

カテゴリーとタグに表示されているタブ「よく使いもの」を非表示にする。

functions.phpに記述

function my_admin_style() {
echo '<style>
div.categorydiv li.hide-if-no-js{
display:none;
}
</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

タグをチェックボックス化する

functions.phpに記述

'hierarchical'            => true,    //trueでタグをチェックボックス化

チェックボックスで1つしか選択できないようにする
※以下の記述はカスタム投稿タイプ「restaurant」の場合でカテゴリーとタグそれぞれ制御させている

functions.php

// カテゴリー・タグ（チェックボックス化）を1つだけ選択可能にする -------------------------
function limit_restaurant_taxonomy_selection() {
    echo '<script>
        jQuery(function($) {
            // restaurant_category の制御
            $("#restaurant_categorychecklist input[type=checkbox]").click(function() {
                $("#restaurant_categorychecklist input[type=checkbox]").not(this).prop("checked", false);
            });

            // restaurant_tag の制御
            $("#restaurant_tagchecklist input[type=checkbox]").click(function() {
                $("#restaurant_tagchecklist input[type=checkbox]").not(this).prop("checked", false);
            });
        });
    </script>';
}
add_action('admin_print_footer_scripts', 'limit_restaurant_taxonomy_selection');

slick sliderで静止画と動画をスライドさせる方法 copilot

html

<div class="slider">
  <div><img src="img1.jpg" /></div>
  <div><img src="img2.jpg" /></div>
  <div><img src="img3.jpg" /></div>
  <div>
    <video id="video-slide" width="100%" muted>
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</div>

javascript（jQuery + Slick）

$(document).ready(function(){
  const $slider = $('.slider');
  const $video = $('#video-slide')[0];

  $slider.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    pauseOnFocus: false,
    arrows: true,
    dots: true
  });

  // スライドが変わる直前に動画を停止＆リセット（動画から離れるとき）
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;
    const isLeavingVideo = nextSlide !== slick.slideCount - 1;

    if (isVideoSlide && isLeavingVideo) {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // スライドが変わった後に動画スライドなら再生＆自動スライド停止
  $slider.on('afterChange', function(event, slick, currentSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;

    if (isVideoSlide) {
      $slider.slick('slickPause');
      $video.currentTime = 0;
      $video.play();
    } else {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // 動画が終了したらスライダーを再開し、動画を先頭に戻す
  $video.addEventListener('ended', function(){
    $video.currentTime = 0;
    $slider.slick('slickPlay');
  });
});

・muted 属性は自動再生を許可するために重要です（ブラウザの仕様）。
・slickPause() / slickPlay() で自動スライドの制御。
・currentTime = 0 で動画を先頭に戻す。
・beforeChange と afterChange の両方で動画の状態を管理。

slicksliderのスライド範囲にborder-radius:10px;overflow: hidden;を適用して中身の画像を角丸表示させようとしたが、safariだけ角丸にならない。safari特有のバグらしい。

対策方法は以下
.slick-list や .slick-track が overflow を制御しているため、それぞれに角丸と隠すスタイルを加えることで画像のはみ出しを防げる。

.slick-slider,
.slick-list,
.slick-track {
  border-radius: 10px;
  overflow: hidden;
}

パソコン版とモバイル版で違う動きをさせたい場合、動きを付ける要素のクラスをpcとmobileで切り替える方法。

例はheaderというidに、画面幅が780pxより広いときは「pc」、780px以下のときは「mobile」というクラスを付与して切り替える。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobile");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobile");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

window.innerWidth を使って現在の画面幅を取得。
classList.add() と classList.remove() で不要なクラスを確実に排除。
resize イベントで画面サイズ変更に応答。