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

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

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

正文

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

这里放一下预览图

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

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

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

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

1. //相册
2. add_action('init', 'my_xiangce_init');
3. function my_xiangce_init()
4. { $labels = array( 'name' => '相册',
5. 'singular_name' => '相册',
6. 'add_new' => '发表图片',
7. 'add_new_item' => '发表图片',
8. 'edit_item' => '编辑图片',
9. 'new_item' => '新图片',
10. 'view_item' => '查看图片',
11. 'search_items' => '搜索图片',
12. 'not_found' => '暂无图片',
13. 'not_found_in_trash' => '没有已遗弃的图片',
14. 'parent_item_colon' => '', 'menu_name' => '相册' );
15. args = array( 'labels' =>
16. 'public' => true,
17. 'publicly_queryable' => true,
18. 'show_ui' => true,
19. 'show_in_menu' => true,
20. 'exclude_from_search' =>true,
21. 'query_var' => true,
22. 'rewrite' => true, 'capability_type' => 'post',
23. 'has_archive' => false, 'hierarchical' => false,
24. 'menu_position' => null,
25. 'taxonomies'=> array('category','post_tag'),
26. 'supports' => array('editor','author','title', 'custom-fields','comments') );
27. register_post_type('xiangce',$args);
28. }

还需要添加

1. function catch_that_image() {
2. global post, posts;
3. $first_img = '';
4. ob_start();
5. ob_end_clean();
6. output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
7. first_img = matches [1] [0];
8. if(empty($first_img)){ //Defines a default image
9. $first_img = "/images/default.jpg";
10. }
11. return $first_img;
12. }

然后后台就可以看见

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

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

1. <?php /*
2. Template Name: 相册
3. author: 少羽
4. url: https://www.lurbk.com
5. */
6. get_header(); ?>
7. <div class="post">
8. <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/chromagallery.min.css">
9. <style type="text/css">
10. .content
11. {
12. width: 100%;
13. height: 100%;
14. margin: 10px auto;
15. }
16. @media screen and (min-width: 980px) /* Desktop */ {
17. .content {
18. width: 80%;
19. }
20. }
21. .mygallery
22. {
23. margin: 25px 0;
24. }
25. </style>
27. <div class="content">
28. <div class="chroma-gallery mygallery">
29. <?php query_posts("post_type=xiangce&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
30. <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" data-largesrc="<?php echo catch_that_image() ?>" />
31. <?php endwhile;endif; ?>
32. </div>
33. </div>
34. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery-1.11.0.min.js"></script>
35. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/chromagallery.pkgd.min.js"></script>
36. <script type="text/javascript">
37. $(document).ready(function(){
38. $(".mygallery").chromaGallery
39. ({
40. color:'#000',
41. gridMargin:15,
42. maxColumns:5,
43. dof:true,
44. screenOpacity:0.8
45. });
46. });
47. </script>
48. </div>
49. <?php get_footer();?>