Ako pridať štýl karty článku vo WordPress? Vložte krátky kód do formulára karty článku

WordPressAko optimalizovať interné odkazy na webe?

Vytvárajte krátke kódy pomocou miniatúr článkov a tlačidiel editora

Optimalizácia interných odkazov webu, vSEOOdkazy boli vždy veľmi dôležité a dobrá štruktúra odkazov je pre SEO veľmi prospešná.

Ak aktuálny článok súvisí s inými článkami, automaticky pridajte odkaz na stránku:

• výrazne zvýši počet a hĺbku prehľadávania pavúkmi vyhľadávacích nástrojov,
• pomôcť zvýšiť počet záznamov,
• A váha kľúčových slov kotviaceho textu.

Ak sú niektoré staré články aktualizované, môžete tiež prikázať vyhľadávačom, aby znova prehľadávali a indexovali aktualizácie obsahu starých článkov pridaním interných odkazov na nové články.

• Bežnou formou interného prepojenia je textový odkaz, ktorého štruktúra je kotviaci text .
• Aby sme však zlepšili používateľskú skúsenosť, môžeme ďalej optimalizovať odkazy na články na vnútornej stránke.

keď čítašChen WeiliangPri blogovaní môžete často zistiť, že vložíte formulár karty s článkom, ako je tento, s miniatúrou článku, ktorý obsahuje zhrnutie obsahu článku, napríklad:

Ako požiadať o mobilné číslo v Hong Kongu?Číslo virtuálneho mobilného telefónu v Hong Kongu na prijatie overovacieho kódu SMS

eSender Zľavový kód čísla mobilného telefónu v Hong Kongu: DM6888 Kde si môžem kúpiť číslo mobilného telefónu v Hong Kongu?Odporúča sa virtuálny operátor hongkonskej volacej karty eSender Je to služba virtuálneho mobilného čísla v rámci informačnej skupiny Boyuan. Boyuan Information zriadila pobočky v Guangzhou a Hong Kongu v Číne,...

XNUMX. Pridajte vložený skrátený kód štýlu karty s článkom

第 1 步:Pridajte PHP kód

Pridajte nasledujúci kód do súboru functions.php vašej témy 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 文件夹内的图片作缩略图
}
}
}
}

Ak sa ikona hypertextového prepojenia nezobrazí, musíte nahradiť vyššie uvedenéCSSZ toho fa fa-link fa-fw, do sui sui-link sui-fw

• Skontrolujte svoju tému WP, existuje priečinok /img/random/?
• (ak nie, vytvorte)
• Potom do náhodného súboru pridajte 20 obrázkov jpg.

Obrázky sú pomenované od 1 do 20:

• 1.jpg
• 2.jpg
• ... (a tak ďalej)
• 20.jpg

第 2 步:Pridajte kód CSS

Pridajte nasledujúci kód do súboru style.css vašej témy 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. Vyvolajte krátky kód vo forme vloženej karty s článkom (krátky kód)

Skrátené kódy môžete zadávať priamo vo „vizuálnom“ alebo „textovom“ rozhraní editora článkov 【jiawen ids =postID1,postID2 ...】 formátovať hovor.

Napríklad, ak chcem zobraziť 3 interne prepojené články, stačí zadať krátky kód:

• 【jiawen ids=526,380,411】
• Ak zadáte viac ako 5 ID článkov, zobrazí sa maximálne 5 článkov
• Tento článok sa používa, aby sa predišlo úniku skratiek []
• Pri použití skráteného kódu zmeňte [] na []

Efekt je nasledovný ▼

Ako Mimengov verejný účet uspel a prečo je taký populárny? Sú za tým dôvody

Ako sa stal oficiálny účet Mimi Meng úspešný? Prečo je taký populárny? Za príčinou je hnacia sila! Odkedy začala Mi Meng písať verejné účty WeChat 2012. septembra 9, za dva mesiace získala 15 2 sledovateľov, čím okamžite prekonala úspechy mnohých ľudí, čo mnohých ľudí veľmi zaujímalo.

