How to add article card style in WordPress? Embed shortcode in article card form

WordPressHow to optimize website internal links?

Create Shortcodes with Thumbnail Articles & Editor Buttons

Website internal link optimization, inSEOLinks have always been very important, and a good link structure is very beneficial to SEO.

If the current article is related to other articles, automatically add a link to the page:

• will greatly increase the number and depth of crawling by search engine spiders,
• help to increase the number of records,
• And the weight of anchor text keywords.

If some old articles are updated, you can also instruct search engine spiders to re-crawl and index the content updates of the old articles by adding internal links to the new articles.

• A common form of internal linking is a text link, whose structure is anchor text .
• But in order to enhance the user experience, we can further optimize the article links on the inner page.

when you readChen WeiliangWhen blogging, you may often find that an article card form is embedded like this, with a thumbnail article containing a summary of the article's content, for example:

How to apply for a Hong Kong mobile number?Hong Kong virtual mobile phone number to receive SMS verification code

eSender Hong Kong mobile phone number discount code: DM6888 Where can I buy a Hong Kong mobile phone number?Hong Kong calling card virtual operator recommended eSender It is a virtual mobile phone number service under Boyuan Information Group.Boyuan Information has set up branches in Guangzhou and Hong Kong, China. It is...

XNUMX. Add an embedded article card style shortcode

Step 1:Add PHP code

Add the following code to your WP theme's functions.php file:

/**
* 加入内部文章缩略图 By 陈沩亮
* 文章地址：https://www.chenweiliang.com/cwl-638.html
**/
 function cwl_thumbnail_src() {
 global $post;
 if ( get_post_meta($post->ID, 'thumbnail', true) ) { //如有缩略图，就显示缩略图
 $image = get_post_meta($post->ID, 'thumbnail', true);
 return $image;
 } else {
 if ( has_post_thumbnail() ) { //如有缩略图，就显示缩略图
 $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]; //若无缩略图，就调用文中第一张图片作缩略图
 }else {
 $random = mt_rand(1, 20);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg'; //文章中若无图片，就随机读取在 random 文件夹内的图片作缩略图
 }
 }
 }
 }

//加入内部文章链接
 function cwl_insert_posts( $atts, $content = null ){
 extract( shortcode_atts( array(
 'ids' => ''
 ),
 $atts ) );
 global $post;
 $content = '';
 $postids = explode(',', $ids);
 $inset_posts = get_posts(array('post__in'=>$postids));
 foreach ($inset_posts as $key => $post) {
 setup_postdata( $post );
 $content .= '<div class="jiawen"><div class="fl"><a target="_blank" href="' . get_permalink() . '" class="fl"><i class="fa fa-link fa-fw"></i>';
 $content .= get_the_title();
 $content .= '</a><p class="note"><a target="_blank" rel="nofollow" href="' . get_permalink() . '">';
//$content .= get_the_excerpt(); 
 $content .= mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 180, …… );
 $content .= '</a></p></div><div class="fr"><a target="_blank" rel="nofollow" href="' . get_permalink() . '"><img src=';
 $content .= cwl_thumbnail_src();
 $content .= ' class="jiawen-thumb" alt="' . get_the_title() . '" title="' . get_the_title() . '"></a></div></div>';
 }
 wp_reset_postdata();
 return $content;
 }
 add_shortcode('jiawen', 'cwl_insert_posts');

If the hyperlink icon does not appear, you need to replace the aboveCSSThis fa fa-link fa-fwTo sui sui-link sui-fw

• Please check your WP theme, is there a /img/random/ folder?
• (if not, please create)
• Then in the random file, add 20 jpg images.

The pictures are named from 1 to 20:

• 1.jpg
• 2.jpg
• ... (and so on)
• 20.jpg

Step 2:Add CSS code

Add the following code to your WP theme's style.css file:

