Как добавить PHP в тему для отображения атрибутов alt

Вопрос или проблема

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

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

<?php echo '<img src="' . $src[0] . '" alt="' . get_the_title() . '" />'; ?>

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

Это сайт https://www.emabarkboathire.com.au, а это основные страницы-изменения. https://www.embarkboathire.com.au/boats/
https://www.embarkboathire.com.au/boats/galaxy/

У меня нет опыта работы с PHP, но я неплохо ориентируюсь в WordPress.

Любая помощь будет очень признательна.

Спасибо

Дэнни

<div class="ycbe-gallery ycbe-new">
    <span class="ycbe-new-to-upload"><?php _e( 'To be uploaded on save:', 'yachtcharter' ); ?></span>
    <br clear="all">
</div>

<div class="ycbe-gallery ycbe-add-attachments">
    <a id="ycbe-add-attachments" class="ycbe-add-attachments"><?php _e( 'Add to gallery', 'yachtcharter' ); ?></a>
</div>

<input type="hidden" name="ycbe_gallery_hidden" id="ycbe-gallery-hidden" value="<?php echo $value; ?>">

<script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
        var _custom_media = true,
        _orig_send_attachment = wp.media.editor.send.attachment;
        $( '#ycbe-add-attachments' ).click( function( e ) {
            var send_attachment_bkp = wp.media.editor.send.attachment;
            var button = $(this);
            var id = button.attr( 'class' ).replace( '_button', '' );
            _custom_media = true;
            wp.media.editor.send.attachment = function( props, attachment ){
                if ( _custom_media ) {
                    if( attachment.type == 'image' && attachment.subtype !== 'svg+xml' ) {
                        if($( '#ycbe-gallery-hidden' ).val() == '') {
                            $( '#ycbe-gallery-hidden' ).val(attachment.id);
                        } else {
                            oldVal = $( '#ycbe-gallery-hidden' ).val();
                            $( '#ycbe-gallery-hidden' ).val( oldVal + ',' + attachment.id );
                        }
                        var src = attachment.sizes.thumbnail.url;
                        $( '.ycbe-gallery.ycbe-new' ).show();
                        $( '.ycbe-gallery.ycbe-new span' ).after( '<div class="ycbe-attachment"><img width="64" height="64" src="' + src + '" data-id="' + attachment.id + '" class="ycbe-attached-file ycbe-image" /><a class="ycbe-remove-attachment" data-id="' + attachment.id + '">Remove</a></div>' );
                    }
                } else {
                    return _orig_send_attachment.apply( this, [props, attachment] );
                };
            }
            wp.media.editor.open(button);
            return false;

        });

        $( '.add_media' ).on( 'click', function() {
            _custom_media = false;
        });

        $( '.ycbe-remove-attachment' ).live( 'click', function() {
            if( confirm( 'Are you sure you want to remove this attachment?' ) ) {
                valArr = $( '#ycbe-gallery-hidden' ).val().split( ',' );
                var index = valArr.indexOf( $( this ).attr( 'data-id' ) );
                if ( index > -1 ) {
                    valArr.splice( index, 1 );
                    $( this ).parent().remove();
                }
                $( '#ycbe-gallery-hidden' ).val( valArr.toString() );
            }
        });

    });
</script>

Попробуйте добавить этот код в файл вашей темы function.php:

function isa_add_img_title( $attr, $attachment = null ) {

    $img_title = trim( strip_tags( $attachment->post_title ) );

    $attr['title'] = $img_title;
    $attr['alt'] = $img_title;

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );

Ответ или решение

Чтобы добавить атрибуты alt к изображениям в вашей теме WordPress, важно правильно внедрить PHP-код в соответствующие файлы шаблона. Поскольку ваша тема была модифицирована компанией, которая больше не предоставляет поддержку, вам придется внести изменения самостоятельно. Рассмотрим, как это сделать детально.

1. Понимание текущей ситуации

Согласно предоставленному вами коду, текущий способ вывода изображений выглядит следующим образом:

<?php echo '<img src="' . $src[0] . '" alt="' . get_the_title() . '" />'; ?>

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

2. Рекомендуемое решение

Для того чтобы гарантированно отображать атрибуты alt для изображений, описанных в вашей галерее, я предлагаю обновить код, добавив новый фильтр в файл functions.php. Этот код будет автоматически добавлять alt- и title-атрибуты, основываясь на заголовках вложений.

Добавьте следующий код в файл functions.php вашей активной темы:

function isa_add_img_title( $attr, $attachment = null ) {
    $img_title = trim( strip_tags( $attachment->post_title ) );

    $attr['title'] = $img_title;
    $attr['alt'] = $img_title;

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'isa_add_img_title', 10, 2 );

3. Что делает этот код?

  • Функция isa_add_img_title: Эта функция принимает атрибуты изображения и вложение в качестве параметров. Она извлекает заголовок вложения с помощью post_title, очищает его от лишних тегов и пробелов, а затем добавляет значение заголовка как для alt, так и для title атрибутов.
  • Фильтрация add_filter: Этот вызов подключает вашу функцию ко всем атрибутам изображений, что делает ее активной на уровне всего сайта.

4. Проверка корректности изменений

После внесения вышеописанных изменений, обязательно протестируйте:

  1. Загрузите новое изображение в медиатеку WordPress и задайте ему заголовок.
  2. Вставьте изображение в пост или страницу.
  3. Проверьте HTML-код страницы (правый клик по изображению в вашем браузере и выбор "Просмотреть код" или "Inspect"). Убедитесь, что атрибуты alt и title отображаются правильно.

5. SEO-оптимизация

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

Заключение

Эти изменения не только решат проблему с отображением атрибутов alt для изображений, но и сделают ваш сайт более доступным и SEO-оптимизированным. Если у вас возникнут сложности с редактированием файлов, не забудьте сделать резервную копию вашей темы перед внесением любых изменений. Удачи вам в оптимизации вашего сайта!

Оцените материал
Добавить комментарий

Капча загружается...