Как добавить редактирование блока в wordpress?
Натягиваю вёрстку на wordpress.
Есть блок в котором есть другие блоки поменьше.
Как можно сделать так, что-бы иметь возможность редактировать данные блоки?
Нужно изменять URL ссылку, Изображение (там сейчас заглушки чёрные стоят на скрине) и название (видно при наведении на скрине).
Добавлять данные блоки и удалять а так-же перемещать между собой.
У меня получается просто залить вёрстку но суть в том, что-бы облегчить добавление и редактирование контента.
Попробовал сделать это через плагин Advanced Custom Fields (ACF)
На странице сайта в php файла добавил код для подключения плагина
Но я не понимаю это нужно каждый раз мне тогда редактировать php файл для добавления нового блока.
И я так и не понял где отредактировать содержимое его.
<div class="wrapper-the-work"> <div class="the-work"> <a class="myworks__mysite--piture" href="my_works/01/index.html" target="_blank"> <img src="<?php echo get_template_directory_uri(); ?>/media/job_1.webp" alt="image"> <div class="myworks__mysite--open"> <p class="ff2 fz3 myworks__mysite--open-text">site</p> </div> </a> </div> </div> |
<div class="wrapper-the-work"> <div class="the-work"> <a class="myworks__mysite--piture" href="my_works/01/index.html" target="_blank"> <img src="<?php echo get_template_directory_uri(); ?>/media/job_1.webp" alt="image"> <div class="myworks__mysite--open"> <p class="ff2 fz3 myworks__mysite--open-text">site</p> </div> </a> </div> </div>
Дополнительно:
Brendan Castaneda @ae_ph Автор вопроса I'm a owl ) Я использовал плагин "Getting Started with ACF"
В панели Wordpress нажимаем на плагин "ACF"
Группы полей, нажимаем "добавить"
Тип поля, выбираем "повторитель 'Repeater - на английском'"
Документация – www. advancedcustomfields .com/resources/repeater/
Функция платная но вы знаете что делать :D ☠️
В гугле бейте "Скачать Advanced Custom Fields Pro 6.1.1" и там вроде самый первый сайт wp-club.
Опять-же на свой страх и риск в плане безопасности! Я не призываю, просто делюсь.
Заполняем поля "Ярлык поля" и "Имя поля" – название должно совпадать с тем что у вас в файле php
Например my_works_fields
P.S. Должно совпадать вроде "Имя поля" а не "Ярлык поля" я не проверял ещё везде указал одно и то-же...
Вот мой код для примера Обратите внимание в коде я добавляю только 3 поля! Для текста, ссылки и изображения. Если вы будете в шаблоне плагина добавлять ещё что-то соответственно нужно дописать код!
<?php if (have_rows('my_works_fields')) : ?> <?php while (have_rows('my_works_fields')) : the_row(); ?> <div class="wrapper-the-work"> <div class="the-work"> <!-- Получаем значения полей для каждого блока --> <?php $link = get_sub_field('Link'); $image = get_sub_field('Image'); $title = get_sub_field('Description'); ?> <a class="myworks__mysite--piture" href="<?php echo $link; ?>" target="_blank"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"> <div class="myworks__mysite--open"> <p class="ff2 fz3 myworks__mysite--open-text"><?php echo $title; ?></p> </div> </a> </div> </div> <?php endwhile; ?> <?php endif; ?> |
<?php if (have_rows('my_works_fields')) : ?> <?php while (have_rows('my_works_fields')) : the_row(); ?> <div class="wrapper-the-work"> <div class="the-work"> <!-- Получаем значения полей для каждого блока --> <?php $link = get_sub_field('Link'); $image = get_sub_field('Image'); $title = get_sub_field('Description'); ?> <a class="myworks__mysite--piture" href="<?php echo $link; ?>" target="_blank"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"> <div class="myworks__mysite--open"> <p class="ff2 fz3 myworks__mysite--open-text"><?php echo $title; ?></p> </div> </a> </div> </div> <?php endwhile; ?> <?php endif; ?>
Добавляем нужные поля, опять-же "Имя поля" или "Ярлык поля" должны совпадать с теми что в файле PHP!
Вот пример $title = get_sub_field('Description');
Чуть ниже я выбрал "блок" среди доступных: "таблица", "блок", "строка".
Спускаемся ещё ниже и в настройках выбираем привязку к нужно странице на сайте
Всё все нужные поля заполнили и создали шаблон для блока, в правом верхнем углу жмём кнопку "Save Changes"
Далее идём в панель Wordpress, переходим в раздел "Страницы" и нажимаем изменить нашу страницу
Тут страницу где у вас вставлен php код "как я выше показывал".
Там мы видим наш шаблон который мы создали в плагине "ACF"
Заполняем все поля которые насоздавали...
Если хотим добавить ещё один блок, жмём кнопку "добавить" и у нас появится ещё один точно такой-же шаблон.
Вот пример
Возможно вам нужно будет на этой странице в правом верхнем углу нажать на "Три вертикальные точки"
В самом низу нажать "предпочтения", далее выбрать с лева блок "панели"
И в разделе: (Дополнительно | Добавьте дополнительные области в редактор.) Включить кнопку.
После всего этого у вас должно всё работать!
Больше не нужно заходить в файл php и добавлять каждый раз код нового блока.
Достаточно того кода который я привёл выше.
Нужен новый блок, зашли на страницу добавили ещё один шаблон, заполнили его, нажали кнопку "обновит" страницу и всё у вас ещё один блок на сайте.
- Прошу не ругаться админа я сжал все изображения для уменьшения веса!
Ответы:
В идеале это можно сделать для редактора Gutenberg, создав там специальный блок, чтобы потом из админки собирать контент как душе угодно (и легко это редактировать).
Писать там кода придется немало, но результат будет тот, что надо.
- Есть где-нибудь видео или туториал как что-то подобное делается через Gutenberg?
Слабо представляю себе как и что нужно делать - Brendan Castaneda, я хотел приложить ссылку, но хабр заблокировал. Сейчас попробую найти другую.
- Brendan Castaneda, вот, например, небольшая статья по теме. И в целом можно поискать по запросу ’кастомные блоки gutenberg’
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если внутри секции нужно добавлять, удалять, менять порядок, ссылку, изображение и название элементов, не нужно каждый раз править PHP. Для такой задачи в WordPress обычно используют либо ACF Repeater, либо кастомный Gutenberg-блок с
InnerBlocks. Самый быстрый путь для натяжки вёрстки — ACF Repeater.Создайте группу полей ACF для нужной страницы: поле-повторитель
works, внутри негоlink,image,title. Тогда редактор сможет добавлять строки, удалять их и перетаскивать в админке. В шаблоне вывод будет один раз:<?php if (have_rows('works')) : ?> <div class="wrapper-the-work"> <div class="the-work"> <?php while (have_rows('works')) : the_row(); $link = get_sub_field('link'); $image = get_sub_field('image'); $title = get_sub_field('title'); ?> <a class="myworks__mysite--piture" href="<?php echo esc_url($link); ?>"> <?php echo wp_get_attachment_image($image, 'medium'); ?> <span><?php echo esc_html($title); ?></span> </a> <?php endwhile; ?> </div> </div> <?php endif; ?>
Если изображение в ACF возвращается массивом, используйте
$image['ID']; если ID — как в примере выше. Это настраивается в поле ACF.Если сайт активно редактируется через Gutenberg, лучше сделать ACF Block или нативный блок. Но для простой клиентской админки repeater быстрее, понятнее и не требует сборки JavaScript.