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

WordPressWéi optimiséieren ech Websäit intern Linken?

Erstellt Shortcodes mat Thumbnail Artikelen & Editor Buttons

Websäit intern Link Optimisatioun, anAm PrinzipLinks waren ëmmer ganz wichteg, an eng gutt Linkstruktur ass ganz gutt fir SEO.

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 liestChen WeiliangWann Dir bloggt, kënnt Dir dacks feststellen datt Dir eng Form vun enger Artikelkaart wéi dës embett, mat engem Miniaturartikel deen e Resumé vum Inhalt vum Artikel enthält, 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

第 1 步:PHP Code derbäi

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

第 2 步:CSS Code derbäi

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:Füügt Ofkiirzung Knäppchen Code

• 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.

第 4 步:Installéiert an aktivéiert Plugins

• 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 ▼

第 5 步:Klickt Neie addéieren

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

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

第 6 步: Knäppchen Inhalt Optioun

• Wielt Wrap Auswiel.

第 7 步: Virun Astellung

• Fëllt de Shortcode aus

Schrëtt 8:Display Am Editor Astellungen

• 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:Knäppchen Ikon Optiounen

• Am Dropdown-Menü wielt de Framed Ikon.

Schrëtt 10:Test maachen

• 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 ▼