{"id":27043,"date":"2021-05-02T18:15:00","date_gmt":"2021-05-02T15:15:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27043"},"modified":"2021-10-17T05:22:16","modified_gmt":"2021-10-17T02:22:16","slug":"hur-man-skapar-anpassat-inloggningsformular-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-skapar-anpassat-inloggningsformular-i-wordpress\/","title":{"rendered":"Hur man skapar anpassat inloggningsformul\u00e4r i WordPress"},"content":{"rendered":"<p>Nyligen kom jag \u00f6ver en situation d\u00e4r min klient ville att jag skulle skapa ett anpassat inloggningsformul\u00e4r i WordPress. HTML-utvecklare har skapat ett i\u00f6gonfallande inloggningsformul\u00e4r och \u00f6verl\u00e4mnat till mig. I den h\u00e4r artikeln visar jag hur jag anv\u00e4nde exakt inloggningsformul\u00e4r och skapade ett anpassat inloggningsformul\u00e4r i WordPress.<\/p>\n<h3>Varf\u00f6r beh\u00f6ver du anpassat inloggningsformul\u00e4r i WordPress<\/h3>\n<p>WordPress tillhandah\u00f6ll ett inbyggt formul\u00e4r f\u00f6r inloggning p\u00e5 din instrumentpanel. Det h\u00e4r formul\u00e4ret \u00e4r tillg\u00e4ngligt endast i baksidan med standarddesignen. Vi kan inte visa denna standardformul\u00e4r p\u00e5 framsidan eftersom den h\u00e4r designen inte matchar frontend.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b425a066.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b425a066.png\" alt=\"Hur man skapar anpassat inloggningsformul\u00e4r i WordPress\" ><\/a><\/p>\n<h3>Anv\u00e4ndning av funktionen wp_login_form<\/h3>\n<p>WordPress tillhandah\u00e5ller en metod <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_login_form\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_login_form()<\/a> som kan anv\u00e4ndas f\u00f6r att skapa inloggningsformul\u00e4r f\u00f6r frontend. Vi beh\u00f6ver bara skicka parametrar till funktionen och den visar HTML-formul\u00e4r p\u00e5 webbplatsen. Ring bara den h\u00e4r funktionen vart du vill placera ett inloggningsformul\u00e4r.<\/p>\n<pre><code>&lt;?php\nif (! is_user_logged_in()) {\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'echo'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'remember'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'redirect'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; (is_ssl()? 'https:\/\/': 'http:\/\/' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'form_id'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; 'loginform',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_username'\u00a0\u00a0\u00a0 =&gt; 'user_login',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_password'\u00a0\u00a0\u00a0 =&gt; 'user_pass',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_remember'\u00a0\u00a0\u00a0 =&gt; 'rememberme',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_submit'\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; 'wp-submit',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_username' =&gt; __( 'Username' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_password' =&gt; __( 'Password' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_remember' =&gt; __( 'Remember Me' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_log_in'\u00a0\u00a0 =&gt; __( 'Log In' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'value_username' =&gt; '',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'value_remember' =&gt; false\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_login_form( $args );\n}\n?&gt;<\/code><\/pre>\n<p>Vi har anv\u00e4nt metoden is_user_logged_in () f\u00f6r att kontrollera om anv\u00e4ndaren redan \u00e4r inloggad. V\u00e5rt inloggningsformul\u00e4r visas endast f\u00f6r icke-inloggade anv\u00e4ndare. Som visas i $ args array kommer &#8217;form_id&#8217; =&gt; &#8217;loginform&#8217; att l\u00e4gga till HTML-id-attributet &#8217;loginform&#8217; till ett genererat inloggningsformul\u00e4r. P\u00e5 samma s\u00e4tt kan vi skicka id till anv\u00e4ndarnamn, l\u00f6senord som &#8217;id_username&#8217; =&gt; &#8217;user_login&#8217; respektive &#8217;id_password&#8217; =&gt; &#8217;user_pass&#8217;. Nedan visas sk\u00e4rmdumpen en genererad form.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b42bdbaa.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b42bdbaa.png\" alt=\"Hur man skapar anpassat inloggningsformul\u00e4r i WordPress\" ><\/a><\/p>\n<p>N\u00e4r ditt inloggningsformul\u00e4r har genererats kan du justera CSS genom att anv\u00e4nda id f\u00f6r ett formul\u00e4r, anv\u00e4ndarnamnf\u00e4lt etc. I detta skede har jag till\u00e4mpat CSS p\u00e5 det h\u00e4r formul\u00e4ret enligt HTML-utvecklaren. Jag ska inte visa en slutlig formdesign. Omfattningen av denna handledning \u00e4r bara f\u00f6r att visa hur man kan uppn\u00e5 samma resultat.<\/p>\n<p>Jag hoppas att du f\u00f6rst\u00e5r hur du skapar ett anpassat inloggningsformul\u00e4r i WordPress. F\u00f6r eventuella fr\u00e5gor eller f\u00f6rslag, v\u00e4nligen l\u00e4mna en kommentar nedan.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visa anpassat inloggningsformul\u00e4r i WordPress \u00e4r ett vanligt behov f\u00f6r webbplats\u00e4gare. I den h\u00e4r artikeln visar vi dig hur du visar anpassat inloggningsformul\u00e4r<\/p>\n","protected":false},"author":1,"featured_media":21622,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[181,418,614],"tags":[850],"class_list":["post-27043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria-2","category-diverse","category-uncategorized-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=27043"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27043\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/21622"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=27043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=27043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=27043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}