Вот адрес тест блог-сайта: blog.surgov.com. Тема адаптирована с работой под любые девайсы. Забегая вперед, вот что должно получиться на главной странице:
Вот ТЗ по пунктам. В основном буду просить делать на примере других сайтов:
1) На главной странице сайта нужно добавить счетчик (сумму) из социальных сетей возле каждого поста, как это сделано на сайте mashable.com. Вот о чем я говорю:
(там считается фэйсбук, твитер и гугл)
Если навести курсором в любую область поста, раскрываются соц кнопки с цифрами. Обычно, на других сайтах, все эти кнопки из соц сетей грузятся очень медленно и тормозят загрузку сайта. На mashable там все очень быстро и оперативно и ничего не подгружается. Возможно там кэш инфы этих кнопок большой. Если это возможно, я бы хотел, чтобы у меня все работало похоже. Наткнулся на такой сервис –
. С помощью их легко можно сделать о чем я говорю. Если нет, буду рад вашей альтернативе. Если по вашему мнению соц кнопки будут сильно влиять на скорость загрузки страницы, то можно сделать так, чтобы показывалась только сумма.
2) Нужно создать виджет, который бы показывал популярные посты, как это сделано на сайте mashable, когда заходишь на страницу поста:
Картинки должны быть размером примерно 300*150, ниже – название поста и счетчик (сумму) из соц сетей, как это показано на скриншоте.
Также сверху нужно сделать фильтр, с помощью которого можно было бы отсортировать посты по популярности: "за неделю/за месяц/за все время" (как здесь –
). Также при скролле вниз, шапка "POPULAR this week/this month/all time" желательно должна быть зафиксирована.
Еще нужно сделать так, чтобы после второго поста в этом виджете показывался adsense банер 300*250, html код которого я бы мог вводить в панельке вордпреса.
Подводя итог, на примере моего сайта, после всех вышеперечисленных добавлений, должно получиться как-то так –
(красными стрелками я обозначил основные добавления)
Хочу еще раз заметить, что это должно быть сделано как виджет, т.е. сверху и снизу могут быть другие виджеты.
3) у меня установлен плагин ninja popups (
. Нужно в него добавить функцию, чтобы popup появлялся только тогда, когда юзер ведет мышкой вверх в сторону ввода юрл или закрытия вкладки, как это сделано здесь:
или
Там достаточно вставить нужный код. Вот здесь, в первом посте, парень расписал как это рабоает с примером кода:
4) нужно настроить шапку и меню у сайта. Менюшка у сайта есть, там в настройках нужно только высоту и длину прописать, чтобы смотрелась хорошо и была растянута на весь экран, как тут
. И после добавления шапки, хотелось бы, чтобы получилось как-то так:
. Цвет шапки у меня скорее всего будет белым.
Дизайн шапки взял с сайта
. Там когда наводишь мышкой на соц значки, выезажают кнопки. Нужно сделать также.
Далее переходим на сам пост:
5) Опять же, нужно добавить счетчик (сумму) из социальных сетей и соц кнопки как это у mashable –
(нужны кнопки c facebook, twitter, google+, pinterest,stumbleupon, email). С уменьшением расширения экрана, соц кнопки должны исчезать одна за одной и если экран маленький, остаются только фэйсбук и твитер, как тут –
. Сами кнопки можно сделать как на этом сайте:
(через код заметил, что они пользуются сервисом
)
У меня на сайте это должно выглядеть как-то так –
На мобильнике –
6) нужно, чтобы при скроле страницы вниз под меню появлялась полоска с логотипом и соц кнопками как это у mashable.com. Вот о чем я говорю –
В моем меню есть опция фиксации при скроле, поэтому ваша задача будет сделать полоску, которая будет появлятся сразу под меню. Это все на примере моего сайта, должно выглядеть так:
Пример реализации того, что я описал выше, можно посмотреть на странице:
А на мобильных устройствах, меню нужно убрать и оставить только полоску с соц кнопаками, чтобы получилось как тут –
п.с. можно почитать как сделать выезжающую полоску вот здесь –
или здесь:
Это все.