Wéi addéiere mer Artikelkaartstil a WordPress? Embed Shortcode an Artikelkaartform

Wéi optiméiert een intern Links op enger WordPress Websäit?

Erstellt Shortcodes mat Thumbnail Artikelen & Editor Buttons

Intern Linkoptimiséierung ass ëmmer ganz wichteg am SEO , well eng gutt Linkstruktur ganz virdeelhaft fir d'Sichmaschinoptimiséierung ass.

Wann den aktuellen Artikel mat aneren Artikelen Zesummenhang ass, füügt automatesch e Link op d'Säit derbäi:

• wäert d'Zuel an d'Tiefe vum Krabbelen duerch Sichmotorspider staark erhéijen,
• Hëllef fir d'Zuel vun de Rekorder ze erhéijen,
• An d'Gewiicht vun Ankertext Schlësselwieder.

Wann e puer al Artikelen aktualiséiert ginn, kënnt Dir och d'Sichmaschinn spideren instruéieren d'Inhaltsaktualiséierunge vun den alen Artikelen nei ze kräischen an ze indexéieren andeems Dir intern Linken op déi nei Artikele bäidréit.

• Eng gemeinsam Form vun internen Linken ass en Textlink, deem seng Struktur Ankertext ass.
• Awer fir d'Benotzererfarung ze verbesseren, kënne mir d'Artikellinks op der Innere Säit weider optimiséieren.

Wann Dir d'Blogposts vum Chen Weiliang liest , fannt Dir dacks Artikelen, déi a Kaarteformat agebett sinn, mat Miniaturbiller, déi Zesummefaassunge vum Artikelinhalt enthalen, wéi zum Beispill:

Wéi gëlle fir eng Hong Kong Handysnummer?Hong Kong virtuell Handysnummer fir SMS Verifikatiounscode ze kréien

eSender Hong Kong Handysnummer Remise Code: DM6888 Wou kann ech eng Hong Kong Handysnummer kafen?Hong Kong Calling Card virtuell Bedreiwer recommandéiert eSender Et ass e virtuellen Handysnummer Service ënner Boyuan Information Group. Boyuan Informatioun huet Filialen a Guangzhou an Hong Kong, China, ...

XNUMX. Füügt en embedded Artikel Card Style Shortcode

Schrëtt 1: PHP Code derbäisetzen

Füügt de folgende Code op Är WP Thema's functions.php Datei:

/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}

Wann d'Hyperlink Ikon net erschéngt, musst Dir déi uewen ersetzenCSSvun dëser fa fa-link fa-fw, zu sui sui-link sui-fw

• Kuckt w.e.g. Äert WP Thema, gëtt et en /img/random/ Dossier?
• (wann net, erstellt w.e.g.)
• Dann an der zoufälleger Datei 20 jpg Biller derbäi.

D'Biller si vun 1 bis 20 genannt:

• xnumx.jpg
• xnumx.jpg
• ... (a sou weider)
• xnumx.jpg

Schrëtt 2: CSS Code derbäisetzen

Füügt de folgende Code op Är WP-Thema style.css Datei:

