Comment ajouter un style de carte d'article dans WordPress ? Intégrer un shortcode dans le formulaire de carte d'article

hood.discountComment optimiser les liens internes du site Web ?

Créer des shortcodes avec des articles miniatures et des boutons d'éditeur

Optimisation des liens internes du site Web, enSEOLes liens ont toujours été très importants, et une bonne structure de liens est très bénéfique pour le référencement.

Si l'article en cours est lié à d'autres articles, ajouter automatiquement un lien vers la page :

• augmentera considérablement le nombre et la profondeur de l'exploration par les robots des moteurs de recherche,
• aider à augmenter le nombre d'enregistrements,
• Et le poids des mots clés du texte d'ancrage.

Si certains anciens articles sont mis à jour, vous pouvez également demander aux moteurs de recherche de réexplorer et d'indexer les mises à jour de contenu des anciens articles en ajoutant des liens internes vers les nouveaux articles.

• Une forme courante de lien interne est un lien texte, dont la structure est un texte d'ancrage .
• Mais afin d'améliorer l'expérience utilisateur, nous pouvons optimiser davantage les liens d'articles sur la page intérieure.

quand tu lisChen WeiliangLorsque vous bloguez, vous pouvez souvent constater que vous intégrez un formulaire de carte d'article comme celui-ci, avec un article miniature contenant un résumé du contenu de l'article, par exemple :

Comment demander un numéro de mobile à Hong Kong ?Numéro de téléphone mobile virtuel de Hong Kong pour recevoir le code de vérification par SMS

eSender Code de réduction du numéro de téléphone mobile de Hong Kong : DM6888 Où puis-je acheter un numéro de téléphone mobile de Hong Kong ?Opérateur virtuel de carte d'appel de Hong Kong recommandé eSender Il s'agit d'un service de numéro mobile virtuel sous Boyuan Information Group. Boyuan Information a ouvert des succursales à Guangzhou, en Chine et à Hong Kong,...

XNUMX. Ajouter un shortcode de style carte d'article intégré

1 步：Ajouter du code PHP

Ajoutez le code suivant au fichier functions.php de votre thème 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 l'icône de lien hypertexte n'apparaît pas, vous devez remplacer ce qui précèdeCSSDe cela fa fa-link fa-fw, pour sui sui-link sui-fw

• Veuillez vérifier votre thème WP, y a-t-il un dossier /img/random/ ?
• (si non, merci de créer)
• Ensuite, dans le fichier aléatoire, ajoutez 20 images jpg.

Les photos sont nommées de 1 à 20 :

• 1.jpg
• 2.jpg
• ... (etc)
• 20.jpg

2 步：Ajouter du code CSS

Ajoutez le code suivant au fichier style.css de votre thème 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. Appelez le code court sous la forme d'une carte d'article intégrée (code court)

Vous pouvez saisir des shortcodes directement dans l'interface "Visuel" ou "Texte" de l'éditeur d'articles 【jiawen ids =postID1,postID2 ...】 formater l'appel.

Par exemple, si je souhaite afficher 3 articles liés en interne, je saisis simplement le shortcode :

• 【jiawen ids=526,380,411】
• Si vous saisissez plus de 5 identifiants d'articles, seuls 5 articles au maximum seront affichés
• Cet article est utilisé pour éviter que les shortcodes soient échappés []
• Lorsque vous utilisez le shortcode, veuillez remplacer [] par []

L'effet est le suivant ▼

Comment le compte public de Mimeng a-t-il réussi et pourquoi est-il si populaire ?

Comment le compte officiel de Mimi Meng est-il devenu un succès ? Pourquoi est-ce si populaire ? Il y a une force motrice derrière la cause ! Depuis que Mi Meng a commencé à écrire sur les comptes publics WeChat le 2012 septembre 9, elle a gagné 15 2 abonnés en seulement deux mois, dépassant instantanément les réalisations de nombreuses personnes, ce qui a rendu beaucoup de gens très curieux.

Les quatre professeurs et apprentis de Tang Seng ont discuté des contacts des amis de WeChat, et le discours de Sun Wukong m'a abasourdi

