Browsing "Web-дизайн"
Июн 26, 2021 - Уроки php    No Comments

Создание меню в WordPress

И вот мы создали самый простейший свой шаблон, состоящий из пары файлов:

  • index.php;
  • header.php;
  • style.css

Конечно, же, чтобы приступить к введению в страницу сайта меню необходимо, чтобы в админке Wordpess существовала возможность введения меню. Однако, в админке на данный момент отсутствует такая возможность. Что же делать?

Для этого нам надо научить админ-панель такой возможности. Как это сделать, вы узнаете в данной статье.

Вывод меню средствами WordPress

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

1. Зарегистрировать меню в файле functions.php нашей темы.

Создаем файл  functions.php, в котором опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), регистрирующий позиции меню.

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

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

Листинг 1. Регистрация двух меню. Файл function.php активной темы WordPress

function register_my_menus()
{
register_nav_menus
(
array( 'header-menu'=> 'header-menu1', 'footer-menu'=> 'footer-menu1')
);
}

В строке 5 листинга 1 мы как раз передаем массив аргументов стандартной функции WordPressregister_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога:'header-menu' => 'header-menu1'. Зарегистрированная позиция в шаблоне будет носить названиеheader-menu, а в админке WordPress будет представлена как header-menu1.

Аналогичным образом второй аргумент 'footer-menu' => 'footer-menu1' регистрирует позицию для меню над подвалом.

Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.

Листинг 2. Запуск функции register_my_menus хуком init. Файл functions.php

if(function_exists('register_nav_menus'))
{
     add_action( 'init', 'register_my_menus');
}

Как видно из листинга 2, мы применяем условный оператор «if» для проверки, можно ли в данной версии WordPress использовать функцию регистрации меню — register_nav_menus(). Ведь движок WordPress может быть старым и не поддерживать работу с меню. Методfunction_exists() вернет TRUE, если register_nav_menus() знаком данной версии WordPress.

Если WordPress умеет работать с функцией register_nav_menus, выполнится метод add_action( 'init', 'register_my_menus' ), который, при возникновении хука init запустит функциюregister_my_menus (описанную в листинге 1).

Естественно, что вначале мы делаем проверку возможности добавления меню, а только потом - регистрируем. Окончательный листинг будет таков:

if(function_exists('register_nav_menus'))
{
     add_action( 'init', 'register_my_menus');
}
function register_my_menus()
{
register_nav_menus
(
array( 'header-menu'=> 'header-menu1', 'footer-menu'=> 'footer-menu1')
);
}

2. Необходимо указать место для отображения зарегистрированных типов меню в файлах верстки нашей темы.

В нашем случае зарегистрировано два меню: header-menu и footer-menu. Откроем на редактирование файл index.php нашей темы и укажем позиции для вывода наших меню.

Например, header-menu будет выводиться под шапкой в блоке <nav></nav>. Для этого используем код листинга 3.

Листинг 3. Указываем место для вывода меню header-menu. Файл index.php активной темы

<nav>
     <?php wp_nav_menu( array( 'theme_location'=> 'header-menu') ); ?>
</nav>

Ну и где-нибудь над подвалом аналогичным образом укажем место отображения footer-menu (см. листинг 4).

Листинг 4. Указываем место для вывода меню footer-menu. Файл index.php активной темы

<nav>
     <?php wp_nav_menu( array( 'theme_location'=> 'footer-menu') ); ?>
</nav>

3. Настройка меню в админке WordPress.

После того, как предыдущие два пункта были реализованы, в админке WordPress вы увидите специальный пункт, отвечающий за работу с меню.

Работа с меню в WordPress

Рис. 1. Раздел по работе с меню WordPress админки блога.

Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.

Создание меню в WordPress

Рис. 2. Создание меню WordPress.

Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.

Расстановка зарегистрированных меню на позиции

Рис. 3. Закрепление за позициями соответствующих меню WordPress.

После этого, пользуясь функционалом, представленным на рис. 4., можно добавлять выбранный тип ссылок в меню, открытое на вкладке интерфейса, представленного на рис. 2.

Добавление пунктов меню в WordPress

Рис. 4. Функционал по добавлению пунктов в меню.

Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).

Вложенность пунктов меню

Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.

Вложенность пунктов меню для выпадающего меню

Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.

Выпадающее меню в WordPress средствами jQuery

Для организации выпадающего меню в WordPress мы будем пользоваться библиотекой jQuery.

Раз мы решили задействовать jQuery, то давайте подключим его к нашей теме. Для этого необходимо указать код листинга 6 в файле index.php обязательно до вызова функции wp_head().

