Вопрос или проблема
Мой WP плагин должен показывать некоторые (по умолчанию) изображения на фронтенде и в интерфейсе редактора. Однако URL, сгенерированный моим кодом, ссылается на папку сборки, в то время как изображения находятся не там.
Вот моя структура:
скриншот структуры проекта
lucy-recipe-blocks
-build
-src
--images
---meal-type-dinner.png
--blocks
---lucy-meal-type-block
----block.json
----edit.js
----index.js
----render.php
----save.js
-webpack.config.js
-lucy-recipe-blocks.php
-package.json
Вот код в render.php:
<?php
// $image_url = esc_url('/wp-content/plugins/lucy-recipe-blocks/src/images/meal-type-dinner.jpg');
$image_url = esc_url(plugin_dir_url( __FILE__ ) . 'images/meal-type-dinner.jpg');
$alt_text = esc_attr('Изображение типа блюда');
$category_title = esc_html('Название типа блюда');
?>
<button class="lucy-meal-type">
<img src="<?php echo $image_url; ?>" alt="<?php echo $alt_text; ?>" class="lucy-meal-type__image">
<div class="lucy-meal-type__namespace">
<label class="lucy-meal-type__text"><?php echo $category_title; ?></label>
</div>
</button>
Вот содержимое webpack.config.js:
const path = require('path');
module. Exports = {
entry: {
'lucy-meal-type-block': './src/blocks/lucy-meal-type-block/index.js',
// Добавьте больше блоков по мере необходимости
},
output: {
filename: '[name]/index.js',
path: path.resolve(__dirname, 'build/blocks'),
},
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: '../images/',
},
},
],
},
],
},
};
Но сборка вызывает ошибки:
./src/blocks/lucy-meal-type-block/style.scss 620 bytes [built] [code generated] [1 error]
./src/blocks/lucy-meal-type-block/edit.js 1.24 KiB [built] [code generated] [1 error]
./src/blocks/lucy-meal-type-block/save.js 802 bytes [built] [code generated] [1 error]
При использовании статического URL (закомментированного в показанном коде) и удалении webpack.config.js все работает. Когда я вручную копирую изображение и папку в сборку, это работает с кодом динамической ссылки. Но это явно не то, что мне нужно.
Я знаю, что здесь что-то очевидное ускользает от меня… но что? Связано ли это с тем, что я работаю с многоблочным плагином? Я был бы очень признателен за обратную связь.
Ответ или решение
Вопрос, который вы поднимаете, касается правильного включения изображений в сборку вашего многоблочного плагина для WordPress. Давайте разберем это шаг за шагом и убедимся, что вы получите все необходимые разъяснения по этому вопросу.
Проблема
Согласно вашему описанию, вы столкнулись с проблемой, когда URL для изображений, используемых в плагине, ссылается на папку сборки, в то время как сами изображения там не находятся. Вы хотите, чтобы изображения автоматически копировались в нужную директорию при сборке, и чтобы ссылки на них были динамическими.
Решение
1. Правильная конфигурация Webpack
Ваш текущий webpack.config.js почти правильный, однако нужно убедиться, что вы правильно указываете пути для изображений так, чтобы они были доступны в конечной сборке. Кроме того, необходимо добавить контроль для копирования файлов изображений в выводимую папку.
Вот пример, как можно настроить webpack.config.js для этой цели:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
'lucy-meal-type-block': './src/blocks/lucy-meal-type-block/index.js',
},
output: {
filename: '[name]/index.js',
path: path.resolve(__dirname, 'build/blocks'),
},
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]', // Указываем выходное имя файлов
outputPath: 'build/',
publicPath: 'blocks/', // путь для ссылок в коде
},
},
],
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'src/images', to: 'images' },
],
}),
],
};2. Обновление render.php
Теперь вам нужно будет убедиться, что в render.php правильно формируется URL для изображений. Обновите ваш код следующим образом:
<?php
$image_url = esc_url(plugin_dir_url( __FILE__ ) . 'images/meal-type-dinner.png');
$alt_text = esc_attr('Meal type image');
$category_title = esc_html('Meal Type Name');
?>
<button class="lucy-meal-type">
<img src="<?php echo $image_url; ?>" alt="<?php echo $alt_text; ?>" class="lucy-meal-type__image">
<div class="lucy-meal-type__namespace">
<label class="lucy-meal-type__text"><?php echo $category_title; ?></label>
</div>
</button>3. Компиляция и проверка
После внесения изменений в webpack.config.js и render.php, выполните команду для сборки вашего плагина:
npm run buildУбедитесь, что при выполнении сборки в папке build теперь присутствуют ваши изображения в нужной директории.
4. Примечание по отладке
Если у вас все еще возникают проблемы, убедитесь, что у вас установлены все необходимые зависимости. Иногда ошибки сборки могут быть вызваны отсутствующими или неправильно установленными пакетами. Проверьте, устанавливаются ли все необходимые плагины и зависимости в файле package.json.
Заключение
Используя описанные шаги, вы должны быть в состоянии без проблем включить изображения в сборку вашего многоблочного плагина для WordPress. Не забывайте проверять пути к файлам и настройки Webpack, так как от этого зависит, как ваши ресурсы будут обрабатываться и использоваться в конечном продукте.
Если у вас остались вопросы или требуется дальнейшая помощь, пожалуйста, не стесняйтесь обращаться за разъяснениями.