Tang Sanzang et ses quatre disciples ont discuté du réseau d'amis WeChat. Le discours de Sun Wukong m'a soudain éclairé. Introduction : Nous avons tous lu La Pérégrination vers l'Ouest. Avez-vous vu Tang Sanzang, Sun Wukong, Zhu Bajie et Sha Wujing discuter du réseau d'amis WeChat ? Haha, je ne m'attendais pas à ce que le discours de Sun Wukong me rende soudainement éclairé...

Analyse des caractéristiques psychologiques de la lecture des utilisateurs à l'ère des nouveaux médias : si vous maîtrisez ces 7, vous gagnerez

Analyse des caractéristiques psychologiques de la lecture des utilisateurs à l'ère des nouveaux médias : maîtriser ces sept caractéristiques vous permettra de gagner de l'argent. Introduction : Pour réussir à gérer un compte public WeChat, il est essentiel d'étudier la nature humaine, d'analyser la psychologie de la lecture des utilisateurs et de comprendre leur comportement. C'est la seule façon d'améliorer notre…

Si vous n'utilisez pas le shortcode dans l'éditeur WordPress et souhaitez l'appeler ailleurs, vous pouvez l'appeler avec le code suivant :

do_shortcode（'[neilian ids ids = postID1，postID2]'）

XNUMX. Ajouter un bouton d'éditeur

Si vous devez saisir manuellement le shortcode à chaque fois, cela semble trop lourd, que dois-je faire ?

La puissance de WordPress est qu'il nous permet de simplifier des choses complexes ^_^

1) Ajouter un bouton de texte d'éditeur

WordPress a un éditeur TinyMCE intégré par défaut.Nous pouvons ajouter des boutons de raccourci à l'interface texte de l'éditeur TinyMCE.

étape 3:Ajouter un code de bouton de raccourci

• Veuillez ajouter le code directement dans le fichier 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 vous avez ajouté un autre code pour que l'éditeur personnalise les boutons de raccourci, il suffit<script type="text/javascript"> Ci-dessous, ajoutez le code suivant ▼

QTags.addButton( 'jw', '加入内部文章', '', '');

Sinon ça ira mal.

2) Ajouter un bouton de visualisation de l'éditeur

Lorsque nous éditons des articles WordPress, l'interface par défaut est généralement Visual.

Il est donc préférable d'ajouter également un bouton dans l'éditeur visuel.

• Bien que cette fonctionnalité puisse être implémentée dans le code, elle est un peu compliquée pour de nombreux débutants.
• C'est gênant pour les experts, car il faut ajouter du code JS au thème, et si vous changez de thème, il faut le rajouter, et les étapes sont particulièrement lourdes.

4 步：Installer et activer les plugins

• Chen WeiliangLes plugins sont recommandés :Boutons personnalisés de l'éditeur visuel

Une fois l'installation terminée, sous la barre de menu de gauche, des boutons personnalisés de l'éditeur visuel avec une icône d'engrenage apparaîtront ▼

5 步：Cliquez sur Ajouter nouveau

• Créez un bouton personnalisé, n'importe quel nom.
• Par exemple : ajouter des articles internes 

Il vous suffit de suivre l'image ci-dessous pour configurer ▼

6 步： Option Contenu du bouton

• Sélectionnez Envelopper la sélection.

7 步： Avant de régler

• Remplissez le shortcode

étape 8:Paramètres d'affichage dans l'éditeur

• Vous pouvez vérifier les boutons d'affichage de l'éditeur visuel ou de l'éditeur de texte.
• Notez que si l'Éditeur de texte est coché, vous pouvez ignorer le "Ajouter un code de bouton de raccourci" ci-dessus, sinon il sera répété.

étape 9:Options d'icône de bouton

• Dans le menu déroulant des options, sélectionnez l'icône Encadré.

étape 10:Test

• Au final, bien sûr, c'est à vous de tester vous-même l'effet ^_^
• Si les étapes ci-dessus sont correctes, vous verrez le bouton comme indiqué ci-dessous dans l'interface visuelle de l'éditeur ▼