4

我正在开发一个只有三个页面的 WordPress 画廊网站：主页、画廊和简历 ( http://adamgreener.com/ )。

当您单击 Bio 时，会弹出 Bio 内容，由Easy Modal插件提供支持（内容是在插件设置中以 HTML 手动输入的）。

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

页面编辑起来非常简单，但是 Modal 内容对一般用户来说不是那么友好。我正在寻找一种方法，我可以允许用户仅编辑 Bio 页面，并同时更新该模式内容。

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

提前致谢！

4

2 回答 2

2

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

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]

于 2013-05-02T22:53:30.980 回答
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(); } ?>

完成这项工作所需的 JS 的CodePen 示例

第二种方法

第二种方法更优雅一些。我们使用该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>';
}
于 2017-05-07T09:26:05.620 回答