WordPress недавно запустил новую тему Twenty Twenty-Three вместе с версией 6.1 основного программного обеспечения для управления контентом.

Как и все ежегодные темы, разрабатываемые командой WordPress, при первой установке и активации она проста. В сегодняшнем уроке мы будем использовать функцию «полного редактирования сайта» (FSE), чтобы превратить этот базовый веб-сайт в портфолио городских фотографий!

Зарегистрируйте домен и получите веб-хостинг

Чтобы запустить WordPress, вам необходимо зарегистрировать свой домен и получить хостинг для веб-сайтов.

Если вы еще не сделали этот шаг, я рекомендую Beget.com ,как один из самых доступных вариантов.

Установить и активировать Двадцать Двадцать Три

Перейдите в раздел «Внешний вид» > «Темы», и он должен быть установлен, если вы обновили версию WordPress. В противном случае вы можете нажать «Добавить новый» и найти его, а затем активировать.

Публикуйте страницы и публикации с тестовым контентом

Сначала я добавлю все свои фотографии в медиатеку. Вы можете выбрать бесплатные стоковые фотографии на сайте Pexels.com, где представлен отличный выбор.

Перейдите в раздел «Медиа» на боковой панели администратора WordPress и нажмите «Добавить новый», чтобы загрузить свои изображения.

Затем создайте несколько страниц и сообщений, чтобы у нас был некоторый контент. Эта инфраструктура упростит разработку макета нашей темы, поскольку вы увидите этот контент в окне редактора и на действующем веб-сайте.

Я включу четыре стандартные страницы: «Главная», «О программе», «Блог» и «Контакты».

Поскольку у нас уже есть образец страницы, я обновлю заголовок, чтобы сделать его страницей «О нас».

После публикации страницы/публикации устанавливается URL-адрес, который не переключается после изменения уже опубликованного заголовка (во избежание неработающих ссылок). Однако мы можем сбросить этот URL-адрес вручную, перейдя на вкладку «Страница» на правой боковой панели.

Найдите параметр URL-адрес в разделе «Сводка», который показывает нам постоянную ссылку на страницу (в настоящее время «образец страницы»), и мы изменим ее на «о».

Затем прокрутите вниз, чтобы установить избранное изображение. Конечно, вы всегда можете загрузить новые, но мы перейдем на вкладку «Медиатека», чтобы выбрать одну фотографию, сделанную в голову.

Создайте 3–4 новые страницы и публикации с избранными изображениями.

Давайте посмотрим на наш сайт без каких-либо настроек темы.

Настройки WordPress

Давайте пройдемся по основным настройкам. Затем мы начнем творить с Twenty Twenty-Three.

Перейдите в меню «Настройки» > «Основные», чтобы изменить заголовок и слоган вашего сайта, затем сохраните.

Мы создадим собственный макет домашней страницы вместо настройки по умолчанию, которая отображает сообщения нашего блога на главной странице.

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

Вам следует просмотреть два других раздела: «Обсуждение» (настройки комментирования) и «Постоянные ссылки» (структура URL-адресов по умолчанию). Что касается последнего, вы не должны менять это после того, как ваш сайт существует некоторое время. Я всегда рекомендую с первого дня установить для него значение «Имя публикации».

Полное редактирование сайта WordPress

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

В левом верхнем углу вы увидите трехстрочный значок, который переключает представление списка (☰), показывая иерархию блоков, составляющих шаблон.

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

Установить стили темы по умолчанию

Чтобы быстро внести изменения в дизайн, выберите значок двухцветного круга (◐).

Новой особенностью темы Twenty Twenty-Three являются предопределенные стили. Нажмите кнопку «Обзор стилей», чтобы просмотреть 11 опций, которые полностью настраивают ваш шаблон без необходимости ручной настройки.

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

Если вы такой же опытный пользователь WordPress, как и я, вам необходимо знать код HTML и CSS, чтобы выполнить такую ​​настройку со старыми темами. И даже при полном редактировании сайта существуют стили, которыми невозможно управлять с помощью визуального дизайнера, и могут возникнуть небольшие ошибки.

Итак, если вам когда-нибудь понадобится переопределить что-то с помощью CSS, перейдите к Настройщику, который WordPress удаляет из подменю «Внешний вид». Вам просто нужно получить к нему доступ непосредственно по URL-адресу:

yourdomain.com/wp-admin/customize.php

Здесь вы можете вставить код в разделе «Дополнительный CSS».

Как настроить шаблоны тем

Выберите раскрывающийся список вверху по центру в окне редактора шаблонов и нажмите «Просмотреть все шаблоны».

Это все шаблоны, которые генерируют каждую страницу/пост на вашем сайте.

