Directorio de artículos
WordPress¿Cómo optimizar los enlaces internos del sitio web?
Cree códigos cortos con artículos en miniatura y botones del editor
Optimización de enlaces internos del sitio web, enSEOLos enlaces siempre han sido muy importantes, y una buena estructura de enlaces es muy beneficiosa para el SEO.
Si el artículo actual está relacionado con otros artículos, agregue automáticamente un enlace a la página:
- aumentará en gran medida el número y la profundidad del rastreo de las arañas de los motores de búsqueda,
- ayudar a aumentar el número de registros,
- Y el peso de las palabras clave de texto de anclaje.
Si se actualizan algunos artículos antiguos, también puede indicar a las arañas de los motores de búsqueda que vuelvan a rastrear e indexar las actualizaciones de contenido de los artículos antiguos agregando enlaces internos a los artículos nuevos.
- Una forma común de enlace interno es un enlace de texto, cuya estructura es texto de anclaje .
- Pero para mejorar la experiencia del usuario, podemos optimizar aún más los enlaces de los artículos en la página interior.
cuando leeschen weiliangAl escribir en un blog, a menudo encontrará que inserta un formulario de tarjeta de artículo como este, con un artículo en miniatura que contiene un resumen del contenido del artículo, por ejemplo:
XNUMX. Agregue un código abreviado de estilo de tarjeta de artículo incrustado
Paso 1:Agregar código PHP
Agregue el siguiente código al archivo functions.php de su 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 el ícono de hipervínculo no aparece, debe reemplazar el anteriorCSSDe esta fa fa-link fa-fw, a sui sui-link sui-fw
- Verifique su tema de WP, ¿hay una carpeta /img/random/?
- (si no, por favor crea)
- Luego, en el archivo aleatorio, agregue 20 imágenes jpg.
Las imágenes se nombran del 1 al 20:
- 1.jpg
- 2.jpg
- ... (y así)
- 20.jpg
Paso 2:Agregar código CSS
Agregue el siguiente código al archivo style.css de su 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. Invoque el código corto en forma de una tarjeta de artículo incrustada (código corto)
Puede ingresar códigos abreviados directamente en la interfaz "Visual" o "Texto" del editor de artículos 【jiawen ids =postID1,postID2 ...】 formato de llamada.
Por ejemplo, si quiero mostrar 3 artículos vinculados internamente, solo ingreso el código abreviado:
【jiawen ids=526,380,411】- Si ingresa más de 5 ID de artículo, solo se mostrarán 5 artículos como máximo
- Este artículo se usa para evitar que se escapen los códigos cortos []
- Cuando use el código abreviado, cambie [] a []
El efecto es el siguiente ▼
Si no está utilizando el código abreviado en el editor de WordPress y desea llamarlo en otro lugar, puede llamarlo con el siguiente código:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Agregar un botón de editor
Si necesita ingresar manualmente el código abreviado cada vez, se siente demasiado engorroso, ¿qué debo hacer?
El poder de WordPress es que nos permite simplificar cosas complejas ^_^
1) Añadir botón de texto del editor
WordPress tiene un editor TinyMCE incorporado por defecto Podemos agregar botones de acceso directo a la interfaz de texto del editor TinyMCE.
Paso 3:Agregar código de botón de acceso directo
- Agregue el código directamente en el archivo 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 ha agregado otro código para que el editor personalice los botones de acceso directo, simplemente<script type="text/javascript"> A continuación, agregue el siguiente código ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
De lo contrario, saldrá mal.
2) Agregar botón de visualización del editor
Cuando editamos artículos de WordPress, la interfaz por defecto suele ser Visual.
Por lo tanto, también es mejor agregar un botón en el editor visual.
- Si bien esta funcionalidad se puede implementar en el código, es un poco complicada para muchos novatos.
- Es problemático para los expertos, porque es necesario agregar código JS al tema, y si cambia el tema, debe agregarlo nuevamente, y los pasos son particularmente engorrosos.
Paso 4:Instalar y habilitar complementos
- chen weiliangSe recomiendan complementos:Botones personalizados del editor visual
Una vez completada la instalación, debajo de la barra de menú de la izquierda, aparecerán Botones personalizados del Editor visual con un icono de engranaje ▼
Paso 5:Haga clic en Agregar nuevo
- Cree un botón personalizado, cualquier nombre.
- Por ejemplo: agregar artículos internos
Solo necesita seguir la imagen a continuación para configurar ▼
Paso 6: Opción de contenido del botón
- Seleccione Ajustar selección.
Paso 7: Antes de configurar
- Complete el código abreviado
Paso 8:Mostrar en la configuración del editor
- Puede comprobar los botones de visualización del Editor visual o del Editor de texto.
- Tenga en cuenta que si el Editor de texto está marcado, puede omitir el "Agregar código de botón de acceso directo" anterior; de lo contrario, se repetirá.
Paso 9:Opciones de icono de botón
- En el menú desplegable de opciones, seleccione el icono Enmarcado.
Paso 10:测试
- Al final, por supuesto, depende de ti probar el efecto tú mismo ^_^
- Si los pasos anteriores son correctos, verá el botón como se muestra a continuación en la interfaz visual del editor ▼
Esperanza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) compartió "¿Cómo agregar un estilo de tarjeta de artículo en WordPress? Incruste un código abreviado en el formulario de tarjeta de artículo", lo cual es útil para usted.
Bienvenido a compartir el enlace de este artículo:https://www.chenweiliang.com/cwl-638.html