Als u in het verleden niet de kans hebt gehad om de Shortcode WordPress Gallery te gebruiken, wordt dit een goed beginpunt voor u. Voor anderen die het hebben gebruikt, zullen we enkele functies van de shortcode bespreken die u misschien nog niet hebt overwogen. In deze tutorial behandelen we een specifieke WordPress shortcode, [gallery] en de verschillende manieren om het te gebruiken.
Invoering
WordPress heeft weinig codefragmenten, genaamd shortcodes, die kan worden gebruikt in berichten, pagina's en berichttypen. WordPress heeft veel shortcodes, die kunnen worden toegevoegd aan het gebruik van de shortcode-API, die hier wordt behandeld. Deze shortcodes, geplaatst in het inhoudseditorgebied of geplaatst in een themabestand, zijn verbonden met functies die worden uitgevoerd wanneer de inhoud of het bericht is geladen. WordPress-shortcodes zijn flexibel, waardoor u vaak opties kunt opgeven die de manier aanpassen waarop de shortcode werkt.
Vandaag gaan we specifiek over de shortlist van [gallery], maar je kunt ook onze andere intro-berichten lezen voor gebruik van shortcodes in WordPress:
Aan de slag met WordPress Shortcodes
Snelle tip: Shortcodes gebruiken bij thema-ontwikkeling
Snelle tip: shortcodes verbeteren met de has_shortcode () -functie
Shortcodes gebruiken om het posten met populaire services te versnellen
Standaard gebruik
Ga om aan de slag te gaan met de shortcode van [gallery] naar de sectie Posts en voeg een nieuwe post toe die we 'Gallery Post' zullen noemen. Plaats in het redactiegedeelte de shortcode [galerij] (in de Visuele / HTML-weergave). Druk daarna op Publiceren / bijwerken.
De pagina wordt vernieuwd en als u naar de visuele editor typt, ziet u nu een gestreept kader met een fotopictogram in het midden. Als u op het vak klikt, ziet u in de linkerbovenhoek een ander pictogram voor afbeeldingen. Klik op dat pictogram en er verschijnt een dialoogvenster. In dit dialoogvenster kun je afbeeldingen uploaden en als bijlage aan het bericht toevoegen. Ga je gang en sleep je afbeeldingen naar het drop-gebied of druk op Select Files en kies de foto's die je wilt uploaden.
Nadat u de afbeeldingen hebt geüpload, wilt u op 'Alle wijzigingen opslaan' klikken. Dat brengt u naar het tabblad "Galerij" in hetzelfde dialoogvenster. U ziet miniaturen van alle afbeeldingen die u zojuist hebt geüpload, evenals enkele instellingen. Kijk rond, wijzig enkele instellingen om de verschillende opties te zien. Pas nu de galerijkolommen aan tot 5 en druk vervolgens op "galerijinstellingen bijwerken".
Ga nu door en druk op Bericht bekijken. Je ziet het bericht met een galerijraster van afbeeldingen, met 5 kolommen. Als u op een afbeelding klikt, gaat u naar de bijlage bij de afbeelding.
Galerij Korte code uitvoer
Nu we zien dat de shortcode van [gallery] werkt, laten we het dan doen en de broncode bekijken en zien wat er wordt uitgevoerd.
Wat u hierboven ziet, is het eerste deel van de code die WordPress automatisch per [galerij] shortcode genereert. De CSS wordt automatisch uitgevoerd voor elke [galerij] shortcode die wordt gebruikt. Er zijn standaardelementen en klassen voor elke galerij en elk element dat een afbeelding omwikkelt. Als je een tweede galerij op de pagina had, zou het # gallery-2 ...
Hieronder staat de rest van de code, de HTML gegenereerd door de galerij. Je kunt zien dat de galerij is ingepakt in een div en elke afbeelding en bijschrift is ook verpakt in elementen.
Mooie tekst
Bessen!
Quad in River
Op te slaan
Shortcode-opties
Nu we een idee hebben gekregen van het basisgebruik van de shortcode voor de galerij, laten we eens kijken naar alle verschillende opties voor het aanpassen van de [galerij] uitvoer. De shortcode-opties voor [galerij] omvatten kolommen, ID kaart, grootte, link, omvatten, uitsluiten, orderby, bestellen, itemtag, icontag, en captiontag.
kolommen
[galerijkolommen = "2"]
Als je teruggaat naar het HTML-tabblad in de berichteditor, zie je de shortcode zegt [galerijkolommen = "5"]. Toen we de kolominstellingen in de galerijinterface aanpasten, hebben deze die instellingen doorgegeven aan de shortcode. Laten we nu, in plaats van de grafische interface te gebruiken, handmatig de instellingen opgeven via de shortcode. Laten we de kolommen = "5" veranderen in kolommen = "2". Ga nu View Post - je kunt zien dat er een raster van de galerijafbeeldingen is, en in plaats van 5 afbeeldingen per kolom, is er 2. Laten we de bron opnieuw bekijken op de "Galerijpost" en zien welke WordPress-uitgangen. Vlak voor de galerij in de bron kunnen we de CSS zien - let op het verschil met de vorige CSS-uitvoer? Deze CSS wordt automatisch gegenereerd door de shortcode [shortlist]. Als u de kolommen wijzigt, ziet u hoe de CSS verandert.
De CSS past in feite de breedte aan naar 100 / $ kolommen, waarbij $ kolommen standaard 3 zijn of een getal dat we in de shortcode specificeren .
ID kaart
[galerij]
Standaard haalt de shortcode van de galerij de galerij die bij het huidige bericht-ID hoort. Als u echter een ID opgeeft, kunt u afbeeldingen van een andere post ophalen. Om dit te testen, voeg een nieuw bericht toe en noem het Andere pagina. Ga je gang en upload een aantal verschillende foto's naar Overige pagina en druk op Publiceren. Kijk vervolgens in het URL-adres van de browser naar post =.
Onthoud dat nummer en ga dan terug naar de Galerij Shortcode-post en voeg vervolgens de galerij shortcode [galerij] toe (gebruik de nummer-id van de andere post in plaats van 99). Werk het Gallery Shortcode-bericht bij en ga vervolgens naar Bericht bekijken. Merk op hoe er nu twee galerijen zijn, één met afbeeldingen van het "Gallery Shortcode" -bericht en de andere afbeeldingen van de "Andere pagina". U kunt ook de opties op de shortcode aanpassen, kolommen veranderen, bestellen enz.
grootte
[galerijgrootte = "groot"]
De standaardgrootte voor de galerijafbeeldingen is miniatuur. Andere opties zijn "thumbnail", "medium", "large" en "full". "thumbnail", "medium", "grote formaten zijn gespecificeerd onder WordPress-instellingen> Media." Volledig formaat is gewoon de volledige grootte van de afbeelding. Als we de instelling wijzigen in size = "large" zal WordPress de afbeelding uitvoeren en schaal het naar de bijbehorende dimensies.Het standaard "grote" formaat voor WordPress is Max. breedte 1024 & Max. hoogte 1024, dus afbeeldingen worden geschaald en bijgesneden tot die grootte past. (kanttekening, afbeeldingen kunnen op maat worden bijgesneden in WordPress zoals jij willen.)
* Kanttekening, uw afbeeldingen zullen scheef staan als ze veel groter zijn dan de opgegeven grootte.
orderby
[gallery orderby = "menu_order"]
Standaard worden de afbeeldingen gerangschikt op 'menu_order' (wat ik u ten zeerste aanbeveel). Andere opties zijn 'ID', 'titel' - volgorde op titel. , 'datum' - volgorde voor datum afbeelding is geüpload, 'gewijzigd' - volgorde op laatste datum afbeelding is bijgewerkt of gewijzigd & 'RAND' - artikelen willekeurig bestellen.
bestellen
[galerijorde = "ASC"]
Nadat u de 'orderby' hebt ingesteld, kunt u 'ASC' of 'DESC' instellen (gebruik niet als 'orderby' niet is ingesteld of set is ingesteld op 'menu_order'). Als u bijvoorbeeld wilt dat de afbeeldingen alfabetisch achteruit (Z-A) worden weergegeven op afbeeldingstitel, zorgt u ervoor dat orderby = "title" is en geeft u vervolgens ook order = "DESC" op (standaard is ASC). [gallery orderby = "title" order = "DESC"]
link
[galerijlink = "bestand"]
Standaard koppelen de galerijafbeeldingen elk aan de bijlagepagina van elke afbeelding. Dus met andere woorden, elk beeld gaat naar in essentie één enkele post, met de afbeelding. Als u een link naar de bron van de afbeelding (mijn-beeldnaam.jpg) wilt maken, kunt u deze opgeven [galerijlink = "bestand"].
omvatten
[gallery include = "23,39,45"]
Soms wilt u misschien alleen heel specifieke afbeeldingen opnemen. U kunt dat doen door de include-optie te gebruiken, [gallery include = "23,39,45"] (23,39,45 zijn een voorbeeld, gebruik ID's die overeenkomen met uw afbeeldingen) U geeft de ID door van elke afbeelding die u wilt koppelen. Om de ID's van de afbeeldingen te vinden, gaat u naar Media> Bibliotheek en klikt u vervolgens op elk van de afbeeldingen die u wilt.
Zoek in de browser-URL-balk naar wp-admin / media.php? Attachment_id = en noteer dat nummer en gebruik dat nummer in de galerijkortcode volgens het bovenstaande formaat.
uitsluiten
[gallery exclude = "21,32,43"]
Deze optie is vrijwel precies wat het klinkt. Als u de instructies volgt voor omvatten, vind de ID's van de afbeeldingen die u gebruikt NIET wil in de galerij. Nadat u de afbeeldingen hebt gevonden die u niet wilt opnemen (kijk alleen naar afbeeldingen die u niet wilt en die aan het bericht zijn gekoppeld) [gallery exclude = "21,32,43"]. Let op, als u gebruik maakt van include en uitsluit, breekt het internet! Oké, niet echt, maar het zal niet werken! Het negeert het uitsluiten en gebruikt alleen de include.
Deze opties kunnen feitelijk de HTML-elementen wijzigen die WordPress uitvoert met de galerij shortcode. De standaard optietags zijn als volgt: dl ", icontag =" dt ", captiontag =" dd ". In essentie is de standaard galerij shortcode voor deze opties [galerij itemtag = "dl" icontag = "dt" captiontag = "dd"]. Stel dat we de HTML-tags wilden wijzigen, dan konden we het element dat we wilden gebruiken gemakkelijk doorgeven, zodat we iets als zouden kunnen gebruiken [galerij itemtag = "sectie" icontag = "div" captiontag = "figuur"]. Probeer die opties uit en je ziet het verschil in output.
Mooie tekst
Bessen!
Quad in River
Op te slaan
De galerij bedenken
Als u een thema aan het maken of aanpassen bent, zijn er enkele primaire klassen waar u op wilt letten. Dit zijn klassen die de galerij in de HTML uitvoert, elke keer dat een shortcode wordt gebruikt in de [galerij].
Gallery Wrap
De "Gallery Wrap" omsluit elke instantie van de shortcode van [gallery]. Dat betekent dat als je de shortcode van [gallery] drie keer gebruikt, deze wrap drie keer voorkomt in de broncode. Telkens wanneer de [galerij] in een bericht wordt gebruikt, wordt het uitvoer-ID verhoogd.
.galerij - wikkelt elke galerij in een post
.galleryid - $ id - incrementen, als tweede [galerij] dan zou de $ id 2 zijn
.gallery-columns - $ kolommen - verandert afhankelijk van de kolomoptie
.gallery-columns - $ size - verandert afhankelijk van de grootte optie
Andere elementen
.gallery-post - wraps elke galerij afbeelding en bijschrift
.gallery-icon - binnenkant van .gallery-post, wikkelt het anker naar afbeelding (bestand of koppeling) en afbeelding
.gallery-caption - binnenkant van .gallery-post, omhult afbeelding bijschrift tekst
Verbetering van onze galerij-CSS
Dus nu we de basisprincipes van de shortcutcode [gallery], de verschillende opties en de beschikbare CSS / klassen begrijpen, bekijken we nu hoe we de CSS die er al is kunnen verbeteren. (Voor deze sectie en de volgende gaan we ervan uit dat je de basisprincipes van CSS begrijpt.) In het thema TwentyEleven ziet de standaardgalerij eruit als de galerij van de schermafbeeldingen in de vorige secties.
WordPress levert al de basis-CSS voor de lay-out, maar we kunnen wat meer styling toevoegen om de galerij extra pizzaz te geven. In het thema waarmee we werken (voor TwentyEleven /wp-content/themes/twentyeleven/style.css of andere thema's /wp-content/themes/*themename/style.css) opent u de style.css in een editor. Voeg dit toe code aan het einde van het stylesheet.
Als we de klassen van het element kennen, kunnen we de specifieke delen van de galerij targeten. Met deze styling zijn we in staat om elk van de afbeeldingen te richten en ze een Polaroid-achtige uitstraling te geven
Galerij-CSS overschrijven
In sommige gevallen wilt u misschien de bestaande CSS voor de shortcode [Gallery] overschrijven. Omdat we de elementen en de CSS kennen die de [gallery] uitgangen, als we dat wilden, konden we de CSS eenvoudig vervangen - we konden dit doen door CSS-specificiteit te gebruiken. Omdat er slechts één specificiteitslaag is en de enige id die wordt opgegeven, is # Gallery-1 (1 voor de eerste galerij, en nummering gaat verder voor elke galerij in post), je zou de CSS kunnen overschrijven door simpelweg een bovenliggende id te vinden (voor TwentyEleven #content werkt) en dan ook specificeren .galerij, omdat het een klasse is die aan elke galerij is gekoppeld.
#content .gallery / * Deze stijl zou de standaard # gallery-1 styling * / margin: 0px overschrijven; Geen weergeven;
Uiteraard hierboven is een eenvoudig voorbeeld van het overschrijven van de CSS, maar je krijgt de essentie!
Conclusie
De ingebouwde [galerij] shortcode voor WordPress is best handig met allerlei opties om een aangepaste galerij in te stellen. Het is niet perfect, zoals we eerder in een scherm zagen, maar het werkt erg goed. Blijf op de hoogte, en leer in de komende weken hoe je de shortcode van de galerij kunt retoolen met de lichtbak- en schuifregelaaropties!
Share
Accentsconagua