Använda anpassade bildstorlekar i ditt tema och ändra storlek på befintliga bilder

I den här handledningen lär du dig att generera anpassade bilder för att du ska kunna använda i ditt WordPress-tema. Varför använda anpassade bildstorlekar? Så du behöver inte redigera varje bild som du laddar upp till mediebiblioteket. På så sätt genereras varje bild uppladdad automatiskt av alla anpassade bildstorlekar. Den kan sättas in i posten eller sidan med hjälp av Media Gallery eller från loopen. Fortsätt läsa för att få reda på hur.


Steg 1 Definiera anpassade bildstorlekar

För ditt tema för att stödja anpassade bildstorlekar måste du redigera funktionerna .php-filen som finns i din temanmapp. Öppna ditt temas funktioner.php och kolla om du har en rad som ser ut så här:

add_action ('after_setup_theme', 'function_name');

Denna krok kallas under ett temas initialisering. Det brukar användas för att utföra grundläggande inställningar, registrerings- och initialiseringsåtgärder för ett tema där "funktionsnamn" är namnet på den funktion som ska kallas.

Om du hittat en rad så hittar du också metoden med samma namn som den andra parametern från den add_action-metoden.

Om du inte kan hitta en linje som ser ut så här borde du lägga till den och skapa även en metodnamn som den andra parametern:

add_action ('after_setup_theme', 'setup'); funktion setup () // ...

För att aktivera efter miniatyrbilder för ditt tema lägg till följande rader i den ovan angivna metoden:

funktion setup () // ... add_theme_support ('post-miniatyrer'); // Den här funktionen möjliggör stöd efter ett miniatyrbild för ett tema // För att endast aktivera inlägg: // add_theme_support ('post thumbnails', array ('post')); // För att bara aktivera inlägg och anpassade posttyper: // add_theme_support ("post-miniatyrer", array ("post", "film")); // Registrera en ny bildstorlek. // Det betyder att WordPress skapar en kopia av postbilden med angivna dimensioner // när du laddar upp en ny bild. Registrera så många som behövs. // Lägga till anpassade bildstorlekar (namn, bredd, höjd, grödor) add_image_size ('featured-image', 620, 200, true); // ...

Steg 2 Visa bilder med egna storlekar

Infoga anpassad bild i post med hjälp av Media Gallery

För att infoga en bild i ett inlägg eller en sida från mediagalleriet lägger du in följande filter i funktionen.php-filen:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); funktion custom_image_sizes_choose ($ storlekar) $ custom_sizes = array ('featured-image' => 'Featured Image'); returnera array_merge ($ storlekar, $ custom_sizes); 

Vad den här koden gör är att den sammanfogar dina anpassade bildstorlekar med den som definieras i WordPress så resultatet blir bilden nedan.

Infoga anpassad bild i loopen

För att till exempel visa bilden som heter "featured-image", måste du lägga till följande rader i slingan:

 'utvald bild' ) ); endif; ?>

Detta kontrollerar om posten / sidan har någon bild bifogad och kommer att mata ut en tagg som visar bilden i önskad storlek.


Steg 3 Ändra storlek på befintliga bilder

För den här uppgiften finns ett plugin för att hjälpa till, Regenerera miniatyrer. Det kan regenerera alla, en sats eller individuella bilder. Om du ändrar bildstorlekar och regenererar dem, kommer bilderna med tidigare dimensioner inte att raderas.


Exempel

Låt oss säga att du skulle vilja använda denna funktion inom ditt tema. Från / Wp-content / themes / namn-of-the-tema mappen öppen functions.php med din favorit textredigerare. Om ditt tema inte har en after_setup_theme Åtgärd definierad, du måste lägga till en. Koden för anpassade bildstorlekar läggs till i den definierade metoden.

Obs! Det här är reserverade bildstorleknamn: tumme, miniatyrbild, medium, stor, efter miniatyrbild. Lägga till en anpassad bildstorlek med ett reserverat namn kommer att åsidosätta dess fördefinierade värden.

add_action ('after_setup_theme', 'setup'); funktion setup () // ... add_theme_support ('post-miniatyrer'); // Den här funktionen möjliggör stöd efter ett miniatyrbild för ett tema add_image_size ('header', 600, 200, true); // header image add_image_size ('custom-size1', 400, 200); // 400 pixlar bred och 200 pixlar lång, ändra storlek proportionellt add_image_size ('custom-size2', 400, 200, true); // 400 pixlar bred och 200 pixlar lång, beskuren // ...

Redigering av content.php eller innehålls single.php eller innehålls page.php filer kan du visa bilden med lämplig storlek för posthuvudet som sätter den nedan eller under posttiteln.

För att göra de andra två anpassade storlekarna som kan väljas från Media Gallery lägg till följande filter:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); funktion custom_image_sizes_choose ($ storlekar) $ custom_sizes = array ('custom-size1' => 'Min anpassade storlek 1', 'custom-size2' => 'Min anpassade storlek 2'); returnera array_merge ($ storlekar, $ custom_sizes); 

Ett verkligt exempel på hur det fungerar och hur det kan användas: gurde.com


referenser

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

Nästa

Så här skapar du ett galleri med anpassade bildstorlekar och lägger till lite JavaScript för att zooma bilderna och växla mellan dem (mus och tangentbord).