Recently, I received a project using wordpress to imitate the station. I thought it was very simple, but I found some "small" problems after I started. Moreover, there are not only a few tutorials about wordpress on the Chinese Internet, but also many old ones. Many of them are not applicable to the version after 5.x. now I will sort out the problems I encountered in the development process into this article
Cyclic block
This is probably the most practical function of wordpress. It plays a great role in changing a static web page to a dynamic one. The usage is as follows:
(1) Static code
<div id="jj2" class="kiz_zyzx" > <a href="http://www.kiz.cas.cn/zyzx/zyzx01/201807/t20180709_5038706.html">Introduction to the center</a><br /> <a href="http://www.kiz.cas.cn/zyzx/zyzx05/">Research progress</a><br /> <a href="http://www.kiz.cas.cn/zyzx/zyzx01/zyzx03/">Key talents</a><br /> <a href="http://www.kiz.cas.cn/zyzx/zyzx07/">news information</a><br /> <a href="http://www.kiz.cas.cn/zyzx/zyzx07/zyzx72/">Notice notice</a><br /> <a href="https://www.yunzhan365.com/bookcase/jvpq/">Center briefing</a> </div>
Observe where the static code loops and determine the loop block
(2) Dynamic code
<div id="jj2" class="kiz_zyzx"> <?php query_posts('cat=10 & posts_per_page=6'); while (have_posts()) : the_post(); ?> <a href="<?php lxtx_post_link(); ?>"><?php the_title(); ?></a><br /> <?php endwhile;wp_reset_query(); ?> </div>
- Use < PHP query_ posts('cat=10 & posts_ per_ page=6'); while (have_ posts()) : the_ Post();? > and <? PHP endwhile; WP_ reset_ Query();? > clamp the block to loop
- The cat attribute corresponds to the background category directory id (hovering on the directory can be viewed in the lower left corner), posts_ per_ Number of cycles corresponding to page attribute
- Modify the static content inside the loop block to dynamic content, such as < PHP the_ title(); ?>
Cycle column
As mentioned above, the use of cycle block will encounter the regular change of style in the process of cycle, as shown in the following figure
[failed to transfer the pictures in the external link. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-CQ2rsqRA-1591519565745)( /… /… /AppData/Roaming/Typora/typora-user-images/image-20200607154029782.png)]
At this point, you need to use php to output html elements
(1) Static code
<table width="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="kiz_zyzx"> <a href="./gkjj/jgjj/" target="_blank">Organization Profile</a> </td> </tr> </table></td> <td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="kiz_zyzx"> <a href="./gkjj/szzc/" target="_blank">Director's speech</a> </td> </tr> </table></td> </tr> <tr> <td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="kiz_zyzx"> <a href="./gkjj/leadership/" target="_blank">Leader of the Institute</a> </td> </tr> </table></td> <td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="kiz_zyzx"> <a href="./gkjj/zzjg/" target="_blank">Organization</a> </td> </tr> </table></td> </tr> </table>
Carefully observe the structure of static code, and the regular place of its circulation, and roughly simplify the law
<tr> <td> </td> <td></td> </tr> <tr> <td> </td> <td></td> </tr>
So we can think of the content of the loop label. After each loop twice, output the label in php
(2) Dynamic code
<tr> <?php query_posts('cat=8 & posts_per_page=5'); while (have_posts()) : the_post(); $count++; ?> <td width="50%" height="28" align="left"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="kiz_zyzx"> <a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a> </td> </tr> </table> </td> <?php if ($count == 2) { echo '<tr>'; $count = 0; } ?> <?php endwhile; wp_reset_query(); ?> </tr>
Use count to record the number of cycles, and then use the conditional sentence "if(count to record the number of cycles, and then use the conditional sentence `if(count to record the number of cycles, and then use the conditional sentence" if(count == 2) "to output the tr label
Get the first picture of the article
In the process of imitating a website, there are often places that need to insert pictures dynamically. In this case, the method of getting the first picture of an article is often used to insert pictures
(1) Get picture function
function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); //Get the path of the first picture in the article and output $first_img = $matches [1] [0]; //If there is no picture for the article, get a custom picture if(empty($first_img)){ $first_img = "".bloginfo('template_url')."/images/xx.jpg"; //Set default picture } return $first_img; }
Put this function in function.php In file
(2) Modify static content
<div class="tile" style="margin-left:4px;"> <div class="text"> <img src="<?php echo catch_that_image() ?>" width=240 height=160 border=0 /> <h2 class="animate-text"> <a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></h2> </div> </div>
Change the static picture link to <? PHP echo catch_ that_ Image()? > to get the first figure of the article
Insert external link
In the process of imitating the website, some places need to insert external links instead of jumping to the default article page. In this case, a function of inserting external links is needed
(1) Get external link function
//Get external links, the_permalink() replaced with out_post_link() function out_post_link() { global $post; $thePostID = $post->ID; $post_id = get_post($thePostID); $title = $post_id->post_title; $perm = get_permalink($post_id); $post_keys = array(); $post_val = array(); $post_keys = get_post_custom_keys($thePostID); if (!empty($post_keys)) { foreach ($post_keys as $pkey) { if ($pkey=='out_url' || $pkey=='title_url' || $pkey=='url_title') { $post_val = get_post_custom_values($pkey); } } if (empty($post_val)) { $link = $perm; } else { $link = $post_val[0]; } } else { $link = $perm; } echo $link; }
Also place the function in the function.php file
(2) How to use
-
Insert <? PHP out where you need to jump to an external link_ post_ link() ?>
<a href="<?php lxtx_post_link()?>" target="_blank"> <img src="<?php echo catch_that_image() ?>" alt="202003" border=0 /> </a>
-
Insert the custom field in the corresponding article in wordpress background: out_url / title_url / utl_title, fill in the external link to jump
[failed to transfer the pictures in the external link. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-DkNts835-1591519565748)( /… /… /AppData/Roaming/Typora/typora-user-images/image-20200607152835570.png)]
Breadcrumb navigation
(1) Crumb function
function cmp_breadcrumbs() { $delimiter = ' > '; // Separator $before = '<span class="top_path">'; // Insert before current link $after = '</span>'; // Insert after current link if (!is_home() && !is_front_page() || is_paged()) { if (is_category()) { // Classified Archive global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) { $cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '); echo $cat_code = str_replace('<a', '<a class="top_path CurrChnlCls"', $cat_code); } echo '<a class="top_path CurrChnlCls" href="">' . single_cat_title('', false) . '</a>'; } elseif (is_day()) { // Day Archive echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' '; echo '<a itemprop="breadcrumb" href="' . get_month_link(get_the_time('Y'), get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' '; echo $before . get_the_time('d') . $after; } elseif (is_month()) { // Monthly Archive echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' '; echo $before . get_the_time('F') . $after; } elseif (is_year()) { // Annual Archive echo $before . get_the_time('Y') . $after; } elseif (is_single() && !is_attachment()) { // article if (get_post_type() != 'post') { // Custom article type $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo '<a class="top_path CurrChnlCls" href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' '; echo '<a class="top_path CurrChnlCls" href="' . the_permalink() . '">' .wp_trim_words( get_the_title(), 6 ). '</a>'; } else { // Article post $cat = get_the_category(); $cat = $cat[0]; $cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); echo $cat_code = str_replace('<a', '<a class="top_path CurrChnlCls"', $cat_code); echo '<a class="top_path CurrChnlCls" href="">' . wp_trim_words( get_the_title(), 5) . '</a>'; } } elseif (!is_single() && !is_page() && get_post_type() != 'post') { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif (is_attachment()) { // enclosure $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat[0]; echo '<a class="top_path CurrChnlCls" href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' '; echo $before . wp_trim_words( get_the_title(), 5). $after; } elseif (is_page() && !$post->post_parent) { // page echo '<a class="top_path CurrChnlCls" href="' . the_permalink() . '">' .wp_trim_words( get_the_title(), 5 ). '</a>'; } elseif (is_page() && $post->post_parent) { // Parent page $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = '<a class="top_path CurrChnlCls" href="' . get_permalink($page->ID) . '">' . wp_trim_words( get_the_title(), 5 )($page->ID) . '</a>'; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' '; echo '<a class="top_path CurrChnlCls" href="">' . get_the_title() . '</a>'; } elseif (is_search()) { // search result echo $before; printf(__('Search Results for: %s', 'cmp'), get_search_query()); echo $after; } elseif (is_tag()) { //Label Archive echo $before; printf(__('Tag Archives: %s', 'cmp'), single_tag_title('', false)); echo $after; } elseif (is_author()) { // Author Archive global $author; $userdata = get_userdata($author); echo $before; printf(__('Author Archives: %s', 'cmp'), $userdata->display_name); echo $after; } elseif (is_404()) { // 404 page echo $before; _e('Not Found', 'cmp'); echo $after; } } }
Add this function function.php In file
(2) Quote crumbs
<!-- Crumbs start --> <span class="top_menu"> <?php $category = get_the_category(); echo $category[0]->cat_name; ?> </span> <?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?> </div> <!-- Crumbs end -->
Rotation chart
The idea of loop is also used in the rotation chart, but in the process of imitating the station, we will encounter the practice of putting the picture link in the css. php cannot write in the css to obtain the picture dynamically. At this time, we can create a picture to cover the original block to be rotated, and inherit the effect of rotation
(1) Static code
<div class="ps_box"> <div class="pics_switch"> <div class="pb"> <div class="pic_box"><a class="pic_banner_001" target="_blank" href="http://www.kiz.cas.cn/"></a></div> <div class="pic_box"><a class="pic_banner_002" target="_blank" href="http://www.kiz.cas.cn/"></a></div> <div class="pic_box"><a class="pic_banner_003" target="_blank" href="http://www.kiz.cas.cn/"></a></div> <div class="pic_box"><a class="pic_banner_004" target="_blank" href="http://www.kiz.cas.cn/"></a></div> </div> <div class="viewArrows prev">Previous</div> <div class="viewArrows next">Next</div> <div class="pics_switch_clients"> <ul> <li class="li_1" style="list-style:none;"><span class="current">1</span></li> <li class="li_2" style="list-style:none;"><span>2</span></li> <li class="li_3" style="list-style:none;"><span>3</span></li> <li class="li_4" style="list-style:none;"><span>4</span></li> </ul> </div> </div> </div>
(2) Dynamic code
<div class="pics_switch"> <div class="pb"> <?php query_posts('cat=7 & posts_per_page=4'); while (have_posts()) : the_post();?> <div class="pic_box" > <img src="<?php echo catch_that_image() ?>" ><a class="pic_banner001" target="_blank" href="http://www.kiz.cas.cn/"></a></div> <?php endwhile; wp_reset_query(); ?> </div> <div class="viewArrows prev">Previous</div> <div class="viewArrows next">Next</div> <div class="pics_switch_clients"> <ul> <li class="li_1" style="list-style:none;"><span class="current">1</span></li> <li class="li_2" style="list-style:none;"><span>2</span></li> <li class="li_3" style="list-style:none;"><span>3</span></li> <li class="li_4" style="list-style:none;"><span>4</span></li> </ul> </div> </div>
Multi level menu
Here comes a very heavy knowledge point! What I spend the most time to study in the development process, plus the blogs on the Chinese Internet are very old and not very practical. This article is based on the content of 5.4.1 to realize the three-level menu, which I would like to call the first article [dog head] of wordpress on the Chinese Internet
(1) Static content observation
<div class="menu" style="width:1200px;text-align:left;"> <ul class="nav"> <li style="background-color:#14A73C;"><a href="http://www.kiz.cas.cn/">first page</a> </li> <li><a href="http://www.kiz.cas.cn/jgsz/">Organization setup</a> <ul class="sub-nav"> <li><a href="http://www.kiz.cas.cn/jgsz/kyxt/">scientific research institution</a></li> <li><a href="http://www.kiz.cas.cn/jgsz/glxt/">Management organization</a></li> <li><a href="http://www.kiz.cas.cn/jgsz/zcxt/">Supporting mechanism and technical platform</a></li> <li><a href="http://www.kiz.cas.cn/jgsz/gkxh/">Affiliated Society</a></li> </ul> </li> <li><a href="http://www.kiz.cas.cn/kycg/">Scientific research achievements</a> <ul class="sub-nav"> <li><a href="http://www.kiz.cas.cn/kycg/hjcg/">Award winning</a></li> <li><a href="http://www.kiz.cas.cn/kycg/lw/">paper</a></li> <li><a href="http://www.kiz.cas.cn/kycg/zz/">monograph</a></li> <li><a href="http://www.kiz.cas.cn/kycg/zl/">patent</a></li> </ul> </li> <ul> <div>
(2) Registration menu
register_nav_menus(array( 'PrimaryMenu'=>'Navigation', 'friendlinks'=>'Friendship links', 'footer_nav'=>'footer navigation ') ); add_theme_support('nav_menus');
stay function.php Add the code to the file, and register the form menu of the menu
(3) Dynamic modification
In fact, the dynamic modification of the menu is to use php to replace the class of the related block. From the static observation, the outer ul is nav, and the outer div is menu. Because the container here has the form of inline css, it is not suitable to replace it.
<div class="menu" style="width:1200px;text-align:left;"> <?php wp_nav_menu(array( 'theme_location' => 'PrimaryMenu', 'menu_class' => 'nav', //ul node class value 'depth' => 0, )); ?> </div>
(4) Secondary menu
The second level menu is the inner one
- These are led by tags, and wordpress uses "sub menu" by default
So all we need to do is
- The selector (. Sub NAV) of the css style sheet corresponding to the label should be changed to ". Sub menu"
nav li .sub-menu { position: absolute; top: 55px; left: 0px; list-style: none; background-color: #006E39; display: none; } .nav li .sub-menu li { text-align: center; clear: left; width: 180px; height: 40px; line-height: 40px; position: relative; border-top: 1px solid #2E7A4A; border-bottom: 1px solid #005E31; } .nav li .sub-menu li a { height: 40px; line-height: 40px; width: 180px; padding: 0; display: inline-block; }
(5) Three level menu
Here I use the simplest method to modify the files in WP includes. The default class of the third level is "third menu"
Modified file path: root directory / WP includes / class Walker nav- menu.php
(many old articles are about modifying nav menu- template.php File)
Modification:
public function start_lvl( &$output, $depth = 0, $args = null ) { if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) { $t = ''; $n = ''; } else { $t = "\t"; $n = "\n"; } $indent = str_repeat( $t, $depth ); // A condition judgment is added here to determine the menu level if($depth == 0){ $classes = array( 'sub-menu' );} else{ $classes = array( 'third-menu' ); }
if($depth == 0) conditional sentence adds a layer of third menu directory, and then modifies the third level css style by modifying the second level!
This article imitates the station object: http://www.kiz.cas.cn/
ncludes/class-walker-nav-menu.php
(many old articles are about modifying nav menu- template.php File)
Modification:
public function start_lvl( &$output, $depth = 0, $args = null ) { if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) { $t = ''; $n = ''; } else { $t = "\t"; $n = "\n"; } $indent = str_repeat( $t, $depth ); // A condition judgment is added here to determine the menu level if($depth == 0){ $classes = array( 'sub-menu' );} else{ $classes = array( 'third-menu' ); }
if($depth == 0) conditional sentence adds one more layer of third menu directory, and then modifies the third level css style by modifying the second level!
This article imitates the station object: http://www.kiz.cas.cn/
Some references in this paper: https://wp.rollby.xin/