Artikel Directory
WordPressHoe kinne jo ynterne keppelings fan webside optimalisearje?
Meitsje koarte koaden mei miniatuerartikels en bewurkerknoppen
Website ynterne keppeling optimalisaasje, ynSEOKeppelings binne altyd heul wichtich west, en in goede keppelingstruktuer is tige foardielich foar SEO.
As it aktuele artikel relatearre is oan oare artikels, foegje dan automatysk in keppeling ta oan de side:
- sil it oantal en de djipte fan krûpen troch spinnen fan sykmasjines sterk ferheegje,
- helpe om it oantal records te ferheegjen,
- En it gewicht fan kaaiwurden fan ankertekst.
As guon âlde artikels bywurke binne, kinne jo ek spinnen fan sykmasjines ynstruearje om de ynhâldfernijings fan 'e âlde artikels opnij te krûpen en te yndeksearjen troch ynterne keppelings ta te foegjen oan de nije artikels.
- In mienskiplike foarm fan ynterne keppeling is in tekstkeppeling, waans struktuer ankertekst is.
- Mar om de brûkersûnderfining te ferbetterjen, kinne wy de artikelkeppelings op 'e binnenside fierder optimalisearje.
as jo lêzeChen WeiliangBy it bloggen kinne jo faaks fine dat jo in artikelkaartformulier lykas dit ynbêde, mei in thumbnail-artikel dat in gearfetting fan de ynhâld fan it artikel befettet, bygelyks:
XNUMX. Foegje in ynbêde artikel card styl shortcode
第 1 步:Foegje PHP-koade ta
Foegje de folgjende koade ta oan it functions.php-bestân fan jo WP-tema:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}As it hyperlink-ikoan net ferskynt, moatte jo it boppesteande ferfangeCSSFan dizze fa fa-link fa-fw, oan sui sui-link sui-fw
- Kontrolearje asjebleaft jo WP-tema, is d'r in /img/random/ map?
- (as net, meitsje asjebleaft)
- Foegje dan 20 jpg-ôfbyldings ta yn it willekeurige bestân.
De foto's wurde neamd fan 1 oant 20:
- 1.jpg
- 2.jpg
- ... (ensafuorthinne)
- 20.jpg
第 2 步:Foegje CSS-koade ta
Foegje de folgjende koade ta oan it style.css-bestân fan jo WP-tema:
/*加入内部文章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. Roppe de koarte koade op yn 'e foarm fan in ynbêde artikelkaart (koarte koade)
Jo kinne shortcodes direkt ynfiere yn 'e "Fisuele" of "Tekst" ynterface fan 'e artikelbewurker 【jiawen ids =postID1,postID2 ...】 format oprop.
As ik bygelyks 3 yntern keppele artikels werjaan wol, fier ik gewoan de koarte koade yn:
【jiawen ids=526,380,411】- As jo mear as 5 artikel-ID's ynfiere, sille op syn heechst mar 5 artikels werjûn wurde
- Dit artikel wurdt brûkt om te foarkommen dat shortcodes ûntsnappe wurde []
- By it brûken fan de shortcode, feroarje asjebleaft [] nei []
It effekt is as folget ▼
As jo de shortcode yn 'e WordPress-bewurker net brûke en it earne oars wolle neame, kinne jo it neame mei de folgjende koade:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Add in bewurker knop
As jo elke kear de shortcode mei de hân moatte ynfiere, fielt it te omslachtich, wat moat ik dwaan?
De krêft fan WordPress is dat it ús mooglik makket komplekse dingen te ferienfâldigjen ^_^
1) Add editor tekst knop
WordPress hat standert in ynboude TinyMCE-bewurker. Wy kinne fluchtoetsen tafoegje oan de TinyMCE-bewurker-tekstynterface.
stap 3:Foegje fluchtoets koade ta
- Foegje de koade direkt ta yn it bestân 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
}
Foarsoarchsmaatregels
As jo oare koade tafoege hawwe foar de bewurker om de fluchtoetsknoppen oan te passen, gewoan<script type="text/javascript"> Foegje hjirûnder de folgjende koade ta ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Oars giet it mis.
2) Add editor fisualisaasje knop
As wy WordPress-artikels bewurkje, is de standertynterface normaal Visual.
Dat, it is better om ek in knop ta te foegjen yn 'e fisuele bewurker.
- Hoewol dizze funksjonaliteit kin wurde ymplementearre yn koade, is it in bytsje yngewikkeld foar in protte newbies.
- It is lestich foar saakkundigen, om't JS-koade oan it tema tafoege wurde moat, en as it tema feroare wurdt, moat it opnij tafoege wurde, wat heul omslachtich fielt.
第 4 步:Ynstallearje en ynskeakelje plugins
- Chen WeiliangPlugins wurde oanrikkemandearre:Visual Editor oanpaste knoppen
Nei't de ynstallaasje foltôge is, sille ûnder de linker menubalke in Visual Editor oanpaste knoppen mei in gearbyldkaike ferskine ▼
第 5 步:Klik Nij taheakje
- Meitsje in oanpaste knop, elke namme.
- Bygelyks: it tafoegjen fan ynterne artikels
Jo moatte gewoan de ôfbylding hjirûnder folgje om ▼ yn te stellen
第 6 步: Button Ynhâld opsje
- Selektearje Wrap Seleksje.
第 7 步: Foardat it ynstellen
- Folje de shortcode yn
stap 8:Display Yn Editor ynstellings
- Jo kinne de Visual Editor of Text Editor sjen litte knoppen.
- Tink derom dat as tekstbewurker is kontrolearre, kinne jo de "Foegje fluchtoets koade taheakje" hjirboppe oerslaan, oars wurdt it werhelle.
stap 9:Knop Ikoan Opsjes
- Selektearje yn it útklapmenu opsje it framed ikoan.
stap 10:Test
- Uteinlik is it fansels oan jo om it effekt sels te testen ^_^
- As de boppesteande stappen korrekt binne, sille jo de knop sjen lykas hjirûnder werjûn yn 'e bewurker fisuele ynterface ▼
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) dielde "Hoe kinne jo artikelkaartstyl tafoegje yn WordPress? Ynbêde koarte koade yn artikelkaartfoarm", wat jo nuttich is.
Wolkom om de keppeling fan dit artikel te dielen:https://www.chenweiliang.com/cwl-638.html