/*加入内部文章CSS*/
.fl{float:left;}
.fr{float:right;}
.jiawen{margin-bottom:25px;padding:10px;width:100%;height:100%;border:1px solid #e8e8e8;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;overflow:hidden;}
.jiawen:hover{box-shadow:0 1px 8px 1px rgba(0,0,0,.1);}
.jiawen .fl{width:72%;}
.jiawen .fr{padding:10px 5px;width:24%;}
.jiawen .fl a{display:block;margin-right:15px;padding:8px 0;width:100%;height: 100%;color:#8463a9!important;text-decoration:none;font-size:16px;border:none;overflow: hidden;}
.jiawen .fl .note{margin:0 0 5px;padding-left:10px;height:150px;color:#888;font-size:14px;}
.jiawen .jiawen-thumb{width:170px;height:120px;margin-top: 10px;}
@media only screen and (max-width: 700px){.jiawen .jiawen-thumb {width: auto;height: auto;}}

XNUMX. Invoke the short code in the form of an embedded article card (short code)

You can enter shortcodes directly in the "Visual" or "Text" interface of the article editor 【jiawen ids =postID1,postID2 ...】 format call.

For example, if I want to display 3 internally linked articles, I just enter the shortcode:

• 【jiawen ids=526,380,411】
• If you enter more than 5 article IDs, only 5 articles will be displayed at most
• This article is used to avoid shortcodes being escaped []
• When using the shortcode, please change [] to []

The effect is as follows ▼

How did Mimeng's public account succeed and why is it so popular? There are reasons behind it

How did the Mi Meng official account succeed?Why is it so hot?There is a reason behind it!Since Mi Meng started to write the WeChat public account on September 2012, 9, in just 15 months, she gained 2 fans, surpassing the achievements of many people in an instant, making many people very curious, what is she...

The four teachers and apprentices of Tang Seng discussed the contacts of WeChat friends, and Sun Wukong's speech made me stunned

4 people from Tang Seng and his apprentice discussing the connections of friends on WeChat. Sun Wukong's speech made me stunned. Introduction We have all read Journey to the West. Have you seen Tang Sanzang, Sun Wukong, Zhu Bajie, and Sha Wujing. Are they discussing the connections of WeChat friends?Hehe, I didn't expect Sun Wukong's speech to make me feel stunned...

Analysis of the psychological characteristics of users' reading in the new media era: if you master these 7, you will earn

Analysis of the characteristics of users' reading psychology in the new media era: If you master these 7, you will earn. Introduction We are a WeChat public account. If we want to succeed, we must study human nature, analyze users' reading psychology, and understand users' reading behavior. Only in this way, In order to better improve our micro...

If you are not using the shortcode in the WordPress editor and want to call it elsewhere, you can call it with the following code:

do_shortcode（'[neilian ids ids = postID1，postID2]'）

XNUMX. Add an editor button

If you need to manually enter the shortcode every time, it feels too cumbersome, what should I do?

The power of WordPress is that it allows us to simplify complex things ^_^

1) Add editor text button

WordPress has a built-in TinyMCE editor by default. We can add shortcut buttons to the TinyMCE editor text interface.

Step 3:Add shortcut button code

• Please add the code directly in the functions.php file ▼

//加入内部文章，TinyMCE 编辑器文本按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
 QTags.addButton( 'jw', '加入内部文章', '', '');
 </script>
<?php
}

Please Note

If you have added other code for the editor to customize the shortcut buttons, just<script type="text/javascript"> Below, add the following code ▼

QTags.addButton( 'jw', '加入内部文章', '', '');

Otherwise it will go wrong.

2) Add editor visualization button

When we edit WordPress articles, the default interface is usually Visual.

So, it's better to add a button in the visual editor as well.

• While this functionality can be implemented in code, it is a bit complicated for many newbies.
• It is troublesome for experts, because JS code needs to be added to the theme, and if the theme is changed, it needs to be added again, which feels very cumbersome.

Step 4:Install and enable plugins

• Chen WeiliangPlugins are recommended:Visual Editor Custom Buttons

After the installation is complete, under the left menu bar, a Visual Editor Custom Buttons with a gear icon will appear ▼

Step 5:Click Add New

• Create a custom button, any name.
• For example: adding internal articles 

You just need to follow the picture below to set up ▼

Step 6: Button Content option

• Select Wrap Selection.

Step 7: Before setting

• Fill in the shortcode

Step 8:Display In Editor settings

• You can check the Visual Editor or Text Editor show buttons.
• Note that if Text Editor is checked, you can skip the "Add shortcut button code" above, otherwise it will be repeated.

Step 9:Button Icon Options

• In the drop-down options menu, select the Framed icon.

Step 10:test

• In the end, of course, it's up to you to test the effect yourself ^_^
• If the above steps are correct, you will see the button as shown below in the editor visual interface ▼