Artiklite kataloog
WordPressKuidas optimeerida veebisaidi sisemisi linke?
Looge lühikoode pisipiltide artiklite ja redaktori nuppudega
Veebisaidi sisemine linkide optimeerimine, sisseSEOLingid on alati olnud väga olulised ja hea linkide struktuur on SEO-le väga kasulik.
Kui praegune artikkel on seotud teiste artiklitega, lisage lehele automaatselt link:
- suurendab oluliselt otsingumootori ämblike roomamise arvu ja sügavust,
- aidata suurendada rekordite arvu,
- Ja ankurteksti märksõnade kaal.
Kui mõnda vana artiklit värskendatakse, saate ka anda otsingumootori ämblikele käsu vanade artiklite sisuvärskendusi uuesti roomata ja indekseerida, lisades uutele artiklitele siselingid.
- Levinud siselinkimise vorm on tekstilink, mille struktuur on ankurtekst .
- Kuid kasutajakogemuse parandamiseks saame siselehe artiklite linke veelgi optimeerida.
kui loedChen WeiliangBlogi pidades võite sageli avastada, et artiklikaardi vorm on manustatud nii, pisipildiga artikkel, mis sisaldab artikli sisu kokkuvõtet, näiteks:
XNUMX. Lisage manustatud artiklikaardi stiilis lühikood
第 1 步:Lisage PHP kood
Lisage oma WP teema faili functions.php järgmine kood:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}Kui hüperlingi ikooni ei kuvata, peate ülaltoodud asendamaCSSSellest fa fa-link fa-fw, kuni sui sui-link sui-fw
- Palun kontrolli oma WP teemat, kas seal on /img/random/ kaust?
- (kui ei, siis looge)
- Seejärel lisage juhuslikku faili 20 jpg pilti.
Piltide nimed on vahemikus 1 kuni 20:
- 1.jpg
- 2.jpg
- ... (ja nii edasi)
- 20.jpg
第 2 步:Lisage CSS-kood
Lisage oma WP teema faili style.css järgmine kood:
/*加入内部文章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. Lühikoodi kutsumine manustatud artiklikaardi kujul (lühikood)
Lühikoode saate sisestada otse artikliredaktori liidesesse "Visuaalne" või "Tekst". 【jiawen ids =postID1,postID2 ...】 vormingu kõne.
Näiteks kui tahan kuvada 3 siselingitud artiklit, sisestan lihtsalt lühikoodi:
【jiawen ids=526,380,411】- Kui sisestate rohkem kui 5 artikli ID-d, kuvatakse ainult 5 artiklit
- Seda artiklit kasutatakse lühikoodide vältimiseks []
- Lühikoodi kasutamisel muutke [] koodiks []
Mõju on järgmine ▼
Kui te ei kasuta WordPressi redaktoris lühikoodi ja soovite sellele mujale helistada, saate seda helistada järgmise koodiga:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Lisage redaktori nupp
Kui peate iga kord lühikoodi käsitsi sisestama, tundub see liiga tülikas, mida peaksin tegema?
WordPressi jõud seisneb selles, et see võimaldab meil keerulisi asju lihtsustada ^_^
1) Redaktori teksti lisamise nupp
WordPressil on vaikimisi sisseehitatud TinyMCE redaktor, TinyMCE redaktori tekstiliidesele saame lisada otsetee nuppe.
samm 3:Lisa otsetee nupu kood
- Palun lisage kood otse functions.php faili ▼
//加入内部文章，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
}
注意 事项
Kui olete otsetee nuppude kohandamiseks lisanud redaktorile muu koodi, lihtsalt<script type="text/javascript"> Lisage allpool järgmine kood ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Muidu läheb valesti.
2) Lisa redaktori visualiseerimise nupp
Kui me redigeerime WordPressi artikleid, on vaikimisi liides tavaliselt visuaalne.
Seega on parem lisada nupp ka visuaalsesse redaktorisse.
- Kuigi seda funktsiooni saab koodis rakendada, on see paljude algajate jaoks pisut keeruline.
- Asjatundjatele on see tülikas, sest teemasse tuleb lisada JS-kood ja kui teemat muuta, siis uuesti lisada, mis tundub väga tülikas.
第 4 步:Installige ja lubage pistikprogrammid
- Chen WeiliangPluginad on soovitatavad:Visual Editori kohandatud nupud
Kui installimine on lõppenud, ilmuvad vasakpoolsele menüüribale visuaalse redaktori kohandatud nupud koos hammasrattaikooniga ▼
第 5 步:Klõpsake nuppu Lisa uus
- Looge kohandatud nupp, mis tahes nimi.
- Näiteks: sisemiste artiklite lisamine
▼ seadistamiseks peate lihtsalt järgima allolevat pilti
第 6 步: Nupu sisu valik
- Valige Wrap Selection.
第 7 步: Enne seadistamist
- Täitke lühikood
samm 8:Kuva redaktori seadetes
- Saate vaadata visuaalse redaktori või tekstiredaktori kuvamise nuppe.
- Pange tähele, et kui Tekstiredaktor on märgitud, võite ülaltoodud "Lisa otsetee nupu koodi" vahele jätta, vastasel juhul korratakse seda.
samm 9:Nupu ikooni valikud
- Valige rippmenüüst valikute ikoon raamitud.
samm 10:Test
- Lõppkokkuvõttes on muidugi teie otsustada, kas saate ise efekti katsetada ^_^
- Kui ülaltoodud sammud on õiged, näete redaktori visuaalses liideses ▼ allolevat nuppu
Hope Chen Weiliangi ajaveeb ( https://www.chenweiliang.com/ ) jagatud "Kuidas lisada artiklikaardi stiili WordPressis? Manusta lühikood artiklikaardi vormi", mis on teile abiks.
Tere tulemast selle artikli linki jagama:https://www.chenweiliang.com/cwl-638.html