Мы рассматривали шаблон «Страница», который отображает ваши страницы.

Шаблон «Одиночный» отображает отдельные сообщения блога.

Шаблон «Домой» сбивает с толку. Он отображает ваши самые последние сообщения в блоге, но если у вас установлена ​​статичная домашняя страница (у нас есть), она отображается на вашей «странице сообщений», выбранной в настройках WordPress. Таким образом, этот домашний шаблон управляет вашим блогом, будь то на главной странице или где-либо еще.

Надеюсь, это не превратит ваш мозг в крендель!

Создать шаблон главной страницы

Мы создадим новый шаблон специально для нашей домашней страницы.

Нажмите «Добавить новый», и вы увидите готовые типы шаблонов. Давайте возьмем шаблон «Главная страница», который переопределит шаблон страницы.

Мне нравится выбирать блоки через список (☰).

Перейдите в часть шаблона заголовка и разверните вложенную иерархию. В текущем меню навигации перечислены все опубликованные страницы нашего сайта. Я хотел бы создать меню вручную.

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

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

Затем я хочу заменить текущий заголовок блоком «Слоган сайта».

Установите для параметра «Размер шрифта» значение «XX-большой», чтобы он точно соответствовал размеру. Чтобы просмотреть дополнительные параметры, выберите трехточечный значок (⋮) рядом с надписью «Типографика». Давайте выберем «Внешний вид», чтобы сделать наш текст полужирным курсивом, а затем центрируем его.

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

Затем измените параметр «Выравнивание» на «Широкая ширина» (максимум 1200 пикселей), чтобы у нашей галереи было больше места.

Поскольку мы не показываем здесь сообщения блога, вы можете удалить блок «Цикл запроса».

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

Эта кнопка — отличный пример того, почему удобно использовать представление списка. Если перетащить блок «Кнопка», он не сработает. Вместо этого вам придется выбрать блок более высокого уровня «Кнопки»!

Переместив эту кнопку вверх, вы можете «Выровнять элементы по центру» и связать ее со страницей контактов, изменив текст на «Свяжитесь со мной».

Под кнопкой есть разделитель, и мы переместим его вверх, выбрав стрелку направления. Затем удалите блок «Столбцы».

Когда вы наводите курсор на значок плюса (+), иногда появляется надпись «Добавить шаблон», но если мы находимся внутри раздела, это «Добавить блок». Узоры — это готовые шаблоны блоков, поэтому давайте воспользуемся одним из них!

Нажмите «Добавить шаблон», а затем «Просмотреть все». Далее выберите «Медиа и текст с изображением…», который мы превратим в небольшой раздел биографии.

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

Добавьте блок «Группа», затем перетащите в него блок «Медиа и текст».

Теперь, когда он у нас есть в группе, появилась новая опция «Выровнять», позволяющая установить для него широкую ширину. Мы можем поменять фотографию слева направо, используя опцию «Показать медиа…», а затем обновить ширину мультимедиа до 62%.

Замените изображение нашим снимком головы из медиа-библиотеки. Затем измените фон на контрастный цвет нашего шаблона темы, текст на наш базовый цвет, а ссылки на наш второстепенный желтый цвет.

Если какие-либо существующие блоки не обновляются до этих новых цветов, просто зайдите в эти блоки и переключите их вручную.

Вы можете обновить текст, отцентрировать его и обновить ссылку на страницу «О программе».

Под шаблоном биографии добавим социальные значки в том же блоке «Группа».

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

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

Измените выравнивание по центру в настройках блока, включите «Открывать ссылки в новой вкладке» и отрегулируйте интервал между блоками. Затем перейдите к опции «Размер», чтобы увеличить или уменьшить их.

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

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

Последний шаг — добавить нашу фотогалерею на домашнюю страницу, чтобы в блоке «Разместить контент» в нашем шаблоне «Главная страница» что-то показывалось!

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

Добавьте блок «Галерея», выберите загруженные изображения или добавьте новые и нажмите «Создать новую галерею». Затем измените интервал между блоками на 0, чтобы фотографии касались друг друга. Вы также можете обновить, куда ссылается каждое изображение при нажатии.

Обновите страницу, и теперь мы можем просмотреть готовую домашнюю страницу с пользовательским шаблоном!

Редактировать шаблон страницы

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

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

В окне редактора выберите параметр «Выравнивание» на изображении и измените его на «Нет» (макс. ширина 650 пикселей), поскольку это внутренняя ширина содержимого нашей публикации.

Затем отцентрируйте заголовок сообщения и удалите блок «Комментарии», поскольку мы не хотим, чтобы посетители оставляли комментарии на страницах.

