Вопрос или проблема
Я пытаюсь заставить alt отображаться так, как он записан в медиа-библиотеке, но необходимые изменения в коде превышают мои способности. Код ниже был создан для модификации wooCommerce. Лучше всего, что я сейчас могу сделать, это сузить область, где нужно внести изменения. Эта строка требует редактирования, но я не уверен, что нужно изменить:
if ($image) echo '<img src="' . esc_url($image) .'" alt="ИЗМЕНИТЕ ЗДЕСЬ:plugins>woocommerce-CJD">';
Буду очень признателен за любую помощь в том, как заставить отображаться тег alt! Спасибо
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
add_action('after_setup_theme', 'WC_CJD_tweak_action_hooks');
function WC_CJD_tweak_action_hooks () {
// поместите сортировку перед списком категорий
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 30 );
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
}
// добавьте хлебные крошки
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 1 );
add_filter( 'woocommerce_breadcrumb_defaults', 'WC_CJD_modify_breadcrumb' );
function WC_CJD_modify_breadcrumb ($defaults) {
$defaults['delimiter'] = '';
return $defaults;
}
// добавьте область заголовка категории с изображением
add_action('woocommerce_archive_description', 'WC_CJD_wrap_cat_descr_open', 2);
add_action('woocommerce_archive_description', 'WC_CJD_wrap_cat_descr_close', 99);
function WC_CJD_wrap_cat_descr_open () {
if (is_product_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = intval(get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true));
$image = wp_get_attachment_image_url($thumbnail_id, 'shop_catalog');
echo '<div class="cat-header">';
if ($image) echo '<img class="cat-header-bg" src="' . esc_url($image) . '" alt="" />';
echo '<div class="cat-header-content">';
echo '<div class="cat-header-text">';
echo '<h1> Оптовая продажа ' . $cat->name . ' </h1>';
}
}
function WC_CJD_wrap_cat_descr_close () {
if (is_product_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = intval(get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true));
$image = wp_get_attachment_image_url($thumbnail_id, 'shop_catalog');
echo '</div>';
if ($image) echo '<img src="' . esc_url($image) .'" alt="ИЗМЕНИТЕ ЗДЕСЬ:plugins>woocommerce-CJD">';
echo '</div>';
echo '</div>';
}
}
Что-то вроде этого?
$image_alt = get_post_meta( $image->id, '_wp_attachment_image_alt', true);
Чтобы использовать в вашей строке:
if ($image) echo '<img src="' . esc_url($image) .'" alt=".$image_alt.">woocommerce-CJD">';
Используйте это под декларацией $image. В вашей декларации $image убедитесь, что вы получите изображение вложения через функцию wp_get_attachment_image().
Ответ или решение
Для того чтобы добавить атрибут alt к изображению категории в WooCommerce и отобразить его значение так, как оно задано в медиатеке, вам необходимо внести некоторые изменения в ваш код. Я предоставлю вам подробное решение.
Шаги по редактированию кода
-
Получите значение alt для изображения.
Вам нужно использовать функциюget_post_metaдля получения значения атрибута alt, связанного с изображением. Убедитесь, что вы получаете идентификатор изображения с помощью функцииwp_get_attachment_image_url. -
Измените код для вставки значения alt в тег изображения.
Замените атрибут alt в вашем существующем коде.
Вот ваши изменения, аккуратно вставленные в функцию WC_CJD_wrap_cat_descr_close:
function WC_CJD_wrap_cat_descr_close () {
if (is_product_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = intval(get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true));
$image = wp_get_attachment_image_url($thumbnail_id, 'shop_catalog');
echo '</div>';
if ($image) {
// Получаем значение атрибута alt
$image_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
// Вставляем значение alt в тег img
echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($image_alt) . '" />';
}
echo '</div>';
}
}Объяснение изменений
-
Получение значения alt:
$image_alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);Здесь мы получаем значение
altдля изображения, используяget_post_meta(), где$thumbnail_id— это ID вашего изображения категории. -
Использование значения alt в коде:
echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($image_alt) . '" />';Теперь мы вставляем значение
altв тег изображения, используяesc_attr()для экранирования и предотвращения возможных уязвимостей.
Заключение
Эти изменения обеспечат правильное отображение атрибута alt для изображения категории, взятого из библиотеки медиа. Убедитесь, что вы протестировали изменения на своем сайте, чтобы убедиться, что все работает правильно. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться!