Usuń atrybuty szerokości i wysokości z obrazów WordPressa
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:
- Dostęp do panelu WordPress: Zaloguj się do swojego panelu administracyjnego WordPress.
- 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ę.
- 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. - Wstaw kod: Skopiuj podany kod i wklej go na końcu pliku
functions.php
lub pliku swojej wtyczki. - Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
- 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.