Листинг 6. Подключение jQuery в WordPress

<?php wp_enqueue_script('jquery'); ?>

jQuery будет использоваться для плавного «появления» вложенных пунктов меню.

Для начала вложенные пункты нужно скрыть. Используем для этого стили, которые укажем в файле style.css нашей темы (см. листинг 7).

Листинг 7. Скрываем вложенные пункты. Файл style.css

ul.menu ul.sub-menu
{
    display: none;
    position: relative;
    left: 50px;
}

Пояснение к листингу 7

Все ul, имеющие класс sub-menu (именно такой класс WordPress автоматически задает для тега ul, охватывающего вложенные пункты меню) и попавших в ul с классом menu (menu — класс, которым награждается внешний ul автоматически) скрыть свойством display: none.

Свойство position: relative позволяет сместить пункты меню относительно их первоначального положения, что я и делаю свойством left: 50px.

Дальнейшее оформление пунктов меню не входит в задачи данной статьи. Об этом мы поговорим в следующих публикациях блога.

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

Скрипт мы спрячем в файл script.js, который сохраним в папке с нашей темой. Сам скрипт приведен в листинге 8.

Листинг 8. jQuery-скрипт, отображающий и прячущий вложенные пункты меню

var$j = jQuery.noConflict();
$j(document).ready(function()
{
     $j('.menu li').hover
     (
        function()
          {
               //показать подменю
           $j("ul:first", this).slideDown(100);
        },
        function()
          {
            //скрыть подменю
             $j('ul:first', this).slideUp(100);
        }
     );
})

Скрипт очень простой, но действует результативно.

Метод jQuery hover() чувствует наведение указателя мыши на тег <li> в меню и, если мышь находится над указанным элементом, срабатывает функция «показать подменю», если мышь уходит с элемента — выполняется функция «скрыть подменю».

Для отображения пунктов подменю используется метод slideDown(). Данный метод воздействует на первый ul, вложенный в данный элемент li — добиться такого выбора объекта воздействия можно селектором  $j("ul:first", this).

Аналогичным образом работает метод slideUp, скрывающий подменю.

Остается подключить файл script.js с jQuery-скриптом (листинг восемь) к нашей теме. Для этого в разделе <head> файла index.php активной темы укажем следующую строку:

1
<scriptsrc="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>

Это стандартное подключение скрипта из внешнего файла. Т. к. файл script.js находится в папке с активной темой, путь к ней можно узнать благодаря использованию стандартного метода WordPress bloginfo('stylesheet_directory').

По материалам с сайта http://www.sdelaysite.com/wordpress-site/menu-wordpress

Read more »

Июн 26, 2021 - Уроки php    No Comments

§5. PHP и MySQL - создаем админку

В предыдущих уроках рассказывалось о том, как создавать скелет собственной CMS. Наконец-то настала пора сделать полноценную административную панель с возможностью добавления и редактирования текста.

Read more »

Окт 14, 2016 - Web-дизайн    No Comments

Колонки одинаковой высоты

Колонки одинаковой высоты

Колонки одинаковой высоты

На этой странице описаны примеры, позволяющие сделать колонки одинаковой высоты в макетах с блочной версткой. Для многих начинающих верстальщиков это является определенной проблемой, ведь если в колонках макета высота не указана явно, то они вытягиваются ровно настолько, чтобы вместить свое содержимое. Соответственно получается, что вместо одинаковой высоты, каждая колонка в макете имеет свою, что выглядит не очень красиво.

Read more »

Сен 20, 2016 - Уроки php    No Comments

§4. PHP и MySQL - пишем свою CMS

Как написать свою CMS на базе PHP и MySQL? Как сделать собственную административную панель (админку) на php?

Наверное, многие могли задаваться подобными вопросами, но сложности в изучении и скудный материал в сети Интернет вряд ли содействовал в этом. Скудный, спросите вы, несмотря на обилие копипастов? Да, отвечу я, ибо на десятках сайтах копирующих тупо копирующих статьи со сторонних источников, распространяются одни и те же ошибки, которые становятся серьезнейшим камнем преткновения для начинающих изучать PHP. Многочисленные высоколобые форумчане зачастую не могут разобраться в наипростейших кодах, что приходится самому разбираться во всем.

