WordPress theme tutorial #5: Main Loop

TheThe loop)It is the most important PHP code set in WordPress and is used on almost all pages. This is the fifth tutorial in the WordPress topic series from scratch.
Before continuing learning, let's review what we have learned so far?

So far, we have learned::

• Hierarchical Structure of rules, terms, and WordPress Themes
• What are the components of each page?
• How to install your theme
• How to call the blog title and make it a link
• How to call the blog description and how to separate the header from other parts

Now let's start Article 5:The loop)

Open the XAMPP, "tutorial" theme folder, and the browser, and transfer to http: // localhost/WordPress in the browser, and finally open the index. php file.

This is the time.index.phpFile Content:

Remember, to learn the code, try to input it manually instead of copying and pasting it.

Step 2: Create a container Div

Add a div tag under the header Div tag and assign its ID to "container", as shown below:

<Div id = "Container">

</Div>

The "Container" Div tag separates the main content of a blog from other things, such as sidebar and footer.

Step 2: Enter the main loop code

Add the following code to the DIV label of container:

<? PHP if (have_posts ():?> <? PHP while (have_posts (): the_post ();?>

<? PHP endwhile;?>

<? PHP endif;?>

This code is in WordPressThe loop). Before explaining the functions of these codes in detail, let's take a look atindex.phpCode contained:

You may have noticedEach line in the container div is indented.This is for betterOrganize codeTo facilitate reading (Use the tab key instead of the Space key to indent the code,).

What happened just now?

• If (have_posts ())-Check the blogLogs?.
• While (have_posts ())-If logs existWhenBlogLogs availableRun the_post.
• The_post ()-Call specific logs for display.
• Endwhile;-Follow rule #1, which is used to disableWhile ()
• Endif;-DisableIf ()
• Note: Not all code requires two parts to open and close. Some code can be disabled by itself, which explainsHave_posts ()AndThe_post ();These two functions. BecauseThe_post ();InIf ()AndWhile ()You only need a semicolon to end or close.

Step 2: Call log title

In the previous course, we learned how to usebloginfo('name')Call the blog title. Now we will learnThe loop)How to callLog title.

InThe_post ();?>And<? PHP endwhile;?>Before<? PHP the_title ();?>

Save the index. php file and refresh the browser. At this time, the file appears below the blog description.Hello WorldAfter WordPress is installed by default, there is only one log in the blog. My tested blog has multiple logs, so there are multiple log titles here, and because I use the same log titles, I have not organized them, so they look like a long line of Hello world.

Step 2: add a link to the log title

SetLog titleConvertLog title Link. Remember how to convert the blog title into a link?

In<? PHP the_title ();?>Add on both sides<A href = "#">And</A>.

Save and refresh your browser. Now the log titles are changed to links, but they do not point to any point. To make each title point to the correct log, we need#ReplaceThe_permalink ().

<A href ="<? PHP the_permalink ();?>"> <? PHP the_title ();?> </A>

The_permalink ()Is the PHP function used to call each log address. Save and refresh the browser.

If only oneHello WorldTitle, move the mouse over the link, observe the status bar at the bottom of your browser, he is no longerHttp: // localhost/WordPress /#.

If there is more than one title link, we will see that each link is linked to a different log or webpage. However, the log title is still on the same line. To separate them, add<H2>And</H2>Label.

<H2><A href = "<? PHP the_permalink ();?> "> <? PHP the_title ();?> </A></H2>

RememberH1Used as the title of your blog. It is the title of a webpage.H2Used as a subtitle. Now your log title link is a sub-title, each of which is a line. Save the index. php file and refresh the browser. The result is as follows:

Here is the WordPress main loop.index.phpThe file content should be: