시간과 공간 그리고 진실의 방

Posted on January 8, 2019 by B.J. Keeton in WordPress | 16 comments

There are lots of reasons why you would want to allow WordPress user registration. Maybe you have a membership site or run a forum community. You may only allow registered users to post comments as a way of moderating discussions. Whatever your reason, we want to show you how to get your users up and running with their own accounts.

Allowing WordPress User Registration

The very first step you’ll need to follow is very simple. Head to the Settings – General page in your WordPress dashboard. There, you will find two options that are imperative to this whole process: Membership and New User Default Role. You will want to check the box that says Anyone can register and choose your default role. Normally, that’s going to be Subscriber, but since each role comes with different permissions, that might not be the best for your site.

By default, you get 5 user roles:

• Subscriber
• Author
• Editor
• Contributor
• Administrator

Each of these roles has a different set of permissions, and you can tweak them with certain plugins and code snippets. Some plugins will create specific user roles for themselves (such as BuddyPress creating the Keymaster role).

Usually, Subscriber is a good choice because they can’t create posts or really get into any kind of trouble. Once you press the Save button, your site is ready for users to register. But you’ll need a login and registration form to do that.

How to Create a Custom WordPress User Registration Page

Subscribe To Our Youtube Channel

Option 1: Use The WordPress Registration Form

The simplest way get your users to the registration for is by going into your Appearance – Widgets section and choosing the Meta widget and dragging it into your sidebar or footer area.

The downside to this method is that the widget also includes the RSS and WordPress.org links. It will also only provide a Log in link for the user to follow that takes them to the default WP login screen where they can register. This link isn’t exactly obvious.

They will then be taken to the default WordPress user registration and login page located at yoursite.com/wp-admin. They click on the (again) fairly hidden Register link, and they can sign up.

But because it’s all fairly obfuscated, you want your users to actually find the form to sign up. Now, the WordPress registration URL is https://yoursite.com/wp-login.php?action=register, and you can link to that whenever you want. That will send them to the default registration form where they choose a username and enter their email.

When they confirm their email, the account will be given the default permissions you set above.

Option 2: Use a Plugin

One of the best options for creating a front-end registration form (with a shortcode so you can put it anywhere) is a plugin called Ultimate Member. With it, you will not only be able to keep the look of your WordPress user registration page consistent with the rest of your brand, but you can also much more easily manage the users themselves, too. With 100,000+ installations and consistent updates, you can feel safe letting this one handle this for you.

First off, you will want to download and install Ultimate Member from the plugin repository. Once it’s activated, you will get a message that the plugin needs to create a few new pages to function. Go ahead and give it permission.

After it creates the pages,  you are technically ready to go. Users can register immediately at yoursite.com/register, though you can change that URL to whatever you want.

If the default form doesn’t work for you, you have two options. Edit it or create a new one. Either one can be found under the Ultimate Member section of your admin panel.

Make sure that you have Registration Form highlighted (1). The form creation itself is drag-and-drop. If you have used a page-builder before or the new WordPress editor Gutenberg, you will find the experience very similar.

The number of fields you can include is quite large, too. By clicking on the + inside the editor (3), you can add any number of details you need to know about your users.

The most important part of all this, however, is the Shortcode box (2). When you copy and paste that code into a page or widget, this particular registration form will display. For instance, you can paste it into the Custom HTML widget under Appearance – Widgets.

When that gets saved, you will see the entire form appear in the sidebar (or wherever the widget lives).

If you want that form in the middle of a post, you can now. That’s what’s so great about having it tied to a shortcode.

WordPress User Login Page

In addition to the user registration page, you can follow those exact same steps to create a login page as well. You just need to make sure the Login Form is highlighted when creating it.

The Ultimate Member plugin has already created the default URL for this one as yoursite.com/login, too. If you go with the default form, you have no more work to do. If you create a new one, though, you just need to insert the new shortcode into that page.

The end result will look something like this. Remember that you can also use the same set of fields for the login page that you did for the registration one.

The best part about this particular form is that the register button is prominent and not hidden like the default WordPress one.

Managing the New Users

