Ինչպե՞ս ավելացնել հոդվածի քարտի ոճը WordPress-ում Տեղադրել կարճ կոդը հոդվածի քարտի ձևում

Ինչպե՞ս օպտիմալացնել ներքին հղումները WordPress կայքում։

Ստեղծեք կարճ կոդեր մանրապատկերների հոդվածների և խմբագրի կոճակներով

Ներքին հղումների օպտիմալացումը միշտ շատ կարևոր է SEO- ում, քանի որ լավ հղումների կառուցվածքը շատ օգտակար է որոնողական համակարգերի օպտիմալացման համար։

Եթե ​​ընթացիկ հոդվածը կապված է այլ հոդվածների հետ, ավտոմատ կերպով հղում ավելացրեք էջին՝

• մեծապես կբարձրացնի որոնողական սարդերի կողմից սողալու քանակը և խորությունը,
• օգնում է ավելացնել գրառումների քանակը,
• Եվ խարիսխ տեքստի հիմնաբառերի կշիռը:

Եթե ​​որոշ հին հոդվածներ թարմացվում են, կարող եք նաև հրահանգել որոնման համակարգերի սարդերին նորից սողալ և ինդեքսավորել հին հոդվածների բովանդակության թարմացումները՝ ավելացնելով ներքին հղումներ նոր հոդվածներին:

• Ներքին կապի ընդհանուր ձևը տեքստային հղումն է, որի կառուցվածքը խարիսխ տեքստ է:
• Բայց օգտատերերի փորձը բարելավելու համար մենք կարող ենք հետագայում օպտիմալացնել հոդվածի հղումները ներքին էջի վրա:

Երբ կարդում եք Չեն Վեյլիանգի բլոգի գրառումները, հաճախ կարող եք հանդիպել քարտի ձևաչափով ներկառուցված հոդվածների, որոնց մանրապատկերները պարունակում են հոդվածի բովանդակության ամփոփագրեր, ինչպիսիք են՝

Ինչպե՞ս դիմել Հոնկոնգի բջջային հեռախոսահամարի համար:Հոնկոնգի վիրտուալ բջջային հեռախոսահամար՝ SMS հաստատման կոդը ստանալու համար

eSender Հոնկոնգի բջջային հեռախոսահամարի զեղչի կոդը՝ DM6888 Որտեղի՞ց կարող եմ գնել Հոնկոնգի բջջային հեռախոսահամար:Առաջարկվում է Հոնկոնգի այցեքարտի վիրտուալ օպերատոր eSender Այն վիրտուալ բջջային հեռախոսահամարի ծառայություն է Boyuan Information Group-ի ներքո: Boyuan Information-ը մասնաճյուղեր ունի Չինաստանի Գուանչժոու և Հոնկոնգ քաղաքներում...

XNUMX. Ավելացրեք ներկառուցված հոդվածի քարտի ոճի կարճ կոդը

Քայլ 1. Ավելացրեք PHP կոդ

Ավելացրեք հետևյալ կոդը ձեր WP թեմայի functions.php ֆայլում.

/**
* 加入内部文章缩略图 By 陈沩亮
* 文章地址：https://www.chenweiliang.com/cwl-638.html
**/
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="sui sui-link sui-fw"></i>';
$content .= get_the_title();
$content .= '</a><p class="note"><a target="_blank" rel="nofollow" href="' . get_permalink() . '">';
$content .= mb_strimwidth(strip_tags(apply_filters('post_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');

// 加入内部文章缩略图
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 文件夹内的图片作缩略图
}
}
}
}

Եթե ​​հիպերհղման պատկերակը չի հայտնվում, դուք պետք է փոխարինեք վերը նշվածըCSSՍրա fa fa-link fa-fw, դեպի sui sui-link sui-fw

• Խնդրում ենք ստուգել ձեր WP թեման, կա՞ /img/random/ թղթապանակ:
• (եթե ոչ, խնդրում ենք ստեղծել)
• Այնուհետև պատահական ֆայլում ավելացրեք 20 jpg պատկեր:

Նկարները կոչվում են 1-ից 20-ը.

• 1.jpg
• 2.jpg
• ... (և այլն)
• 20.jpg

Քայլ 2. CSS կոդի ավելացում

Ավելացրեք հետևյալ կոդը ձեր WP թեմայի style.css ֆայլում.

