kdcsライブラリー

投稿タイプと先頭固定したい記事のIDを入力

function my_admin_post_order( $orderby, $query ) {
    if ( is_admin() && $query->is_main_query() && $query->get('post_type') === 'banquet_plan' ) {
        $sticky_id = 324;
        global $wpdb;
        // 特定の投稿IDを最上部に、それ以外は通常の並び
        $orderby = "FIELD({$wpdb->posts}.ID, $sticky_id) DESC, {$wpdb->posts}.post_date DESC";
    }
    return $orderby;
}
add_filter( 'posts_orderby', 'my_admin_post_order', 10, 2 );

テーマ内のテンプレートファイルに別ファイルを読み込ませる場合、今までは「TEMPLATEPATH.」を使っていたが、WordPress 6.4.0 以降では 非推奨 になっているのでその代替の手法。

今までの記述

<?php include(TEMPLATEPATH.'/hogehoge.php'); ?>

その１．「include get_template_directory()」を使う

<?php include get_template_directory() . '/hogehoge.php'; ?>

その２．WordPress 標準のテンプレート読み込み関数「get_template_part() 」を使う

get_template_part('hogehoge');

hogehoge.phpが、hogehoge-news.phpのようにハイフン付きのファイル名の場合

get_template_part('hogehoge', 'news');

例

<?php 
/*
  list.php
  list-news.php
  を読み込む
*/
  get_template_part('list'); 
  get_template_part('list', 'news'); 

/*
  parts/list.php
  parts/list-news.php
  を読み込む
*/
  get_template_part('parts/list'); 
  get_template_part('parts/list', 'news'); 
?>

画像をコンテンツ内で使っているか（imgタグ）、背景画像として使っているか（cssで指定）によって分かれる

背景画像の場合はcssの「image-set()」で対応

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

※Safari 12 以前や Chrome 67 以前などの古い WebKit 系ブラウザでは -webkit-image-set() が必要。
　（Safari 12 や Chrome 67 は 2018年リリースで約7年前のブラウザ）

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* 古いsafariとChromeのブラウザ用（WebP優先） */
  background-image: -webkit-image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

コンテンツ内の画像の場合は「picture」タグで対応

<picture>
  <source srcset="../images/slide_mv/sp01.webp" type="image/webp">
  <img src="../images/slide_mv/sp01.jpg" alt="スライド画像">
</picture>

#hogeなど要素にidを付けて、その位置までスクロールさせたり別ページからリンクで移動させたりする場合、ページ上部に固定ヘッダーメニューなどがあると重なってしまい#hoge位置が隠れてしまう。

cssの「scroll-margin-top」を使うと#hogeの上にマージンが取れるので、ヘッダーメニュー分以上の縦幅をしていすれば重ならずに済む。
※古いブラウザ向けに代替の記述も併せて指定する

#hoge {
    scroll-margin-top: 50px;
    position: relative;
}
/* フォールバック用（古いブラウザ向け） */
#hoge::before {
  content: "";
  display: block;
  height: 50px;       /* ヘッダーの高さ分 */
  margin-top: -50px;  /* 上にずらす */
  visibility: hidden;
}

swiperでページネーションやナビゲーションボタンを.swiperの外側に出して表示位置をカスタマイズしているとき、スライド要素が1つしかない場合はナビゲーションを非表示にしておきたい。

以下のオプション設定で、スライド要素の数を確認し、1つの場合はstyleでdisplay:noe;を付けて非表示にする。
※基本的には、’#eventAd .custom-navigation’これだけをdisplay:noneにすればよい

const swiper2 = new Swiper('.eventAdSlider', {
  loop: true,
  parallax: true, // パララックスさせる
  allowTouchMove: false, // マウスでのスワイプを禁止
  speed: 1500,
  autoplay: {
    delay: 5000, // 5秒ごとに自動再生
    disableOnInteraction: false, // ユーザー操作後も自動再生を継続
  },
  pagination: {
    el: '#eventAd .swiper-pagination',
  },
  navigation: {
    nextEl: '#eventAd .swiper-button-next',
  },
  on: {
    init: function () {
// スライド要素が1つの場合、カスタムナビ非表示（loop:true の場合、クローン要素も含まれるので注意）
      const realSlideCount = this.slides.filter(slide => !slide.classList.contains('swiper-slide-duplicate')).length;
      if (realSlideCount <= 1) {
        document.querySelector('#eventAd .custom-navigation').style.display = 'none';
        document.querySelector('#eventAd .swiper-button-next').style.display = 'none';
        document.querySelector('#eventAd .swiper-button-prev').style.display = 'none';
        document.querySelector('#eventAd .swiper-pagination').style.display = 'none';
      }
    }
  }
});

非表示にする必要が無い場合はこちら

const swiper2 = new Swiper('.eventAdSlider', {
  loop: true,
  parallax: true, // パララックスさせる
  allowTouchMove: false, // マウスでのスワイプを禁止
  speed: 1500,
  autoplay: {
    delay: 5000, // 5秒ごとに自動再生
    disableOnInteraction: false, // ユーザー操作後も自動再生を継続
  },
  pagination: {
    el: '#eventAd .swiper-pagination',
  },
  navigation: {
    nextEl: '#eventAd .swiper-button-next',
  },
});