【原创教程】WordPress纯代码实现独立相册功能

释放双眼,带上耳机,听听看~!

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

想到这个文章,我忘记发了,今天就补上 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.luryl.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我这里 给你们打包发一下

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

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
WordPress

b2主题文章发布/更新邮件通知注册用户

2020-10-27 16:40:25

WordPress

如何优化WordPress分页URL和link形式

2020-10-31 19:08:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索