/*加入内部文章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. Հրավիրեք կարճ կոդը ներկառուցված հոդվածի քարտի տեսքով (կարճ կոդը)

Կարճ կոդերը կարող եք մուտքագրել անմիջապես հոդվածի խմբագրի «Visual» կամ «Text» ինտերֆեյսում 【jiawen ids =postID1,postID2 ...】 զանգի ձևաչափը:

Օրինակ, եթե ես ուզում եմ ցուցադրել ներքին կապակցված 3 հոդված, ես պարզապես մուտքագրում եմ կարճ կոդը.

• 【jiawen ids=526,380,411】
• Եթե ​​մուտքագրեք ավելի քան 5 հոդվածի ID, ապա կցուցադրվի առավելագույնը 5 հոդված
• Այս հոդվածն օգտագործվում է կարճ կոդերից խուսափելու համար []
• Կարճ կոդը օգտագործելիս խնդրում ենք փոխել []-ի []

Էֆեկտը հետևյալն է ▼

Ինչպե՞ս հաջողվեց Mimeng-ի հանրային հաշիվը և ինչու է այն այդքան հայտնի, դրա հետևում կան պատճառներ

Ինչպե՞ս հաջողվեց Mi Meng հանրային հաշիվը: Ինչու է այն այդքան հայտնի: Պատճառի հետևում շարժիչ ուժ կա։ Այն բանից հետո, երբ Mimeng-ը սկսեց WeChat-ի հանրային էջ գրել 2012 թվականի սեպտեմբերի 9-ին, նա ընդամենը 15 ամսում ձեռք բերեց 2 երկրպագու, որն ակնթարթորեն գերազանցեց շատերի նվաճումները և շատերին ստիպեց հետաքրքրվել նրանով...

Թանգ Սենգի չորս ուսուցիչներն ու աշակերտները քննարկեցին WeChat-ի ընկերների շփումները, և Սուն Վուկոնգի ելույթն ինձ ապշեցրեց։

Չորս վարպետներ և աշակերտուհիներ քննարկեցին WeChat-ի ընկերներն ու կապերը և կապեր? Հահա, ես չէի սպասում, որ Սուն Վուկոնգի ելույթն ինձ ապշեցրեց...

Նոր մեդիա դարաշրջանում օգտատերերի ընթերցանության հոգեբանական բնութագրերի վերլուծություն. եթե տիրապետես այս 7-ին, կվաստակես

Նոր մեդիա դարաշրջանում օգտատերերի ընթերցանության հոգեբանության բնութագրերի վերլուծություն. Եթե դուք տիրապետում եք այս 7-ին, դուք գումար կվաստակեք Ներածություն. Եթե մենք ցանկանում ենք հաջողակ լինել որպես WeChat-ի պաշտոնական հաշիվ, մենք պետք է ուսումնասիրենք մարդու էությունը, վերլուծենք օգտատերերի ընթերցանության հոգեբանությունը: , և հասկանալ օգտատերերի վարքագիծը միայն դա անելով, միայն այս կերպ մենք կարող ենք ավելի լավ բարելավել մեր արածը:

Եթե ​​դուք չեք օգտագործում կարճ կոդը WordPress-ի խմբագրիչում և ցանկանում եք այն զանգահարել այլ տեղ, կարող եք այն զանգահարել հետևյալ կոդով.

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

XNUMX. Ավելացնել խմբագրիչ կոճակ

Եթե ​​Ձեզ անհրաժեշտ է ամեն անգամ ձեռքով մուտքագրել կարճ կոդը, դա չափազանց ծանր է թվում, ի՞նչ պետք է անեմ:

WordPress-ի ուժն այն է, որ այն մեզ թույլ է տալիս պարզեցնել բարդ բաները ^_^

1) Ավելացնել խմբագրիչի տեքստի կոճակը

WordPress-ը լռելյայն ունի ներկառուցված TinyMCE խմբագիր: Մենք կարող ենք դյուրանցումների կոճակներ ավելացնել TinyMCE խմբագրիչի տեքստային ինտերֆեյսին:

Քայլ 3. Ավելացնել կարճ կոճակի կոդ

• Ավելացրեք կոդը անմիջապես functions.php ▼ ֆայլում

//加入内部文章，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
}

注意 事项

Եթե ​​խմբագրի համար ավելացրել եք այլ կոդ՝ դյուրանցումների կոճակները հարմարեցնելու համար, պարզապես<script type="text/javascript"> Ստորև ավելացրեք հետևյալ ծածկագիրը ▼

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

Հակառակ դեպքում դա սխալ կլինի:

2) Ավելացնել խմբագրի վիզուալիզացիայի կոճակը

Երբ մենք խմբագրում ենք WordPress-ի հոդվածները, լռելյայն ինտերֆեյսը սովորաբար Visual է:

Այսպիսով, ավելի լավ է կոճակ ավելացնել նաև վիզուալ խմբագրիչում։

• Թեև այս գործառույթը կարող է իրականացվել կոդով, այն մի փոքր բարդ է շատ նորեկների համար:
• Փորձագետների համար դա անհանգիստ է, քանի որ թեմային պետք է ավելացնել JS կոդ, իսկ թեման փոխելու դեպքում այն ​​նորից պետք է ավելացնես, և քայլերը հատկապես ծանր են։

Քայլ 4. Տեղադրեք և միացրեք հավելվածը

• Չեն ՎայլյանՊլագինները խորհուրդ են տրվում.Visual Editor Custom կոճակներ

Տեղադրումն ավարտվելուց հետո ձախ ընտրացանկի տակ կհայտնվի Visual Editor Custom Buttons՝ հանդերձանքի պատկերակով ▼

Քայլ 5: Սեղմեք «Ավելացնել նոր»

• Ստեղծեք հատուկ կոճակ, ցանկացած անուն:
• Օրինակ՝ ներքին հոդվածների ավելացում 

▼ կարգավորելու համար պարզապես անհրաժեշտ է հետևել ստորև ներկայացված նկարին

Քայլ 6. Կոճակի բովանդակության ընտրանքներ

• Ընտրեք Փաթաթման ընտրություն:

Քայլ 7. Կարգավորումից առաջ

• Լրացրե՛ք կարճ կոդը

Քայլ 8. Ցուցադրել խմբագրիչի կարգավորումներում

• Դուք կարող եք ստուգել Visual Editor կամ Text Editor ցուցադրման կոճակները:
• Նկատի ունեցեք, որ եթե Text Editor-ը նշված է, կարող եք բաց թողնել վերևում գտնվող «Ավելացնել դյուրանցման կոճակի կոդը», հակառակ դեպքում այն ​​կկրկնվի:

Քայլ 9. Կոճակի պատկերակի ընտրանքներ

• Բացվող ընտրանքների ցանկում ընտրեք Շրջանակային պատկերակը:

Քայլ 10. Փորձարկում

• Ի վերջո, իհարկե, մնում է ինքներդ փորձարկեք ազդեցությունը ^_^
• Եթե ​​վերը նշված քայլերը ճիշտ են, դուք կտեսնեք կոճակը, ինչպես ցույց է տրված ստորև խմբագրի տեսողական միջերեսում ▼