为WordPress主题123 Medicine添加登录注册自定义链接

Hey there! Let’s fix this issue of adding a login/register block above your site’s search box. I’ve worked with WordPress theme customizations like this plenty of times, so here are three solid methods you can try—depending on how comfortable you are with code:

Method 1: Modify the Header Template (Use a Child Theme!) #

First, always use a child theme for edits like this—otherwise, your changes will get wiped when the parent theme updates. If you don’t have one set up yet, create and activate a child theme for 123 Medicine first.

1. Go to your WordPress dashboard → Appearance → Theme File Editor
2. In the child theme files, locate header.php (if it doesn’t exist, copy the parent theme’s header.php into your child theme folder first)
3. Find the code that renders the search box (use your browser’s dev tools to inspect the search box and match it to the template code—look for classes like search-box)
4. Right above that search box code, paste this custom HTML block:

<div class="top-login-register">
  <a href="<?php echo wp_login_url(); ?>">Login</a> | <a href="<?php echo wp_registration_url(); ?>">Register</a>
</div>

5. Save the file, then head to your child theme’s style.css to add styling (adjust colors/padding to match your theme):

.top-login-register {
  text-align: right;
  padding: 10px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
}
.top-login-register a {
  margin: 0 8px;
  color: #2d3748;
  text-decoration: none;
}
.top-login-register a:hover {
  color: #0073aa;
  text-decoration: underline;
}

Method 2: Use Theme Hooks (If Available) #

Many WordPress themes include action hooks that let you add content without editing template files directly. Check if 123 Medicine has a hook that runs before the search box (common names might be 123medicine_before_search or header_top_before_search).

1. Open your child theme’s functions.php file
2. Add this code snippet:

// Add login/register links above search box
add_action('123medicine_before_search', 'custom_login_register_links');
function custom_login_register_links() {
  ?>
  <div class="top-login-register">
    <a href="<?php echo wp_login_url(get_permalink()); ?>">Login</a> | <a href="<?php echo wp_registration_url(); ?>">Register</a>
  </div>
  <?php
}

3. Save the file, then add the same CSS from Method 1 to your child theme’s style.css

Method 3: No-Code Option with a Widget #

If you prefer not to touch code, check if your theme has a widget area in the top header section:

1. Go to Appearance → Widgets
2. Look for a widget area labeled something like "Top Header" or "Above Search"
3. Add a "Custom HTML" widget to that area
4. Paste this code into the widget:

<div class="top-login-register">
  <a href="/wp-login.php">Login</a> | <a href="/wp-login.php?action=register">Register</a>
</div>

5. Go to Appearance → Customize → Additional CSS and add the styling from Method 1

Troubleshooting Your Previous Attempt #

If you tried adding a div before and it didn’t show up, a few common issues could be:

• You inserted the div in the wrong part of the template file (double-check the position relative to the search box code)
• CSS conflicts were hiding the element (use your browser’s dev tools to inspect the div—look for display: none or visibility: hidden styles)
• You edited the parent theme directly, and the changes were overwritten when the theme updated (hence why child themes are critical!)

内容的提问来源于stack exchange，提问作者user8512043