A shortcode rendszer egy olyan wordpress bővítmény, amivel egyszerűen tudunk létrehozni “egyedi-érdekes” tartalmat ill. elrendezést.
A szerkesztő felületen, a fenti sorban van egy “Insert shortcode” nevű gomb, azzal tudjuk őket generálni.
Felépítése (a kék szín csak a szemléltetés miatt van!):
[su_spoiler title=”CÍM-demo”]Tartalom demo[/su_spoiler]
Ha megnézzük akkor szétbontva (entert ütve) ez így néz ki:
[su_spoiler title=”CÍM-demo”]
Tartalom demo
[/su_spoiler]
Vagyis az egyedi tartalmunkat (szöveg, kép, bármi) közrefogja egy kezdő kód [VALAMI] és egy [/VALAMI] ún. záró kód. Ebből tudja a rendszer, hogy mit kell csinálni a “közrefogott” tartalommal! A kapcsos zárójeles shortcode természetesen nem jelenik az oldal tartalmában, csak a szerkesztő felületen látni!
A kezdő kapcsos zárójeles kódban van beállítva, hogy milyen típus megjelenést adjon a rendszer a tartalmunknak, a záró kód pedig értelemszerűen zárja az egész “blokkot”.
Lehetnek eltérő felépítésű shortcode -ok is (nincsen / zárókódja), pl. a divider, ami egy elválasztó vonalat hoz létre:
[su_divider top=”no”]
[su_box title=”Shorcode segédlet” style=”soft” box_color=”#b90606″ title_color=”#ffffff” radius=”0″]
A shortcode rendszer saját segédlete is megtalálható az adminisztrációs felületen a Shortcodes menü alatt az Examples oldalon!
[/su_box]
[su_divider top=”no”]
MINTÁK
[su_heading style=”modern-1-dark” size=”16″ align=”left” margin=”10″] Ez egy Heading text vagyis érdekes címsor [/su_heading]
Ez egy elválasztó:
[su_divider top=”no”]
Ez egy slider:
[su_slider source=”media: 4052,4054,4053″ limit=”10″ width=”200″ height=”200″ responsive=”no” centered=”no” pages=”no” mousewheel=”no”][su_slider source=”media: 3334,3333,3331″ width=”300″ height=”200″][/su_slider]
Ez egy gomb:
[su_button url=”http://analogterapia.hu/shortcode-demo”] GOMB [/su_button]
Ez egy tooltip vagyis buborék szöveg:
[su_tooltip content=”Ez egy buborék szöveg! Ez hasznos lehet és ötletes is!”][su_button] buborészöveg (ha ide ráhozod az egeret) [/su_button][/su_tooltip]
Ez animált szöveg:
[su_animate type=”flash” duration=”30″ delay=”0.5″] ez itt pedig egy animált szöveg (30mp-ig) [/su_animate]
Ez kiemelt szöveg:
[su_highlight]Kiemelés[/su_highlight]
Ez egy olyan diagram amin be lehet állítani, hogy hány % -ot mutasson, itt most 75 %- ot mutat:
[su_progress_pie size=”120″]
Ez egy “füles” tartalom rendező:
[su_tabs][su_tab title=”Title 1″]Content 1[/su_tab] [su_tab title=”Title 2″]Content 2[/su_tab] [su_tab title=”Title 3″]Content 3[/su_tab][/su_tabs]
Ez színes hátterű doboz:
[su_panel background=”#cf2020″ color=”#ffffff” border=”0px solid #cccccc” radius=”5″]Panel content[/su_panel]
Ez egy “gondolat” doboz:
[su_testimonial]Testimonial text[/su_testimonial]
Ez egy legördülő tartalom rendező:
[su_spoiler title=”CÍM-demo” style=”fancy”]Tartalom demo[/su_spoiler]
Ez színes hátterű doboz fejléccel:
[su_box title=”DOBOZ” style=”glass” radius=”0″]A stresszt az okozza, hogy az életében megoldatlan probléma van jelen. Attól megoldatlan, hogy nem tudja, hogy hogyan viszonyuljon hozzá, mit tegyen akkor, amikor felbukkan. Amit tenni tudna, az nem jó, vagy nem elég jó, mert feszült lesz, vagy marad utána is. Ahhoz, hogy a stresszt oldani tudja először rá kell jönnie arra, hogy mi az a probléma, amit meg kellene oldani? Milyen helyzetben kellene másképp viselkednie, mint, ahogyan azt teszi?[/su_box]
Ez speciális ikon megjelenítés:
[su_icon icon=”icon: exclamation-triangle”][/su_icon]
Ez egy váltogatós, tartalom “legördítő” :
[su_accordion][su_spoiler]Content[/su_spoiler] [su_spoiler]Content[/su_spoiler] [su_spoiler]Content[/su_spoiler][/su_accordion]
Példa a 3 oszlopos elrendezésre:
[su_row][su_column size=”1/3″]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[/su_column] [su_column size=”1/3″]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[/su_column] [su_column size=”1/3″]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[/su_column][/su_row]
Színes doboz – megjegyzésekhez:
[su_note]A stresszt az okozza, hogy az életében megoldatlan probléma van jelen. Attól megoldatlan, hogy nem tudja, hogy hogyan viszonyuljon hozzá, mit tegyen akkor, amikor felbukkan. Amit tenni tudna, az nem jó, vagy nem elég jó, mert feszült lesz, vagy marad utána is. Ahhoz, hogy a stresszt oldani tudja először rá kell jönnie arra, hogy mi az a probléma, amit meg kellene oldani? Milyen helyzetben kellene másképp viselkednie, mint, ahogyan azt teszi?[/su_note]