Hoe om artikelkaartstyl in WordPress by te voeg? Sluit kortkode in artikelkaartvorm in

WordPressHoe om webwerf interne skakels te optimaliseer?

Skep kortkodes met kleinkiekie-artikels en redakteurknoppies

Webwerf interne skakel optimalisering, inSEOSkakels was nog altyd baie belangrik, en 'n goeie skakelstruktuur is baie voordelig vir SEO.

As die huidige artikel met ander artikels verband hou, voeg outomaties 'n skakel by die bladsy:

• sal die aantal en diepte van kruip deur soekenjinspinnekoppe aansienlik verhoog,
• help om die aantal rekords te verhoog,
• En die gewig van anker teks sleutelwoorde.

As sommige ou artikels opgedateer is, kan jy ook soekenjinspinnekoppe opdrag gee om die inhoudopdaterings van die ou artikels te herkruip en te indekseer deur interne skakels by die nuwe artikels te voeg.

• 'n Algemene vorm van interne skakeling is 'n teksskakel, waarvan die struktuur ankerteks is.
• Maar om die gebruikerservaring te verbeter, kan ons die artikelskakels op die binneblad verder optimaliseer.

wanneer jy leesChen WeiliangWanneer jy blog, kan jy dikwels vind dat jy 'n artikelkaartvorm soos hierdie insluit, met 'n miniatuurartikel wat 'n opsomming van die artikel se inhoud bevat, byvoorbeeld:

Hoe om aansoek te doen vir 'n Hong Kong-selfoonnommer?Hong Kong virtuele selfoonnommer om SMS-verifikasiekode te ontvang

eSender Hong Kong selfoonnommer afslagkode: DM6888 Waar kan ek 'n Hong Kong selfoonnommer koop?Hong Kong telefoonkaart virtuele operateur aanbeveel eSender Dit is 'n virtuele selfoonnommerdiens onder Boyuan Information Group. Boyuan Information het takke in Guangzhou en Hong Kong, China, ...

XNUMX. Voeg 'n ingebedde artikelkaartstylkortkode by

Stap 1:Voeg PHP-kode by

Voeg die volgende kode by jou WP-tema se functions.php-lêer:

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

As die hiperskakelikoon nie verskyn nie, moet jy die bogenoemde vervangCSSVan hierdie fa fa-link fa-fwAan sui sui-link sui-fw

• Gaan asseblief jou WP-tema na, is daar 'n /img/random/-lêergids?
• (indien nie, skep asseblief)
• Voeg dan 20 jpg-prente by in die ewekansige lêer.

Die prente is van 1 tot 20 genoem:

• 1.jpg
• 2.jpg
• ... (en so aan)
• 20.jpg

Stap 2:Voeg CSS-kode by

Voeg die volgende kode by jou WP-tema se style.css-lêer:

