Zobrazenie mena prihláseného užívateľa v Elementore

Ak naša webová stránka disponuje prihlasovaním užívateľov, je dobré urobiť rozdiel medzi prihláseným a neprihláseným užívateľom. Často sa stretávame s funkcionalitou, kedy prihlásený užívateľ má na mieste „Prihlásenia“ zobrazené svoje meno, alebo e-mailovú adresu.

No a presne toto si dnes urobíme cez Elementor aj my. Nie je to vôbec zložité.

Začneme tým, že niekde v hlavičke si pridáme zoznam s ikonami, do neho pridáme dvakrát rovnakú ikonu (fa-user, fa-key, fa-lock – tieto ikony Fontu Awesome sa zvyknú používať ako prihlasovacie ikony). Ikonky si dáme zobraziť vedľa seba, nie pod sebou. Pri prvej napíšeme „Prihlásenie“, alebo podobné slovo, táto ikona sa bude zobrazovať neprihlásenému užívateľovi a pri druhej ikone vyberieme Dynamické značky. Z nich vyberieme Stránka -> User Info. Pri ďalšom kliku na tento input vyberieme dynamické pole. Na výber máme viacero možnosti, napr. e-mail, Display Name (toto ale nemá nastavené každý), alebo login, čiže prihlasovacie meno. Ja som vybral login.

Nezabudneme nastaviť odkaz na prihlasovaciu stránku, alebo na stránku môjho účtu.

Teraz potrebujeme ešte urobiť jednu vec – nastavíme si pre dané odkazy vlastné vlastnosti. Kliknutím na ozubené koliesko vedľa odkazu sa nám otvoria možnosti odkazu.

Získajte okamžitý prístup k Elementor návodu (webináru) ZADARMO, v ktorom vás naučím vytvoriť si profesionálne vyzerajúcu web stránku vo WordPress bez programovania len za pomoci Elementora.

ZÍSKAŤ PRÍSTUP K WEBINÁRU

Tu si vlastne urobíme rozdiel medzi prihláseným a neprihláseným užívateľom. Ikonu, pri ktorej je napísané „Prihlásenie“ budeme používať pre neprihlásených užívateľov. Tejto ikone teda dáme vlastnosť

logged|false

Vlastnosti sa vždy zadávajú pomocou rovného lomítka, na windowse a slovenskej klávesnici kombináciou kláves ctrl+alt+w.

K druhej ikone, k tej, ktorá bude náležať prihlásenému užívateľovi zadáme vlastnosť

logged|true

Tieto vlastnosti fungujú tak, že sa vygenerujú do výsledného HTML kódu ako atribút a vlastnosť. Teda výsledkom tohto nastavenia je v konečnom dôsledku HTML kód, ktorý vyzerá cca takto:

<a href=“#“ class=“css-triedy-generovane-elementorom“ logged=“false“>Prihlásenie</a>

Výsledok zatiaľ takto:

Tieto dve ikony sa teda od seba budú líšiť tým, že jedna bude mať stále logged=false a druhá logged=true. Tento aspekt využijeme pri písaní jednoduchého CSS kódu. Kód je napísaný tak, aby fungoval v rámci samotného Elementu Zoznam s ikonami -> Pokročilé -> Vlastné CSS (celkom dole), v inom súbore vám fungovať nebude (je tam slovo „selector, ktorý označuje aktuálny Element). Prakticky by ale malo stačiť vymazať len slovo selector a kód by mal fungovať tak či tak.

  1. body.logged-in selector a[logged=false] {
  2. 	display: none;
  3. }
  4.  
  5. body:not(.logged-in) selector a[logged=true] {
  6. 	display: none;
  7. }

Pri CSSkovom kóde využijeme jednoduchú vlastnosť WordPressu, ktorý každému prihlásenému užívateľovi pridá do elementu <body> triedu „logged-in“. Pokiaľ túto triedu v elemente <body> nájdeme, znamená to, že užívateľ je určite prihlásený a schováme ikonu, ktorej vlastnosť logged je false (to je prvá časť kódu). Pokiaľ túto triedu v <body> nenájdeme, znamená to, že ide o neprihláseného užívateľa a tak ikonu s vlastnosťou logged=true schováme.

Výsledný efekt?

Prihlásený užívateľ

Neprihlásený užívateľ

Poznáte lepší spôsob ako docieliť zobrazovanie mena prihláseného užívateľa? Napíšte do komentára.

Potrebujete poradiť s nejakým WordPress problémom?
Spýtajte sa vo Facebook skupine WordPress pre začiatočníkov, radi pomôžeme.

PRIDAŤ SA DO SKUPINY

Pridajte komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Scroll to Top