wordpressguider.se - 4Använd utvalda bilder i WordPressAv Anders Norén / 6 maj 2014

Använd utvalda bilder i WordPress | WordPressguider.se

Wordpressguider.se Spined HTML

Använd utvalda bilder i WordPress | WordPressguider.se KategorierAllmäntDesignFå besökareFör nybörjareNyheterSEOTemanTilläggTjäna pengarSidorOm WordPressguider.seBli skribentArkiv KategorierAllmäntDesignFå besökareFör nybörjareNyheterSEOTemanTilläggTjäna pengar Populära inlägg 1Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 2WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 3Bättre WordPress-säkerhet i tio stegAv Anders Norén / 6 juli 2014 4Använd utvalda bilder i WordPressAv Anders Norén / 6 maj 2014 5Börja tjäna pengar på din bloggAv Anders Norén / 3 mars 2010 Om WPGOm WordPressguider.seBli skribentArkivSök WordPressguider.se 2DesignAnvänd utvalda bilder i WordPress Av Anders Norén / 6 maj 2014 kl 15:43 Utvalda bilder (engelska post thumbnails) är en funktion som man kan använda till att koppla bilder till inlägg och sidor och presentera bilderna i teman. I den här guiden kommer jag att gå igenom hur man lägger till stöd för utvalda bilder i ett tema och presenterar bilder i inlägg, sidor och widgets.Notera att du måste ha en egen WordPress-installation (som inte ligger på WordPress.org) för att kunna följa den här guiden.Skapa en widget med utvalda bilderÖppna ditt WordPress-temas functions.php-fil, antingen under ”Utseende > Redigerare” i adminpanelen eller i din kodredigerare of choice.Vi börjar med att aktivera utvalda bilder-funktionen. Klistra in följande kodstycke på lämpligt ställe i functions.php:// Lägg till stöd för utvalda bilder if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails', array('post','page') ); }Under det kodstycket klistrar du in följande:// Lägg till bildstorlek if ( function_exists( 'add_image_size' ) ) { add_image_size( 'single', 640, false ); }Funktionen ovan säger till WordPress att lägga till en bildstorlek som är 640 pixlar bred och har namnet ”single”. Så om du nu laddar upp en bild som är 1024×768 pixlar stor kommer WordPress automatiskt att skala ned bilden till 640×480 pixlar, utan att ändra dess proportioner. Ändra 640 till bredden på innehållskolumnen i ditt tema.Ska du visa en lista med de senaste inläggen med tillhörande bilder i sidomenyn eller sidfoten bör du specificera både bildens höjd och bredd, så att alla bilder i listan har samma proportioner. Ändra koden till följande och uppdatera functions.php:// Lägg till bildstorlek if ( function_exists( 'add_image_size' ) ) { add_image_size( 'single', 640, false ); add_image_size( 'widget', 50, 50, true ); }Den enda förändringen i koden är den fjärde raden. Den lägger till en bildstorlek med namnet ”widget” som har storleken 50 gånger 50 pixlar. I och med att vi har ändrat ”false” till ”true” kommer bilden att beskäras för att få rätt proportioner.Använd bilderna i tematOm du laddar upp en bild till din WordPress-installation nu kommer den att beskäras och sparas i de två storlekar som vi angav i förra delen; en för inlägg och en för widgets i sidomenyn. Vi börjar med att lägga till stöd för att visa bilder i inläggen.Öppna single.php i din redigerare. Hur single.php ser ut beror på hur ditt tema är upplagt, men vanligtvis ser den ut ungefär så här:<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><?php the_title(); ?></h2> <?php the_content(); ?> <?php wp_link_pages(); ?> </div> <!-- post --> <?php endwhile; else: ?> <p>Vi hittade inte några inlägg som motsvarar din sökning.</p> <?php endif; ?> Lägg till koden nedan under den andra raden (ovanför inläggets rubrik) och spara filen. Koden säger till temat att om inlägget har en utvald bild som har klippts till i storleken ”single” ska den laddas in i inlägget.<?php the_post_thumbnail( 'single' ); ?>Koppla en utvald bild till ett inläggLogga in på din WordPress-installations adminpanel och gå in på Inlägg > Skapa nytt. Om du har följt instruktionerna ovan korrekt ska en flik med titeln ”Utvald bild” ha dykt upp under inläggets textruta.Klicka på länken ”Ange utvald bild” inuti fliken. Ladda upp en bild och klicka på ”Använd som utvald bild” bredvid ”Infoga i innehåll”-knappen. Sedan kan du stänga bildrutan. Uppdatera/publicera inlägget.Om du öppnar inlägget nu ska bilden du laddade upp visas ovanför inläggets rubrik, klippt till den storlek som du angav tidigare. Om den inte visas bör du gå igenom stegen ovan en gång till.Lägg till bilder i sidomenynFör att kunna följa instruktionerna i det här steget behöver du installera ett tillägg som låter dig använda PHP-kod i widgets. Enhanced Text Widget är ett av dem.Gå in på ”Utseende > Widgets” och lägg till widgeten med namnet Enhanced Text där du vill att inläggslistan ska visas. Klistra in koden nedan i textrutan under ”Content”:<?php query_posts( 'showposts=5'); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post-list-item"> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"> <?php if ( has_post_thumbnail() ) { ?> <?php the_post_thumbnail('widget'); ?> <?php } ?> <p><?php the_title(); ?><br/><span>Postad <?php the_time('j F Y'); ?></span></p> </a> </div> <!-- /post-list-item --> <?php endwhile; ?> <?php endif; ?> <div class="clear"></div> <?php wp_reset_query(); ?>I korthet laddar koden in bloggens fem senaste inlägg och presenterar varje inlägg med dess utvalda bild (50×50 pixlar), dess titel och tidpunkten då den publicerades. Spara widgeten.Går du in på bloggens startsida bör listan med inlägg visas i sidomenyn, men den ser förmodligen inte något vidare ut. Öppna ditt temas CSS-fil (style.css), klistra in koden nedan på lämpligt ställe och spara ändringarna..clear { clear: both; } .product { margin-bottom: 10px; clear: both; } .product img { float: left; margin-right: 10px; padding: 5px; background: #fafafa; border: 1px solid #eee; } .product a { text-decoration: none; } .product p { padding-top: 12px; margin-left: 62px; margin-bottom: 0; height: 50px; } .product a p { color: #222; font-size: 14px; font-weight: bold; } .product a p span { color: #666; font-weight: normal; font-size: 13px; }Nu bör din bloggs fem senaste inlägg visas med utvalda bilder i en prydlig lista.AvslutningDen här guiden innehåller två exempel på vad du kan göra med utvalda bilder, men funktionen har många fler användningsområden. Du kan använda den till att visa en slider med bilder från de senaste inläggen, du kan visa bilder från utvalda kategorier i en widget, och du välja ut en unik bakgrundsbild för varje sida/inlägg på bloggen. Anders NorénJag startade min första WordPress-sajt 2007 och har designat åtskilliga sajter på plattformen sedan dess, både som hobby och som uppehälle. Jag grundade WordPressguider.se år 2010. www.andersnoren.se info@wordpressguider.se @andersnoren Visa inläggens lästid i WordPress Lägg till delningsknappar i RSS-flödet på en WordPress-webbplats Lägg in annonser mellan inlägg i WordPress 2 kommentarer Lägg till kommentar → marie levin6 augusti 2014 kl. 22:24hej. HUR gör jag för att få en bild som hänger med när jag skall dela min länk någonstans. nu blir den bara vit. tom. Käthe22 april 2015 kl. 14:03Hur gör jag tvärtom? Jag vill använda ett tema som visar utvalda bilder på framsidan, men jag vill istället att första bilden från inlägget visas.Skriv en kommentar Avbryt svarDin e-postadress kommer inte att publiceras.Namn *E-postadress *Webbplats Hur du startar en WP blogg Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 Bättre WordPress-säkerhet i tio stegAv Anders Norén / 6 juli 2014 Använd utvalda bilder i WordPressAv Anders Norén / 6 maj 2014 Börja tjäna pengar på din bloggAv Anders Norén / 3 mars 2010 Att välja webbhotell för WordPress 2018Av Anders Norén / 8 januari 2018 WordPressTeman.com 2.0 lanserasAv Anders Norén / 5 december 2014 Lägg till delningsknappar i RSS-flödet på en WordPress-webbplatsAv Anders Norén / 18 november 2014 Snabba upp WordPress: En fallstudie med WordPressguider.seAv Anders Norén / 14 november 2014 Grundkurs i child themes för WordPressAv Anders Norén / 7 november 2014 Tack!Linda / 25 september 2018 Vart tog Oderland vägen som kanske är ett av de bästa när det gäller W...Danne / 19 augusti 2018 Gammalt men fortfarande aktuellt - tack för bra tips :-)Jonas / 15 juli 2018 Jag vill rekommendera tillägget Shortpixel Image Optimizer för automat...Staffan / 26 april 2018 Tack för rak och enkel information. Har ingen blogg än men snartJill / 9 mars 2018 Allmänt15 inläggDesign15 inläggFå besökare2 inläggFör nybörjare17 inläggNyheter1 inläggSEO4 inläggTeman6 inläggTillägg5 inläggTjäna pengar4 inlägg 1 AllmäntFlera WordPress-installationer på samma databas 1 SEOOptimera din WordPress-titel 5 För nybörjareVad är permalänkar? 9 DesignLägg in annonser mellan inlägg i WordPress Gratis Garfunkel GarfunkelGarfunkel visar dina bilder, videoklipp och inlägg i ett stiligt rutmönster. Demo Läs mer © 2016 Wordpressguider.seHemOm WPGBli skribentArkiv Använder du WPG, godkänner du cookies. mer info OKWordPressguider.se använder cookies för att ge användarna en riktigt bra användarupplevelse. Genom att använda sajten godkänner du att cookies används.Stäng