夏花

November 28, 2024November 28, 2024

用clip-path实现slider从左向右轮播效果

<style>
.post-item__eyecatch {
        width: 100%;
        padding-top: 60%;
        position: relative;
        overflow: hidden;
      }
.post-item img {
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        height: 100%;
        object-fit: cover;
        object-position: center;
        min-width: 100%;
        min-height: 100%;
        clip-path: inset(0 100% 0 0);
        z-index: 1;
        transition: clip-path 1.2s ease 2s;
      }
      .post-item img.current {
        z-index: 5;
        clip-path: inset(0 0 0 0);
        transition: clip-path 2s cubic-bezier(0.67, 0.16, 0.26, 0.95) 0s;
      }
</style>
<div class="post-item__eyecatch">
          <img src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M2.jpg"
            alt=""
          />
          <img
            src="https://unium.jp/unium_cms/wp-content/uploads/2024/09/attractive_M3.jpg"
            alt=""
          />
        </div>
<script>
      class eyeCatchClass {
        constructor(element, interval = 3000) {
          this.element = element;
          this.images = this.element.querySelectorAll("img");
          this.currentIndex = 0;
          this.interval = interval;
          this.timer = null;
        }
        updateImages() {
          this.images.forEach((img, index) => {
            if (index === this.currentIndex) {
              img.classList.add("current");
            } else {
              img.classList.remove("current");
            }
          });
          this.element.setAttribute("data-current-slide",this.currentIndex + 1);
          this.currentIndex = (this.currentIndex + 1) % this.images.length;
        }
        startSlider() {
          this.updateImages();
          this.timer = setInterval(() => this.updateImages(), this.interval);
        }
      }
      const eyeCatech = () => {
        document.querySelectorAll(".post-item__eyecatch").forEach((element) => {
          const eyeCatechElement = new eyeCatchClass(element);
          eyeCatechElement.startSlider();
        });
      };
      eyeCatech();</script>

November 21, 2024

Js判断页面滚动方向

const detectScrollDirection = () => {
  let lastScrollTop = 0;
  window.addEventListener("scroll", () => {
    const header = document.querySelector(".site_nav");
    const currentScrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    if (currentScrollTop < lastScrollTop) { //<向下滚动，>向上滚动
      header.classList.remove("scroll");
    } else {
      header.classList.add("scroll");
    }
    lastScrollTop = currentScrollTop;
  });
};
detectScrollDirection();

November 12, 2024November 12, 2024

将文本拆成行，文本标题拆分多个字符的方法

////.split-lines文本拆成行
      const splitLines = (container) => {
        const spans = container.children;
        let top = 0;
        let tmp = "";

        container.innerHTML = container.textContent.replace(
          /\S+/g,
          "<n>$&</n>"
        );
        for (let i = 0; i < spans.length; i++) {
          const rect = spans[i].getBoundingClientRect().top;
          if (top < rect) {
            tmp +=
              "</div></div><div class='overflow-hidden'><div class='text_inner'>";
          }
          top = rect;
          tmp += spans[i].textContent + " ";
        }

        container.innerHTML = tmp + "</div></div>";
      };
      document.querySelectorAll(".split-lines").forEach(element => {
        splitLines(element);
      });

/*title文本拆多个字符*/
const splitLetters = () => {
        document.querySelectorAll(".title").forEach((title) => {
          title.innerHTML = [...title.textContent].map((letter) =>`<span class="${letter.trim() === "" ? "empty" : ""}">${letter}</span>`).join("");
        });
      };
      splitLetters();

//滚动过程中给隐藏的文本添加动态效果
      const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();

November 12, 2024November 12, 2024

用IntersectionObserver()的方法实现滚动加载

const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();

March 13, 2024April 9, 2024

wordpress 默认gallery用幻灯片播放

