“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

  • This article is an advanced tutorial, it is not recommended to have no code base to view, the best project experience, have a certain understanding of the project as a whole; That makes sense. If it doesn’t, it doesn’t matter;
  • Themes in the theme library may sometimes meet your needs, but it is difficult to meet them completely, unless you are not demanding, or you can change the relevant code of the theme yourself.
  • Official theme library: cn.wordpress.org/themes/

Editing subject

  • The background management page is displayedappearanceIn theTheme editor, you can see all the code of the theme, I am not recommended to edit the source directly in the background; But this is learning; The details are shown in the figure below:

  • As you can see, the background theme is also a project body. For details, you can read readme.txt. I will pick a few major ones to explain, such as style sheets, CSS, 404 templates, font, images, etc.

1, header

  • Page header here can decide how to display the head of the page, there is even though you set up a language plug-in in the background, but its own page language switch button is very ugly, at this time you can find the specified code to modify the style; The following code is the code for displaying the level 1 title on the page, and you can see the key fieldsTopNavIs not very familiar, this is directly linked to the name of the background Settings; The diagram below:
<div class="topnav_container">
  <nav class="navbar navbar-default" role="navigation"> 
    <?php
      wp_nav_menu(array('menu'= >'TopNav',
      'theme_location'= >'primary',
      'depth'= > 2,container' => false,
      'menu_class'= >'nav navbar-nav',
      'fallback_cb'= >'wp_page_menu',
      'walker' => new wp_bootstrap_navwalker())
       );
    ?>
  </nav>
</div>
Copy the code

Note: if you want to change the content of the header, you can operate in this file, but remember not to break the original code, for the structure, if you do not understand, please carefully modify;

2. Home Template

  • The flexibility of WordPress themes lies in the templates we are familiar with. In fact, here we can edit very little, but we can see that it has very little code, but it achieves a lot of our presentation requirements. In fact, I use the background article editing tool hereWPBakery, this is the background of the company, their website can be used if conditions permit; This is for a fee;

3, Sub page Sub Template Template

  • Sub-page general template, I introduce the details of my own modification of the part; As shown below, because it is the general template of all sub-pages, the general point is that each page head on a wide picture, the right side of the picture to write the name and classification of the current page, encounter a few special pages to change the source code; Because plug-ins are not compatible with each other; As shown in the figure below.
  • Anyone who knows code should be able to read some logic. If you want to know more about it, you can learn PHP – “the best language”!

The id of the current page is Chinese or English news. The id of each page is unique. After judging the news type according to the Chinese and English situation, through PHParray built-in method key value of the code database to check the specified news data; Then make a simple judgment on the data and perform a circular display, including the classification of the year included in H3. The news of the corresponding year, the display time, title and summary of the department of Public Information are displayed below the year.

ShortCodes file

  • As the name implies, the purpose of this file is to write simple code variables that can be easily referenced elsewhere; The diagram below:
// Page Title Shortcode
//// Enable Current Year in Visual Composer 

function page_title_shortcode() {
  $title = get_the_title();
  return $title;
}
add_shortcode('page_title'.'page_title_shortcode');
Copy the code
  • The following is the variable returned by the news fragment function and then assigned to the shorthand variable; The following code is not written by me, of course, automatically generated, if there is a need we just modify above, if you have other simple code requirements on the page, you can edit yourself here;

5. Template functions

Theme Settings: Some theme functions should be included in a “Settings” function that runs initially when your theme is activated; Navigation menu: Custom navigation menu allows users to edit and customize menus in the “Menu” management panel, providing users with a drag-and-drop interface to edit various menus in their theme; Load text fields: Topics can be translated into multiple languages by making strings in your topics available for translation; Publish thumbnails: Publish thumbnails and select images lets your users choose an image to represent their posts; Your themes can decide how to display them based on their design; Post formats: Post formats allow users to format their posts in different ways; This is useful for allowing bloggers to choose different formats and templates based on the content of their posts;

6, the footer

  • The footer is similar to the header. Here is a snippet that I modified; The functions realized in the code are not realized by the background Settings, which is caused by the support of Chinese and English, so here we try to show the footer by controlling the code;
// footer displays the link to the control logo
if ((document.URL).indexOf('/zh/') > -1) {$('.footernav_container').append(`
       
    wp_nav_menu( array('menu'= >'zhFooterNav' ));
    wp_nav_menu( array('menu'= >'SocialNav' )); 
  ? >`);
  $('.wp_language_switch a').attr('href'.'/').text('English');
  $('.header .svg_link').attr('href'.'/zh/zhuye');
}else{$('.footernav_container').append(`
       
    wp_nav_menu( array('menu'= >'FooterNav' ));
    wp_nav_menu( array('menu'= >'SocialNav' )); 
  ? >`);
  $('.wp_language_switch a').attr('href'.'/zh/zhuye').text('Simplified Chinese');
  $('.header .svg_link').attr('href'.'/');
}
Copy the code

conclusion

This article mainly explains let us understand the theme of the code structure, as well as the different role of different modules in the theme; It’s a little difficult to learn how to develop this in a simple way, so if you’re interested, you’re welcome to explore it and discuss it together;

series

A preliminary understanding of WordPress (1) WordPress theme and basic Settings (2) WordPress plug-in can be used and article preparation (3)

Please do not hesitate to point out any mistakes in this article, thank you!