как скрыть половину домашней страницы с помощью кнопки "Показать больше" WORDPRESS

#wordpress

Вопрос:

Итак, я искал хороший плагин, но не смог найти ни одного — на главной странице веб-сайта WP, над которым я работаю, я хочу скрыть половину страницы и хочу добавить кнопку и в середине страницы в конце первой половины с надписью «Показать больше» — когда посетитель нажимает на эту кнопку, должна отображаться остальная часть страницы. Затем кнопка перейдет в конец страницы с надписью «Показать меньше». Страница статична и представляет собой всего лишь текст и изображения, ничего сложного.

Ответ №1:

Вы можете сделать это, поместив html-блок и написав:

 <!--nextpage-->

вы можете прочитать больше об этом на:
https://codex.wordpress.org/Styling_Page-Links

и чтобы получить другие решения, вы можете попробовать:

https://es.wordpress.org/plugins/automatically-paginate-posts/

https://es.wordpress.org/plugins/sgr-nextpage-titles/

https://es.wordpress.org/plugins/page-links-single-page-option/

Я надеюсь, что это поможет вам получить то, что вы хотите.

1. Привет, спасибо за ответ — однако я не собираюсь разбивать домашнюю страницу на страницы — поскольку это статическая страница, я ищу какой-то плагин AJAX или JQUERY, который позволяет вам видеть остальную часть страницы, но без необходимости перезагружать ее или переходить на другую страницу

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

Ответ №2:

Вы должны создать div с css display none. А затем в вашем html-коде поместите элемент с поведением jquery для отображения ранее созданного div. Это будет что-то вроде:

 $(document).ready(function(){
  $('#show_content_button').click(function(){
    $(this).hide();
    $('#content_hide_on_home').show();
  });
  $('#hide_content_button').click(function(){
    $('#show_content_button').show();
    $('#content_hide_on_home').hide();
  });
});

 #content_hide_on_home { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Text on home</p>
<a href="#" id="show_content_button">Show content</a>
<div id="content_hide_on_home">
Your extra content on home
<a href="#" id="hide_content_button">Hide content</a>
</div>

Я надеюсь, что это то, что вы ищете.