{"id":23535,"date":"2021-05-02T18:03:00","date_gmt":"2021-05-02T15:03:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23535"},"modified":"2021-10-17T21:26:41","modified_gmt":"2021-10-17T18:26:41","slug":"kuinka-luoda-mukautettu-kirjautumislomake-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-mukautettu-kirjautumislomake-wordpressissa\/","title":{"rendered":"Kuinka luoda mukautettu kirjautumislomake WordPressiss\u00e4"},"content":{"rendered":"<p>Viime aikoina t\u00f6rm\u00e4sin tilanteeseen, jossa asiakkaani halusi minun luovan mukautetun kirjautumislomakkeen WordPressiin. HTML-kehitt\u00e4j\u00e4 on luonut katseenvangitsijan kirjautumislomakkeen ja luovuttanut sen minulle. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n sinulle, kuinka k\u00e4ytin tarkkaa kirjautumislomakkeen suunnittelua ja luonut mukautetun kirjautumislomakkeen WordPressiin.<\/p>\n<h3>Miksi tarvitset mukautetun kirjautumislomakkeen WordPressiss\u00e4<\/h3>\n<p>WordPress toimitti sis\u00e4\u00e4nrakennetun lomakkeen hallintapaneeliin kirjautumista varten. T\u00e4m\u00e4 lomake on saatavana taustalla vain oletusrakenteella. Emme voi n\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 oletuslomaketta k\u00e4ytt\u00f6liittym\u00e4n puolella, koska t\u00e4m\u00e4 malli ei sovi yhteen k\u00e4ytt\u00f6liittym\u00e4n kanssa.<\/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=\"Kuinka luoda mukautettu kirjautumislomake WordPressiss\u00e4\" ><\/a><\/p>\n<h3>Wp_login_form-toiminnon k\u00e4ytt\u00f6<\/h3>\n<p>WordPress tarjoaa menetelm\u00e4n <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_login_form\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_login_form(),<\/a> jolla voidaan luoda k\u00e4ytt\u00f6liittym\u00e4n kirjautumislomake. Meid\u00e4n on vain v\u00e4litett\u00e4v\u00e4 parametrit funktiolle, ja se n\u00e4ytt\u00e4\u00e4 HTML-lomakkeen sivustossa. Soita vain t\u00e4h\u00e4n toimintoon miss\u00e4 haluat lis\u00e4t\u00e4 kirjautumislomakkeen.<\/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>Olemme k\u00e4ytt\u00e4neet menetelm\u00e4\u00e4 is_user_logged_in () tarkistamaan, onko k\u00e4ytt\u00e4j\u00e4 jo kirjautunut sis\u00e4\u00e4n. Kirjautumislomakkeemme n\u00e4kyy vain kirjautumattomille k\u00e4ytt\u00e4jille. Kuten $ args -taulukossa n\u00e4kyy, &#8217;form_id&#8217; =&gt; &#8217;loginform&#8217; lis\u00e4\u00e4 HTML-tunnuksen attribuutin &#8217;loginform&#8217; luotuun kirjautumislomakkeeseen. Samalla tavalla voimme v\u00e4litt\u00e4\u00e4 tunnuksen k\u00e4ytt\u00e4j\u00e4tunnukselle, salasanan vastaavasti &#8217;id_username&#8217; =&gt; &#8217;user_login&#8217; ja &#8217;id_password&#8217; =&gt; &#8217;user_pass&#8217;. Alla on kuvakaappaus luodusta lomakkeesta.<\/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=\"Kuinka luoda mukautettu kirjautumislomake WordPressiss\u00e4\" ><\/a><\/p>\n<p>Kun kirjautumislomake on luotu, voit s\u00e4\u00e4t\u00e4\u00e4 CSS: \u00e4\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 lomakkeen tunnusta, k\u00e4ytt\u00e4j\u00e4tunnuskentti\u00e4 jne. T\u00e4ss\u00e4 vaiheessa olen soveltanut CSS: \u00e4\u00e4 t\u00e4h\u00e4n lomakkeeseen HTML-kehitt\u00e4j\u00e4n toimittaman mukaisesti. En aio n\u00e4ytt\u00e4\u00e4 lopullista muotoilua. T\u00e4m\u00e4n opetusohjelman tarkoituksena on vain osoittaa, kuinka voidaan saavuttaa sama tulos.<\/p>\n<p>Toivon, ett\u00e4 ymm\u00e4rr\u00e4t, miten luot mukautetun kirjautumislomakkeen WordPressiss\u00e4. Jos sinulla on kysytt\u00e4v\u00e4\u00e4 tai ehdotuksia, j\u00e4t\u00e4 kommentti alla.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mukautetun kirjautumislomakkeen n\u00e4ytt\u00e4minen WordPressiss\u00e4 on yleinen tarve sivuston omistajille. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme sinulle, kuinka mukautettu kirjautumislomake n\u00e4ytet\u00e4\u00e4n<\/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":[178,414,610],"tags":[843],"class_list":["post-23535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome-6","category-sekalaisia","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=23535"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23535\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21622"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=23535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=23535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=23535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}