Kako dodati stil kartice članka u WordPress? Ugradite kratki kod u obrazac kartice članka

WordPressKako optimizirati interne veze na web stranici?

Kreirajte kratke kodove sa sličicama članaka i gumbima za uređivanje

Optimizacija internih linkova web stranice, inSEOLinkovi su oduvek bili veoma važni, a dobra struktura linkova je veoma korisna za SEO.

Ako je trenutni članak povezan s drugim člancima, automatski dodajte link na stranicu:

• uvelike će povećati broj i dubinu indeksiranja od strane paukova pretraživača,
• pomoći da se poveća broj zapisa,
• I težinu ključnih riječi sidrenog teksta.

Ako se neki stari članci ažuriraju, također možete uputiti paukove tražilice da ponovo indeksiraju i indeksiraju ažurirane sadržaje starih članaka dodavanjem internih veza na nove članke.

• Uobičajeni oblik internog povezivanja je tekstualna veza, čija je struktura sidreni tekst .
• Ali kako bismo poboljšali korisničko iskustvo, možemo dodatno optimizirati linkove na članke na unutrašnjoj stranici.

kada čitateChen WeiliangKada pišete na blogu, često ćete otkriti da ugrađujete obrazac za karticu članka poput ovog, sa minijaturom članka koji sadrži sažetak sadržaja članka, na primjer:

Kako se prijaviti za mobilni broj u Hong Kongu?Virtuelni broj mobilnog telefona u Hong Kongu za primanje SMS verifikacionog koda

eSender Kôd popusta na broj mobilnog telefona u Hong Kongu: DM6888 Gdje mogu kupiti broj mobilnog telefona u Hong Kongu?Preporučen virtuelni operater za pozivnu karticu Hong Konga eSender To je usluga virtuelnog broja mobilnog telefona pod Boyuan Information Group. Boyuan Information je otvorio podružnice u Guangzhouu i Hong Kongu, Kina,...

XNUMX. Dodajte ugrađeni kratki kod u stilu kartice članka

Korak 1:Dodajte PHP kod

Dodajte sljedeći kod u datoteku functions.php vaše WP teme:

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

Ako se ikona hiperveze ne pojavi, morate zamijeniti gornjuCSSOd ovoga fa fa-link fa-fw, to sui sui-link sui-fw

• Molimo provjerite svoju WP temu, postoji li /img/random/ folder?
• (ako ne, kreirajte)
• Zatim u nasumični fajl dodajte 20 jpg slika.

Slike su imenovane od 1 do 20:

• 1.jpg
• 2.jpg
• ... (i tako dalje)
• 20.jpg

Korak 2:Dodajte CSS kod

Dodajte sljedeći kod u datoteku style.css vaše WP teme:

/*加入内部文章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. Pozovite kratki kod u obliku ugrađene kartice artikla (kratki kod)

Kratke kodove možete unijeti direktno u "Vizuelni" ili "Tekst" interfejs uređivača članaka 【jiawen ids =postID1,postID2 ...】 formatirajte poziv.

Na primjer, ako želim prikazati 3 interno povezana članka, samo unesem kratki kod:

• 【jiawen ids=526,380,411】
• Ako unesete više od 5 ID-ova članaka, biće prikazano najviše 5 članaka
• Ovaj članak se koristi kako bi se izbjeglo izbjegavanje kratkih kodova []
• Kada koristite kratki kod, promijenite [] u []

Učinak je sljedeći ▼

Kako je Mimengov javni nalog uspio i zašto je toliko popularan? Postoje razlozi za to

Kako je službeni račun Mimi Meng postao uspješan? Zašto je toliko popularan? Postoji pokretačka snaga iza uzroka! Otkako je Mi Meng počela da piše WeChat javne naloge 2012. septembra 9. godine, stekla je 15 pratilaca za samo dva meseca, odmah nadmašivši dostignuća mnogih ljudi, što je mnoge ljude učinilo veoma radoznalim.

Četiri učitelja i šegrta Tang Senga razgovarali su o kontaktima WeChat prijatelja, a govor Sun Wukonga učinio mi je da se osjećam opušteno

Tang Sanzang i njegova četiri učenika razgovarali su o mreži prijatelja iz WeChat-a. Uvod: Svi smo čitali Putovanje na zapad. Haha, nisam očekivao da će me Sun Wukongov govor odjednom prosvetliti...

Analiza psiholoških karakteristika čitanja korisnika u eri novih medija: ako savladate ovih 7, zaradit ćete

Analiza psiholoških karakteristika čitanja korisnika u eri novih medija: Ako savladate ovih 7, zaradit ćete novac.

Ako ne koristite kratki kod u WordPress uređivaču i želite ga pozvati negdje drugdje, možete ga pozvati pomoću sljedećeg koda:

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

XNUMX. Dodajte dugme za uređivanje

Ako trebate ručno unijeti kratki kod svaki put, čini mi se previše glomazno, što da radim?

Moć WordPress-a je u tome što nam omogućava da pojednostavimo složene stvari ^_^

1) Dugme za dodavanje teksta uređivača

WordPress ima ugrađeni TinyMCE editor po defaultu.Možemo dodati prečice u TinyMCE editor tekstualni interfejs.

korak 3:Dodajte kod dugmeta prečice

• Molimo dodajte kod direktno u datoteku 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
}

Predostrožnosti

Ako ste dodali drugi kod za uređivač za prilagođavanje dugmadi za prečice, samo<script type="text/javascript"> Ispod dodajte sljedeći kod ▼

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

Inače će krenuti po zlu.

2) Dodaj dugme za vizualizaciju uređivača

Kada uređujemo WordPress članke, podrazumevano sučelje je obično Visual.

Dakle, bolje je dodati dugme iu vizuelnom uređivaču.

• Iako se ova funkcionalnost može implementirati u kodu, ona je malo komplikovana za mnoge početnike.
• To je problematično za stručnjake, jer je potrebno dodati JS kod u temu, a ako promijenite temu, morate je dodati ponovo, a koraci su posebno glomazni.

Korak 4:Instalirajte i omogućite dodatke

• Chen WeiliangPreporučuju se dodaci:Prilagođena dugmad vizualnog uređivača

Nakon što je instalacija završena, ispod lijeve trake menija pojavit će se prilagođena dugmad vizualnog uređivača sa ikonom zupčanika ▼

Korak 5:Kliknite Dodaj novo

• Kreirajte prilagođeno dugme, bilo koje ime.
• Na primjer: dodavanje internih članaka 

Potrebno je samo da pratite sliku ispod za postavljanje ▼

Korak 6: Opcija sadržaja dugmeta

• Odaberite Wrap Selection.

Korak 7: Prije podešavanja

• Popunite kratki kod

korak 8:Display In Editor settings

• Možete provjeriti gumbe za prikaz vizualnog uređivača ili uređivača teksta.
• Imajte na umu da ako je Uređivač teksta označen, možete preskočiti "Dodaj kod dugmeta prečice" iznad, inače će se ponoviti.

korak 9:Opcije ikone dugmeta

• U padajućem izborniku opcija odaberite ikonu Uokvireno.

korak 10:Test

• Na kraju, naravno, na vama je da sami isprobate efekat ^_^
• Ako su gornji koraci ispravni, vidjet ćete dugme kao što je prikazano ispod u vizuelnom interfejsu uređivača ▼