Содержимое с вкладками с использованием jQuery и WP_Query

10 января 2018

Wordpress предоставляет огромный массив информации о вашем блоге и его содержании. Отображение большого количества этой информации может стать пространством. Отличное решение для этого - содержимое с вкладками!

В этом уроке мы рассмотрим макет WordPress Newspaper, над которым мы работали ранее, и расширим его с помощью вкладок.

Предисловие

Правильно! Мы будем использовать красивую и мощную комбинацию анимации jQuery, а функция.bind прекрасно сочетается с универсальными WPXQWery () и Wordpress эксклюзивными тегами Wordpress. Если вы похожи на меня, вам нравится видеть готовый продукт прежде всего:

Если вы хотите сделать только этот учебник, вам понадобится последняя версия jQuery для этого учебника. Загрузите его здесь. В противном случае он уже должен быть с этой темой, которую я подготовил, которую вы можете скачать здесь: myTheme.

Мы предполагаем, что у вас есть живая установка Wordpress, будь то локальная или размещенная. Есть руководства по запуску Wordpress локально здесь для Windows, а здесь для OS X. Активация темы, которую я подготовил ранее - myTheme, - большая помощь. Мы будем расширять это, поэтому откройте index.php и давайте получим редактирование!

Шаг 1 - Новый структурный HTML.

Нам нужен новый HTML, очевидно. Это просто. Нам нужны только дополнительные div, чтобы обернуть все, с чем мы работаем. Поместите этот следующий код чуть выше

:

И нам нужно добавить окончательный

перед закрытием

Шаг 2 - Условные теги

Таким образом, нам нравится вкладка, которую мы собираемся сделать, но мы хотим ее только на нашей первой странице ради шоу! Как можно получить эксклюзивный код на первой странице, которую вы задаете!? Просто. Текстовые теги Wordpress. Это ценный урок для изучения! Условные теги предоставляют очень мощное средство настройки ваших тем, которые немного больше! Они очень понятны, но я дам базовое изложение ниже кода. Добавьте это прямо под наш новый элемент h1 в index.php.

Вы понимаете, что это такое? if (is_home ()) является нашим условием здесь, поэтому, если просматриваемая страница является домашней, включите наш файл tabbedContent.php. Что мы будем создавать дальше.

Шаг 3 - tabbedContent.php (HTML)

Итак, теперь мы попросили Wordpress включить tabbedContent.php, когда страница дома, но нам по-прежнему нужен фактический файл и контент! Создайте новый файл в нашем каталоге myTheme и назовите его tabbedContent.php. Введите или вставьте следующее в этот новый файл:

Отлично. На данный момент это просто необработанный HTML без добавления Wordpress или jQuery. Не так много нового, но позвольте мне немного объяснить макет.

