Add card type inner chain to DUX theme Pure code implementation

Recently, I saw a very interesting function on the Internet, the card type inner chain, with the following style:

Road to building a station

In fact, bloggers started to have their own servers (VPS: virtual private servers) very early. At that time, they bought them purely for the purpose of science * science * online *. At that time, they also paid attention to many VPS blogs, such as host evaluation, Zhao Rong Tribe, etc., and bought many VPS that they didn't know why they wanted to kill

Time: 2018-04-13 Classification: talk of everything under the sun read: two thousand six hundred and seventy-five Comments: three

1. Improvement

The blogger also made some minor modifications on this basis:
1. Fix the card classification problem:
The blogger checked the code and found that the obtained classification belongs to the classification of the article, rather than the classification of the article with the ID of the inner chain. Here the blogger made a small change to complete the task!
2. Modify the default picture of the card
The card type default picture is the characteristic picture of the article, but when the article has no picture, the source code is to obtain the default picture. Here the blogger sets it to obtain a random picture set by himself. The direct picture location will be described in detail below!

2. Add functions.php code

Copy the following code to the functions.php file of the DUX theme:

 //Get featured picture address function jsk_the_thumbnail_src() { global $post; If (get_post_meta ($post ->ID, 'thumbnail', true)) {//If there are thumbnails, thumbnails will be displayed $image = get_post_meta($post->ID, 'thumbnail', true); return $image; } else { If (has_post_thumbnail()) {//If there is a thumbnail, the thumbnail will be displayed $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); return $img_src[0];       } else { $content = $post->post_content; preg_match_all('/<img.*? (?: |\\t|\\r|\\n)? src=[\'"]?(.+?)[\'"]? (?:(?: |\\t|\\r|\\n)+.*?)?>/ sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); if($n > 0){ return $strResult[1][0]; // If there is no thumbnail, take the first picture in the article as the thumbnail }else { $random = mt_rand(1, 9); return get_stylesheet_directory_uri().'/ img/random/'.$random.'.jpg'; //return get_template_directory_uri().'/ Img/thumbnail. png ';//If there is no picture in the article, set a random picture display } } } } //Short code in the article if(! function_exists('embed_posts')){ function embed_posts( $atts, $content = null ){ extract( shortcode_atts( array( 'ids' => '' ),$atts ) ); global $post; $content = ''; $postids = explode(',', $ids); $inset_posts = get_posts(array('post__in'=>$postids)); $category = get_the_category($ids); foreach ($inset_posts as $key => $post) { setup_postdata( $post ); $content .= '< div class="neilian">'; $content .= '< div class="fl">'; $content .= '< a target="_blank" href="'.  get_permalink() .' " class="fl"><i class="fa fa-link fa-fw"></i>' . get_the_title() . '<span style="color:#FF5E52; ">' . get_the_subtitle() . '<span></a>'; $content .= '< p class="note"><span class="card-abstract">'. wp_trim_words( get_the_excerpt(), 100, '...' ) .'</span></p>'; $content .= '< P class="card controls"><span class="group data"><i>Time:</i>'. get_the_modified_date ('Y/n/j'). '</span><span class="group data"><i>Classification:</i><a target="_blank" href="'. get_category_link ($category [0] ->term_id). ' ">'. $category [0] ->cat_name.'</a></span><span class=" group data "><i>Popularity:</i>'. _get_post_views (false,' ',' ', false).'</span><span class=" group data "><i>Comments:</i>'. get_comments_number().'</span></p>'; $content .= '</ div>'; $content .= '< div class="fr">'; $content .= '< a target="_blank" href="'.  get_permalink() .' "><img src='. jsk_the_thumbnail_src() .' class="neilian-thumb"></a>'; $content .= '</ div>'; $content .= '</ div>'; } wp_reset_postdata(); return $content; } } add_shortcode('jsk_embed_post', 'embed_posts');

3. Add shortcut button

After copying the following code to functions.php, the text editing box in the editor will have a card type inner link button!

 //Add card inner link button function appthemes_add_embed_posts() { ?> <script type="text/javascript"> if ( typeof QTags != ' undefined' ) { QTags. addButton ('jsk_embed_post ',' In card link button ',' [jsk_embed_post ids=123] ',' '); }  </script> <? php  } add_action('admin_print_footer_scripts', 'appthemes_add_embed_posts' );

be careful: Replace the“ 【 ”Change to“ [ ” ！

4. Add css style

 .fl{float:left} .fr{float:right} .neilian { margin-bottom:25px; padding:10px; width:100%; overflow: hidden; border:1px dashed #d4d4d4; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.1); cursor:pointer; -webkit-transition:box-shadow 218ms; -moz-transition:box-shadow 218ms; -o-transition:box-shadow 218ms; transition:box-shadow 218ms; } .neilian:hover { box-shadow:0 1px 8px 1px rgba(0,0,0,.1); } .neilian .fl { width:72%; } .neilian .fr { padding:10px 5px; width:24%; } .neilian .fl a { display:block; margin-right:15px; padding:8px 5px; width:100%; color:#35a56b!important; text-decoration:none; font-size:16px; border:none; } .neilian .fl .note { margin:0 0 5px; padding-left:10px; font-size:14px; } .neilian .fl .card-controls { padding-left:10px; font-size:12px; } .neilian .fl .card-controls .group-data { float: left; margin-right: 10px; color: #999; } .neilian .card-controls .group-data i { margin-right: 5px; font-style: normal!important; } .neilian .card-controls .group-data a { font-size:12px; display:inline; margin-right:auto; padding:inherit; } .neilian .neilian-thumb{ width:170px; height:120px; } @media only screen and (max-width:700px) { .neilian .fl {width:100%;} .neilian .fr {display: none;} }

The style blogger also uses the "Lingyang" boss directly!

5. Add random pictures

As shown in the following code:

 $random = mt_rand(1, 9); return get_stylesheet_directory_uri().'/ img/random/'.$random.'.jpg';

The blogger here calls the picture 1.jpg、2.jpg ~~~ 9.jpg , put these pictures in the img/random If you don't have one, you can create a folder name like this. If you want to find a picture on the Internet, you can do it if you like!

6. Usage

Directly click the "Card Internal Chain Button" in the text editing box, and then ids Then change it to the ID of your blog post!

 【jsk_embed_post ids=123]

be careful: Ids must be the internal link of your own blog! Can be used in a ids Write multiple IDs at the back, separated by English commas. as

 【jsk_embed_post ids=123,234]

However, it must be ensured that the classification of articles corresponding to these two ids is the same!