Artikkelkatalog
WordPressHvordan optimalisere nettsteds interne lenker?
Lag kortkoder med miniatyrbilder og redigeringsknapper
Nettstedets interne koblingsoptimalisering, iSEOLenker har alltid vært veldig viktige, og en god lenkestruktur er veldig gunstig for SEO.
Hvis den gjeldende artikkelen er relatert til andre artikler, legger du automatisk til en lenke til siden:
- vil i stor grad øke antallet og dybden av gjennomgang av søkemotoredderkopper,
- bidra til å øke antall poster,
- Og vekten av nøkkelord for ankertekst.
Hvis noen gamle artikler er oppdatert, kan du også instruere søkemotoredderkopper til å gjennomsøke og indeksere innholdsoppdateringene til de gamle artiklene ved å legge til interne lenker til de nye artiklene.
- En vanlig form for intern kobling er en tekstkobling, hvis struktur er ankertekst .
- Men for å forbedre brukeropplevelsen kan vi optimalisere artikkellenkene på innsiden ytterligere.
når du leserChen WeiliangNår du blogger, kan du ofte oppleve at du legger inn et artikkelkortskjema som dette, med en miniatyrbildeartikkel som inneholder et sammendrag av artikkelens innhold, for eksempel:
XNUMX. Legg til en innebygd artikkelkortstilkortkode
第 1 步:Legg til PHP-kode
Legg til følgende kode i WP-temaets 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 hyperkoblingsikonet ikke vises, må du erstatte det ovennevnteCSSAv denne fa fa-link fa-fw, til sui sui-link sui-fw
- Vennligst sjekk WP-temaet ditt, er det en /img/random/-mappe?
- (hvis ikke, vennligst opprett)
- Legg deretter til 20 jpg-bilder i den tilfeldige filen.
Bildene er navngitt fra 1 til 20:
- 1.jpg
- 2.jpg
- ... (og så videre)
- 20.jpg
第 2 步:Legg til CSS-kode
Legg til følgende kode i WP-temaets 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åkall kortkoden i form av et innebygd artikkelkort (kortkode)
Du kan legge inn kortkoder direkte i "Visuell" eller "Tekst"-grensesnittet til artikkelredigereren 【jiawen ids =postID1,postID2 ...】 formatere samtalen.
For eksempel, hvis jeg vil vise 3 internt lenkede artikler, skriver jeg bare inn kortkoden:
【jiawen ids=526,380,411】- Hvis du angir mer enn 5 artikkel-ID-er, vil kun 5 artikler vises på det meste
- Denne artikkelen brukes for å unngå at kortkoder escapes []
- Når du bruker kortkoden, vennligst endre [] til []
Effekten er som følger ▼
Hvis du ikke bruker kortkoden i WordPress-editoren og vil kalle den andre steder, kan du ringe den med følgende kode:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Legg til en redigeringsknapp
Hvis du trenger å taste inn kortkoden manuelt hver gang, føles det for tungvint, hva skal jeg gjøre?
Kraften til WordPress er at det lar oss forenkle komplekse ting ^_^
1) Legg til tekstredigeringsknapp
WordPress har en innebygd TinyMCE-editor som standard. Vi kan legge til snarveisknapper til TinyMCE-editorens tekstgrensesnitt.
trinn 3:Legg til snarveisknappkode
- Vennligst legg til 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
}
forholdsregler
Hvis du har lagt til annen kode for redaktøren for å tilpasse snarveisknappene, bare<script type="text/javascript"> Nedenfor legger du til følgende kode ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Ellers går det galt.
2) Legg til redigeringsvisualiseringsknapp
Når vi redigerer WordPress-artikler, er standardgrensesnittet vanligvis Visual.
Så det er bedre å legge til en knapp i den visuelle editoren også.
- Selv om denne funksjonaliteten kan implementeres i kode, er den litt komplisert for mange nybegynnere.
- Det er plagsomt for eksperter, fordi det er nødvendig å legge til JS-kode til temaet, og hvis du endrer temaet, må du legge det til på nytt, og trinnene er spesielt tungvinte.
第 4 步:Installer og aktiver plugins
- Chen WeiliangPlugins anbefales:Egendefinerte knapper for Visual Editor
Etter at installasjonen er fullført, under den venstre menylinjen, vil en egendefinert Visual Editor-knapp med et tannhjulikon vises ▼
第 5 步:Klikk Legg til ny
- Lag en egendefinert knapp, hvilket som helst navn.
- For eksempel: legge til interne artikler
Du trenger bare å følge bildet nedenfor for å sette opp ▼
第 6 步: Alternativ for knappinnhold
- Velg Wrap Selection.
第 7 步: Før innstilling
- Fyll inn kortkoden
trinn 8:Vis i redigeringsinnstillinger
- Du kan sjekke Visuelle redigerings- eller tekstredigeringsknappene.
- Merk at hvis tekstredigering er merket av, kan du hoppe over "Legg til snarveisknappkode" ovenfor, ellers vil det bli gjentatt.
trinn 9:Alternativer for knappikon
- Velg innrammet-ikonet i rullegardinmenyen for alternativer.
trinn 10:test
- Til slutt er det selvfølgelig opp til deg å teste effekten selv ^_^
- Hvis trinnene ovenfor er riktige, vil du se knappen som vist nedenfor i editorens visuelle grensesnitt ▼
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) delt "Hvordan legge til artikkelkortstil i WordPress? Legg inn kortkode i artikkelkortform", som er nyttig for deg.
Velkommen til å dele lenken til denne artikkelen:https://www.chenweiliang.com/cwl-638.html