Snippet

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

Jak usunąć atrybuty szerokości i wysokości z obrazów w WordPressieWordPress usuń atrybuty rozmiaru obrazuZatrzymaj WordPress przed dodawaniem szerokości i wysokości do obrazówUsuń szerokość i wysokość z obrazów WordPressObrazy WordPress bez atrybutów szerokości i wysokościWyłącz wymiary obrazów w WordPressieResponsywne obrazy WordPress - usuń atrybuty rozmiaruUsuń zakodowane na sztywno wymiary obrazów w WordPressieWordPress zapobiegaj dodawaniu szerokości i wysokości do obrazówUsuń 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

1<?php 2/** 3 * Remove width and height attributes from images in WordPress content. 4 * 5 * This function filters the HTML content to remove the width and height attributes 6 * from image tags, allowing for more responsive image handling. 7 * 8 * @param string $content The content of the post. 9 * @return string Modified content with width and height attributes removed from images. 10 */ 11function wp_dudecom_remove_image_size_attributes($content) { 12 // Use regular expressions to remove width and height attributes from image tags 13 $content = preg_replace('/<img(.*?)width=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content); 14 $content = preg_replace('/<img(.*?)height=["\']\d+["\'](.*?)>/i', '<img$1$2>', $content); 15 return $content; 16} 17 18// Add the filter to the content 19add_filter('the_content', 'wp_dudecom_remove_image_size_attributes', 10); 20 21/** 22 * Remove width and height attributes from post thumbnails. 23 * 24 * This function filters the HTML output of post thumbnails to remove the width 25 * and height attributes, ensuring responsive display. 26 * 27 * @param string $html The HTML output of the post thumbnail. 28 * @return string Modified HTML with width and height attributes removed. 29 */ 30function wp_dudecom_remove_thumbnail_dimensions($html) { 31 // Use regular expressions to remove width and height attributes from image tags 32 $html = preg_replace('/(width|height)=["\']\d+["\']\s?/', '', $html); 33 return $html; 34} 35 36// Add the filter to post thumbnails 37add_filter('post_thumbnail_html', 'wp_dudecom_remove_thumbnail_dimensions', 10); 38add_filter('image_send_to_editor', 'wp_dudecom_remove_thumbnail_dimensions', 10); 39?>

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.