В очередной раз я нашел тому подтверждение, когда решил начать освоение языка PHP и работы с базами данных MySQL с создания простейшей админки и небольшого сайтика, дабы на реальном движке отточить свое мастерство. Каково же было мое удивление, когда ни один из приведенных в сети кодов не заработал. Мне понадобился целый день, чтобы самому решить те простейшие задачи, на которые я так и не нашел ответа в сети.

Итак, в этой статье я представляю работающий код простой админки и шаблона, позволяющего создавать и редактировать статьи, используя php.

Read more »

Сен 16, 2016 - Уроки php    No Comments

§1. Пример создания сайта на php

Пример создания сайта на PHP

Конечно для создания простого сайта можно использовать CMS Joomla или просто сделать сайт на WordPress, но зачем стрелять по комарам из пистолета?

Для этих целей вполне подойдет статический сайт на HTML, но ведь иногда заказчик хочет расширить функционал своего сайта, добавить новые страницы, изменить дизайн и т. п. Поэтому уже изначально я начинаю разрабатывать динамический движок сайта, используя язык программирования PHP. Именно PHP лежит в основе разработок всех известных и популярных CMS. Поэтому знать его основы я думаю не помешает любому веб-мастеру, ведь тогда он будет более свободно и уверенно манипулировать движком своей CMS.

Read more »

Сен 13, 2016 - Web-дизайн    No Comments

1. Основы шаблонов WordPress

Структура страницы WordPress

Простая web-страница WordPress сделана из трех основных блоков: заголовок (header), контент и подвал (footer). Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.

Заголовок

Контент

Подвал

  • Заголовок содержит всю информацию, которая должна быть наверху — т.е. внутри тега <head> — вашей XHTML web-страницы, так же, как и теги <doctype><meta> и ссылки на таблицы стилей. Он также включает открытый тег <body> и видимый заголовок вашего блога (который обычно содержит название вашего сайта, а также может содержать навигационное меню, логотип, описание сайта и т.д.).
  • Блок контента содержит записи и страницы вашего блога, т.е. "основу" сайта.
  • Подвал содержит информацию, которая находится в самом низу страницы, например ссылки на остальные страницы или категории вашего сайта в меню, авторские права, контактную информацию и т.п.

Основные файлы шаблона

Чтобы сформировать структуру темы WordPress, начните с файла шаблона index.php в папке вашей темы. У этого файла две основные функции:

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

В нашей упрощенной структуре нам достаточно включить два других файла шаблона: заголовок и подвал. Они должны быть названы header.php и footer.phpТеги шаблонов, которые включают их, выглядят так:

<?php get_header(); ?>

<?php get_footer(); ?>

Если нужно показать записи и страницы вашего блога (и настроить их внешний вид), файл index.php должен запустить цикл WordPress между вызовами файлов заголовка и подвала.

Более сложные структуры страниц

Заголовок

Контент

Боковая панель

Подвал

Множество тем WordPress используют одну или несколько боковых панелей, которые содержат меню навигации и дополнительную информацию о вашем сайте. Боковая панель формируется с помощью файла шаблона sidebar.php. Он может быть включен в файл шаблона index.php с помощью следующей строки (теги шаблонов):

<?php get_sidebar(); ?>

А где все остальное?

Заметьте, что мы не включили шаблонный тег для "получения" контента нашей web-страницы. Это потому, что контент формируется в цикле WordPress, внутри index.php.

Также стоит отметить, что таблицы стилей темы определяют внешний вид и положение заголовка, подвала, боковой панели и контента в браузере пользователя. Чтобы узнать больше об изменении дизайна ваших тем WordPress и web-страниц, смотрите Дизайн и раскладка блога.

Файлы шаблонов внутри файлов шаблонов

Вы узнали, как WordPress включает стандартные файлы шаблона (заголовок, подвал и боковую панель) в файле index.php. Но вы также можете включить и другие файлы шаблона в любом из ваших файлов.

Например, sidebar.php может содержать файл шаблона, который формирует строку поиска — searchform.php. Т.к. это не один из стандартных файлов шаблона WordPress, код для включения будет немного отличаться:

<?php get_search_form(); ?>

Нам больше не нужно использовать "include" и "TEMPLATEPATH" для вставки нашей формы поиска в темы, т.к. WordPress предоставляет нам вышеуказанный тег шаблона.

Заголовок

Контент

Форма комментариев

Боковая панель

Форма поиска

Подвал

Множество тем WordPress включают в себя различные файлы шаблона для формирования web-страниц на сайте. Ниже приведен список типичных файлов для основного шаблона (index.php) сайта на WordPress:

  • header.php
    • theloop.php (контент)
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