/*加入内部文章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. Roep die kort kode op in die vorm van 'n ingebedde artikelkaart (kortkode)

Jy kan kortkodes direk in die "Visuele" of "Teks"-koppelvlak van die artikelredigeerder invoer 【jiawen ids =postID1,postID2 ...】 formaat oproep.

Byvoorbeeld, as ek 3 intern gekoppelde artikels wil vertoon, voer ek die kortkode direk in:

• 【jiawen ids=526,380,411】
• As jy meer as 5 artikel-ID's invoer, sal slegs 5 artikels op die meeste vertoon word
• Hierdie artikel word gebruik om te verhoed dat kortkodes ontsnap word []
• Wanneer u die kortkode gebruik, verander asseblief [] na []

Die effek is soos volg ▼

Hoe het Mimeng se publieke rekening geslaag en hoekom is dit so gewild?Daar is redes daaragter

Hoe het Mimi Meng se amptelike rekening suksesvol geword? Hoekom is dit so gewild? Daar is 'n dryfveer agter die saak! Sedert Mi Meng op 2012 September 9 begin het om WeChat-openbare rekeninge te skryf, het sy 15 2 volgelinge in net twee maande gekry, wat baie mense se prestasies onmiddellik oortref het, wat baie mense baie nuuskierig gemaak het.

Die vier onderwysers en vakleerlinge van Tang Seng het die kontakte van WeChat-vriende bespreek, en Sun Wukong se toespraak het my op my gemak laat voel

Tang Sanzang en sy vier dissipels het die netwerk van WeChat-vriende bespreek. Inleiding: Ons het almal Journey to the West gesien. Haha, ek het nie verwag dat Sun Wukong se toespraak my skielik verlig sou maak nie...

Ontleding van die sielkundige kenmerke van gebruikers se lees in die nuwe media-era: as jy hierdie 7 bemeester, sal jy verdien

Ontleding van die sielkundige kenmerke van gebruikerslees in die nuwe media-era: As jy hierdie 7 bemeester, sal jy geld maak Inleiding As ons daarin wil slaag om 'n WeChat publieke rekening te bestuur, moet ons die menslike natuur bestudeer, gebruikersleesielkunde ontleed en gebruikersleesgedrag verstaan.

As jy nie die kortkode in die WordPress-redigeerder gebruik nie en dit elders wil noem, kan jy dit met die volgende kode noem:

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

XNUMX. Voeg 'n redigeerknoppie by

As jy elke keer die kortkode handmatig moet invoer, voel dit te omslagtig, wat moet ek doen?

Die krag van WordPress is dat dit ons toelaat om komplekse dinge te vereenvoudig ^_^

1) Voeg teksredakteur by

WordPress het by verstek 'n ingeboude TinyMCE-redigeerder. Ons kan kortpadknoppies by die TinyMCE-redigeerder-tekskoppelvlak voeg.

stap 3:Voeg kortpadknoppiekode by

• Voeg asseblief die kode direk by die functions.php-lêer ▼

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

注意 事项

As jy ander kode bygevoeg het vir die redigeerder om die kortpadknoppies aan te pas, net<script type="text/javascript"> Voeg die volgende kode hieronder by ▼

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

Anders gaan dit verkeerd loop.

2) Voeg redakteurvisualiseringsknoppie by

Wanneer ons WordPress-artikels redigeer, is die verstekkoppelvlak gewoonlik Visueel.

Dit is dus beter om ook 'n knoppie in die visuele redigeerder by te voeg.

• Alhoewel hierdie funksionaliteit in kode geïmplementeer kan word, is dit 'n bietjie ingewikkeld vir baie nuwelinge.
• Dit is lastig vir kenners, want JS-kode moet by die tema gevoeg word, en as die tema verander word, moet dit weer bygevoeg word, wat baie omslagtig voel.

Stap 4:Installeer en aktiveer inproppe

• Chen WeiliangInproppe word aanbeveel:Visuele redakteur pasgemaakte knoppies

Nadat die installasie voltooi is, onder die linkerkieslysbalk, sal 'n Visual Editor Custom Buttons met 'n rat-ikoon verskyn ▼

Stap 5:Klik Voeg nuwe by

• Skep 'n pasgemaakte knoppie, enige naam.
• Byvoorbeeld: die byvoeging van interne artikels 

Jy hoef net die prent hieronder te volg om ▼ op te stel

Stap 6: Knoppie Inhoud opsie

• Kies Wikkel seleksie.

Stap 7: Voor instel

• Vul die kortkode in

stap 8:Wys In Editor-instellings

• Jy kan die visuele redigeerder of teksredigeerder wys knoppies nagaan.
• Let daarop dat as teksredigeerder gemerk is, jy die "Voeg kortpadknoppie-kode by" hierbo kan oorslaan, anders sal dit herhaal word.

stap 9:Knoppie-ikoon-opsies

• Kies die Geraamde-ikoon in die aftrek-opsieskieslys.

stap 10:toets

• Op die ou end is dit natuurlik aan jou om self die effek te toets ^_^
• As die stappe hierbo korrek is, sal jy die knoppie sien soos hieronder in die redigeerder se visuele koppelvlak ▼