Cum să adăugați stilul cardului articolului în WordPress? Încorporați codul scurt în forma cardului articolului

WordPressCum să optimizați legăturile interne ale site-ului?

Creați coduri scurte cu articole în miniatură și butoane editor

Optimizarea link-ului intern al site-ului, înSEOLegăturile au fost întotdeauna foarte importante, iar o structură bună a legăturilor este foarte benefică pentru SEO.

Dacă articolul curent are legătură cu alte articole, adăugați automat un link către pagină:

• va crește considerabil numărul și profunzimea accesării cu crawlere de către păianjenii motoarelor de căutare,
• ajuta la creșterea numărului de înregistrări,
• Și greutatea cuvintelor cheie ale textului ancora.

Dacă unele articole vechi sunt actualizate, puteți, de asemenea, să îi instruiți pe motoarele de căutare să acceseze cu crawlere și să indexeze actualizările de conținut ale articolelor vechi, adăugând link-uri interne la articolele noi.

• O formă comună de legare internă este o legătură text, a cărei structură este textul ancora .
• Dar pentru a îmbunătăți experiența utilizatorului, putem optimiza și mai mult linkurile articolelor din pagina interioară.

cand citestiChen WeiliangCând scrieți pe blog, puteți descoperi adesea că un formular de card de articol este încorporat astfel, cu un articol în miniatură care conține un rezumat al conținutului articolului, de exemplu:

Cum să aplici pentru un număr de mobil din Hong Kong?Număr virtual de telefon mobil din Hong Kong pentru a primi codul de verificare prin SMS

eSender Cod de reducere pentru numărul de telefon mobil din Hong Kong: DM6888 De unde pot cumpăra un număr de telefon mobil din Hong Kong?Se recomandă operatorul virtual de card de apel din Hong Kong eSender Este un serviciu de număr de telefon mobil virtual sub Boyuan Information Group. Boyuan Information a înființat filiale în Guangzhou și Hong Kong, China,...

XNUMX. Adăugați un cod scurt de tip card articol încorporat

第 1 步 ：Adăugați cod PHP

Adăugați următorul cod în fișierul functions.php al temei dvs. 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 文件夹内的图片作缩略图
}
}
}
}

Dacă pictograma hyperlink nu apare, trebuie să înlocuiți cea de mai susCSSDin aceasta fa fa-link fa-fw, la sui sui-link sui-fw

• Vă rugăm să verificați tema WP, există un folder /img/random/?
• (dacă nu, vă rugăm să creați)
• Apoi, în fișierul aleatoriu, adăugați 20 de imagini jpg.

Imaginile sunt denumite de la 1 la 20:

• 1.jpg
• 2.jpg
• ... (si asa mai departe)
• 20.jpg

第 2 步 ：Adăugați codul CSS

Adăugați următorul cod în fișierul style.css al temei dvs. 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. Invocați codul scurt sub forma unui card de articol încorporat (cod scurt)

Puteți introduce coduri scurte direct în interfața „Vizuală” sau „Text” a editorului de articole 【jiawen ids =postID1,postID2 ...】 format apel.

De exemplu, dacă vreau să afișez 3 articole cu linkuri interne, introduc doar codul scurt:

• 【jiawen ids=526,380,411】
• Dacă introduceți mai mult de 5 ID-uri de articol, vor fi afișate cel mult 5 articole
• Acest articol este folosit pentru a evita evadarea codurilor scurte []
• Când utilizați codul scurt, vă rugăm să schimbați [] în []

Efectul este următorul ▼

Cum a reușit contul public al lui Mimeng și de ce este atât de popular? Există motive în spatele lui

Cum a avut succes contul oficial al lui Mimi Meng? De ce este atât de popular? Există o forță motrice în spatele cauzei! De când Mi Meng a început să scrie conturi publice WeChat pe 2012 septembrie 9, ea a câștigat 15 de urmăritori în doar două luni, depășind instantaneu realizările multor oameni, ceea ce i-a făcut pe mulți oameni foarte curioși.

Cei patru profesori și ucenici ai lui Tang Seng au discutat despre contactele prietenilor WeChat, iar discursul lui Sun Wukong m-a uimit

Tang Sanzang și cei patru discipoli ai săi au discutat despre rețeaua de prieteni WeChat. Discursul lui Sun Wukong m-a iluminat brusc. Haha, nu mă așteptam ca discursul lui Sun Wukong să mă facă brusc iluminat...

Analiza caracteristicilor psihologice ale lecturii utilizatorilor în era new media: dacă stăpânești aceste 7, vei câștiga

Analiza caracteristicilor psihologice ale citirii utilizatorilor în era noua media: Dacă stăpânești aceste 7, vei câștiga bani Introducere Dacă dorim să reușim să rulăm un cont public WeChat, trebuie să studiem natura umană, să analizăm psihologia citirii utilizatorilor și să înțelegem comportamentul de citire al utilizatorilor.

Dacă nu utilizați codul scurt în editorul WordPress și doriți să îl apelați în altă parte, îl puteți apela cu următorul cod:

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

XNUMX. Adăugați un buton editor

Dacă trebuie să introduceți manual codul scurt de fiecare dată, este prea greoi, ce ar trebui să fac?

Puterea WordPress este că ne permite să simplificăm lucruri complexe ^_^

1) Adăugați butonul text al editorului

WordPress are în mod implicit un editor TinyMCE încorporat. Putem adăuga butoane de comandă rapidă la interfața de text a editorului TinyMCE.

pasul 3:Adăugați codul butonului de comandă rapidă

• Vă rugăm să adăugați codul direct în fișierul 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
}

注意 事项

Dacă ați adăugat alt cod pentru editor pentru a personaliza butoanele de comenzi rapide, doar<script type="text/javascript"> Mai jos, adăugați următorul cod ▼

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

Altfel va merge prost.

2) Adăugați butonul de vizualizare a editorului

Când edităm articole WordPress, interfața implicită este de obicei vizuală.

Deci, este mai bine să adăugați un buton și în editorul vizual.

• În timp ce această funcționalitate poate fi implementată în cod, este puțin complicată pentru mulți începători.
• Este deranjant pentru experți, deoarece este necesar să adăugați cod JS la temă, iar dacă schimbați tema, trebuie să o adăugați din nou, iar pașii sunt deosebit de greoi.

第 4 步 ：Instalați și activați pluginuri

• Chen WeiliangSunt recomandate pluginuri:Butoane personalizate ale Editorului vizual

După finalizarea instalării, sub bara de meniu din stânga, va apărea un butoane personalizate Editor vizual cu o pictogramă roată ▼

第 5 步 ：Faceți clic pe Adăugare nou

• Creați un buton personalizat, orice nume.
• De exemplu: adăugarea articolelor interne 

Trebuie doar să urmați imaginea de mai jos pentru a configura ▼

第 6 步 ： Opțiunea de conținut pentru buton

• Selectați Wrap Selection.

第 7 步 ： Înainte de a seta

• Completați codul scurt

pasul 8:Setări Afișare în Editor

• Puteți verifica butoanele de afișare ale Editorului vizual sau ale Editorului de text.
• Rețineți că, dacă Text Editor este bifat, puteți sări peste „Adăugați codul butonului de comandă rapidă” de mai sus, altfel se va repeta.

pasul 9:Buton Pictogramă Opțiuni

• În meniul derulant cu opțiuni, selectați pictograma Încadrată.

pasul 10:test

• Până la urmă, desigur, depinde de tine să testezi singur efectul ^_^
• Dacă pașii de mai sus sunt corecti, veți vedea butonul așa cum se arată mai jos în interfața vizuală a editorului ▼