我是WP模板的新手，我正在尝试从一个单页引导主题创建自己的自定义WP主题。对于我的问题是如此特殊，比如说（希望我不要因此而大喊大叫），我很难找到解决问题的方法。
我只是用公文包页面做一个简单的主题。到目前为止，我的所有文件都是本地文件。我从下载了一个引导主题here.
我遇到的问题是在我的投资组合页面上。我有一个自定义帖子类型和（我猜）一个自定义页面模板加载这个页面（不确定你是否需要知道，只是想确保你知道）。我所要做的就是单击我的一个缩略图，放大并显示在页面上，同时使背景变暗（就像原来的一样），请参见上面链接中的示例。
用于此的css/js lightbox gallery插件称为baguetteBox。js。互联网上似乎没有任何东西显示如何将这个js照片库模板正确地添加到WP上的自定义帖子中。下面是两个属性和类的示例，当有人单击任何缩略图时，这两个属性和类会动态添加到底部div。我想知道的是，如何将此功能从BS模板实现到WP模板中？
但我不确定是否有一个或多个函数可以帮助我实现这一点，所以它在WP中也能做同样的事情？实施的程序是什么？我各自的模板文件如下：
我的页面组合模板
<?php
/*
Template Name: Portfolio layout
*/
?>
<?php get_header(); ?>
<div class="container gallery-container">
<h1 class="headerTitle" > <?php wp_title(); ?> </h1>
<p class="page-description text-center"><?php bloginfo(\'description\'); ?></p>
<div class="tz-gallery">
<div class="row">
<?php
$args = array(
\'post_type\' => \'portfolio\'
);
$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
<?php the_post_thumbnail( 333, 249 ); ?>
</a>
<div class="caption">
<h3><?php the_title(); ?></h3>
<p><?php the_field(\'editor\'); ?></p>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
我的标题。php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<!-- Conditional For Edit Menu to Adjust with Logged in Users -->
<?php
if ( is_admin_bar_showing() ) {
echo \'<style type="text/css"> .navbar.navbar-inverse.navbar-fixed-top {margin-top: 32px;} </style>\';
}
?>
<!-- END Conditional Edit for Logged in Users -->
<div class="navbar navbar-inverse navbar-fixed-top" >
<div class="container">
<div class="navbar-header"> <!-- contains toggle and brand -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?php bloginfo(\'url\'); ?>" class="navbar-brand"><?php bloginfo(\'name\'); ?></a>
</div>
<div class="navbar-collapse collapse">
<?php
wp_nav_menu( array(
\'theme_location\' => \'primary-menu\',
\'depth\' => 2,
\'container\' => \'div\',
\'container_class\' => \'collapse navbar-collapse\',
\'container_id\' => \'bs-example-navbar-collapse-1\',
\'menu_class\' => \'nav navbar-nav\',
\'fallback_cb\' => \'WP_Bootstrap_Navwalker::fallback\',
\'walker\' => new WP_Bootstrap_Navwalker(),
) );
?>
</div><!--/.nav-collapse -->
</div>
</div>
我的页脚。php
<?php wp_footer(); ?>
</body>
<!-- script for intiating tz-gallery -->
<script type="text/javascript">
baguetteBox.run(\'.tz-gallery\');
</script>
</html>
最合适的回答,由SO网友:Greg Schudel 整理而成
我从其他人那里得到了答案，并且成功了。总之，问题在于没有正确使用WP函数来动态调用自定义后期缩略图图像。因此才有了小盒子。当您在我新制作的自定义WP主题中单击图库中的自定义帖子缩略图时，js插件（lightbox插件）功能将正常工作。
这是我最初在自定义模板文件（page portfolio.php）中的内容
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
<?php the_post_thumbnail( 333, 249 ); ?>
</a>
<div class="caption">
<h3><?php the_title(); ?></h3>
<p><?php the_field(\'editor\'); ?></p>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
以下是行之有效的解决方案。我使用以下代码替换了上面的代码
get_post_thumbnail_id() ,
wp_get_attachment_image_src($thumb_id,\'full\', true); 然后应用
$thumbn_nail 属性添加到超链接。具体实施如下：
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,\'full\', true);
?>
<div class="col-sm-6 col-md-4"><!-- get_post_field -->
<div class="thumbnail">
<a class="lightbox" href="<?php echo $thumb_url[0]; ?>">
<?php the_post_thumbnail( 333, 249 ); ?>
</a>
<div class="caption">
<h3><?php the_title(); ?></h3>
<p><?php the_field(\'editor\'); ?></p>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
AnnnnnnndPresto！现在它工作得很好！
SO网友:D. Dan
要自行实施自定义灯箱解决方案，您需要：
缩略图用全尺寸图像包住缩略图的锚点ashref用div将整个页面变暗，用div将全尺寸图像放在css中设置div-s的样式，用JS代码将图像放在div中并将div-s放在前面，让我们从简单的事情开始，div-s：
<div class="my-black-box">
<div class="my-light-box">
</div>
</div>
您可以将这些放在页面公文包模板底部的某个位置，比如在容器之后，但在页脚之前。
您还需要为theese设置样式：
.my-black-box{
display: none;
}
我们现在就把它们藏起来。
对于JS，您可以使用：
$(\'.lightbox\').on(\'click\', function(e){ //when we click on the lightbox link
e.preventDefault(); // do not open the picture
var picUrl = $(this).attr(\'href\'); // instead we extract the picture url
picUrl = \'<img src="\' + picUrl + \'">\'; // make an img tag from it
$(\'.my-light-box\').html(picUrl); // put the picture in the lighbox
$(\'.my-black-box\').addClass(\'open\'); // add a class for the css to be defined
});
对于打开灯箱时的css：
.my-black-box.open{
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
}
.my-black-box.open .my-light-box{
position: absolute;
max-width: 80vw;
max-height: 80vh;
width: 80vw;
height: 80vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.my-black-box.open .my-light-box img{
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这应该是一切的中心。最后，如果我们点击黑匣子，它应该会关闭：
$(\'.my-black-box\').on(\'click\', function(){
$(this).removeClass(\'open\');
});
Edit: 当然，这只是基本的，您可以通过实现上一个按钮、关闭按钮、更多样式和动画来扩展它。但是如果你正在做一个自定义的WP主题，像这样的，从基本概念上来说，就是启动自定义灯箱的方法。
