Directori d'articles
WordPressCom optimitzar els enllaços interns del lloc web?
Creeu codis curts amb articles en miniatura i botons d'editor
Optimització d'enllaços interns del lloc web, enSEOEls enllaços sempre han estat molt importants, i una bona estructura d'enllaços és molt beneficiosa per al SEO.
Si l'article actual està relacionat amb altres articles, afegeix automàticament un enllaç a la pàgina:
- augmentarà considerablement el nombre i la profunditat del rastreig per les aranyes dels motors de cerca,
- ajudar a augmentar el nombre de registres,
- I el pes de les paraules clau del text d'ancoratge.
Si s'actualitzen alguns articles antics, també podeu indicar als motors de cerca que tornin a rastrejar i indexar les actualitzacions de contingut dels articles antics afegint enllaços interns als articles nous.
- Una forma habitual d'enllaç intern és un enllaç de text, l'estructura del qual és el text àncora .
- Però per millorar l'experiència de l'usuari, podem optimitzar encara més els enllaços d'articles a la pàgina interior.
quan llegiuChen WeiliangQuan feu un blog, és possible que sovint trobeu que un formulari de targeta d'article està incrustat així, amb un article en miniatura que conté un resum del contingut de l'article, per exemple:
XNUMX. Afegiu un codi curt d'estil de targeta d'article incrustat
Cap 1 步：Afegiu codi PHP
Afegiu el codi següent al fitxer functions.php del vostre tema WP:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}Si la icona d'hiperenllaç no apareix, heu de substituir l'anteriorCSSD'aquesta fa fa-link fa-fw, a sui sui-link sui-fw
- Si us plau, comproveu el vostre tema WP, hi ha una carpeta /img/random/?
- (si no, creeu)
- A continuació, al fitxer aleatori, afegiu 20 imatges jpg.
Les imatges s'anomenen de l'1 al 20:
- 1.jpg
- 2.jpg
- ... (etcètera)
- 20.jpg
Cap 2 步：Afegeix codi CSS
Afegiu el codi següent al fitxer style.css del vostre tema WP:
/*加入内部文章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. Invoqueu el codi curt en forma de targeta d'article incrustada (codi curt)
Podeu introduir codis curts directament a la interfície "Visual" o "Text" de l'editor d'articles 【jiawen ids =postID1,postID2 ...】 format de trucada.
Per exemple, si vull mostrar 3 articles enllaçats internament, introdueixo el codi curt directament:
【jiawen ids=526,380,411】- Si introduïu més de 5 ID d'article, només es mostraran 5 articles com a màxim
- Aquest article s'utilitza per evitar que s'escapen els codis curts []
- Quan utilitzeu el codi curt, canvieu [] per []
L'efecte és el següent ▼
Si no feu servir el codi curt a l'editor de WordPress i voleu trucar-lo a un altre lloc, podeu trucar-lo amb el codi següent:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Afegeix un botó d'editor
Si heu d'introduir manualment el codi curt cada vegada, us sembla massa complicat, què he de fer?
El poder de WordPress és que ens permet simplificar coses complexes ^_^
1) Botó Afegeix text de l'editor
WordPress té un editor TinyMCE integrat de manera predeterminada. Podem afegir botons de drecera a la interfície de text de l'editor TinyMCE.
Pas 3:Afegeix el codi del botó de drecera
- Si us plau, afegiu el codi directament al fitxer 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
}
注意 事项
Si heu afegit un altre codi per a l'editor per personalitzar els botons de drecera, només cal<script type="text/javascript"> A continuació, afegiu el codi següent ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
En cas contrari sortirà malament.
2) Afegeix un botó de visualització de l'editor
Quan editem articles de WordPress, la interfície predeterminada sol ser Visual.
Per tant, és millor afegir un botó a l'editor visual també.
- Tot i que aquesta funcionalitat es pot implementar en codi, és una mica complicat per a molts novells.
- És problemàtic per als experts, perquè cal afegir codi JS al tema i, si canvieu el tema, l'heu d'afegir de nou, i els passos són especialment complicats.
Cap 4 步：Instal·leu i activeu els connectors
- Chen WeiliangEs recomanen els connectors:Botons personalitzats de l'editor visual
Un cop finalitzada la instal·lació, a la barra de menú esquerra, apareixeran botons personalitzats de l'editor visual amb una icona d'engranatge ▼
Cap 5 步：Feu clic a Afegeix nou
- Creeu un botó personalitzat, qualsevol nom.
- Per exemple: afegir articles interns
Només has de seguir la imatge següent per configurar ▼
Cap 6 步： Opció de contingut del botó
- Seleccioneu Embolcall de la selecció.
Cap 7 步： Abans de posar
- Ompliu el codi curt
Pas 8:Mostra a la configuració de l'editor
- Podeu comprovar els botons de mostra de l'Editor visual o de l'Editor de text.
- Tingueu en compte que si l'editor de text està marcat, podeu ometre el "Codi del botó de drecera" anterior, en cas contrari, es repetirà.
Pas 9:Opcions de la icona del botó
- Al menú desplegable d'opcions, seleccioneu la icona Emmarcat.
Pas 10:Prova
- Al final, per descomptat, depèn de tu provar l'efecte tu mateix ^_^
- Si els passos anteriors són correctes, veureu el botó tal com es mostra a continuació a la interfície visual de l'editor ▼
Bloc d'Hope Chen Weiliang ( https://www.chenweiliang.com/ ) ha compartit "Com afegir l'estil de targeta d'article a WordPress? Insereix el codi curt en forma de targeta d'article", cosa que us serà útil.
Benvingut a compartir l'enllaç d'aquest article:https://www.chenweiliang.com/cwl-638.html