Сворачивающийся/разворачивающийся вид новостей на wordpress

61

Green arrow

5 июля 2013, 12:24

1699

Доброго времени.

На одном сайте нашёл интересную для себя реализацию вывода последних новостей (см. ниже)

Точно не знаю аккордион это или как по другому называется, но суть: открываешь стр и видишь именно такой вид, наводишь мышку на другую новость и она сразу раскрывается, а предыдущая сворачивается. Кликабельная вся новость целиком, а не ссылка - ну этом мелочь, но всё же уточнил.

Хотел бы узнать, как реализовать подобное на последнем WP? Примеры и подобныереализации не смог найти в гугле, так как даже не знал по какому запросу стоит искать (находил менюшки разворачивающиеся, но это нето).

Хотел бы узнать, на чём такое лучше всего реализовать? Примеры какие-нибудь готовые из сети? И как, а точнее какие файлы WP необходимо редактировать?

R

92

rerighter

5 июля 2013, 12:29

#1

http://jqueryui.com/accordion/

Нажав "view source" можно посмотреть реализацию, там все очень просто.

Только придется адаптировать под Ваш шаблон. Вообще WP шаблоны легко верстаются, задача не очень сложная.

119

vlad00777

5 июля 2013, 12:32

#2

Вот пример только тут по клику сделано: http://jqueryui.com/accordion/

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

---------- Добавлено 05.07.2013 в 15:32 ----------

rerighter, ах я не успел :)

1

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.

GA

61

Green arrow

5 июля 2013, 12:36

#3

rerighter:
http://jqueryui.com/accordion/
Нажав "view source" можно посмотреть реализацию, там все очень просто.
Только придется адаптировать под Ваш шаблон. Вообще WP шаблоны легко верстаются, задача не очень сложная.

спасибо за ссыль.

да, я заметил, что не слишком сложная задача клепать шаблончики для ВП, просто пока не все файлы перерыл и не очень понимаю через какие файлы именно реализовывать данную фичу.

P.s. касательно того аккордиона, который вы скинули, заинтересовал вариант "Open on hoverintent". Но всё же он достаточно медленный (раскрытие плавное да ещё и с задержкой), какие параметры (и есть ли они там вообще), которые отвечают за скорость этих двух действий? - спрашиваю, так как не знаю js/jquery

R

92

rerighter

5 июля 2013, 12:38

#4

Нажав "view source"

timeout = setTimeout( handler, 100 );

Также можете почитать API documentation

119

vlad00777

5 июля 2013, 12:46

#5

Green arrow:
через какие файлы именно реализовывать данную фичу.

В том файле где хотите вывести, если на главной только то home.php Например такой код:

<?php
$query = new WP_Query('cat=9'); // указываем категорию 9 откуда будут братся новости
while($query->have_posts()){ $query->the_post(); ?> //пока есть посты выводим

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>

<?php } ?>

<?php wp_reset_postdata(); // сбрасываем переменную $post ?>

Почитайте про циклы в wordpress

GA

61

Green arrow

5 июля 2013, 15:30

#6

vlad00777 и rerighter, спасибо вам за подсказки.

Решил чуть-чуть побыть "плохим" и стянул код (js, css, html) с того сайта, где подсмотрел эту реализацию.

Но возникла проблема: когда открываешь страницу (такая реализация будет только на главной, поэтому речь только о ней), то сначала материалы все раскрыты, а уже потом когда начинает водить по блоку курсором все новости сворачиваются кроме активной. Подскажите, почему так, ибо когда тот же самый код просто в html страничке открываю в браузере, всё норм ?

в header.php добавил

в index.php

<div id="newsflash">
<ul style="width: auto;">

<?php
$query = new WP_Query('cat=1,2,3,4'); // указываем категорию 9 откуда будут братся новости
while($query->have_posts()){ $query->the_post(); ?>

<li onmouseover="blowup(this);" class="active">
<a href="<?php the_permalink(); ?>" style="display:block;width: auto">
<div class="teaser" style="margin-top:5px;width: auto">
<?php the_post_thumbnail(); ?>
<b><?php the_title(); ?></b>
</div>
<div class="intro">
<?php the_post_thumbnail(); ?>
<div><b><?php the_title(); ?></b></div>
<div class="TextSP" style="padding-bottom: 5px;"> <?php the_content(); ?></div>

</div>
</a>
</li>

<?php } ?>

Кстати, в строчке while($query->have_posts()){ $query->the_post(); ?> пришлось убрать комментарий, ибо он выводился на сайте почему-то

P.s. практикую на демо сайте со стандартным шаблоном Twenty Eleven

119

vlad00777

5 июля 2013, 18:02

#7

Green arrow, Стиль какой-то упустили. Ссылку давайте или на ваш пример или на пример того сайта.

GA

61

Green arrow

5 июля 2013, 18:33

#8

vlad00777:
Green arrow, Стиль какой-то упустили. Ссылку давайте или на ваш пример или на пример того сайта.

в личке обе ссылки

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Что такое Power BI и зачем это нужно бизнесу