Ako vytvoriť vlastnú prihlasovaciu stránku WordPress (Ultimate Guide)

Chcete pre svoj web vytvoriť vlastnú prihlasovaciu stránku WordPress?


Ak prevádzkujete webovú stránku WordPress alebo internetový obchod, mnohým z vašich používateľov sa často zobrazí prihlasovacia stránka. Prispôsobenie predvolenej prihlasovacej stránky programu WordPress vám umožňuje ponúknuť lepší používateľský komfort.

V tomto konečnom sprievodcovi vám ukážeme rôzne spôsoby, ako vytvoriť vlastnú prihlasovaciu stránku WordPress. Tento tutoriál môžete tiež použiť na vytvorenie vlastnej prihlasovacej stránky WooCommerce.

Ako ľahko vytvoriť vlastnú prihlasovaciu stránku WordPress pre svoje stránky

Toto je poučenie z tejto príručky.

    Prečo vytvoriť vlastnú prihlasovaciu stránku WordPress?

    WordPress prichádza s výkonným systémom riadenia používateľov. To umožňuje používateľom vytvárať účty v obchodoch elektronického obchodu, na webových stránkach členstva alebo na blogu.

    V predvolenom nastavení sa na prihlasovacej stránke zobrazuje značka a logo WordPress. To je v poriadku, ak prevádzkujete malý blog alebo ste jediná osoba s prístupom správcu.

    Predvolená prihlasovacia obrazovka WordPress

    Ak však váš web umožňuje používateľom zaregistrovať sa a prihlásiť sa, používateľská prihlasovacia stránka ponúka lepšie používateľské prostredie.

    Používaním vlastného loga a dizajnu sa vaši používatelia cítia ako doma. Keďže ich presmerovanie na predvolenú prihlasovaciu obrazovku WordPress, ktorá nevyzerá nič ako vaša webová stránka, môže svojim používateľom vyzerať podozrivo.

    Nakoniec predvolená prihlasovacia obrazovka neobsahuje nič iné ako prihlasovací formulár. Vytvorením vlastnej prihlasovacej stránky ju môžete využiť na propagáciu ďalších stránok alebo špeciálnych propagačných akcií.

    Ako už bolo povedané, poďme sa pozrieť na niekoľko príkladov vlastných vzorov prihlasovacej stránky WordPress.

    Príklady dizajnu prihlasovacej stránky WordPress

    Majitelia webových stránok môžu prispôsobiť prihlasovaciu stránku WordPress rôznymi štýlmi a technikami.

    Niektoré vytvárajú vlastnú prihlasovaciu stránku, ktorá používa motív a farby ich webových stránok. Iní, upravte predvolenú prihlasovaciu stránku pridaním vlastného pozadia, farieb a vlastného loga.

    1. WPForms

    WPForms

    WPForms je najlepší doplnok kontaktného formulára WordPress na trhu. Zhodou okolností ich doplnok obsahuje aj doplnok na vytvorenie krásnych prihlasovacích a registračných formulárov WordPress, ktoré vám ukážeme neskôr v tomto článku..

    Ich vlastná prihlasovacia stránka používa rozloženie s dvoma stĺpcami. Ľavý stĺpec obsahuje prihlasovací formulár a pravý stĺpec sa používa na zvýraznenie propagačných akcií a iných výziev na akciu. Vo vyššie uvedenom príklade používajú prihlasovaciu stránku na zdieľanie svojej výročnej správy. Používa vlastné značky, ilustrácie na pozadí a farby značky na vytvorenie jedinečného zážitku z prihlásenia.

    2. Rock My Wedding

    Rock My Wedding

    Web spoločnosti Rock My Wedding používa na zobrazenie prihlasovacieho a registračného formulára kontextové okno. Výhodou použitia kontextového okna je, že používatelia sa môžu prihlásiť bez opustenia stránky. Uloží ich z nového načítania stránky a ponúka rýchlejšie používateľské prostredie.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves je webová stránka o umení a remeslách, na ktorej autor publikuje obsah o zdobení domu, výrobe prikrývok, vzorov, výšiviek a ďalších. Na ich prihlasovacej stránke sa používa vlastný obrázok na pozadí, ktorý sa zhoduje s témou ich webu, s prihlasovacím formulárom napravo.

    4. Church Motion Graphics

    Church Motion Graphics

    Prihlasovacia stránka tejto spoločnosti zaoberajúcej sa návrhom pohybovej grafiky používa farebné pozadie odrážajúce to, o čom je ich podnikanie. Používa rovnaké ponuky hlavičky, päty a navigácie na prihlasovacej obrazovke. Samotný prihlasovací formulár je pomerne jednoduchý na tmavom pozadí.

    5. MITSUverenie úverového manažmentu

    MITSUverenie vedenia úveru

    Webová stránka MITSLoan Management Review používa predvolenú prihlasovaciu obrazovku WordPress. Používa vlastné CSS s vlastným logom na skrytie značky WordPress.

    Vytvorenie front-end vlastnej prihlasovacej stránky v WordPress

    Existuje niekoľko doplnkov WordPress, ktoré môžete použiť na vytvorenie front-end vlastnej prihlasovacej stránky v WordPress. Ukážeme vám dva rôzne doplnky a môžete si vybrať ten, ktorý vám najviac vyhovuje.

    Vytvorenie prihlasovacej stránky WordPress pomocou motívu Moje prihlásenie

    Najprv musíte nainštalovať a aktivovať doplnok Theme My Login. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

    Po aktivácii Téma Moje prihlásenie automaticky vytvorí adresy URL pre vaše vlastné prihlásenie, odhlásenie, registráciu, zabudnuté heslo a resetovanie hesla.

    Tieto prihlasovacie adresy URL WordPress si môžete prispôsobiť na stránke Téma Moje prihlasovacie údaje »Všeobecné str. Prejdite nadol do sekcie „Slimáci“ a upravte tieto adresy URL, ktoré používa doplnok pre akcie prihlásenia.

    Téma Moje prihlasovacie stránky

    Téma Moje prihlásenie vám tiež umožňuje použiť krátke kódy na vytvorenie vlastných prihlasovacích a registračných stránok. Môžete jednoducho vytvoriť stránku pre každú akciu a potom tu pridať stránku sluchu, aby doplnok mohol správne nájsť a presmerovať používateľov..

    Začnime prihlasovacou stránkou.

    Zamierte na Stránka »Pridať novú vytvoriť novú stránku WordPress. Musíte dať svojej stránke názov a potom zadajte nasledujúci krátky kód „[theme-my-login]“ v oblasti obsahu.

    Pridanie krátkeho kódu

    Teraz môžete publikovať svoju stránku a zobraziť jej ukážku, aby ste videli svoju vlastnú prihlasovaciu stránku v akcii.

    Vlastná prihlasovacia stránka WordPress

    Opakujte tento postup a vytvorte ďalšie stránky pomocou nasledujúcich skratiek.

    [theme-my-login action = ”register”] pre registračný formulár.

    [theme-my-login action = ”lostpassword”] ​​pre stránku strateného hesla.

    [theme-my-login action = ”resetpass”] použite ho na stránke obnovenia hesla.

    Vytvorenie vlastnej prihlasovacej stránky WordPress pomocou WPForms

    WPForms je najlepší doplnok na tvorbu formulárov WordPress na trhu. To vám umožní ľahko vytvoriť vlastné prihlasovacie a registračné formuláre pre vaše webové stránky.

    WPForms je prémiový doplnok WordPress a na prístup k doplnku na registráciu používateľov budete potrebovať aspoň svoj plán. Používatelia WPBeginner môžu získať 50% zľavu pomocou nášho kupónového kódu WPForms: SAVE50

    Najprv musíte nainštalovať a aktivovať doplnok WPForms. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

    Po aktivácii musíte navštíviť WPForms »Nastavenia zadajte licenčný kľúč. Tieto informácie nájdete pod svojím účtom na webovej stránke WPForms.

    Licencia WPForms

    Po zadaní licenčného kľúča budete môcť nainštalovať doplnky. Choďte do toho a navštívte WPForms »Addons a vyhľadajte doplnok Registrácia používateľa.

    Nainštalujte doplnok registrácie používateľa

    Potom kliknutím na tlačidlo Inštalovať doplnok stiahnite a aktivujte doplnok. Teraz ste pripravení vytvoriť si vlastné prihlasovacie formuláre.

    Zamierte na WPForms »Pridať nový a prejdite nadol na šablónu „Formulár na prihlásenie používateľa“. Ak chcete pokračovať, musíte kliknúť na tlačidlo „Vytvoriť prihlasovací formulár používateľa“.

    Vytvorte prihlasovací formulár

    WPForms načíta prihlasovací formulár užívateľa s povinnými poľami. Kliknutím na polia môžete pridať vlastný popis alebo text okolo nich.

    Tvorca formulárov WPForms

    Môžete zmeniť aj ďalšie nastavenia. Napríklad automaticky pridá ako názov tlačidla „Odoslať“. Môžete na ňu kliknúť a namiesto toho zmeniť na Login.

    Nastavenia formulára

    Môžete sa tiež rozhodnúť, čo sa stane, keď sa používateľ úspešne prihlási Nastavenia »Potvrdenie kartu a vyberte akciu.

    Presmerovanie prihlásených používateľov

    Môžete presmerovať používateľa na akúkoľvek inú adresu URL, presmerovať ich na domovskú stránku alebo im jednoducho ukázať správu, že sú teraz prihlásení.

    Keď ste spokojní s nastavením formulára, kliknite na tlačidlo Uložiť v pravom hornom rohu obrazovky a zatvorte nástroj na tvorbu formulárov.

    Pridanie vlastného prihlasovacieho formulára na stránku WordPress

    WPForms uľahčuje pridanie vlastného prihlasovacieho formulára na ľubovoľný príspevok alebo stránku WordPress.

    Jednoducho upravte stránku, na ktorú chcete pridať prihlasovací formulár, alebo vytvorte nový. Na obrazovke úprav stránky pridajte blok WPForms do svojej oblasti obsahu.

    Pridanie bloku WPForms do príspevku

    Ďalej vyberte prihlasovací formulár, ktorý ste vytvorili predtým, a blok WPForms ho automaticky načíta do oblasti obsahu.

    Ukážka prihlasovacieho formulára

    Teraz môžete pokračovať v úprave stránky prihlasovacieho formulára alebo uložiť a zverejniť zmeny.

    Prispôsobenie dizajnu stránky prihlasovacieho formulára WordPress

    Vaša predvolená prihlasovacia stránka formulára WordPress bude predvolene používať šablónu a štýly stránky témy. Bude obsahovať navigačné ponuky témy, hlavičky, päty a widgety bočného panela.

    Ak chcete úplne prevziať celú stránku a navrhnúť niečo od začiatku, môžete použiť doplnok na tvorbu stránok WordPress..

    Pomocou doplnku na tvorbu stránok môžete vytvoriť vlastné rozloženie stránky a potom pridať miniaplikáciu prihlasovacieho formulára poskytovanú témou Moje prihlásenie alebo WPForms..

    Na obrázku nižšie sme použili populárny doplnok Beaver Builder. Použili sme obrázok na pozadí na celú obrazovku a potom sme pridali dva stĺpce. Do jedného stĺpca sme pridali text a tlačidlo. V druhom stĺpci sme pridali widget WPForms.

    Vytvorenie vlastnej prihlasovacej stránky pomocou doplnku na tvorbu stránok

    Výhodou Beaver Builder je, že je to 100% drag and drop riešenie.

    Poznámka: Keďže ste už prihlásení, pluginy Theme My Login a WPForms nemusia zobrazovať živý náhľad prihlasovacieho formulára. Doplnok WPForms má možnosť, kde ho môžete vypnúť v nastaveniach formulára.

    Ak doplnky pre tvorbu stránok WordPress nie sú vaše vec, môžete na úpravu formulára a samotnej prihlasovacej stránky použiť vlastný CSS. Prípadne môžete tiež použiť doplnok CSS Hero na jednoduché pridanie vlastných štýlov CSS.

    Zmeňte prihlasovacie logo a adresu URL WordPress

    Pre svoj web nemusíte vždy vytvárať úplne vlastnú prihlasovaciu stránku WordPress. Mnoho webových stránok v skutočnosti iba nahradí logo WordPress a logo URL, zatiaľ čo stále používa predvolenú prihlasovaciu stránku.

    Ak chcete nahradiť logo WordPress na prihlasovacej obrazovke vlastným logom, môžete to ľahko urobiť pomocou doplnku WordPress alebo pridaním vlastného kódu. Ukážeme vám obidve metódy, ktoré môžete použiť, ktoré vám najviac vyhovujú.

    Pomocou doplnku môžete zmeniť prihlasovacie logo a URL WordPress

    Prvá vec, ktorú musíte urobiť, je nainštalovať a aktivovať prispôsobovací modul prihlásenia Colorlib. zapojiť. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

    Po aktivácii doplnok pridá na bočný panel správcu WordPress novú položku ponuky s názvom „Prispôsobovač prihlásenia“. Kliknutím na toto tlačidlo sa spustí prispôsobovací program prihlásenia.

    Prispôsobovač prihlasovacích údajov

    Prispôsobovač prihlásenia načíta vašu predvolenú prihlasovaciu obrazovku WordPress s možnosťami prispôsobenia vľavo a živým náhľadom vpravo.

    Ak chcete nahradiť logo WordPress vaším vlastným, kliknite na kartu Možnosti loga napravo. Odtiaľ si môžete skryť logo WordPress, nahrať svoje vlastné logo, zmeniť URL a text loga.

    Nahrajte vlastné logo na prihlasovaciu stránku

    Doplnok tiež umožňuje úplne prispôsobiť predvolenú prihlasovaciu stránku WordPress. Môžete pridať stĺpce, obrázok na pozadí, zmeniť farby formulára prihlásenia a ďalšie.

    V podstate si môžete vytvoriť vlastnú prihlasovaciu stránku WordPress bez zmeny predvolenej prihlasovacej adresy URL WordPress.

    Po dokončení zmeny uložte kliknutím na tlačidlo Publikovať. Teraz môžete navštíviť prihlasovaciu stránku WordPress a pozrieť si svoj vlastný prihlasovací formulár v akcii.

    Vlastná prihlasovacia stránka WordPress s vlastným logom

    Zmena prihlasovacieho loga a adresy URL WordPress bez doplnku (kód)

    Táto metóda umožňuje manuálne nahradiť logo WordPress na prihlasovacej obrazovke vaším vlastným logom.

    Najprv musíte do knižnice médií nahrať svoje vlastné logo. Ísť do Médiá »Pridať nové stránku a nahrajte svoje vlastné logo.

    Po nahraní obrázka kliknite vedľa neho na odkaz „Upraviť“. Otvorí sa stránka úprav média, kde musíte skopírovať adresu URL súboru a vložiť ju do prázdneho textového súboru v počítači.

    Ďalej musíte do súboru functions.php alebo do doplnku pre konkrétnu lokalitu pridať nasledujúci kód.

    function wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    background-image: url (http: //path/to/your/custom-logo.png);
    výška: 100 pixelov;
    šírka: 300 pixelov;
    veľkosť pozadia: 300 x 100 pixlov;
    pozadie-opakovanie: nie-opakovanie;
    čalúnenie: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Nezabudnite nahradiť adresu URL obrázka na pozadí adresou URL súboru, ktorú ste predtým skopírovali. Môžete tiež upraviť ďalšie vlastnosti CSS, aby sa zhodovali s vašim vlastným obrázkom loga.

    Teraz môžete navštíviť prihlasovaciu stránku WordPress a pozrieť si svoje vlastné logo v akcii.

    Prihlasovacia stránka WordPress s vlastným logom

    Tento kód nahrádza iba logo WordPress. Nezmení to odkaz na logo, ktorý odkazuje na web WordPress.org.

    Zmeňte to.

    Jednoducho pridajte nasledujúci kód do súboru features.php témy alebo doplnku pre konkrétnu lokalitu. Tento kód môžete pridať priamo pod predtým pridaný kód.

    function wpb_login_logo_url () {
    návrat home_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    function wpb_login_logo_url_title () {
    vráti „Názov a informácie o vašom webe“;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Nezabudnite nahradiť názov a informácie o vašom webe skutočným názvom vašej stránky. Vlastné logo na prihlasovacej obrazovke bude teraz ukazovať na domovskú stránku vášho webu.

    To je všetko. Dúfame, že tento článok vám pomohol naučiť sa rôzne spôsoby vytvorenia prihlasovacej stránky WordPress pre váš web. Môžete tiež navštíviť našu konečnú príručku zabezpečenia WordPress, kde nájdete tipy na zlepšenie zabezpečenia prihlásenia pomocou WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map