By default, WordPress has a minimal user management system for administrators. You go into the Edit User screen from the Users list in your admin dashboard, and you can change many things about the users. Such as their names, the username, the display name, emails, and even their role. But in terms of the permissions for those roles, you’re out of luck by default. Plugins like Ultimate Member help this by expanding what you can do without digging into the WordPress code.

Additionally, you can create a member directory where you can manage users and display everyone who has registered for your site or service. It can be found under Ultimate Member – Member Directories.

Depending on the reason you’re allowing registration, you may or may not want this public. It starts out that way, though, since UM creates a yoursite.com/members page with the directory’s shortcode in it. You can delete or unpublish the page. If you do use a directory, though, it will look like this by default.

Other Things To Consider

Now, the previous steps have taken you from not being able to have WordPress user registration at all to being able to display a full member directory for your site. If you want to take the membership and registration a little further, here are a couple of ideas.

Create a Custom Login URL

First, you can create a custom login URL without the use of a plugin like Ultimate Member. This is different because doing it this way will let you do away completely with the /wp-admin slug, which secures your site against brute force attacks and more. Using UM to create a /register and /login are incredibly useful, but the /wp-admin way also works. If you change it completely, your site can be locked down better.

Customize the Default WordPress Login Page

Secondly, you can customize the WordPress login page itself. If you prefer to keep the default WordPress login and registration URLs intact, you can fully change the design and alter it to fit your brand. This takes a bit of knowledge of the WP Core files and PHP, but if you do, the drab grey page you get on installation can be prettied up as much as you want.

Conclusion

No matter your reason, having users register for your site is incredibly simple. With just a few clicks and a little bit of tweaking you can make WordPress user registration go from being obtuse and kind of hidden to being another part of your site that you can be proud of and can do great things with. So get out there and start building your communities.

What do you use WordPress user registration for?

Article featured image by Visual Generation / shutterstock.com

-1

1

i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements. any help with this matter will be greatly appreciated, below is all the code.

* { margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; } p, h5 { margin-bottom: 10px; line-height: 1.5; } h5 { text-align: center; border: 1px solid #ccc; border-width: 1px 0; } h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #005f5f; } .nav a.active { background-color: #fff; color: #444; cursor: default; } /* Option 1 - Display Inline */ .nav li { display: inline-block; margin-right: -4px; } <h5> <div class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a class="active" href="#">Tutorials</a></li> <li class="about"><a href="#">About</a></li> <li class="news"><a href="#">Newsletter</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> </div> </h5>

 Run code snippet

Expand snippet

html css

shareimprove this question

edited Dec 20 '15 at 17:28

asked Dec 20 '15 at 17:08

Josh

46210

•  

  C'mon heading element can only contain inline elements – Roko C. Buljan Dec 20 '15 at 17:14

add a comment

4 Answers

activeoldestvotes

2

There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this

h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; z-index:999; }

But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/

shareimprove this answer

answered Dec 20 '15 at 17:20

Manish Shukla

1,1722721

•  

  This solved my problem! works perfectly, thank you and ill take your advice on board and look into that. Thank you again! – Josh Dec 20 '15 at 17:31

https://stackoverflow.com/questions/34383547/how-to-bring-navigation-div-to-the-front

How to achieve responsive slider heights in Divi

Setting the height of sliders in the Divi Theme (and other sites using Divi Builder) can be a surprisingly difficult task. Here's how to take control of your sliders and get them to display at the height you want on desktops, mobiles and tablets.

Option 1: Setting the Slider Height in Divi Builder

First of all, Divi doesn't include a built-in slider height option.

Instead, the height is determined from the contents of the slides. The contents of a slide are typically the slide description (with title, text and buttons) and the slide image. In order to leave some height above and below these contents, Divi adds 16% top and bottom padding to the slide description. So in most cases the height of an individual slide is a result of the slide description height plus the 16% padding.

The height of the slider is then set as the height of the tallest slide, and all slides then are displayed at this same height.

The closest you can get to setting the height of a slider from within Divi itself is to use the "Custom Padding" option in the slide settings. This controls the padding above and below the slide description, and as a result can have an effect on the overall height of the slide and slider.

The benefits of this way is that it's built-in to Divi and the padding can be set separately on desktops, mobiles and tablets (by clicking on the mobile icon that appears to the right of the option).

