WordPress纯代码实现独立相册功能

少羽.
少羽.
少羽.
1797
文章
92
评论
2020年3月24日02:17:33 24 3.6K 2488字阅读8分17秒

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧!

想到这个文章,我忘记发了,今天就补上 hhh

正文

思路是前段时间写模板琢磨出来的,模板写废了,也不准备写了,我好难嘤嘤嘤!!!

这里放一下预览图WordPress纯代码实现独立相册功能 WordPress纯代码实现独立相册功能

好了,我也不放屁了,直接开始教程吧!

在模板functions.php文件加入如下代码

//相册
add_action('init', 'my_xiangce_init');
function my_xiangce_init()
{ $labels = array( 'name' => '相册',
'singular_name' => '相册',
'add_new' => '发表图片',
'add_new_item' => '发表图片',
'edit_item' => '编辑图片',
'new_item' => '新图片',
'view_item' => '查看图片',
'search_items' => '搜索图片',
'not_found' => '暂无图片',
'not_found_in_trash' => '没有已遗弃的图片',
'parent_item_colon' => '', 'menu_name' => '相册' );
$args = array( 'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'exclude_from_search' =>true,
'query_var' => true,
'rewrite' => true, 'capability_type' => 'post',
'has_archive' => false, 'hierarchical' => false,
'menu_position' => null,
'taxonomies'=> array('category','post_tag'),
'supports' => array('editor','author','title', 'custom-fields','comments') );
register_post_type('xiangce',$args);
}

还需要添加

	function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){ //Defines a default image
	$first_img = "/images/default.jpg";
	}
	return $first_img;
	}

然后后台就可以看见

WordPress纯代码实现独立相册功能

然后我们创建一个php文件 丢进 模板里面

<?php /*
    Template Name: 相册
    author: 少羽
    url: https://www.lurbk.com
    */
    get_header(); ?>
<div class="post">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/chromagallery.min.css">
<style type="text/css">
.content
{
	width: 100%;
	height: 100%;
	margin: 10px auto;
}
@media screen and (min-width: 980px) /* Desktop */ {
  .content {
	width: 80%;
  }
}		
.mygallery
{
	margin: 25px 0;
}
</style>

<div class="content">
	<div class="chroma-gallery mygallery">
	<?php query_posts("post_type=xiangce&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
<img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" data-largesrc="<?php echo catch_that_image() ?>" />
<?php endwhile;endif; ?>
	</div>
</div>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/chromagallery.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".mygallery").chromaGallery
	({
		color:'#000',
		gridMargin:15,
		maxColumns:5,
		dof:true,
		screenOpacity:0.8
	});
});
</script>
	</div>
<?php get_footer();?>

代码整体就这样,兼容自己做一下吧 不懂问我就好了

然后有一部分js css我这里 给你们打包发一下

我也不喜欢伸手党,这里回复可见吧!

此处为隐藏的内容!
发表评论并刷新,方可查看
继续阅读
少羽.
  • 本文由 发表于 2020年3月24日02:17:33
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改区块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用...
广告也精彩
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:24   其中:访客  24   博主  0
    • make make 0

      不错。学习。谢谢。

      • 世风十三 世风十三 0

        谢谢你,大锅

        • JUST LOVE SMILE JUST LOVE SMILE 0

          正在学习ing

          • chenmo chenmo 2

            哈哈。。谢谢。需要一个。
            类似说说是不是也可以这样。

            • chenmo chenmo 2

              是不是还要创建一个页面显示相册列表?

                • 少羽. 少羽.

                  @ chenmo 是的,的确需要…

                    • chenmo chenmo 2

                      @ 少羽. 但是我的提示在第29行代码处出错,Fatal error: Uncaught Error: Call to undefined function catch_that_image() in ***/wp-content/themes/zibll/pages/xiangce.php:29

                  • 嘻嘻嘻 嘻嘻嘻 0

                    来学习

                    • 够狠 够狠 0

                      劳士顿巴斯度是的尽快发货

                      • 55522 55522 0

                        不错。学习。谢谢。

                        • jimmy jimmy 1

                          哈。。谢谢。需要一个。

                          • jimmy jimmy 1

                            谢谢 谢谢

                            • 12121 12121 0

                              不错。学习。谢谢。

                              • 兜兜风d 兜兜风d 0

                                不错。学习。谢谢。

                                • 星落. 星落. 3

                                  测试评论看看

                                  • 星落. 星落. 3

                                    评论无效???

                                    • 唐中 唐中 0

                                      学到了

                                      • 相会先生 相会先生 1

                                        不显示啊

                                        • 快乐的回意 快乐的回意 0

                                          学习。谢谢。

                                          • 似最初 似最初 1

                                            感谢分享,

                                            • 匿名网友 匿名网友 0

                                              :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen:
                                              伸手党?

                                              • zhy424340560 zhy424340560 2

                                                谢谢分享

                                                • zhy424340560 zhy424340560 2

                                                  谢谢分享,怎么看不到