Но, в любом случае, эту структуру можно изменить. Например, вы захотите вставить строку поиска в заголовок. Или ваш дизайн не предполагает использование подвала, так что его можно вообще не использовать.

Специальные файлы шаблона

В WordPress существуют два основных вида страниц на сайте. Вид одиночной записи используется, когда web-страница показывает одну запись из блога. Вид нескольких записей выводит список множества записей блога или сводку записей, и применяется к архивам категорий, архивам дат, архивам автора и (обычно) к "нормальному" виду домашней страницы блога. Вы можете использовать файл шаблона index.php для формирования всех этих типов страниц или положиться на иерархию шаблонов для выбора других файлов шаблона в зависимости от ситуации.

Иерархия шаблонов WordPress отвечает на следующий вопрос:

Какой файл шаблона будет использовать WordPress при формировании определенного типа страниц?

WordPress автоматически распознает файлы шаблона с определенными стандартными именами и использует их для определенного типа страниц. Например, когда пользователь кликает на заголовок записи блога, WordPress знает, что тот хочет увидеть именно эту статью на своей собственной странице. Иерархия шаблонов WordPress будет использовать файл шаблона single.php вместо index.php для формирования страницы — если в вашей теме есть файл single.php. Так же, если пользователь кликнет на ссылку для конкретной категории, WordPress будет использовать шаблон category.php, если найдет его; если нет, он будет искать archive.php, а если и этот шаблон не существует, WordPress будет использовать основной шаблон index.php. Вы можете сделать специальный шаблон для конкретной категории (см. Шаблоны категорий), или даже шаблоны для конкретных страниц.

Советы по файлам шаблонов

Здесь приведены несколько советов по созданию файлов шаблонов:

Отслеживайте открывающие и закрывающие теги
Файлы шаблона подразумевают использование тегов XHTML и ссылок на CSS. Элементы HTML и ссылки на CSS могут "пересекать" файлы шаблона, т.е. начинаться в одном файле и заканчиваться в другом. Например, HTML элементы html и body обычно начинаются в header.php и заканчиваются в footer.php. Большинство тем WordPress используют HTML элементы div, которые также могут охватывать несколько файлов. Например, основной div для контента страницы может начаться в header.php и закончиться либо в index.php, либо в single.php. Отслеживание начала и конца элементов HTML может быть довольно сложным в процессе разработки или изменения тем. Используйте комментарии чтобы отмечать в файлах шаблона, где открываются и закрываются теги большого контейнера, так что вы сможете отслеживать, где какой div, и в какой секции.
Тестируйте разные файлы шаблона с разными типами страниц
Если вы сделали изменения в шаблоне комментариев, боковой панели, форме поиска или любом другом файле шаблона, протестируйте их на разных типах страниц (одиночная запись блога, разные типы архивов, страницы).
Дополнительные комментарии
Если вы разрабатываете темы для публикации, то учтите, что тот, кто скачает вашу тему, возможно захочет немного модифицировать ее для собственного использования. Так что будет весьма полезным оставлять комментарии в ваших файлах шаблона в тех местах, где вы сделали изменения относительно стандартной логики классических тем. Также неплохо будет добавить комментарий, если вы подключили свою собственную таблицу стилей где-нибудь в header.php.
Не забывайте закрывать HTML теги
Если вы открыли тег (например, div) в одном файле шаблона и не закрыли его там же, убедитесь, что тег закрыт в другом файле. На форуме WordPress полно вопросов типа "что случилось с моей темой??", когда начинающий разработчик удаляет шаблон footer.php и при этом не закрывает теги, открытые в заголовке. Следите за вашими тегами. Хороший способ найти ошибки на странице — проверить ее в HTML валидаторе.
Таблицы стилей CSS в шаблонах
Вы можете использовать любые HTML и CSS теги и стили, которые захотите. Однако, мы рекомендуем следовать стандартной структуре тем WordPress (см. Site Architecture 1.5). Это сделает ваши темы более понятными для других пользователей.
Сен 2, 2015 - Web-дизайн    No Comments

Отложенная загрузка изображений при помощи JavaScript

Отложенная загрузка изображений. Подгрузка изображений при прокрутке. Как ускорить загрузку сайта, если много фотографий (картинок)?

Думаю, многие любители разместить на своем сайте море фотографий сталкивались с проблемой длительной загрузки страницы, в конце-концов, отталкивающей посетителей, не желающих "часами" смотреть в пустой монитор, пока  грузятся сотни картинок. А если они еще и много "весят", то пиши-пропало.

Read more »