Usuń atrybuty szerokości i wysokości z obrazów WordPressa

Jak usunąć atrybuty szerokości i wysokości z obrazów w WordPressie; WordPress usuń atrybuty rozmiaru obrazu; Zatrzymaj WordPress przed dodawaniem szerokości i wysokości do obrazów; Usuń szerokość i wysokość z obrazów WordPress; Obrazy WordPress bez atrybutów szerokości i wysokości; Wyłącz wymiary obrazów w WordPressie; Responsywne obrazy WordPress - usuń atrybuty rozmiaru; Usuń zakodowane na sztywno wymiary obrazów w WordPressie; WordPress zapobiegaj dodawaniu szerokości i wysokości do obrazów; Usuń atrybuty szerokości i wysokości z obrazów WordPress;

Objaśnienie

Aby uczynić obrazy w WordPressie bardziej elastycznymi i responsywnymi, możesz usunąć atrybuty stałej szerokości i wysokości. Pomaga to obrazom lepiej dostosować się do różnych urządzeń i rozmiarów ekranów.

Oto jak to działa:

  • Pierwsza funkcja celuje w obrazy w treści Twojego posta. Przeszukuje HTML i usuwa wszelkie atrybuty szerokości i wysokości z tagów obrazów. Dzięki temu obrazy mogą naturalnie zmieniać rozmiar, nie będąc ograniczonymi przez stałe wymiary.
  • Druga funkcja robi to samo dla miniatur postów. Usuwa te atrybuty z wyjścia HTML miniatur, co pozwala im być bardziej adaptacyjnymi w różnych układach.

Obie funkcje wykorzystują metodę zwaną "wyrażeniami regularnymi", aby znaleźć i usunąć te atrybuty. Po skonfigurowaniu, te zmiany automatycznie stosują się do Twojej treści i miniatur, czyniąc Twoją stronę bardziej responsywną bez dodatkowego wysiłku z Twojej strony.

Kod

<?php
/**
 * Remove width and height attributes from images in WordPress content.
 *
 * This function filters the HTML content to remove the width and height attributes
 * from image tags, allowing for more responsive image handling.
 *
 * @param string $content The content of the post.
 * @return string Modified content with width and height attributes removed from images.
 */
function wp_dudecom_remove_image_size_attributes($content) {
    // Use regular expressions to remove width and height attributes from image tags
    $content = preg_replace('/<img(.*?)width=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content);
    $content = preg_replace('/<img(.*?)height=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content);
    return $content;
}

// Add the filter to the content
add_filter('the_content', 'wp_dudecom_remove_image_size_attributes', 10);

/**
 * Remove width and height attributes from post thumbnails.
 *
 * This function filters the HTML output of post thumbnails to remove the width
 * and height attributes, ensuring responsive display.
 *
 * @param string $html The HTML output of the post thumbnail.
 * @return string Modified HTML with width and height attributes removed.
 */
function wp_dudecom_remove_thumbnail_dimensions($html) {
    // Use regular expressions to remove width and height attributes from image tags
    $html = preg_replace('/(width|height)=["\']\d+["\']\s?/', '', $html);
    return $html;
}

// Add the filter to post thumbnails
add_filter('post_thumbnail_html', 'wp_dudecom_remove_thumbnail_dimensions', 10);
add_filter('image_send_to_editor', 'wp_dudecom_remove_thumbnail_dimensions', 10);
?>

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku niestandardowej wtyczki.

Wymagania wstępne: Brak.

Kroki wdrożenia:

  1. Dostęp do panelu WordPress: Zaloguj się do swojego panelu administracyjnego WordPress.
  2. Przejdź do Edytora motywów: Przejdź do Wygląd > Edytor motywów. Jeśli wolisz używać wtyczki, przejdź do Wtyczki > Edytor i wybierz swoją niestandardową wtyczkę.
  3. Otwórz functions.php lub plik wtyczki: W Edytorze motywów znajdź i kliknij na functions.php z listy plików motywu po prawej stronie. Jeśli używasz wtyczki, otwórz główny plik wtyczki.
  4. Wstaw kod: Skopiuj podany kod i wklej go na końcu pliku functions.php lub pliku swojej wtyczki.
  5. Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
  6. Przetestuj swoją stronę: Odwiedź swoją stronę i sprawdź, czy obrazy w postach oraz miniaturki są teraz responsywne, bez ustalonych atrybutów szerokości i wysokości.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy w zakresie wdrożeń WordPress i zaawansowanej funkcjonalności.