<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>
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通过附件获得文章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 arraywordpress非管理员账户只能查看自己上传的文章
在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);php判断自定义段是否属于当前域名
$_SERVER[‘HTTP_HOST’]获取当前域名，parse_url()解析地址。
<?php if ($_SERVER['HTTP_HOST'] != parse_url($meta['pro_link'])["host"]) {echo 'target="_blank" rel="noopener noreferrer"';}?>投稿页面只输出指定的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();
}wp分类链接去掉category的方法
在function.php中加入如下代码，不适用有子分类的。
function remove_category($string, $type)
{if ($type != 'single' && $type == 'category' && (strpos($string, 'category') !== false)) {$url_without_category = str_replace("/category/", "/", $string);return trailingslashit($url_without_category);}
return $string;}add_filter('user_trailingslashit', 'remove_category', 100, 2);wordpress随机获取文章内的gallery和video
假设文章ID=5
随机输出相册内20张图片：
<?php
$post=5;
$ids = [];
$array_key_names=[];
if (has_block('gallery', $post)) {
$post_blocks = parse_blocks(get_the_content($post));
$ids = $post_blocks[0]['attrs']['ids'];
}
else {
$gallery = get_post_gallery( $post->ID, false );
$ids = explode ( ",", $gallery['ids'] );
}
shuffle($ids);
$array_key_names = array_rand($ids,20);
foreach($array_key_names as $array_key_name){
// echo ...;
}?>随机输出1个视频
<?php
$post = 5;
$ids = [];
$videos = [];
$array_key_name = [];
if (has_block('video', $post)) {
$post_blocks = parse_blocks(get_the_content($post));
foreach ($post_blocks as $post_block) {
array_push($videos, $post_block['attrs']['id']);
}
}
$ids = array_filter($videos);
shuffle($ids);
if (!empty($ids)) {
$array_key_name = array_rand($ids, 1);
$video_id = $ids[$array_key_name];
?>
<video preload="auto" loop="true" muted="true" playsinline="true">
<source src="<?php echo wp_get_attachment_url($video_id); ?>" type="video/mp4">
</video>
<?php } ?>