WordPress自定义相册分类及调取方法
发布于
by
自定义相册分类代码 创建相册自定义分类slide.php 1 2 3 4 5 6 7 8 9 10 11 12…
自定义相册分类代码
创建相册自定义分类slide.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<?php
// 注册自定义文章类型：自定义相册
if( ! function_exists(‘my_custom_cpt_homeslider’)) {
function my_custom_cpt_homeslider() {
$args = array(
‘label’ => __(‘相册’, ‘uxbarn’),
‘labels’ => array(
‘singular_name’=> __(‘Slide’, ‘post type 单个 item 时的名称，因为英文有复数’),
‘add_new’ => __(‘添加新的 Slide’, ‘添加新内容的链接名称’),
‘add_new_item’ => __(‘添加新的 Slide’, ‘添加页面顶部标题’),
‘new_item’ => __(‘新的 Slide’, ‘uxbarn’),
‘edit_item’ => __(‘编辑 Slide’, ‘uxbarn’),
‘all_items’ => __(‘所有 Slides’, ‘uxbarn’),
‘view_item’ => __(‘查看 Slide’, ‘uxbarn’),
‘search_items’ => __(‘搜索 Slides’, ‘uxbarn’),
‘not_found’ => __(‘没有找到相关 Slides’, ‘uxbarn’),
‘not_found_in_trash’ => __(‘回收站里没有相关 Slides’, ‘uxbarn’),
),
‘menu_icon’ => get_bloginfo(‘template_url’). ‘/functions/post-type/uxbarn_sm2.jpg’, //添加图标
‘description’ => __(‘将在主页上显示Slide.’, ‘uxbarn’), //描述
‘public’ => false, //是否可预览，生成单独页面
‘show_ui’ => true,
‘capability_type’ => ‘post’,
‘hierarchical’ => false,
‘has_archive’ => false, //支持列表
‘supports’ => array(‘title’, ‘thumbnail’, ‘excerpt’), //支持面板功能 ‘title’, ‘editor’, ‘thumbnail’
‘rewrite’ => false,
);
register_post_type(‘homeslider’, $args); //创建一个新的 Post Type
}
add_action(‘init’, ‘my_custom_cpt_homeslider’);
}
//添加自定义 Meta Box：class类名
add_action( ‘add_meta_boxes’, ‘class_id’ );
function class_id() {
add_meta_box(
‘class_id’,
‘自定义class类名’,
‘my_custom_cpt_class_id’,
‘homeslider’,
‘side’,
‘low’
);
}
function my_custom_cpt_class_id($post) {
// 创建临时隐藏表单，为了安全
wp_nonce_field( ‘my_custom_cpt_class_id’, ‘my_custom_cpt_class_id_nonce’ );
// 获取之前存储的值
$value = get_post_meta( $post->ID, ‘_class_id’, true );
?>
<label for=“class_id”></label>
<input type=“text” id=“class_id” name=“class_id” value=“<?php echo esc_attr( $value ); ?>“ placeholder=“输入自定义class类名” >
<p>对应相册内容，请填写：equipment|customer|factory 任意一个。</p>
<?php
}
add_action( ‘save_post’, ‘my_custom_cpt_class_save_id_nonce’ );
function my_custom_cpt_class_save_id_nonce($post_id){
// 安全检查
// 检查是否发送了一次性隐藏表单内容（判断是否为第三者模拟提交）
if ( ! isset( $_POST[‘my_custom_cpt_class_id_nonce’] ) ) {
return;
}
// 判断隐藏表单的值与之前是否相同
if ( ! wp_verify_nonce( $_POST[‘my_custom_cpt_class_id_nonce’], ‘my_custom_cpt_class_id’ ) ) {
return;
}
// 判断该用户是否有权限
if ( ! current_user_can( ‘edit_post’, $post_id ) ) {
return;
}
// 判断 Meta Box 是否为空
if ( ! isset( $_POST[‘class_id’] ) ) {
return;
}
$class_id = sanitize_text_field( $_POST[‘class_id’] );
update_post_meta( $post_id, ‘_class_id’, $class_id );
}
//添加自定义 Meta Box：URL指向链接
add_action( ‘add_meta_boxes’, ‘class_url’ );
function class_url() {
add_meta_box(
‘class_url’,
‘URL指向链接’,
‘my_custom_cpt_class_url’,
‘homeslider’,
‘side’,
‘low’
);
}
function my_custom_cpt_class_url($post) {
// 创建临时隐藏表单，为了安全
wp_nonce_field( ‘my_custom_cpt_class_url’, ‘my_custom_cpt_class_url_nonce’ );
// 获取之前存储的值
$value = get_post_meta( $post->ID, ‘_class_url’, true );
?>
<label for=“class_url”></label>
<input type=“text” id=“class_url” name=“class_url” value=“<?php echo esc_attr( $value ); ?>“ placeholder=“URL指向链接” >
<p>点击图片指向具体页面的链接，如果没有请填写“#”号。</p>
<?php
}
add_action( ‘save_post’, ‘my_custom_cpt_class_save_url_nonce’ );
function my_custom_cpt_class_save_url_nonce($post_url){
// 安全检查
// 检查是否发送了一次性隐藏表单内容（判断是否为第三者模拟提交）
if ( ! isset( $_POST[‘my_custom_cpt_class_url_nonce’] ) ) {
return;
}
// 判断隐藏表单的值与之前是否相同
if ( ! wp_verify_nonce( $_POST[‘my_custom_cpt_class_url_nonce’], ‘my_custom_cpt_class_url’ ) ) {
return;
}
// 判断该用户是否有权限
if ( ! current_user_can( ‘edit_post’, $post_url ) ) {
return;
}
// 判断 Meta Box 是否为空
if ( ! isset( $_POST[‘class_url’] ) ) {
return;
}
$class_url = sanitize_text_field( $_POST[‘class_url’] );
update_post_meta( $post_url, ‘_class_url’, $class_url );
}
|
引入functions.phpzho中：
|
1
|
include_once(“functions/slide.php”);
|
后台显示效果
前台调取使用
调取自定义分类所有内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php
$args = array( ‘post_type’ => ‘homeslider’, ‘posts_per_page’ => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class=“item <?php echo get_post_meta( $post->ID, ‘_class_id’, true ); ?>“> <img src=“<?php echo post_thumbnail_src(); ?>“ alt=“<?php the_title();?>“ class=“slide-image”/>
<div class=“container”>
<div class=“carousel-caption text-left”>
<h2><?php the_title();?></h2>
<?php the_excerpt() ?>
<p><a class=“btn btn-lg btn-primary” href=“<?php echo get_post_meta( $post->ID, ‘_class_url’, true ); ?>“ role=“button”>Read more</a></p>
</div>
</div>
</div>
<?php endwhile; ?>
|
按自定义自定义字段class类名调取
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?php
$args = array( ‘post_type’ => ‘homeslider’, ‘posts_per_page’ => 8, ‘meta_key’ => ‘_class_id’, ‘meta_value’ => ‘design’ );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ): $loop->the_post();
?>
<div class=“col-xl-3 col-lg-4 col-md-4 col-sm-6”>
<!— Single Product Item Start —>
<div class=“single-product-item text-center”>
<div class=“products-images”> <a href=“<?php echo get_post_meta( $post->ID, ‘_class_url’, true ); ?>“ class=“product-thumbnail”> <img src=“<?php the_post_thumbnail_url( ‘one’ ); ?>“ class=“img-fluid” alt=“<?php the_title();?>“> </a> </div>
<div class=“product-content”>
<h6 class=“prodect-title”><a href=“<?php echo get_post_meta( $post->ID, ‘_class_url’, true ); ?>“>
<?php the_title();?>
</a></h6>
</div>
</div>
<!— Single Product Item End —>
</div>
<?php endwhile; ?>
|
通过字段class类名，生成单独的页面
要求是把所有是自定义类名customer的图片做成一个客户相册页面。页面需要有分页。这里要结合两个插件去做
WP-PageNavi
Advanced Custom Fields
WP-PageNavi用来显示分页，Advanced Custom Fields用来在相册页面建立一个选择哪个类目下的所有图片。具体流程如下。
步骤
建立page-photos.php页面
|
1
2
3
|
<?php
/*Template Name: Photo Gallery*/
get_header();?>
|
Advanced Custom Fields建立自定义字段，字段名称：album_class，只在Template Name: Photo Gallery页面类别下显示。
核心代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php
$album_class = get_field(‘album_class’);
$paged = ( get_query_var(‘paged’) ) ? get_query_var(‘paged’) : 1;
$custom_args = array(
‘post_type’ => ‘post’,
‘post_type’ => ‘homeslider’,
‘order’ => ‘DESC’,
‘posts_per_page’ => 8,
‘meta_key’ => ‘_class_id’,
‘meta_value’ => $album_class,
‘paged’ => $paged
);
$recent_posts = new WP_Query($custom_args);
if($recent_posts->have_posts()) : ?>
<?php
// start loop
while ($recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<div class=“col-lg-4 col-md-6 col-sm-6 col-12 masonary-item”>
<!— Single Blog Item Start —>
<div class=“single-blog-item mt-40”>
<div class=“blog-thumbnail-box”> <a href=“#” class=“thumbnail”> <img src=“<?php the_post_thumbnail_url( ‘full’ ); ?>“ class=“img-fluid” alt=“<?php the_title(); ?>“> </a> </div>
<div class=“blog-contents”>
<h6 class=“blog-title-two”><a href=“<?php echo get_post_meta( $post->ID, ‘_class_url’, true ); ?>“><?php the_title(); ?></a></h6>
<p><?php the_excerpt() ?></p>
</div>
</div>
<!— Single Blog Item End —>
</div>
<?php endwhile; ?>
|
|
1
2
3
4
|
<?php endif;
if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(array( ‘query’ => $recent_posts )); }
wp_reset_postdata();
?>
|
类别：WordPress开发、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
评论功能已经关闭!