WordPress содержание страницы в Modal Pop-Up

Question

Я работаю над веб-сайтом галереи WordPress, который состоит из трех страниц: Home, Gallery и Bio (http://adamgreener.com/).

Когда вы нажмете Bio, появится Bio-контент, подключенный к Простой Modal плагин (содержимое вводится вручную в HTML в настройках плагина).

У меня также есть тот же HTML-контент на странице WordPress (что видят мобильные зрители, а не всплывающее окно).

Страница очень проста в редактировании, но модальный контент не так дружелюбен к среднему пользователю. Я ищу способ, которым я могу разрешить пользователю редактировать только страницу Bio, и иметь это обновление модального контента одновременно.

Какой был бы лучший маршрут для такого действия?

Заранее благодарен!

Answer 1

Вы можете использовать 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]

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>'; 
}