# tabsNav - это интерактивные вкладки! Мы добавили атрибут href соответствующего содержимого

  • . Убедитесь, что hrefs соответствуют идентификационному имени соответствующего элемента списка контента! # tabContent - Мы используем

    , который не похож на боковые панели Wordpress, потому что его легко стилить и по сути является списком контента в любом случае! Я думаю, что содержимое этого элемента является self explainatory.

    Шаг 4 - tabbedContent.php (функции Wordpress)

    Теперь все сделано, все равно будет выглядеть пустым. Поэтому нам нужно заменить комментарии <-- --> на фактический контент! Мы начнем с WP_Query (), wp_get_archives () и формы поиска.

    4.1 - WP_Query ()

    Еще один ценный урок для изучения. Это фантастика, если вы хотите делать то, что мы делаем, или «Избранная публикация». В принципе, это упрощенный цикл в любом месте страницы. Здорово. Поэтому вырежьте тег комментария для нашего WP_Query и введите следующее:

  • has_posts ()): $ recent-> the_post ();?> 
  • WP_Query () является фантастическим. Да, это петля. Но не все. Все, что мы просто делаем, сообщает имманентно следующий цикл, чтобы показать нам список из 5 последних сообщений. Строка в скобках WP_Query может быть любым... фильтром по датам, категориям, тегам, лимиту и т. Д. Это фантастический инструмент для понимания и еще один ценный урок, чтобы убрать это!

    4.2 - Архивы

    Если вы часто посещаете Wordpress, вы должны знать, как это сделать. Это основной призыв к списку ежемесячных архивов. И чтобы соответствовать разделу WP_Query, мы хотим только 5 из них (автоматически в порядке убывания). Просто переключите <-- WP_ARCHIVES GOES HERE --> в tabbedContent.php со следующим:

    		

    4.3 - Поиск

    Мы будем использовать только простой ввод и поиск, используя поиск по умолчанию, который я всегда использую в своих собственных шаблонах. Замените комментарий WP SEARCH следующим образом:

    Отлично, теперь у вас должен быть новый файл в каталоге myTheme с именем tabbedContent.php и условным тегом в index.php. Если вы правильно следовали, ваша тема должна выглядеть примерно так:

    Не так уж и красиво... Или с вкладками, или jQueried или CSSed вообще. Но это начало, и хорошо знать, что наш WordPress работает! Мы закончили с tabbedContent.php, поэтому вы можете закрыть это сейчас!

    Шаг 5 - CSS

    Нам нужны наши вкладки, чтобы вписаться, стать частью страницы. На данный момент они уродливые стороны. Нам нужно сделать страницу для людей без JavaScript, прежде всего, для грациозной деградации. Вам понадобятся некоторые изображения, если вы хотите сделать их такими же красивыми, как и я. Вот список из них (щелкните правой кнопкой мыши и сохраните как в папке с изображениями в каталоге myTheme!)

    searchInputBg.pngntabContent.pngntabContentHover.pngntabsNavBg.pngntabsNavActive.pngntabsNavHover.png

    Любой тип или вставить эту массивную панель CSS. Здесь нет ничего нового, мы просто выравниваем вкладки с «Сведения о сообщении» и выравниваем содержимое с белым столбцом основного содержимого и несколько раз используем экземпляр: hover.

    /*------TABS------*/#container{n	width: 600px;n	margin: 0 auto;n}h1{n	font-size: 1.3em;n	text-transform: uppercase;n	color: #949494;n	letter-spacing: 1px;n}#tabsAndContent ul, #tabsAndContent li{n	padding: 0n}ul#tabsNav{n	float: left;n	width: 200px;n	list-style: none;n}ul#tabsNav li{n	background: url(images/tabsNavBg.png) no-repeat center #a8a8a8;n}ul#tabsNav li:hover{n	background: url(images/tabsNavHover.png) no-repeat center #eee;n}ul#tabsNav *:focus {n	 outline: nonen}ul#tabsNav li.active{n	background: url(images/tabsNavActive.png) no-repeat center #fff;n}ul#tabsNav li.active a{n	color: #303030;n}ul#tabsNav li a{n	padding: 1em 15px;n	margin: 0 0 1em 0;n	display: block;n	width: 170px;n	text-decoration: none;n	color: #7e7e7e;n	font: 11px/20px Georgia;n	text-transform: uppercase;n}ul#tabsNav a:hover{n	color: #0a0a0an}ul#tabContent{n	margin: 1em 0 0;n	background: url(images/tabContent.png) no-repeat top right#fff;n	min-height: 180px;n	width: 350px;n	float: left;n	list-style: none;n	padding: 0 25px;n	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;n}#tabContent>li{n	width: 350px;n	list-style: none;n	padding: 0 25px 20px 0;n}#tabContent li ul li{n	list-style: none;n}#tabContent li ul li a{n	display: block;n	border-bottom: 1px solid #e7e7e7;n	padding: 10px 0;n}#tabContent li ul li a:hover{n	background: url(images/tabContentHover.png) no-repeat center bottom;n}form{n	padding: 30px;n	n}form input{n	background: url(images/searchInputBg.png) repeat-x #ddd;n	border: 2px solid #cbc6c9;n	border-right: 0;n	padding: 5px;n	margin-right: 0;n	color: #fff;n	font: 16px Georgia, "Times New Roman", Times, serif;n}#searchSubmit{n	border-left: 0;n	border-right: 2px solid #cbc6c9;n	margin-left: 0;n	position: relative;n	left: -3px;n	color: #00416c;n}#searchSubmit:hover{n	background: url(images/tabContentHover.png) no-repeat center;n	color: #003459;n	cursor: pointer;n}

    Если все идет по плану, оно должно выглядеть довольно красиво, что-то похожее на это (с вашим собственным содержанием, конечно):

    Теперь, когда мы убедились, что страница выглядит нормально для тех, кто не работает JavaScript, мы можем перейти на питание для тех, кто это делает!

    Шаг 5 - jQuery

    Мой любимый раздел учебника! Время jQuery! Давайте рассмотрим, что нам нужно:

      Скрыть все элементы списка, которые мы не хотим видеть изначально, показывая только наш первый раздел контента, раздел WP_Query.nДобавьте класс 'active' на первую вкладку, потому что это соответствует секция открыта.nКогда нажата вкладка, выполните следующие действия: Убедитесь в активном классе из активного активного tabnДобавьте класс активным на вкладку, которая только что была нажата. Назовите атрибут href для a на вкладке с щелчком и сделайте это наша новая переменная 'target'nПосле того, как цель обнаруживает себя, а предыдущая область отображения скрывается с некоторой анимацией

    , это может показаться трудным делом, но благодаря записи jQuery меньше больше отношения, мне удалось вырезать то, что нам нужно, всего лишь 9 строк кода js! Это находится внутри $ (document).ready (function () {});, под скриптом героя и злодея.

    //And our little animated sliding area uptop of the design.n	n	$('#tabContent>li:gt(0)').hide();n	$('#tabsNav li:first').addClass('active');n	$('#tabsAndContent #tabsNav li').bind('click', function() {n		$('li.active').removeClass('active');n		$(this).addClass('active');n		var target = $('a', this).attr('href');n		$(target).slideDown(400).siblings().slideUp(300);n		return false;n	});

    Основная разбивка нашего кода:

    $ ('# tabContent> li: gt (0)'). Hide (); - Это, как мы хотели в нашей текстовой версии скрипта, скрывает все элементы контента больше нуля, без элементов, начинающихся с 0. $ ('# tabsNav li: first'). AddClass ('active'); - Мы добавляем класс 'active' к первой вкладке, потому что, если отображается только первая область содержимого, мы не хотим, чтобы вторая вкладка была активной, мы!? $ ('# tabsAndContent #tabsNav li'). bind ('click', function () {- Функция.bind! Все это происходит, когда происходит событие параметра (щелкните в нашем случае), он связывает следующую функцию с элементом, а функция:$ (' li.active '). removeClass (' active '); - снять класс с текущего владельца. $ (this).addClass (' active '); - добавить класс к этому, полезный селектор, когда вы внутри функции и является специфическим для элемента clicked.var target = $ ('a', this).attr ('href'); - Создайте нашу переменную 'target' из дочернего элемента вкладки атрибута href элемента, еще раз используя это в selector. $ (target).slideDown (400).siblings (). slideUp (300); - Наша анимация! Теперь, когда у нас есть цель, мы сдвинем ее на четыре десятых секунды (или 40 миллисекунд), и скользить всех видимых братьев и сестер в пропасть почти в трети второй (30 мс).return false; - Это важно! Вы не хотите, чтобы в истории браузеров было миллион предыдущих ссылок, просто щелкнув вкладки, не так ли? Каждый раз, когда URL-адрес изменяется на #recentArticles или что-то в этом роде, он добавляет еще одну запись в историю браузера. return false; аннулирует это, поэтому URL-адрес не изменяется и история не добавляется.

    Итак, это все jQuery, CSS, HTML и Wordpress, которые нам понадобятся. У вас должно быть что-то похожее:

    Да, он должен оживить, да активная кнопка должна измениться, и да, вы только что создали свой собственный динамический контент с вкладками и внедрили его в Wordpress тему с содержимым Wordpress!

    Закончить.

    В этом уроке мы многое пережили. В целом, некоторые важные уроки, которые мы изучили:

    WP_Query (); - Мощный инструмент для получения контента вне основных тегов loop.Wordpress - фантастический для дальнейшей настройки вашей функции theme..bind - легко связать функцию с определенным элементом с анимацией event.jQuery - невероятно легко реализовать и так же, как сад из роз.