Global post wordpress: Используйте get_post() вместо global $post

Все, что вам нужно знать о глобальных стилях WordPress — Go WordPress

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

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

Что такое глобальные стили WordPress?

Глобальные стили — это новая функция WordPress.com, часть полного редактирования сайта. Итак, давайте сделаем шаг назад.

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

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

Как использовать глобальные стили WordPress?

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

• Twenty Twenty-Two
• Arbutus 
• Blockbase 
• Farrow
• Videomaker

В панели управления WordPress выберите Внешний вид → Редактор. Откроется полноценный режим редактирования сайта. Здесь вы можете редактировать глобальные элементы сайта, такие как верхний и нижний колонтитулы и макеты страниц.

В правом верхнем углу щелкните значок Стили , который выглядит как наполовину заполненный круг.

Откроются глобальные стили для вашего сайта. Давайте посмотрим, как вы можете использовать эти стили для настройки дизайна вашего сайта.

1. Установите глобальные шрифты

Если вы нажмете Типографика , вы откроете панель, которая позволит вам редактировать шрифты, используемые для текста и ссылок на вашем веб-сайте.

Выберите либо Текст , либо Ссылки , чтобы просмотреть отдельные параметры.

Щелкните раскрывающийся список под Семейство шрифтов , чтобы выбрать шрифт, который вы хотите использовать. Доступны десятки, и вы можете просмотреть каждый из них по мере выбора. Продумайте внешний вид, к которому вы стремитесь — какое чувство вы хотите передать посетителям сайта? Например, кулинарный блог может использовать дружественный, доступный шрифт Poppins, а бухгалтерская фирма может использовать чистый и профессиональный шрифт Merriweather.

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

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

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

2. Установите глобальные цвета

Откройте панель Цвета , чтобы выбрать оттенки, которые вы хотите использовать в своем дизайне.

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

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

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

Вы можете либо перетащить ползунок цвета, либо щелкнуть значок Показать подробные данные , чтобы добавить код вашего бренда HEX, RGB или HSL.

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

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

Под Тип, выберите из Линейный (переходы по прямой) или Радиальный (переходы по кругу). Вы также можете изменить угол градиента. Не стесняйтесь экспериментировать с этими вариантами, пока не найдете тот образ, который вам нужен.

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

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

3. Отредактируйте макет вашего сайта

На панели Layout вы можете настроить отступы для вашего сайта. Отступ — это пустое пространство вокруг элементов вашего сайта, также называемое пустым пространством. Есть четыре области, для которых вы можете настроить отступы: слева, справа, сверху и снизу. По умолчанию они заблокированы. Это означает, что когда вы настраиваете заполнение, оно обновляет все четыре сразу. Но если вы нажмете значок замка, вы можете изменить их отдельно.

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

4. Изменение стиля определенных блоков

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

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

Блок кнопок

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

Если вы нажмете Кнопка в списке блоков, вы увидите, что вы можете настроить:

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

В идеале вы отредактируете свои кнопки так, чтобы они выделялись на фоне остального контента.

Блок заголовка

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

Выбор Заголовок из списка блоков позволит вам настроить:

• Типографику. Установите размер, высоту строки, внешний вид и межбуквенный интервал.
• Цвета. Выберите цвет фона заголовков, текста и ссылок.
• Макет. Установите поля вокруг каждого заголовка.

Блок поиска

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

Нажмите Найдите в списке блоков. Там вы можете изменить:

• Цвета. Переключение цвета фона и текста.
• Макет. Добавьте границу к блоку и установите радиус для этой границы.

Это, конечно, только три примера блоков, которые вы можете редактировать. Просмотрите весь список и настройте их по своему желанию!

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

Глобальные стили дают вам силу дизайна. Настройте свой сайт так, чтобы он соответствовал цветам вашего бренда, используйте именно те шрифты, которые вам нужны, и меняйте расположение блоков по своему усмотрению — и все это с помощью одной простой в использовании панели настроек.
Хотите больше информации? Прочтите полную документацию по глобальным стилям.

Вот так:

Нравится Загрузка…

Использование глобальных переменных для добавления информации о компании на ваш сайт WordPress его сайт.

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

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

Вот как.

Создание новой настройки администратора

Чтобы моему клиенту было очень легко вводить свои контактные данные, я создал новую настройку в бэкэнде, к которой он мог получить доступ:  Настройки > Контактная информация .

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

Вот что мы будем создавать:

Новый экран с контактной информацией.

Чтобы реализовать это решение на своем сайте, вам нужно добавить код в файл functions.php . Однако всегда лучше создать дочернюю тему, чем возиться с внесением изменений в functions.php. Если вы не знаете, как создать дочернюю тему, или вам нужно освежить знания, ознакомьтесь с нашим подробным руководством «Как создать дочернюю тему WordPress».

Вот код, который я рассмотрю более подробно ниже.

Загрузка сути 8289a309e1a17a6e768d087ac3e61a5d

Код довольно понятен с комментариями, но вот что он делает в двух словах:

Первая функция, theme_settings_page , настраивает экран контактной информации в бэкенде сайта, в то время как следующие три функции извлекают информацию о телефоне, факсе и электронной почте пользователя.

Затем код сообщает WordPress, что нужно поставить в очередь в области формы на экране, в частности, используя add_settings_section , add_settings_field и register_setting функции.

Наконец, чтобы добавить страницу подменю в главное меню настроек, мы используем функцию add_options_page .

Отображение контактной информации во внешнем интерфейсе

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

Добавьте следующий фрагмент на свой сайт на страницу, где вы хотите отображать контактную информацию:

Loading gist 7b4c00412908ca167e086b67658e8be5

Этот сниппет проверяет, заполнен ли номер телефона, и если да, то номер отображается, в противном случае вместо этого отображается сообщение «Support Silence is Golden».

На сайте клиента это выглядит так:

Контактная информация клиента отображается на его сайте с помощью глобальной переменной.