/*加入内部文章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. Opruff de Kuerzcode a Form vun enger embedded Artikelkaart (kuerzcode)

Dir kënnt Shortcodes direkt an der "Visual" oder "Text" Interface vum Artikeleditor aginn 【jiawen ids =postID1,postID2 ...】 Format Opruff.

Zum Beispill, wann ech 3 intern verlinkte Artikele wëlle weisen, gitt ech just de Shortcode:

• 【jiawen ids=526,380,411】
• Wann Dir méi wéi 5 Artikel-IDen agitt, ginn maximal 5 Artikelen ugewisen
• Dësen Artikel gëtt benotzt fir ze vermeiden datt Shortcodes entkommen []
• Wann Dir de Shortcode benotzt, ännert w.e.g. [] op []

Den Effekt ass wéi follegt ▼

Wéi huet dem Mimeng säin ëffentleche Kont gelongen a firwat ass en esou populär? Et gi Grënn hannendrun

Wéi ass dem Mimi Meng säin offiziellen Kont erfollegräich ginn? Firwat ass et sou populär? Et gëtt eng dreiwend Kraaft hannert der Ursaach! Zënter datt d'Mi Meng ugefaang huet WeChat ëffentleche Konten de 2012. September 9 ze schreiwen, huet si 15 Unhänger an nëmmen zwee Méint gewonnen, direkt vill Leit hir Leeschtungen iwwerschratt, wat vill Leit ganz virwëtzeg gemaach huet.

Déi véier Léierpersonal a Léierpersonal vum Tang Seng hunn d'Kontakter vu WeChat Frënn diskutéiert, an dem Sun Wukong seng Ried huet mech iwwerrascht gemaach

Tang Sanzang a seng véier Jünger diskutéiert d'Netzwierk vu WeChat seng Ried huet mech op eemol opgekläert: Mir hunn all d'Journey to the West gelies. Haha, ech hat net erwaart datt dem Sun Wukong seng Ried mech op eemol opgekläert géif maachen...

Analyse vun de psychologesche Charakteristiken vum Liesen vun de Benotzer an der neier Medien Ära: wann Dir dës 7 beherrscht, verdéngt Dir

Analyse vun de psychologesche Charakteristiken vum Benotzer Liesen an der neier Medien Ära: Wann Dir dës 7 beherrscht, wäert Dir Sue maachen.

Wann Dir de Shortcode am WordPress Editor net benotzt a wëllt et soss anzwousch nennen, kënnt Dir et mam folgende Code nennen:

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

XNUMX. Füügt en Editeur Knäppchen

Wann Dir all Kéier de Shortcode manuell aginn musst, fillt et sech ze ëmständlech, wat soll ech maachen?

D'Kraaft vu WordPress ass datt et eis erlaabt komplex Saachen ze vereinfachen ^_^

1) Add Editor Text Knäppchen

WordPress huet als Standard en agebaute TinyMCE Editor.Mir kënnen Ofkiirzungsknäpper an den TinyMCE Editor Text Interface addéieren.

Schrëtt 3: Code fir e Ofkierzungsknäppchen derbäisetzen

• Gitt w.e.g. de Code direkt an der functions.php Datei ▼

//加入内部文章，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
}

Precautiounen

Wann Dir en anere Code fir den Editeur bäigefüügt hutt fir d'Ofkierzungsknäpper ze personaliséieren, just<script type="text/javascript"> Drënner, füügt de folgende Code ▼

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

Soss geet et falsch.

2) Add Editor Visualiséierung Knäppchen

Wa mir WordPress Artikelen änneren, ass d'Standard-Interface normalerweis Visual.

Also, et ass besser och e Knäppchen am visuellen Editor ze addéieren.

• Och wann dës Funktionalitéit am Code implementéiert ka ginn, ass et e bësse komplizéiert fir vill Newbies.
• Et ass lästeg fir d'Experten, well et néideg ass de JS Code zum Thema ze addéieren, a wann Dir d'Thema ännert, musst Dir et erëm derbäisetzen, an d'Schrëtt si besonnesch ëmständlech.

Schrëtt 4: De Plugin installéieren an aktivéieren

• Chen WeiliangPlugins ginn recommandéiert:Visual Editor Benotzerdefinéiert Knäppercher

Nodeems d'Installatioun fäerdeg ass, ënner der lénker Menübar, erschéngt e Visual Editor Custom Buttons mat engem Gang Ikon ▼

Schrëtt 5: Klickt op Nei derbäisetzen

• Erstellt e personaliséierte Knäppchen, all Numm.
• Zum Beispill: intern Artikelen derbäisetzen 

Dir musst just d'Bild hei ënnen verfollegen fir opzemaachen ▼

Schrëtt 6: Optiounen fir den Inhalt vum Knäppchen

• Wielt Wrap Auswiel.

Schrëtt 7: Virum Opbau

• Fëllt de Shortcode aus

Schrëtt 8: An den Astellungen vum Editor uweisen

• Dir kënnt de Visual Editor oder Text Editor Show Knäppercher kontrolléieren.
• Bedenkt datt wann den Text Editor ugekuckt ass, kënnt Dir den "Ofkierzungs-Knäppchen Code addéieren" uewen iwwersprangen, soss gëtt et widderholl.

Schrëtt 9: Optiounen fir Knäppchensymboler

• Am Dropdown-Menü wielt de Framed Ikon.

Schrëtt 10: Testen

• Um Enn ass et natierlech un Iech fir den Effekt selwer ze testen ^_^
• Wann déi uewe genannte Schrëtt richteg sinn, gesitt Dir de Knäppchen wéi hei ënnendrënner am Editor visuellen Interface ▼