Добавление ссылки «Показать меньше / больше» на «Пользовательская почта»

Так,

У меня есть тип сообщения товара с настраиваемыми мета-ящиками. Один из мета-боксов – дополнительные сведения. Я показываю пользовательский тип сообщения внутри других сообщений, используя короткий код.

Я могу показать дополнительные сведения о интерфейсе. Когда детали будут длинными, я хочу добавить ссылку «показать больше», которая покажет остальную часть деталей при нажатии.

Как мне это сделать?

Что-то вроде они здесь. https://www.retailmenot.com/ При нажатии кнопки «Дополнительно» отображаются подробные сведения.

Заранее спасибо.

Solutions Collecting From Web of "Добавление ссылки «Показать меньше / больше» на «Пользовательская почта»"

То, что вы описываете, и пример, который вы связали, использует javascript для переключения атрибута стиля отображения в контейнер div.

Приведенный вами пример используется только при наличии дополнительных сведений, и они помещают их в отдельный div в текст описания и т. Д.

Функциональность работает следующим образом:

У нас есть некоторые divs с идентификаторами, а <span> с onclick, вызывающим нашу функцию javascript, showHide() . В этом примере мы имеем дело с отображением / скрытием div с id showAndHide :

 <div id="somewrapper"> <div id="always-visible"> <span onclick="showHide()">Read More</span> </div> <div id="showAndHide"> <p>This is the show-and-hide div.</p> </div> </div> 

Для части javascript:

Мы получаем div по его id и устанавливаем его в переменную, здесь sh . Затем мы проверяем состояние атрибута sh : style. Если он none , onclick() устанавливает его для block чтобы показать его. Если он имеет block , то он не устанавливает его, «скрывая» его.

Все это делается очень легко в нескольких строках кода:

 <script> function showHide() { var sh = document.getElementById('showAndHide'); if (sh.style.display === 'none') { sh.style.display = 'block'; } else { sh.style.display = 'none'; } } </script> 

W3C дает очень чистый пример этого, вы можете попробовать в своем браузере

В качестве побочного элемента вы можете достичь аналогичной функциональности с атрибутом visibility css, но он ведет себя по-разному. Display:none; не займет места, он эффективно удаляется; в то время как с visibility:hidden; место элемента сохраняется. То есть, если вы не имеете дело с элементами table и используете значение collapse . Поскольку в примере, который вы связали, не использовался tr s, и пространство расширяется / сворачивается , я выбрал Display:Block/None . Подробнее о видимости: видимый / скрытый / свернуть здесь.

Более знающее объяснение различий между дисплеем и видимостью

Добавление этой функции в вывод короткого кода в wordpress

1) Вам нужны идентификаторы (ы) элементов (ов), которые вы хотите показать / скрыть.

2) Если вы собираетесь добавить текст «read more» и onclick, вам нужно знать: a) измеримую точку, в которую нужно вставить ее в содержащий div, или b) элемент, к которому он может быть добавлен или прилагается .

3) возьмите полную функцию (ы) javascript, добавьте их в файл myShowHide.js, возможно, и загрузите в каталог своей дочерней темы.

4) В functions.php зарегистрируйте скрипт с помощью wp_register_script и запустите его с помощью wp_enqueue_script чтобы включить этот файл javascript на ваши страницы шаблонов. Вы также можете обернуть wp_enqueue_script в функции, если вам нужно включить только скрипт на определенные страницы.

вы можете попробовать это для метаданных:

Запросите свои метаданные следующим образом:

 <?php $slider = new WP_Query(array( 'post_type' => 'post', 'posts_per_page' => 5, 'post_status' => 'publish', 'meta_query' => array( array( 'key' => 'your metabox key', 'value' => 'your metabox value', 'compare' => 'IN' ) ) )); if($slider->have_posts()) : while($slider->have_posts()) : $slider->the_post(); $idd = get_the_ID(); ?> <?php echo get_excerpt(); ?> <?php endwhile; endif; ?> 

И добавьте этот код в functions.php:

 function get_excerpt(){ $excerpt = get_the_content(); $excerpt = preg_replace(" (\[.*?\])",'',$excerpt); $excerpt = strip_shortcodes($excerpt); $excerpt = strip_tags($excerpt); $excerpt = substr($excerpt, 0, 820); $excerpt = substr($excerpt, 0, strripos($excerpt, " ")); $excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt)); $excerpt = $excerpt.'.... <a href="'.get_permalink().'" class="read_more"><h4 style="margin:0;">Details</h4></a>'; return $excerpt; }