Štyria učitelia a učni Tang Seng diskutovali o kontaktoch priateľov z WeChatu a prejav Sun Wukonga ma upokojil.

Tang Sanzang a jeho štyria žiaci diskutovali o sieti priateľov z WeChatu. Úvod: Všetci sme čítali Cestu na západ, videli ste, ako Tang Sanzang, Sun Wukong, Zhu Bajie a Sha Wujing diskutovali o sieti priateľov z WeChat. Haha, nečakal som, že prejav Sun Wukong ma zrazu osvieti...

Analýza psychologických charakteristík čítania používateľov v ére nových médií: ak zvládnete týchto 7, zarobíte

Analýza psychologických charakteristík čítania používateľov v ére nových médií: Ak zvládnete týchto 7, zarobíte peniaze Úvod Ak chceme uspieť vo vedení verejného účtu WeChat, musíme študovať ľudskú povahu, analyzovať psychológiu čítania používateľov a pochopiť správanie používateľov pri čítaní.

Ak nepoužívate krátky kód v editore WordPress a chcete ho zavolať inde, môžete ho zavolať pomocou nasledujúceho kódu:

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

XNUMX. Pridajte tlačidlo editora

Ak potrebujete zakaždým manuálne zadať krátky kód, zdá sa vám to príliš ťažkopádne, čo mám robiť?

Sila WordPressu je v tom, že nám umožňuje zjednodušiť zložité veci ^_^

1) Tlačidlo Pridať text editora

WordPress má štandardne zabudovaný editor TinyMCE.Do textového rozhrania editora TinyMCE môžeme pridať tlačidlá skratiek.

krok 3:Pridať kód tlačidla skratky

• Pridajte kód priamo do súboru 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
}

注意 事项

Ak ste do editora pridali ďalší kód na prispôsobenie tlačidiel skratiek, stačí<script type="text/javascript"> Nižšie pridajte nasledujúci kód ▼

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

Inak sa to pokazí.

2) Pridať tlačidlo vizualizácie editora

Keď upravujeme články WordPress, predvolené rozhranie je zvyčajne vizuálne.

Takže je lepšie pridať tlačidlo aj vo vizuálnom editore.

• Aj keď táto funkcia môže byť implementovaná v kóde, pre mnohých nováčikov je to trochu komplikované.
• Pre odborníkov je to problematické, pretože do témy je potrebné pridať kód JS a ak tému zmeníte, musíte ju pridať znova a kroky sú obzvlášť ťažkopádne.

第 4 步:Nainštalujte a povoľte doplnky

• Chen WeiliangPluginy sa odporúčajú:Vlastné tlačidlá vizuálneho editora

Po dokončení inštalácie sa pod ľavým panelom ponuky zobrazí Vlastné tlačidlá vizuálneho editora s ikonou ozubeného kolieska ▼

第 5 步:Kliknite na Pridať nový

• Vytvorte si vlastné tlačidlo s ľubovoľným názvom.
• Napríklad: pridávanie interných článkov 

Na nastavenie ▼ stačí postupovať podľa obrázka nižšie

第 6 步: Možnosť Obsah tlačidla

• Vyberte položku Wrap Selection.

第 7 步: Pred nastavením

• Vyplňte skrátený kód

krok 8:Zobraziť v nastaveniach editora

• Môžete skontrolovať tlačidlá zobrazenia Visual Editor alebo Text Editor.
• Upozorňujeme, že ak je začiarknuté políčko Textový editor, môžete preskočiť vyššie uvedený "Pridať kód tlačidla skratky", inak sa zopakuje.

krok 9:Možnosti ikony tlačidla

• V rozbaľovacej ponuke možností vyberte ikonu S rámom.

krok 10:skúška

• Nakoniec je samozrejme na vás, aby ste si efekt sami vyskúšali ^_^
• Ak sú vyššie uvedené kroky správne, vo vizuálnom rozhraní editora ▼ uvidíte tlačidlo zobrazené nižšie