投稿内有多个gallery时同样适用，图片有标题的时候显示图片标题。

 const singleGalllery = () => {
    let $order = 1;
    $(".wp-block-gallery").each(function () {
      let $gallery_name = "gallerySwiper_" + $order;
      var $this = $(this);
      let swiper_slide = "";
      let gallery = [];
      $this.after(
        '<div class="swiper gallerySwiper ' + $gallery_name + '"><div class="swiper-wrapper"></div><div class="custom_pagination"><div class="swiper-button-prev"></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div></div></div>'
      );
      $this.find("img").each(function () {
        if ($(this).data("src")) {
          gallery.push([
            $(this).data("src"),
            $(this).siblings(".wp-element-caption").text(),
          ]);
        } else {
          gallery.push([
            $(this).attr("src"),
            $(this).siblings(".wp-element-caption").text(),
          ]);
        }
      });
      if (gallery.length > 0) {
        for (const img in gallery) {
          let $caption = "";
          if (gallery[img][1]) {
            $caption = '<div class="caption">' + gallery[img][1] + "</div>";
          }
          swiper_slide +=
            '<div class="swiper-slide">' +
            $caption +
            '<img src="' +
            gallery[img][0] +
            '" alt=""></div>';
        }
        $this
          .next(".gallerySwiper")
          .find(".swiper-wrapper")
          .append(swiper_slide);
        //gallery swiper
        var swiper = new Swiper('.'+$gallery_name, {
          grabCursor: true,
          autoHeight: true,
          watchSlidesProgress: true,
          loop: true,
          slidesPerView: 1,
          spaceBetween: 10,
          autoplay: {
          delay: 3500,
          disableOnInteraction: false,
          },
          breakpoints: {
            1001: {
              spaceBetween: 20,
              slidesPerView: 1.4,
              autoplay: {
                delay: 5000,
                disableOnInteraction: false,
              },
            },
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
              if (index < 9) {
                index = "0" + (index + 1);
              } else {
                index = index + 1;
              }
              return '<span class="' + className + '">' + index + "</span>";
            },
          },
        });
      }
      $this.remove();
      $order++;
    });
  };

March 6, 2024

WordPress通过附件获得文章ID

get_post_ancestors can give you the ID of the object an attachment is associated with:

$attachment_id = 42;
$parent = get_post_ancestors( $attachment_id );
echo $parent[0]; // $parent will be an array

March 6, 2024March 6, 2024

wordpress非管理员账户只能查看自己上传的文章

在function.php里添加如下代码

add_filter( 'ajax_query_attachments_args','wpb_show_current_user_attachments' );
function wpb_show_current_user_attachments( $query ) {
$user_id = get_current_user_id();
if ( $user_id && !current_user_can('activate_plugins') && !current_user_can('edit_others_posts') ) {
$query['author'] = $user_id;}
return $query;
}

January 25, 2024January 25, 2024

通过数据表查询日期范围内的文章

假设自定义文章类型是$type=‘books’;

global $wpdb;
$dates = $wpdb->get_results("SELECT DISTINCT DATE_FORMAT(post_date,'%Y.%m') AS `time` FROM $wpdb->posts WHERE post_type = '$type' AND  post_status = 'publish' ORDER BY post_date DESC", ARRAY_A);
var_dump($dates);

会得到如下数组：


    array(1) {
  [0]=>
  array(1) {
    ["time"]=>
    string(7) "2024.01"
  }
}

explode()将字符串转化为数组。

foreach ($dates as $date) {$time = $date['time'];
        $time_array = explode(".", $time);
var_dump($time_array);
}
array(2) {
  [0]=>
  string(4) "2024"
  [1]=>
  string(2) "01"
}

然后按照年份和月份查询文章。

November 16, 2023

获取分页

var getUrlParameter = function getURLParameter(name, url) {
    // Create a URL object from the url string
    var urlObj = new URL(url);
    // Get the search parameters object
    var params = urlObj.searchParams;
    // Get the value of the name parameter
    return params.get(name);
  }

$link = $this.attr("href");
$paged = getUrlParameter("teams_paged", $link);

October 19, 2023

php判断自定义段是否属于当前域名

$_SERVER[‘HTTP_HOST’]获取当前域名，parse_url()解析地址。

<?php if ($_SERVER['HTTP_HOST'] != parse_url($meta['pro_link'])["host"]) {echo 'target="_blank" rel="noopener noreferrer"';}?>