如何链接到Wordpress另一页上的特定部分

Question

I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.

I know that if I just wanted to link it to the index I should use this:

<?php echo home_url(); ?> 

But I want the link to send the user to the "About" section. Basically, I need to know how to do this:

index.php#about 

but with PHP.

Thank you!

Answer 1

You're on the right track.

The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.

Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section " <a name="about">About</a> "' and then you'll be able to link to it using anchors like in your example-- <a href="/index.php#about">About</a>

Answer 2

If you are new to php, maybe you should use wordpress's editor ?

In your page (in the admin page), you can put any html you want.

In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.

So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !

Answer 3

You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.

In practice, you'll have some HTML containers that look something like this:

<!-- Your menu -->
<ul>
  <li id="about-button"></li>
  <li id="product-button"></li>
  <li id="something-button"></li>
  <li id="else-button"></li>
</ul>    

<!--Your page sections-->
<main class="my-page">
  <section id="about"></section>
  <section id="product"></section>
  <section id="something"></section>
  <section id="else"></section>
</main>

Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:

$('#about-button').click(function() {
  $.scrollTo($('#about'), {
    duration: 800,
    offset: -50
  });
  return false;
});

The JS is saying that once you click on the #about-button , take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.