wordpress copy notes

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 = '&nbsp;>&nbsp;'; // 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>

&nbsp;&nbsp;&nbsp;&nbsp;

<?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&nbsp;&nbsp;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/

Tags: PHP Attribute

Posted on Sun, 07 Jun 2020 05:45:14 -0400 by Kryptix