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' => $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', $post->post_content, $matches);
  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>
  26.  
  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();?>


点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注