WordPress：如何在灯箱或新窗口中打开 the_content()？答案

【问题标题】：WordPress: how to open the_content() in a lightbox or new window?WordPress：如何在灯箱或新窗口中打开 the_content()？
【发布时间】：2014-05-14 12:31:09
【问题描述】：

我正在尝试在灯箱中打开 the_content（只是图片）。我想要一个像圣诞节日历这样的页面，这样您就可以看到帖子（以及计划中的帖子），如果您单击已发布的帖子，图像（the_content）应该显示在阴影框、灯箱或其他任何东西中，我想你会明白我的意思。现在我的代码看起来像：

<header class="entry-header" rel="shadowbox" onclick="location.href='<?php the_permalink();?>';"  style="cursor:pointer;">
        <?php if ( ! post_password_required() && ! is_attachment() ) :
            the_post_thumbnail();
        endif; ?>

        <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
                    <?php endif; // is_single() ?>
        <?php if ( comments_open() ) : ?>
            <div class="kalender">
                <p1> <?php the_field('nummer'); ?> </p1>
                <br>
                <p2><?php the_time('j. F Y'); ?> </p2> 
            <p3><?php the_title(); ?></p3>

             </div>
            <!-- .comments-link -->
        <?php endif; // comments_open() ?>
    </header>

我认为最简单的方法是像处理 read_more 链接一样处理 the_content，然后在 shadowbox 中说 onclick show。但现在我只是不知道该怎么做。你可以看看here（现在只在Firefox或Safari，不知道为什么Chrome讨厌我:-)）

【问题讨论】：

标签： javascript php jquery wordpress shadowbox

【解决方案1】：

考虑使用 Fancybox 插件：http://fancybox.net/howto

然后在您的每个帖子中添加一个锚标记，例如“阅读更多”，并带有内容的唯一 ID：

<a class="fancybox" href="#content">Read More - This shows content of element who has id="content"</a>

只需确保每个帖子的#content DIV 具有唯一 ID，在循环中增加一个变量并将其附加以读取以下内容：

#content-01, content-02, etc.

然后只需使用 CSS 隐藏内容 DIV。

.fancybox { display: none; }

附：在 Chrome 34.0.1847.131 中似乎很好

【讨论】：

嗨，斯科特，谢谢您的回复。所以你会在每个帖子中添加一个锚标签？通常我只想将jpg放入，设置日期，仅此而已。抱歉，通常我会测试更长的时间，但在这种情况下，它只是时间问题 :-)
是的，您必须添加一个锚标记才能实现您想要的目标。您可以将其包裹在缩略图或一些文本周围。我认为您上面提到的“阅读更多”方法是可行的方法。您也可以将整个帖子包装在锚标记中...

【解决方案2】：

这是一个将服务器端数据传递到客户端的有用模式：
1.使用wp_localize_script将脚本片段输出到DOM。
2. 在该脚本片段中，将 the_content 的值分配给 JavaScript 全局字符串变量。
3.使用这个JavaScript全局来自在你的 JavaScript 中读取 the_content 的值

【讨论】：

嘿，谢谢你的回应。对不起，但我没有理解背后的想法，也许是因为我没有那么深入的编码。你介意告诉我更具体的吗？什么是 DOM，如何将脚本输出到这些 DOM？对不起:)
您好 - 我无法花时间回答这些问题。它们是非常基本的概念，并且已经在其他地方得到很好的介绍。