WordPress для начинающих: настройка среднего уровня

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

Ящики для иконок

Виджеты Icon Box — очень удобная часть визуального языка . Это может показаться очевидным, но размещение номера телефона вашей компании рядом со значком телефона — это простой, но эффективный способ сделать сайт более удобным для пользователей .

Моей задачей было добавить поля со значками в шапку главной страницы. Для этого на панели инструментов вам нужно перейти в « Внешний вид» -> «Виджеты », а затем в « Боковых панелях темы » выбрать « Заголовок ».

Найдя « Заголовок », обратите внимание на левую часть экрана, где вы увидите список « Доступных виджетов ». ProteusThemes: IconBox — это виджет, который вы ищете.

Теперь у вас есть два варианта . Вы можете либо перетащить виджет в правую часть экрана и поместить его в заголовок, либо при нажатии на виджет вы увидите раскрывающееся меню его применимых мест, вы можете просто выбрать « Заголовок » из этого список и нажмите синюю кнопку « Добавить виджет »:

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

Под всеми значками в меню виджетов вы увидите опцию « выделить этот виджет ». Отметьте это поле, если информация в поле значков очень важна, и вы хотите, чтобы она выделялась больше.

Слайдер главной страницы

Воссоздание Auto Demo потребовало добавления ползунка в качестве функции на главную страницу. Для этого выберите Страницы -> Все страницы -> Главная ; когда вы находитесь в редакторе своей домашней страницы, вам нужно найти раскрывающееся меню « Атрибуты страницы » в правой части экрана. Найдите это и измените « Шаблон » на « Главная страница со слайдером ».

После того, как вы перейдете на « Главная страница со слайдером », в нижней части экрана появится новая метамета под названием «Слайдер главной страницы». Нажмите здесь, чтобы добавить свои изображения и текст в слайдер:

Шорткоды

Воссоздание слайдера на главной странице прекрасно подводит нас к шорткодам . Почему? Поскольку в автодемонстрации, которую я воссоздаю, внутри ползунка есть кнопки .

На этом этапе важно подчеркнуть, что вам действительно необходимо установить рекомендуемые плагины . Моя ошибка заключалась в том, что я вставил шорткод в «текст слайда», не активировав плагин ProteusThemes Shortcodes . Если у вас не активирован плагин, в слайдере появится сам код, а не кнопка, которую вы пытаетесь создать.

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

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

Конструктор страниц

Освоение плагина Page Builder от SiteOrigin было крайне важно для воссоздания Auto Demo. Первой задачей, для которой мне пришлось его использовать, было создание этого IconBox с разделом Popover под заголовком главной страницы:

Для этого перейдите на страницу, которую вы хотите отредактировать, в моем случае на домашнюю страницу. Затем вам нужно найти меню конструктора страниц , оно выглядит так:

Отсюда выберите « Добавить строку ». Затем вы увидите параметры, относящиеся к столбцам в этой строке. Вы можете выбрать , сколько столбцов вы хотите, соотношение их размеров и хотите ли вы, чтобы они располагались в порядке слева направо или наоборот. Для всплывающего окна IconBox я выбрал 3 столбца одинакового размера.

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

В зависимости от того, какой виджет вы выберете, вы можете добавить в столбец дополнительные функции. Например, в моем всплывающем окне IconBox « Время открытия» необходимо было добавить виджет « Время открытия ProteusThemes» во всплывающем окне IconBox, чтобы соответствующая информация отображалась во всплывающем окне при нажатии на столбец.

Одна проблема, с которой я столкнулся после создания этой строки всплывающих окон IconBox, заключалась в том, что строка не была того же цвета , что и Auto Demo, и не распространялась на всю ширину моей страницы. Решить такого рода проблемы несложно. Сначала наведите курсор на маленький значок гаечного ключа над строкой, затем выберите « Редактировать строку ». Чтобы изменить цвет, следующим шагом будет выбрать « Дизайн » в меню « Стили строк », здесь вы можете изменить цвет и другие параметры дизайна.

Чтобы изменить размер строки, сначала выберите « Макет » в меню « Стили строк». Это даст вам возможность добавить отступ к строке. Затем, если вы хотите, чтобы строка занимала всю ширину страницы, выберите раскрывающийся список « Макет строки » и выберите « Полная ширина ».

Точно так же я использовал Page Builder для создания этих столбцов рекомендуемой страницы :

Для этого вместо добавления в колонку виджета Iconbox with Popover я выбрал виджет ProteusThemes: Featured Page . Вы должны хорошенько поэкспериментировать с размещением различных виджетов в столбцах, чтобы действительно понять, насколько полезным будет для вас конструктор страниц.

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

ПОДПИШИСЬ СЕЙЧАС