WordPress. Создаем сайдбар в стиле Apple
12.04.2018
Компания Apple отлично умеет представлять себя и свои продукты. Мне очень нравится сайдбар, расположенный на стартовой странице Apple, и сегодня, я собираюсь создать такой же, с помощью плагина Accordion к JQuery UI. Но это еще не все. Я также, хочу иметь возможность, скрывать и отображать сайдбар, по своему усмотрению. Читайте далее, я расскажу, как все это можно сделать.
WordPress Navigation Menus (Theme Development)
Демо версию можно посмотреть здесь .
Введение
Это руководство предполагает наличие у вас установленного на сервере, WordPress-блога, доступа к загрузке файлов и их просмотру. Если вы хотите запустить локальный сервер с установленным WordPress, можете прочитать инструкцию по установке для Windows и для OS X .
Как вставить видео на страницу блога Wordpress
Файлы, которые нам понадобятся
Всего нам понадобится 6 файлов:
functions.php – Он будет содержать несколько строк, регистрирующих сайдбар. index.php – Нам обязательно понадобится этот файл. Догадываетесь для чего? jQuery – Вот здесь можно скачать версию 1.2.6 . jQuery UI (accordion) – Нам понадобится только плагин Accordion и UI core , не вся UI библиотека. sidebar.js – Содержащий весь код jQuery для сайдбара. style.css – необходимый для активации темы, и содержащий весь CSS. папка с картинками – Вы получите список изображений, для загрузки в папку, чуть позже, в CSS-части. Сейчас же, мы просто загрузим одну картинку – иконку для RSS . Скопируйте его в папку «images», и давайте начнем.Не забудьте активировать вашу WordPress-тему (которую, кстати, мы должны назвать sidebarTheme) в панели управления. Для начала нам понадобится только HTML и WordPress. Мы создадим необходимую структуру, затем добавим нужный WordPress-код, который отобразит записи, а также зарегистрирует и выведет сайдбар. После этого добавим немного CSS, что сделает нашу тему похожей на стартовую страницу apple, и сделаем такой же сайдбар. Все это мы сделаем до подключения JS, так что даже без ява-скрипта, все будет смотреться отлично. Затем, наконец-то, мы перейдем к моей любимой части – JQuery. Мы используем его для анимации разворачивания/сворачивания сайдбара, а также accordion() и его параметры для эффекта наведения.