Imenik članaka
WordPressKako optimizirati interne linkove web stranice?
Stvorite kratke kodove pomoću sličica članaka i gumba za uređivanje
Optimizacija internih linkova web stranice, inSEOLinkovi su uvijek bili vrlo važni, a dobra struktura linkova vrlo je korisna za SEO.
Ako je trenutni članak povezan s drugim člancima, automatski dodajte poveznicu na stranicu:
- uvelike će povećati broj i dubinu indeksiranja od strane pauka tražilice,
- pomoći da se poveća broj zapisa,
- I težinu ključnih riječi usidrenog teksta.
Ako su neki stari članci ažurirani, također možete uputiti pauke tražilice da ponovno pretražuju i indeksiraju ažuriranja sadržaja starih članaka dodavanjem internih veza na nove članke.
- Uobičajeni oblik internog povezivanja je tekstualni link, čija je struktura sidreni tekst .
- Ali kako bismo poboljšali korisničko iskustvo, možemo dodatno optimizirati veze članaka na unutarnjoj stranici.
kad čitašChen WeiliangKada pišete blog, često ćete naći da ugradite obrazac kartice članka kao što je ovaj, sa sličicom članka koja sadrži sažetak sadržaja članka, na primjer:
XNUMX. Dodajte kratki kod stila ugrađene kartice članka
第 1 步:Dodajte PHP kod
Dodajte sljedeći kod u datoteku functions.php svoje WP teme:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}Ako se ikona hiperveze ne pojavi, trebate zamijeniti gornjuCSSOd ovog fa fa-link fa-fw, do sui sui-link sui-fw
- Provjerite svoju WP temu, postoji li mapa /img/random/?
- (ako ne, stvorite)
- Zatim u nasumičnu datoteku dodajte 20 jpg slika.
Slike su imenovane od 1 do 20:
- 1.jpg
- 2.jpg
- ... (i tako dalje)
- 20.jpg
第 2 步:Dodajte CSS kod
Dodajte sljedeći kod u datoteku style.css svoje WP teme:
/*加入内部文章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. Pozovite kratki kod u obliku ugrađene kartice članka (kratki kod)
Kratke kodove možete unijeti izravno u "Vizualno" ili "Tekstualno" sučelje uređivača članaka 【jiawen ids =postID1,postID2 ...】 oblik poziva.
Na primjer, ako želim prikazati 3 interno povezana članka, samo unesem kratki kod:
【jiawen ids=526,380,411】- Ako unesete više od 5 ID-ova članaka, bit će prikazano najviše 5 članaka
- Ovaj se članak koristi kako bi se izbjeglo izbjegavanje kratkih kodova []
- Kada koristite kratki kod, promijenite [] u []
Učinak je sljedeći ▼
Ako ne koristite kratki kod u uređivaču WordPressa i želite ga pozvati negdje drugdje, možete ga pozvati sa sljedećim kodom:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Dodajte gumb za uređivanje
Ako svaki put morate ručno unijeti kratki kod, čini vam se previše glomaznim, što da radim?
Snaga WordPressa je u tome što nam omogućuje da pojednostavimo složene stvari ^_^
1) Gumb Dodaj tekst uređivača
WordPress prema zadanim postavkama ima ugrađeni uređivač TinyMCE. U tekstualno sučelje uređivača TinyMCE možemo dodati gumbe prečaca.
korak 3:Dodajte kod gumba prečaca
- Dodajte kôd izravno u datoteku functions.php ▼
//加入内部文章，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
}
注意 事项
Ako ste dodali drugi kod za uređivač za prilagodbu gumba prečaca, samo<script type="text/javascript"> U nastavku dodajte sljedeći kod ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Inače će poći po zlu.
2) Dodaj gumb za vizualizaciju urednika
Kada uređujemo WordPress članke, zadano sučelje je obično Visual.
Dakle, bolje je dodati gumb i u vizualni uređivač.
- Iako se ova funkcija može implementirati u kodu, malo je komplicirana za mnoge početnike.
- To je problematično za stručnjake, jer JS kod treba dodati u temu, a ako se tema promijeni, treba je ponovno dodati, što se čini vrlo glomaznim.
第 4 步:Instalirajte i omogućite dodatke
- Chen WeiliangPreporučuju se dodaci:Vizualni uređivač prilagođenih gumba
Nakon dovršetka instalacije ispod lijeve trake izbornika pojavit će se prilagođeni gumbi Visual Editora s ikonom zupčanika ▼
第 5 步:Pritisnite Dodaj novo
- Izradite prilagođeni gumb, bilo kojeg naziva.
- Na primjer: dodavanje internih članaka
Samo trebate slijediti sliku u nastavku da biste postavili ▼
第 6 步: Opcija sadržaja gumba
- Odaberite Prelomi odabir.
第 7 步: Prije postavljanja
- Ispunite kratki kod
korak 8:Prikaz u postavkama uređivača
- Možete provjeriti gumbe za prikaz vizualnog uređivača ili uređivača teksta.
- Imajte na umu da ako je Uređivač teksta označen, možete preskočiti "Dodaj kod gumba prečaca" iznad, inače će se ponoviti.
korak 9:Opcije ikone gumba
- U padajućem izborniku opcija odaberite ikonu Uokvireno.
korak 10:test
- Na kraju, naravno, na vama je da sami isprobate učinak ^_^
- Ako su gornji koraci točni, vidjet ćete gumb kao što je prikazano u nastavku u vizualnom sučelju uređivača ▼
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) podijelio je "Kako dodati stil kartice članka u WordPressu? Ugradite kratki kod u obrazac kartice članka", što vam je od pomoći.
Dobrodošli da podijelite vezu ovog članka:https://www.chenweiliang.com/cwl-638.html