Paano Gumawa ng Pahina ng Pasadyang Pag-login sa WordPress (Ultimate Guide)

Nais mo bang lumikha ng isang pasadyang pahina ng pag-login sa WordPress para sa iyong website?


Kung nagpapatakbo ka ng isang site sa pagiging kasapi ng WordPress o isang online store, kung gayon marami sa iyong mga gumagamit ang madalas na makakita ng pahina ng pag-login. Ang pagpapasadya ng default na pahina ng pag-login sa WordPress ay nagbibigay-daan sa iyo upang mag-alok ng isang mas mahusay na karanasan sa gumagamit.

Sa panghuli gabay na ito, magpapakita kami sa iyo ng iba’t ibang mga paraan upang lumikha ng isang pasadyang pahina ng pag-login sa WordPress. Maaari mo ring gamitin ang tutorial na ito para sa paglikha ng isang pasadyang pahina ng pag-login ng WooCommerce.

Paano madaling lumikha ng isang pasadyang pahina ng pag-login sa WordPress para sa iyong site

Narito ang iyong matututunan mula sa gabay na ito.

    Bakit Gumawa ng isang Pasadyang Pahina ng Pag-login sa WordPress?

    Ang WordPress ay may isang malakas na sistema ng pamamahala ng gumagamit. Pinapayagan nito ang mga gumagamit na lumikha ng mga account sa mga tindahan ng eCommerce, mga website ng pagiging kasapi, o sa isang blog.

    Bilang default, ipinapakita ng pahina ng pag-login ang pagba-brand ng WordPress at logo. Maayos ito kung nagpapatakbo ka ng isang maliit na blog, o ikaw lamang ang taong may admin access.

    Default na pag-login sa screen ng WordPress

    Gayunpaman, kung pinapayagan ng iyong website ang mga gumagamit na magparehistro at mag-login, pagkatapos ang isang pasadyang pahina ng pag-login ay nag-aalok ng isang mas mahusay na karanasan sa gumagamit.

    Gamit ang iyong sariling logo at disenyo ay nakakaramdam sa iyong mga gumagamit sa bahay. Samantalang ang pag-redirect ng mga ito sa default na screen ng pag-login sa WordPress na mukhang hindi tulad ng iyong website ay maaaring magmukhang kahina-hinala sa iyong mga gumagamit.

    Panghuli, ang default na screen ng pag-login ay hindi naglalaman ng anuman kundi ang form ng pag-login. Sa pamamagitan ng paglikha ng isang pasadyang pahina ng pag-login maaari mong magamit ito upang maisulong ang iba pang mga pahina o mga espesyal na promo.

    Na sinabi, tingnan natin ang ilang mga halimbawa ng mga pasadyang disenyo ng pahina ng pag-login sa WordPress.

    Mga Halimbawa ng Disenyo ng Pahina ng Pag-login ng WordPress

    Maaaring ipasadya ng mga may-ari ng website ang pahina ng pag-login sa WordPress gamit ang iba’t ibang mga estilo at pamamaraan.

    Ang ilan ay lumikha ng isang pasadyang pahina ng pag-login na gumagamit ng tema at kulay ng kanilang website. Ang iba pa, baguhin ang pahina ng default na pag-login sa pamamagitan ng pagdaragdag ng isang pasadyang background, kulay, at kanilang sariling logo dito.

    1. WPForms

    WPForms

    Ang WPForms ay ang pinakamahusay na plugin ng contact ng WordPress sa merkado. Nagkataon, ang kanilang plugin ay may kasamang isang add-on upang lumikha ng magagandang mga form sa pag-login at pagrehistro sa WordPress, na ipapakita namin sa iyo sa ibang pagkakataon sa artikulong ito.

    Ang kanilang pasadyang pahina ng pag-login ay gumagamit ng dalawang layout ng haligi. Ang kaliwang haligi ay naglalaman ng form ng pag-login at ang kanang haligi ay ginagamit upang i-highlight ang mga promo at iba pang mga call-to-action. Sa halimbawa sa itaas, ginagamit nila ang pahina ng pag-login upang ibahagi ang kanilang taunang ulat. Gumagamit ito ng pasadyang pagba-brand, background na paglalarawan, at mga kulay ng tatak upang lumikha ng isang natatanging karanasan sa pag-login.

    2. Bato ang Aking Kasal

    Rock Aking Kasal

    Ang website ng Rock My Wedding ay gumagamit ng isang popup modal upang ipakita ang form ng pag-login at pagrehistro. Ang bentahe ng paggamit ng isang popup ay ang mga gumagamit ay maaaring mag-log in nang hindi umaalis sa pahina. Nai-save nito ang mga ito mula sa isang bagong pag-load ng pahina at nag-aalok ng isang mas mabilis na karanasan ng gumagamit.

    3. Si Jacquelynne Steves

    Jacquelynne Mga Steves

    Ang Jacquelynne Steeves ay isang website ng sining at sining kung saan inilathala ng may-akda ang nilalaman tungkol sa dekorasyon sa bahay, paggawa ng mga quilts, pattern, burda, at marami pa. Ang kanilang pahina ng pag-login ay gumagamit ng isang pasadyang imahe ng background na tumutugma sa tema ng kanilang website sa form ng pag-login sa kanan.

    4. Mga Larawan ng Paggalaw ng Simbahan

    Mga Larawan sa Paggalaw ng Simbahan

    Ang pahina ng pag-login ng kumpanya ng disenyo ng graphic na paggalaw ay gumagamit ng isang makulay na background na sumasalamin sa kung ano ang kanilang negosyo. Ginagamit nito ang parehong header ng site, footer, at mga menu ng nabigasyon sa screen ng pag-login. Ang form sa pag-login mismo ay medyo simple na may isang madilim na background.

    5. Pagsusuri sa Pamamahala ng MITSLoan

    Review ng Pamamahala ng MITSLoan

    Ginagamit ng MITSLoan Management Review website ang default na WordPress screen sa pag-login. Gumagamit ito ng pasadyang CSS gamit ang kanilang sariling logo upang itago ang WordPress branding.

    Paglikha ng Pahina ng Pasadyang Pag-login sa Pasadyang Pag-login sa WordPress

    Mayroong maraming mga plugin ng WordPress na maaari mong magamit upang lumikha ng isang front-end na pasadyang pag-login na pahina sa WordPress. Ipapakita namin sa iyo ang dalawang magkakaibang mga plugin, at maaari mong piliin ang isa na pinakamahusay na nababagay sa iyo.

    Paglikha ng isang Pahina ng Pag-login sa WordPress gamit ang Tema ng Aking Pag-login

    Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang plugin ng Tema ng Aking Pag-login. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

    Sa pag-activate, awtomatikong lumilikha ang Mga Tema ng Aking Login ng mga URL para sa iyong pasadyang pag-login, pag-logout, pagrehistro, nakalimutan ang password, at i-reset ang mga aksyon sa password.

    Maaari mong ipasadya ang mga URL ng pag-login sa WordPress sa pamamagitan ng pagbisita Tema Aking Pag-login »Pangkalahatan pahina. Mag-scroll pababa sa seksyong ‘Slugs’ upang baguhin ang mga URL na ginamit ng plugin para sa mga aksyon sa pag-login.

    Tema ng Aking Mga Pahina sa Pag-login

    Pinapayagan ka ng Aking Tema na gumamit ka ng mga shortcode upang lumikha ng pasadyang mga pahina ng pag-login at pagrehistro. Maaari ka lamang lumikha ng isang pahina para sa bawat aksyon at pagkatapos ay idagdag ang slug ng pahina dito, upang ang plugin ay makahanap at mag-redirect ng mga gumagamit nang maayos.

    Magsimula tayo sa pahina ng pag-login.

    Tumungo sa Pahina »Magdagdag ng Bago upang lumikha ng isang bagong pahina ng WordPress. Kailangan mong bigyan ang isang pahina ng isang pamagat at pagkatapos ay ipasok ang sumusunod na shortcode “[tema-my-login]” sa loob ng lugar ng nilalaman.

    Pagdaragdag ng shortcode

    Maaari mo na ngayong mai-publish ang iyong pahina at i-preview ito upang makita ang iyong pasadyang pahina ng pag-login na kumilos.

    Pasadyang pahina ng pag-login ng WordPress

    Ulitin ang proseso upang lumikha ng iba pang mga pahina sa pamamagitan ng paggamit ng mga sumusunod na mga shortcode.

    [theme-my-login action = “rehistro”] para sa form ng pagrehistro.

    [tema-my-login action = “lostpassword”] para sa nawala na pahina ng password.

    [tema-my-login action = “resetpass”] gamitin ito sa pahina ng pag-reset ng password.

    Paglikha ng isang Pasadyang Pahina ng Pag-login ng WordPress Gamit ang WPForms

    Ang WPForms ay ang pinakamahusay na plugin ng tagabuo ng WordPress sa merkado. Pinapayagan ka nitong madaling lumikha ng pasadyang mga form sa pag-login at pagrehistro para sa iyong website.

    Ang WPForms ay isang premium na plugin ng WordPress, at kakailanganin mo ng hindi bababa sa kanilang mga pro plano upang ma-access ang pag-rehistro ng user sa pagdagdag. Ang mga gumagamit ng WPBeginner ay maaaring makakuha ng 50% na diskwento sa pamamagitan ng paggamit ng aming WPForms coupon code: SAVE50

    Ang unang bagay na kailangan mong gawin ay i-install at i-aktibo ang WPForms plugin. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

    Sa pag-activate, kailangan mong bisitahin WPForms »Mga Setting pahina upang maipasok ang iyong susi ng lisensya. Maaari mong mahanap ang impormasyong ito sa ilalim ng iyong account sa WPForms website.

    WPForms lisensya

    Matapos mong ipasok ang susi ng lisensya, magagawa mong mag-install ng mga add-on. Sige at bisitahin mo WPForms »Mga Addons pahina at hanapin ang User Registration Addon.

    I-install ang addon ng pagpaparehistro ng gumagamit

    Susunod, mag-click sa pindutang I-install ang Addon upang i-download at buhayin ang addon. Handa ka na ngayong lumikha ng iyong sariling pasadyang mga form sa pag-login.

    Tumungo sa WPForms »Magdagdag ng Bago pahina at mag-scroll pababa sa template ng ‘User Login Form’. Kailangan mong mag-click sa pindutan ng ‘Lumikha ng Form ng Login ng Gumagamit’ upang magpatuloy.

    Lumikha ng form sa pag-login

    Ang WPForm ay i-load ang Form ng Login ng Gumagamit sa mga kinakailangang patlang. Maaari kang mag-click sa mga patlang upang magdagdag ng iyong sariling paglalarawan o teksto sa kanilang paligid.

    WPForm form tagabuo

    Maaari mo ring baguhin ang iba pang mga setting. Halimbawa, awtomatiko itong nagdaragdag ng ‘Isumite’ bilang pamagat ng pindutan. Maaari mong i-click ito at pagkatapos ay baguhin ito sa Pag-login sa halip.

    Mga setting ng form

    Maaari ka ring magpasya kung ano ang mangyayari sa sandaling matagumpay na naka-log in ang isang gumagamit. Pumunta sa Mga setting »Pagkumpirma tab at pumili ng isang aksyon.

    Ang pag-redirect ay naka-log sa mga gumagamit

    Maaari mong mai-redirect ang gumagamit sa anumang iba pang URL, i-redirect ang mga ito sa homepage, o ipakita lamang sa kanila ang isang mensahe na sila ay naka-log in na.

    Kapag nasiyahan ka sa mga setting ng form, mag-click sa pindutan ng I-save sa tuktok na kanang sulok ng screen at isara ang form ng tagabuo.

    Pagdaragdag ng Iyong Custom na Form ng Pag-login sa isang Pahina ng WordPress

    Ginagawa ng WPForm na napakadaling idagdag ang iyong pasadyang form sa pag-login sa anumang post o pahina ng WordPress.

    I-edit lamang ang pahina kung saan nais mong magdagdag ng form sa pag-login o lumikha ng bago. Sa screen ng pag-edit ng pahina, idagdag ang block ng WPForms sa iyong lugar ng nilalaman.

    Pagdaragdag ng WPForms block sa isang post

    Susunod, piliin ang form ng pag-login na nilikha mo nang mas maaga at awtomatikong mai-load ito ng WPForms block sa loob ng lugar ng nilalaman.

    Pag-preview ng form sa pag-login

    Maaari mo na ngayong ipagpatuloy ang pag-edit ng pahina ng form ng pag-login, o i-save at mai-publish ang iyong mga pagbabago.

    Pagpapasadya ng iyong disenyo ng pahina ng pag-login sa WordPress

    Bilang default, gagamitin ng iyong pasadyang pahina ng form ng pag-login sa WordPress ang template at pahina ng iyong tema. Magkakaroon ito ng mga menu ng nabigasyon, header, footer, at sidebar widget ng iyong tema.

    Kung nais mong ganap na sakupin ang buong pahina at magdisenyo ng isang bagay mula sa simula, pagkatapos ay maaari mong gamitin ang isang plugin ng tagabuo ng WordPress page.

    Sa isang plugin ng tagabuo ng pahina, maaari kang lumikha ng isang pasadyang layout ng pahina at pagkatapos ay magdagdag ng widget ng form ng pag-login na ibinigay ng Tema Aking Pag-login o WPForms.

    Sa screenshot sa ibaba, ginamit namin ang sikat na plugin ng Tagabuo ng Beaver. Gumamit kami ng isang imahe sa background sa isang layout ng fullscreen at pagkatapos ay nagdagdag ng dalawang mga haligi. Sa isang haligi ay nagdagdag kami ng ilang teksto at isang pindutan. Sa iba pang haligi, idinagdag namin ang WPForms widget.

    Lumilikha ng isang pasadyang pahina ng pag-login gamit ang plugin ng tagabuo ng pahina

    Ang pakinabang ng Beaver Tagabuo ay ang 100% na i-drag at drop solution na ito.

    Tandaan: Dahil naka-log in ka na, ang parehong Tema ng Aking Login at WPForms plugin ay maaaring hindi magpakita ng isang live na preview ng form ng pag-login. Ang WPForms plugin ay may isang pagpipilian kung saan maaari mong patayin ito sa mga setting ng form.

    Kung ang mga plugin ng tagabuo ng WordPress ay hindi iyong bagay, pagkatapos ay maaari mong gamitin ang pasadyang CSS upang istilo ang form at ang mismong pahina ng pag-login. Bilang kahalili, maaari mo ring gamitin ang plugin ng CSS Hero upang madaling magdagdag ng mga pasadyang estilo ng CSS.

    Baguhin ang WordPress logo at URL

    Hindi mo palaging kailangang lumikha ng isang ganap na pasadyang pahina ng pag-login sa WordPress para sa iyong website. Sa katunayan, maraming mga website ang pumalit lamang sa WordPress logo at logo url habang ginagamit pa rin ang default na pahina ng pag-login.

    Kung nais mong palitan ang logo ng WordPress sa screen ng pag-login gamit ang iyong sariling logo, pagkatapos ay madali mong gawin ito gamit ang isang WordPress plugin o sa pamamagitan ng pagdaragdag ng pasadyang code. Ipapakita namin sa iyo ang parehong mga pamamaraan na maaari mong gamitin ang isa na pinakamahusay sa iyo.

    Baguhin ang WordPress logo at URL gamit ang isang Plugin

    Ang unang bagay na kailangan mong gawin ay i-install at isaaktibo ang Kulay ng Pag-login sa Kulay. isaksak. Para sa higit pang mga detalye, tingnan ang aming hakbang-hakbang na gabay sa kung paano mag-install ng isang plugin ng WordPress.

    Sa pag-activate, nagdaragdag ang plugin ng isang bagong item sa menu na may label na ‘Login Customizer’ sa sidebar ng WordPress admin. Ang pag-click dito ay ilulunsad ang customizer ng pag-login.

    Pag-login sa pag-login

    Ang pag-login sa pag-login ay mai-load ang iyong default na screen sa pag-login sa WordPress na may mga pagpipilian sa pagpapasadya sa kaliwa at live na preview sa kanan.

    Upang palitan ang iyong logo ng WordPress sa iyong sarili, mag-click sa tab na ‘Mga pagpipilian sa logo’ sa kanan. Mula dito maaari mong itago ang WordPress logo, mag-upload ng iyong sariling pasadyang logo, baguhin ang URL ng URL at teksto.

    Mag-upload ng pasadyang logo upang mag-login page

    Pinapayagan ka ng plugin na ganap mong ipasadya ang default na pahina ng pag-login sa WordPress. Maaari kang magdagdag ng mga haligi, imahe ng background, baguhin ang mga kulay ng form sa pag-login, at marami pa.

    Karaniwan, maaari kang lumikha ng isang pasadyang pahina ng pag-login sa WordPress nang hindi binabago ang default na URL ng pag-login sa WordPress.

    Kapag tapos ka na, mag-click lamang sa pindutan ng publish upang mai-save ang iyong mga pagbabago. Maaari mo na ngayong bisitahin ang pahina ng pag-login sa WordPress upang makita ang iyong pasadyang form sa pag-login sa aksyon.

    Pasadyang pahina ng pag-login ng WordPress na may pasadyang logo

    Baguhin ang WordPress logo at URL na walang Plugin (Code)

    Pinapayagan ka ng pamamaraang ito na manu-mano mong palitan ang logo ng WordPress sa screen ng pag-login gamit ang iyong sariling pasadyang logo.

    Una, kailangan mong i-upload ang iyong pasadyang logo sa media library. Pumunta sa Media »Magdagdag ng Bago pahina at i-upload ang iyong pasadyang logo.

    Kapag na-upload mo ang imahe, mag-click sa link na ‘I-edit’ sa tabi nito. Buksan nito ang pahina ng pag-edit ng media kung saan kailangan mong kopyahin ang file ng URL at i-paste ito sa isang blangko na file ng teksto sa iyong computer.

    Susunod, kailangan mong magdagdag ng sumusunod na code sa file ng function.php ng ​​iyong tema o isang plugin na tukoy sa site.

    gumana wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    background-image: url (http: //path/to/your/custom-logo.png);
    taas: 100px;
    lapad: 300px;
    laki ng background: 300px 100px;
    background-ulitin: walang-ulit;
    padding-ibaba: 10px;
    }

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

    Huwag kalimutan na palitan ang URL ng background-image sa file na iyong kinopya nang mas maaga. Maaari mo ring ayusin ang iba pang mga katangian ng CSS upang tumugma sa iyong pasadyang imahe ng logo.

    Maaari mo na ngayong bisitahin ang pahina ng pag-login sa WordPress upang makita ang iyong pasadyang logo na kumikilos.

    Ang pahina ng pag-login ng WordPress na may pasadyang logo

    Pinalitan lamang ng code na ito ang logo ng WordPress. Hindi nito binago ang link ng logo na tumuturo sa website ng WordPress.org.

    Baguhin natin ito.

    Idagdag lamang ang sumusunod na code sa file ng function.php ng ​​iyong tema o isang plugin na tukoy sa site. Maaari mong idagdag ang code na ito mismo sa ibaba ng code na iyong idinagdag nang mas maaga.

    gumana wpb_login_logo_url () {
    bumalik sa bahay_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    gumana wpb_login_logo_url_title () {
    ibalik ang ‘Pangalan at Impormasyon sa Site’;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Huwag kalimutang palitan ang ‘Pangalan at Impormasyon ng Site’ sa aktwal na pangalan ng iyong site. Ang pasadyang logo sa iyong screen ng pag-login ay ituturo na ngayon sa home page ng iyong site.

    Iyon lang. Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na malaman ang iba’t ibang mga paraan upang lumikha ng isang pahina ng pag-login sa WordPress para sa iyong website. Maaari mo ring makita ang aming panghuli gabay sa seguridad ng WordPress para sa mga tip sa pagpapabuti ng iyong seguridad sa pag-login sa WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me