Artikelkatalog
hood.discountHur optimerar man webbplatsens interna länkar?
Skapa kortkoder med miniatyrartiklar och redigeringsknappar
Webbplatsinterna länkoptimering, inSEOLänkar har alltid varit mycket viktiga, och en bra länkstruktur är mycket fördelaktigt för SEO.
Om den aktuella artikeln är relaterad till andra artiklar, lägg automatiskt till en länk till sidan:
- kommer att avsevärt öka antalet och djupet av genomsökning av sökmotorspindlar,
- hjälpa till att öka antalet poster,
- Och vikten av sökord för ankartext.
Om några gamla artiklar uppdateras kan du också instruera sökmotorspindlar att genomsöka och indexera innehållsuppdateringarna för de gamla artiklarna genom att lägga till interna länkar till de nya artiklarna.
- En vanlig form av intern länkning är en textlänk, vars struktur är ankartext .
- Men för att förbättra användarupplevelsen kan vi ytterligare optimera artikellänkarna på insidan.
när du läserChen WeiliangNär du bloggar kan du ofta upptäcka att ett formulär för artikelkort är inbäddat så här, med en miniatyrartikel som innehåller en sammanfattning av artikelns innehåll, till exempel:
XNUMX. Lägg till en kortkod för inbäddad artikelkortstil
第 1 步:Lägg till PHP-kod
Lägg till följande kod till ditt 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 文件夹内的图片作缩略图
}
}
}
}Om hyperlänksikonen inte visas måste du byta ut ovanståendeCSSav detta fa fa-link fa-fw, till sui sui-link sui-fw
- Kontrollera ditt WP-tema, finns det en /img/random/-mapp?
- (om inte, vänligen skapa)
- Lägg sedan till 20 jpg-bilder i den slumpmässiga filen.
Bilderna heter 1~20:
- 1.jpg
- 2.jpg
- ... (och så vidare)
- 20.jpg
第 2 步:Lägg till CSS-kod
Lägg till följande kod till ditt 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. Anropa kortkoden i form av ett inbäddat artikelkort (kortkod)
Du kan ange kortkoder direkt i gränssnittet "Visuell" eller "Text" i artikelredigeraren 【jiawen ids =postID1,postID2 ...】 formatera samtal.
Om jag till exempel vill visa 3 internt länkade artiklar anger jag bara kortkoden:
【jiawen ids=526,380,411】- Om du anger fler än 5 artikel-ID:n kommer endast 5 artiklar att visas
- Den här artikeln används för att undvika att kortkoder escapes []
- När du använder kortkoden, ändra [] till []
Effekten är följande ▼
Om du inte använder kortkoden i WordPress-redigeraren och vill anropa den någon annanstans kan du anropa den med följande kod:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Lägg till en redigeringsknapp
Om du behöver ange kortkoden manuellt varje gång känns det för krångligt, vad ska jag göra?
Kraften med WordPress är att det tillåter oss att förenkla komplexa saker ^_^
1) Knappen Lägg till textredigerare
WordPress har en inbyggd TinyMCE-redigerare som standard. Vi kan lägga till genvägsknappar till TinyMCE-redigerarens textgränssnitt.
steg 3:Lägg till genvägsknappskod
- Lägg till koden direkt 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
}
注意 事项
Om du har lagt till annan kod för redigeraren för att anpassa genvägsknapparna, bara<script type="text/javascript"> Lägg till följande kod nedan ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Annars blir det fel.
2) Lägg till redigeringsvisualiseringsknapp
När vi redigerar WordPress-artiklar är standardgränssnittet vanligtvis Visual.
Så det är bättre att lägga till en knapp i den visuella redigeraren också.
- Även om denna funktionalitet kan implementeras i kod, är den lite komplicerad för många nybörjare.
- Det är besvärligt för experter, eftersom det är nödvändigt att lägga till JS-kod till temat, och om du ändrar temat måste du lägga till det igen, och stegen är särskilt besvärliga.
第 4 步:Installera och aktivera plugins
- Chen WeiliangPlugins rekommenderas:Visual Editor anpassade knappar
När installationen är klar, under den vänstra menyraden, kommer en Visual Editor anpassade knappar med en kugghjulsikon att visas ▼
第 5 步:Klicka på Lägg till ny
- Skapa en anpassad knapp, vilket namn som helst.
- Till exempel: lägga till interna artiklar
Du behöver bara följa bilden nedan för att ställa in ▼
第 6 步: Alternativ för knappinnehåll
- Välj Wrap Selection.
第 7 步: Innan inställning
- Fyll i kortkoden
steg 8:Visa i Editor-inställningar
- Du kan kontrollera Visa-knapparna för Visual Editor eller Text Editor.
- Observera att om textredigeraren är markerad kan du hoppa över "Lägg till genvägsknappskod" ovan, annars kommer det att upprepas.
steg 9:Knappikon Alternativ
- Välj ikonen Inramad i rullgardinsmenyn med alternativ.
steg 10:testet
- I slutändan är det såklart upp till dig att testa effekten själv ^_^
- Om stegen ovan är korrekta kommer du att se knappen som visas nedan i redigerarens visuella gränssnitt ▼
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) delade "Hur lägger man till artikelkortstil i WordPress? Bädda in kortkod i artikelkortsform", vilket är användbart för dig.
Välkommen att dela länken till denna artikel:https://www.chenweiliang.com/cwl-638.html