Это все, что мы собираемся сделать, поэтому давайте сохраним и обновим нашу страницу «О программе».

Контактная форма 7

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

Перейдите в «Плагины» > «Добавить новый» и найдите «Контактная форма 7». Я использую CF7 с тех пор, как начал работать с WordPress более десяти лет назад, и это до сих пор один из самых популярных плагинов для WordPress с более чем 5 миллионами активных установок.

Установите и активируйте контактную форму 7. Это добавит новый пункт меню WordPress «Контакт» на боковую панель администратора с предварительно созданной формой, готовой к использованию.

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

Чтобы отредактировать, нажмите на эту форму и создайте настраиваемые поля на вкладке «Форма».

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

Я позволю вам повозиться с этими настройками. А пока давайте вставим его на нашу страницу контактов!

Вернитесь на «Страницы» > «Контакт» и вставьте свой короткий код или используйте блок CF7 с раскрывающимся меню, чтобы выбрать, а затем опубликовать.

Идите и проверьте это.

Редактировать домашний шаблон (показывает все сообщения в блоге)

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

Нам нужно изменить заголовок на «Блог» и отцентрировать его.

В сообщении блога отцентрируйте заголовок и установите поле равным 1. Вы увидите, что оно применяется ко всем сообщениям, поскольку они поступают из блока «Цикл запросов». Затем убираем блок «Post Excerpt», так как он нам не нужен.

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

Выберите строку, установите выравнивание по центру и установите отступы и интервалы между блоками равными 1.

Последнее дополнение будет отображать категории блогов. Добавьте новый блок «Строка» после даты с выравниванием по центру и вставьте в него блок «Категории». В этом блоке есть возможность добавить префикс и суффикс, поэтому мы вставим эмодзи в папку перед списком категорий сообщений.

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

Еще одно странное наблюдение — это нижний раздел с двумя колонками на активном веб-сайте, который не отображается в редакторе.

Однако если вы перейдете в представление списка, вы увидите пустой блок «Шаблон». Удаление его (вместе с проставкой ниже) должно решить проблему.

Наконец, я сохраню этот блок «Цикл запроса» как часть шаблона, чтобы вы могли использовать его в других шаблонах (следующий раздел). Выберите трехточечный значок и нажмите «Создать часть шаблона», затем назовите ее как хотите — я выбрал «Цикл запроса с значками».

Как ни странно, когда вы его создаете, выравнивание возвращается к «Нет» (максимум 650 пикселей), поэтому установите для него значение «Широкая ширина» (максимум 1200 пикселей).

Редактировать шаблон архива

Шаблон «Архив» отображает категории, теги и другие архивы (включая ссылки вашего автора).

Отцентрируйте заголовок и замените блок «Цикл запроса» по умолчанию на нашу пользовательскую часть шаблона. Чтобы добавить это, найдите блок «Часть шаблона» и выберите тот, который мы только что создали для страницы блога.

Еще раз нам нужно обновить это выравнивание до широкой ширины (макс. 1200 пикселей)… должно быть, это еще одна маленькая ошибка. Помните, программное обеспечение никогда не бывает идеальным!

Редактировать отдельный шаблон (показывает отдельные сообщения)

У нас есть еще один шаблон: «Одиночный», предназначенный для отдельных сообщений в блоге.

Мы начнем с тех же изменений, которые мы внесли в шаблон страницы.

Сначала сбросьте настройки цвета блока «Избранное изображение публикации», установите выравнивание «Нет (макс. 650 пикселей)», а затем отцентрируйте заголовок публикации.

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

Перейдите в представление списка, чтобы перетащить блок «Мета-публикация» под заголовком, а затем разверните этот блок, чтобы увидеть, как он организован. Удалите разделитель и разделитель, и у вас останется блок «Группа», который имеет два столбца со строками и стопку.

Мы не будем показывать теги, так что это излишне сложно.

Мы упростим все это, сохранив только строку, содержащую блок «Дата публикации» и «Категории», перетащив ее на первый уровень под блоком «Мета публикации». Теперь вы можете удалить блок «Группа».

Сделайте центр строки выровненным по центру, измените первый абзац на смайлик календаря, а второй абзац на смайлик папки, затем установите интервал между блоками и отступы на 1.

Поздравляем, мы закончили, и у вас есть собственный дизайн веб-сайта WordPress, который вы сможете редактировать/настраивать в будущем!

Будущее полносайтового редактирования WordPress

Получите одностраничное руководство, если хотите воссоздать то, через что мы прошли сегодня.

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

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

Я уверен, что они продолжат добавлять функции по мере выхода новых версий WordPress.