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++;
    });
  };

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;
}

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

假设自定义文章类型是$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"
}

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

获取分页

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

投稿页面只输出指定的block内容

以仅输出table为例。
首先在function里添加如下函数。

function wpdocs_display_post_table_block() {
	global $post;
	$blocks = parse_blocks( $post->post_content );
	foreach ( $blocks as $block ) {
		if ( 'core/table' === $block['blockName'] ) {
			echo apply_filters( 'the_content', render_block( $block ) );
			break;
		}	
	}
}

在投稿页如下

if ( has_block( 'core/table' ) ) {
	wpdocs_display_post_table_block();
}

js正则表达式将字符串的数字自动添加标签

\d:表示一个十进制的数字[0-9]
\D:表示非数字
\w:表示一个字[0-9a-zA-Z]
\W:表示除[0-9a-zA-Z]之外的字符

$& 表示整个用于匹配的原字符串。

var $element = $(".plan-number-strong");
        $element.each(function() {
            var modifiedText = $(this).text().replace(/\d+/g, '<span>$&</span>');
            $(this).html(modifiedText);
        })

js阻止事件向上传递

JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根。

function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
      }