Рубрика: WordPress

Доводилось ли вам видеть в нижней части страницы сайтов несоответствие с текущим годом?

Например, на дворе 2023 год и посещая тот или иной сайт, вы видите в его нижней части следующее:

© ИП Пупкин В.И., 2012

Согласитесь, что смотрится это немного несуразно (в плане соответствия года) и невольно заставляет задуматься, о том, что сайт давненько не обновляли 🙂

Как правильно оформлять знак авторского права?

Отмечу, что все-таки, знак авторского права носит исключительно информационный характер и его оформление не критично в РФ, хотя в некоторых странах его несоответствие реальной картине может преследоваться по закону.

(©) — знак охраны авторского права, представляет собой латинскую букву C (первая буква слова «copyright») в окружности.

Подробнее Источник №1, Источник №2

Тем не менее, существует ГОСТ Р 7.0.1-2003, по которому следует оформлять авторское право на интеллектуальный продукт. Но в реальной картине мира оформляют его совершенно в произвольном виде, как вздумается 🙂

Эффектно выглядит запись с даты основания по текущий год. Например, на сайте студии Артемия Лебедева можно увидеть следующее:

Ставим себе Задачу: сделать текущий год динамическим. То есть, чтобы при наступлении 2024-го запись в примере выглядела 1995-2024.

Реализация

Решить данную задачу можно по разному, но мы рассмотрим универсальный способ — при помощи шорткода. add_shortcode это функция WordPress, которая позволяет прикрепить функцию-обработчик и затем безопасно вызывать её внутри контента вашего сайта.

В данном примере мы передаём два аргумента: current_year — это название шорткода, а второй — безымянная функция-обработчик.

add_shortcode( 'current_year', function() {
	return wp_date( 'Y' );
} );

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

©  «Code is Poetry», [current_year]

Или так:

©  «Code is Poetry», 2011-[current_year]

Я указал в редакторе блоков Гутенберг следующим образом:

На клиентской части сайта мы наблюдаем должный результат:

Теперь нам не стоит переживать о текущем годе — данные будут актуальными на текущий момент времени.

Преимущество данного метода в том, что теперь мы имеем своего рода функцию-помощника (helper), которую можем использовать в любой части контента. Например, я вы зову её в следующем абзаце, в котором всегда должен будет отображаться актуальный год.

2025

С выпуском WordPress версии 5.9 (в январе 2022 года) появилась совершенно новая парадигма в разработки тем — разработка блочной темы. Этот урок посвящен процессу установки и настройки базовой дочерней темы для блочных тем.

Дочерняя тема — это просто часть темы, которая зависит от родительской темы и без неё она работать не будет.

Обычно дочерние темы создают чтобы сэкономить время на разработке. Выбор делается на понравившемся шаблоне оформления и сразу создается на его основе дочерняя тема (или тема-ребёнок).

Такой подход является хорошим тоном и позволяет вам избежать в будущем массу проблем и неожиданностей, основная неожиданность из которых — правка в родительской теме файлов. Так делать не надо! Ведь, после обновления темы (обновления регулярно выходят) вы затрёте ваши правки и как следствие — потеряете их. А в случае, если вы вносите правки в тему-ребенка (дочернюю тему), то даже после обновления темы-родителя ваши правки не будут затронуты и останутся работать, выполняя свои функции.

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

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

https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/

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

Это правило хорошего тона при разработке.

Создание простой дочерней блочной темы

1. Создайте пустую папку (директорию) для вашей будущей темы-ребёнка

Чтобы не запутаться, я рекомендую добавлять просто постфикс -child к названию той директории, тема которой выступает в качестве родительской.

Например, мы создаем дочернюю тему на основе twentytwentyfour, соответственно, название директории для темы-ребёнка будет twentytwentyfour-child

Такой подход позволит вам не запутаться в связях дочерних тем и родительских.

2. Создайте в этой папке файл style.css

