第一种方法

Question

我正在使用一个只有三个页面的WordPress图库网站：Home，Gallery和Bio（http://adamgreener.com/）。

当您点击Bio时，会弹出Bio内容，由 Easy Modal 插件提供（内容在插件设置中手动输入HTML格式）。

我在WordPress页面中也有完全相同的HTML内容（移动观众可以看到，而不是弹出窗口）。

页面编辑非常简单，但Modal内容对普通用户来说并不那么友好。我正在寻找一种方法，我可以让用户只编辑Bio页面，并同时更新模态内容。

这种行动的最佳途径是什么？

提前致谢！

Answer 1

您可以使用get_page获取页面内容，并使用短代码在弹出窗口中显示。在WordPress主题的functions.php文件中，例如：

add_action( 'init', 'greener_shortcode_init', 11 );
function greener_shortcode_init()
{
    add_shortcode( 'greener_bio', 'greener_bio_shortcode' );
}

function greener_bio_shortcode( $atts )
{
    $page_id = 123; // the ID of the Bio page
    $page_data = get_page( $page_id );
    $return = '';
    $return .= '<h2>' . $page_data->post_title . '</h2>';
    $return .= $page_data->post_content;
    return $return;
}

然后，在你的模态中，使用短代码：

[greener_bio]

Answer 2

有两种方法可以实现您的目标，我在博文中深入介绍了这些内容：https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin

您也可以使用我的插件：https://wordpress.org/plugins/wp-post-modal/

第一种方法

第一种方法需要修改提供要在模态中显示的内容的模板。例如，您有一个名为modal-content-template.php的模板。

在该模板中，我们将我们想要加载的内容包装到模态中：

<?php if (!$_GET) { ?>
    // content that gets loaded on mobile
<?php } ?>

我们排除WordPress页眉和页脚的模板的完整示例：

<?php if (!$_GET) { get_header(); } ?>

<article>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <h1 class="page-title"></h1>

  <section class="entry-content cf">
    <?php the_content(); ?>
  </section>

</article>

<?php if (!$_GET) { get_footer(); } ?>

CodePen example要求JS完成这项工作

第二种方法

第二种方法更优雅一点。我们使用modalContent.load(post_link + ' #modal-ready');方法加载模态内容。

模态联系人包装在ID为#modal-ready的包装容器中。这可以在不使用挂钩内容的函数触摸页面模板的情况下完成。

add_action('the_content', 'wrap_content');
function wrap_content($content)
{
    return '<div id="modal-ready">' . $content . '</div>';
}

Modal Pop-Up中的WordPress页面内容

2 个答案:

第一种方法

第二种方法