hood.discountHvordan optimerer man hjemmesidens interne links?
Opret kortkoder med miniatureartikler og redigeringsknapper
Website intern linkoptimering, iSEOLinks har altid været meget vigtige, og en god linkstruktur er meget gavnlig for SEO.
Hvis den aktuelle artikel er relateret til andre artikler, skal du automatisk tilføje et link til siden:
- vil i høj grad øge antallet og dybden af gennemgang af søgemaskinespiders,
- bidrage til at øge antallet af poster,
- Og vægten af ankertekstsøgeord.
Hvis nogle gamle artikler er opdateret, kan du også instruere søgemaskinespiders til at gencrawle og indeksere indholdsopdateringerne af de gamle artikler ved at tilføje interne links til de nye artikler.
- En almindelig form for intern linking er et tekstlink, hvis struktur er ankertekst .
- Men for at forbedre brugeroplevelsen kan vi yderligere optimere artikellinkene på indersiden.
når du læserChen WeiliangNår du blogger, kan du ofte opleve, at en artikelkortformular er indlejret som denne, med en miniatureartikel, der indeholder et resumé af artiklens indhold, for eksempel:
XNUMX. Tilføj en indlejret artikelkortstil-kortkode
第 1 步:Tilføj PHP-kode
Tilføj følgende kode til dit WP-temas functions.php-fil:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}Hvis hyperlinkikonet ikke vises, skal du erstatte ovenståendeCSSAf dette fa fa-link fa-fw, til sui sui-link sui-fw
- Tjek venligst dit WP-tema, er der en /img/random/-mappe?
- (hvis ikke, opret venligst)
- Tilføj derefter 20 jpg-billeder i den tilfældige fil.
Billederne er navngivet fra 1 til 20:
- 1.jpg
- 2.jpg
- ... (og så videre)
- 20.jpg
第 2 步:Tilføj CSS-kode
Tilføj følgende kode til dit WP-temas style.css-fil:
/*加入内部文章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. Påkald den korte kode i form af et indlejret artikelkort (kortkode)
Du kan indtaste kortkoder direkte i "Visuel" eller "Tekst"-grænsefladen i artikeleditoren 【jiawen ids =postID1,postID2 ...】 formatere opkald.
For eksempel, hvis jeg ønsker at vise 3 internt linkede artikler, indtaster jeg blot kortkoden:
【jiawen ids=526,380,411】- Hvis du indtaster mere end 5 artikel-id'er, vil der højst blive vist 5 artikler
- Denne artikel bruges til at undgå, at kortkoder escapes []
- Når du bruger kortkoden, skal du ændre [] til []
Effekten er som følger ▼
Hvis du ikke bruger kortkoden i WordPress-editoren og vil kalde den et andet sted, kan du kalde den med følgende kode:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Tilføj en redigeringsknap
Hvis du skal indtaste kortkoden manuelt hver gang, føles det for besværligt, hvad skal jeg gøre?
Styrken ved WordPress er, at det giver os mulighed for at forenkle komplekse ting ^_^
1) Tilføj editor tekst knap
WordPress har som standard en indbygget TinyMCE-editor. Vi kan tilføje genvejsknapper til TinyMCE-editorens tekstgrænseflade.
trin 3:Tilføj genvejsknapkode
- Tilføj venligst koden direkte i functions.php filen ▼
//加入内部文章，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
}
注意 事项
Hvis du har tilføjet anden kode til editoren for at tilpasse genvejsknapperne, bare<script type="text/javascript"> Nedenfor skal du tilføje følgende kode ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Ellers går det galt.
2) Tilføj editor-visualiseringsknap
Når vi redigerer WordPress-artikler, er standardgrænsefladen normalt visuel.
Så det er bedre at tilføje en knap i den visuelle editor.
- Selvom denne funktionalitet kan implementeres i kode, er den en smule kompliceret for mange nybegyndere.
- Det er besværligt for eksperter, fordi det er nødvendigt at tilføje JS-kode til temaet, og hvis du ændrer temaet, skal du tilføje det igen, og trinene er særligt besværlige.
第 4 步:Installer og aktiver plugins
- Chen WeiliangPlugins anbefales:Visual Editor brugerdefinerede knapper
Efter installationen er fuldført, under den venstre menulinje, vises en Visual Editor Custom Buttons med et tandhjulsikon ▼
第 5 步:Klik på Tilføj ny
- Opret en brugerdefineret knap, et hvilket som helst navn.
- For eksempel: tilføjelse af interne artikler
Du skal blot følge billedet nedenfor for at konfigurere ▼
第 6 步: Mulighed for knapindhold
- Vælg Wrap Selection.
第 7 步: Før indstilling
- Udfyld kortkoden
trin 8:Vis i editorindstillinger
- Du kan kontrollere Vis-knapperne til Visual Editor eller Teksteditor.
- Bemærk, at hvis Teksteditor er markeret, kan du springe "Tilføj genvejsknapkode" ovenfor, ellers vil det blive gentaget.
trin 9:Indstillinger for knapikon
- Vælg ikonet Indrammet i rullemenuen med indstillinger.
trin 10:prøve
- I sidste ende er det selvfølgelig op til dig selv at teste effekten ^_^
- Hvis ovenstående trin er korrekte, vil du se knappen som vist nedenfor i editorens visuelle grænseflade ▼
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) delt "Hvordan tilføjer man artikelkortstil i WordPress? Integrer kortkode i artikelkortform", hvilket er nyttigt for dig.
Velkommen til at dele linket til denne artikel:https://www.chenweiliang.com/cwl-638.html