Artikkelkatalog
Hvordan optimalisere interne lenker på et WordPress- nettsted?
Lag kortkoder med miniatyrbilder og redigeringsknapper
Intern lenkeoptimalisering er alltid veldig viktig i SEO , ettersom en god lenkestruktur er svært gunstig for søkemotoroptimalisering.
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 leser blogginnleggene til Chen Weiliang , finner du ofte artikler innebygd i kortformat, med miniatyrbilder som inneholder sammendrag av artikkelinnholdet, for eksempel:
XNUMX. Legg til en innebygd artikkelkortstilkortkode
Trinn 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
Trinn 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.
Trinn 4: Installer og aktiver plugin-modulen
- 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 ▼
Trinn 5: Klikk på 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 ▼
Trinn 6: Alternativer for knappinnhold
- Velg Wrap Selection.
Trinn 7: Før oppsett
- Fyll inn kortkoden
Trinn 8: Vis i redigeringsinnstillingene
- 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: Testing
- 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 ▼
Forhåpentligvis vil artikkelen «Hvordan legge til postkortstiler i WordPress? Kortkode for å legge inn postkort» som er delt på Chen Weiliangs blogg ( https://www.chenweiliang.com/ ) være nyttig for deg.
Del gjerne lenken til denne artikkelen: https://www.chenweiliang.com/cwl-638.html