В файле стилей (style.css) внесите следующие необходимые данные:

/*
 Theme Name: [ИМЯ ВАШЕЙ ТЕМЫ]
 Description: Это дочерняя тема. В качестве родительской выступает тема Twenty Twenty-Four.
 Author: [ВАШЕ ИМЯ]
 Author URI: [ВАШ АДРЕС САЙТА/URL]
 Template: twentytwentyfour
 */

Важно! В строке Template обязательно укажите название папки темы-родителя, чтобы WordPress понимал из какой директории ему наследовать файлы.

Пример моего файла:

В панели управления мы можем наблюдать уже первые изменения:

3. Добавьте скриншот

Наверняка вы заметили как некрасиво и безлико выглядит квадратик с нашей темой. Чтобы это исправить, мы можем позаимствовать из родительской темы специальный файл для заполнения этого квадратика — screenshot.png

Скопируйте этот файлик из родительской темы в свою дочернюю. Если файл отсутствует — создайте его (размер 1200 на 900 пикселей).

Результат моей творческой фантазии можно увидеть ниже:

Теперь в нашей папке уже два файла: style.css и screenshot.png и раздел с доступными темами для активации тоже преобразился 🙂

4. Создайте файл theme.json

В завершении, создайте файл с названием theme.json и скопируйте в него всё что есть в одноименном файле родительской темы.

theme.json— это файл конфигурации, который позволяет вам определять глобальные настройки, стили и многое другое для вашей темы (для визуального редактора, который называется Gutenberg). 

Файл работает как с блочными, так и с классическими темами. 

https://developer.wordpress.org/themes/global-settings-and-styles/introduction-to-theme-json/

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

Всё это тянется из файла theme.json. Попробуйте найти взаимосвязь. Откройте этот файл вашей дочерней темы и попробуйте удалить первые три, четыре блока в фигурных скобках раздела palette:

			"palette": [
				{
					"color": "#f9f9f9",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#ffffff",
					"name": "Base / Two",
					"slug": "base-2"
				},
				{
					"color": "#111111",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#636363",
					"name": "Contrast / Two",
					"slug": "contrast-2"
				},

После сохранения вернитесь в редактор Гутенберг и исследуйте область цветовых схем для текста и фона при редактировании текста:

Вы непременно обнаружите, что число цветовых кружков уменьшилось.

Ну вот и всё!

Мы создали дочернюю тему на основе блочной темы и разобрались в минимальном количестве файлов и их назначения.

Создание при помощи плагина

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

Страница плагина Create Block Theme

Важно понимать, что сайт на CMS WordPress состоит из двух частей:

1. Файлы сайта на хостинге
2. База данных

Ниже мы рассмотрим пошагово путь установки CMS WordPress с момента первого экрана — выбора языка, до действующего сайта.

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

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

Далее мы видим примечание, о том что для соединения с базой данных (там наш WordPress будет хранить данные и контент сайта) нам необходимо знать параметры для соединения.

В самом начале я отмечал, что сайт состоит из двух частей: файлы и БД (база данных). Детали я пропускаю, подразумевая что вы обладаете уже этими данными

И на следующем шаге мы как раз то и должны их указать!

После ввода параметров для соединения с Базой Данных мы переходим к следующему экрану:

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

В случае успеха мы переходим непосредственно к установке:

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

Рекомендуется указывать действующий E-mail, так как может возникнуть ситуация восстановления пароля и ссылку для восстановления можно будет получить на указанный действующий адрес почты.

И вот финальный экран, который поздравляет нас об успешной установки WordPress.

Теперь наш сайт делится на две части:

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

Как попасть в панель управления сайтом на WordPress?

Чтобы попасть в приватную часть вашего сайта для его управления, необходимо дописать после основного адреса сайта несколько символов:

/wp-admin

Получится примерно следующее:

https://ваш-сайт.ru/wp-admin