专栏首页开心分享-技术交流WordPress纯代码实现独立相册功能

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

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

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

正文

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

这里放一下预览图

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

在模板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. }

然后后台就可以看见

然后我们创建一个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. <div class="content">
  27. <div class="chroma-gallery mygallery">
  28. <?php query_posts("post_type=xiangce&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
  29. <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" data-largesrc="<?php echo catch_that_image() ?>" />
  30. <?php endwhile;endif; ?>
  31. </div>
  32. </div>
  33. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery-1.11.0.min.js"></script>
  34. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/chromagallery.pkgd.min.js"></script>
  35. <script type="text/javascript">
  36. $(document).ready(function(){
  37. $(".mygallery").chromaGallery
  38. ({
  39. color:'#000',
  40. gridMargin:15,
  41. maxColumns:5,
  42. dof:true,
  43. screenOpacity:0.8
  44. });
  45. });
  46. </script>
  47. </div>
  48. <?php get_footer();?>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 纯代码实现WordPress邀请码功能

    laulzgoay
  • 为WordPress加入Fancybox相册功能免插件实现

    可以在js里面建个相应文件夹放置,也可分开放置,若图片与其他文件分开记得修改css里面的图片链接地址。

    WindCoder
  • WordPress 代码实现相关文章(列表模式)功能

    之前分享的相关文章代码化功能是仿无觅的图文模式,现在分享的一个是文章列表陈列模式。代码最初来自 Willin Kan,经过zwwooooo 的修改优化。不得不说...

    Jeff
  • WordPress纯代码高仿 无觅相关文章 图文模式功能

    无觅的相关文章插件确实是一个不错的插件,Jeff的阳台到现在还在使用它(貌似产生了依赖性)。但到了devework.com,为了体现轻度、代码化的主题制作理念。...

    Jeff
  • Siteground注册购买图文教程

    Siteground是美国有名的主机商家,经过魏艾斯博客和朋友们几个月的使用,感觉Siteground在稳定性、速度、操作上比较的方便易用,所以写下本文把这个好...

    魏艾斯博客www.vpsss.net
  • Android 选择相册照片并返回功能的实现代码

    为了兼容新老版本的手机,我们做了一个判断,如果是4.4及以上系统的手机就调用handleImageOnKitKat()方法来处理图片,否则就调用handleIm...

    砸漏
  • 代码实现 WordPress 反垃圾评论功能

    垃圾评论,垃圾评论,你是哥心中的“恨”。每次打开后台看到上面工具栏的评论气泡出现了数字(表示有评论),打开一看却是什么“儿童服装”……除了WordPress 官...

    Jeff
  • WordPress纯代码仿无觅相关文章图文模式功能(增强版)

    之前在《WordPress纯代码高仿 无觅相关文章 图文模式功能》一文中分享的代码有两个缺点:一是文章相关度不够(该代码使用分类进行关联相关文章);二是可能会出...

    Jeff
  • 纯CSS为博客网站添加时光轴记录

    沈唁
  • Android上的Web应用开发工具

    最后,因为我的手机是带全键盘的,并且是5行,独立数字键,所以,用来敲代码很爽,尤其是平时上课的时候,想到的一些片段,用来记录不错~

    libo1106
  • 微信公众号自动回复图文消息

    订阅号收到过一些查询消息,比如vue、react,无奈一直没有心情去搞关键字搜索,就丢一边去了

    ayqy贾杰
  • WordPress 和 Vue.js 的学习资源推荐

    Vue 是一个非常有吸引力的构建前端的框架,它已迅速成为 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快,编写的代码容易阅读和理解,很...

    丘壑
  • 域名相关知识-零基础搭建 wordpress 教程

    什么是域名?域名如何购买如何解析?选择域名应该注意哪些因素?本文是 VPS 服务器建站教程第一步-域名相关知识,专门为新手写的,把域名相关知识及魏艾斯博客对域名...

    魏艾斯博客www.vpsss.net
  • 《个人网站篇》WordPress与Hexo建站如何选型?

    Hexo是一个基于Node.js的建站工具,可以用来生成静态网站,Hexo配套的最棒主题为Next,Next主题使用效果实例 https://zhaoolee....

    zhaoolee
  • 使用代码方式实现WordPress文章点赞功能

    通过 ajax 实时显示点赞数量,自定义字段保存赞数量,Cookies 禁止重新点赞。

    用户7146828
  • WordPress配置SMTP服务发送邮件,轻松实现注册和找回密码功能

    和我们日常生活中遇到的很多网站相似,wordpress博客也有一个注册功能,填了用户名和邮箱后,会收到一封邮件,邮件里有一个链接,点击该链接可以获得密码和修改密...

    wordpress建站吧
  • WordPress首页简单广告框弹窗两种方法实现纯代码+插件

    如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用。说实话我挺喜欢这个功能的,但是一直未找到合适的代码,直...

    夏末浅笑
  • 史上最详细的WordPress的自定义文章类型指南(1)

    最近我发现有很多从google过来的奇怪的关键字,比如best screenshot app 这种,可能是我的这个域名bestscreenshot.com 当时...

    丘壑
  • WordPress 博客微信小程序开发经验分享

    说起微信小程序很多站长们应该都不陌生,刚开始的时候明月对小程序也有过关注,后来因为实在是想不出来自己的需求点在哪里留给淡忘了,上个月在看到【守望轩】博客开源的“...

    明月登楼

扫码关注云+社区

领取腾讯云代金券