The downsides include that changes to the slide contents, such as changing text or adding / removing a slide, can through the height unexpectedly out of whack. Likewise word wrapping as you shrink the window size might cause the slider to sporadically increase in height, which is the opposite of what you're likely to want.

Option 2: Setting the Slider Height using Divi Booster

As of version 2.6.4, Divi Booster adds a new slider height option that takes care of the messy details for you.

You'll find the new "Height" option in the Slider Module Settings, on the "Design" tab under the "Sizing" subheading.

In older versions of Divi, you'll find the option either under the "Layout" subheading or, if there are no subheadings, near the bottom of the tab. Please note the option won't be available under "Layout" unless you're using Divi Booster 2.7.2 or higher. If you can't see the option the first thing to try is updating both Divi and Divi Booster to the latest versions.

This option lets you set a minimum height in pixels for your slider. As long as this height is larger than the height of your slide contents, this is the height your slider will be set to. Otherwise, the height of your slide contents will be used.

A separate height can be set on desktops, mobiles and tablets, by clicking on the mobile icon that appears to the right of the Height option when you start editing the height value. Divi doesn't show the mobile icon when the main (desktop) height setting is the default of 500px, but if you change this to something else (e.g. 501px), the mobile icon will appear.

The new Height option is available on standard sliders, post sliders, fullwidth sliders and fullwidth post sliders.

NB: While you should no longer need to deal with it, if you do set the built-in custom padding option on your slides, the Divi Booster feature will honor this and determine the minimum height of the slide to be the contents plus your custom padding. The Height option does, however, override the default padding as this allows it to achieve smaller sliders with no change in the appearance of the slide contents.

Get Divi Booster

Option 3: Setting the Slider Height using CSS

If you want to set the height of a slider using CSS, you can do the following. First, give your slider a "CSS Class" such as "myslider" on the Advanced tab of your slider settings. Then add the following CSS to your site:

/* === Begin: Set the divi slider height === */ /* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */ /* Desktop */ .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 980px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Phone */ @media only screen and (max-width: 767px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Handle padding */ .myslider .et_pb_slide { padding-bottom: 0px !important; } .myslider div.et_pb_slide_description, .myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description { padding-top: 1%; padding-bottom: 1%; } /* === End: Set divi slider height === */

Related Post: Adding CSS to the Divi Theme

You can adjust the slider height to your requirements by setting the min-height values for desktop, mobile and tablet in the code above.

The Old Way: Setting the Slider Height Globally using Divi Booster / CSS

An older slider height option exists in Divi Booster, though I don't recommend using it any longer. You'll find this option on the Divi Booster settings page, under "Modules > Slider > Set default slider height". It sets a default slider height which applies to all sliders, and doesn't apply on mobiles / tablets.

Generally, you're going to find the new "Height" option added into individual modules to be much more flexible and convenient, so I'd always consider that as your first choice. However, I've retained the slider height option for now for people who are still using it or otherwise find it useful.

This option also used a slightly different (and less flexible) CSS implementation. This CSS doesn't handle the custom padding / positioning of the slide description as well as the new code, but here's the old CSS anyway, for completeness:

@media only screen and ( min-width:981px ) { /* Set the slider height */ .et_pb_slider, .et_pb_slider .et_pb_container { height: 425px !important; } .et_pb_slider, .et_pb_slider .et_pb_slide { max-height: 425px; } .et_pb_slider .et_pb_slide_description { position: relative; top: 25%; padding-top: 0 !important; padding-bottom:0 !important; height:auto !important; } }

Want get more out of Divi?

https://divibooster.com/changing-the-height-of-the-divi-slider/

CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.

# Example 1

@media screen (min-width: 1024px) {
   color: #000;
}

# Example 2

@media only screen (min-width: 1024px) {
   color: #fff;
}

! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 only 키워드를 사용한 경우 w3c에 따르면 예전의 user agents를 사용된 스타일 시트가 보이지 않도록 하는 역할을 한다고 합니다. 뭔가 클리어 하지는 않지만 결론은 최근에 사용되는 환경에서 only를 사용하는 것과 사용하지 않는 것 문제가 발생되지 않습니다. 구 user agent 환경의 media 속성을 감추는... 즉 적용되지 않게 하는 것이 바로 only의 목적이라 볼 수 있습니다.