Artikkelikorttityylin lisääminen WordPressiin? Upota lyhytkoodi artikkelikorttimuotoon

WordPressKuinka optimoida verkkosivuston sisäiset linkit?

Luo lyhytkoodeja pikkukuvaartikkeleilla ja muokkauspainikkeilla

Verkkosivuston sisäinen linkkien optimointi, sisäänSEOLinkit ovat aina olleet erittäin tärkeitä, ja hyvä linkkirakenne on erittäin hyödyllinen hakukoneoptimoijalle.

Jos nykyinen artikkeli liittyy muihin artikkeleihin, lisää automaattisesti linkki sivulle:

• lisää huomattavasti hakukoneiden indeksoinnin määrää ja syvyyttä,
• auttaa lisäämään tietueiden määrää,
• Ja ankkuritekstiavainsanojen paino.

Jos joitain vanhoja artikkeleita päivitetään, voit myös ohjeistaa hakukoneiden robotteja indeksoimaan vanhojen artikkelien sisältöpäivitykset uudelleen lisäämällä sisäisiä linkkejä uusiin artikkeleihin.

• Yleinen sisäisen linkityksen muoto on tekstilinkki, jonka rakenne on ankkuriteksti .
• Mutta parantaaksemme käyttökokemusta voimme edelleen optimoida sisäsivun artikkelilinkkejä.

kun luetChen WeiliangBlogia kirjoittaessasi saatat usein huomata, että artikkelikorttilomake on upotettu tällä tavalla, ja pikkukuvaartikkeli sisältää yhteenvedon artikkelin sisällöstä, esimerkiksi:

Kuinka hakea Hongkongin matkapuhelinnumeroa?Hongkongin virtuaalinen matkapuhelinnumero SMS-vahvistuskoodin vastaanottamista varten

eSender Hongkongin matkapuhelinnumeron alennuskoodi: DM6888 Mistä voin ostaa Hongkongin matkapuhelinnumeron?Hongkongin käyntikortin virtuaalinen operaattori suositellaan eSender Se on virtuaalinen matkapuhelinnumeropalvelu Boyuan Information Groupin alaisuudessa. Boyuan Information on perustanut sivuliikkeet Guangzhouhun ja Hongkongiin, Kiinaan,...

XNUMX. Lisää upotettu artikkelikorttityylinen lyhytkoodi

Vaihe 1:Lisää PHP-koodi

Lisää seuraava koodi WP-teeman functions.php-tiedostoon:

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

Jos hyperlinkkikuvake ei tule näkyviin, sinun on korvattava yllä olevaCSSTästä fa fa-link fa-fw, kohteeseen sui sui-link sui-fw

• Tarkista WP-teemasi, onko /img/random/-kansiota?
• (jos ei, luo)
• Lisää sitten satunnaiseen tiedostoon 20 jpg-kuvaa.

Kuvat on nimetty 1-20:

• 1.jpg
• 2.jpg
• ... (ja niin edelleen)
• 20.jpg

Vaihe 2:Lisää CSS-koodi

Lisää seuraava koodi WP-teemasi style.css-tiedostoon:

/*加入内部文章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. Kutsu lyhyt koodi (lyhytkoodi) upotetun artikkelikortin muodossa

Voit kirjoittaa lyhytkoodeja suoraan artikkelieditorin "Visuaaliseen" tai "Teksti"-käyttöliittymään 【jiawen ids =postID1,postID2 ...】 muotoinen puhelu.

Jos esimerkiksi haluan näyttää 3 sisäisesti linkitettyä artikkelia, kirjoitan vain lyhytkoodin:

• 【jiawen ids=526,380,411】
• Jos annat enemmän kuin 5 artikkelitunnusta, vain 5 artikkelia näytetään
• Tätä artikkelia käytetään välttämään lyhytkoodeja []
• Kun käytät lyhytkoodia, vaihda [] muotoon []

Vaikutus on seuraava ▼

Miten Mimengin julkinen tili onnistui ja miksi se on niin suosittu? Sen taustalla on syitä

Miten Mimi Mengin virallinen tili menestyi? Miksi se on niin suosittu? Asian takana on liikkeellepaneva voima! Sen jälkeen kun Mi Meng aloitti WeChatin julkisten tilien kirjoittamisen 2012. syyskuuta 9, hän sai 15 2 seuraajaa vain kahdessa kuukaudessa, mikä ylitti välittömästi monien saavutukset, mikä sai monet ihmiset hyvin uteliaiksi.

Tang Sengin neljä opettajaa ja oppipoikaa keskustelivat WeChat-ystävien kontakteista, ja Sun Wukongin puhe sai minut tuntemaan oloni helpoksi.

Tang Sanzang ja hänen neljä opetuslapsiaan keskustelivat WeChatin ystävien verkostosta. WeChat ystävät? Haha, en odottanut, että Sun Wukongin puhe saisi minut yhtäkkiä valaistumaan...

Analyysi käyttäjien lukemisen psykologisista ominaisuuksista uuden median aikakaudella: jos hallitset nämä 7, ansaitset

Uuden median aikakauden käyttäjien lukemisen psykologisten ominaisuuksien analyysi: Jos hallitset nämä 7, ansaitset rahaa Johdanto: Jos haluamme menestyä WeChatin julkisen tilin ylläpitämisessä, meidän on tutkittava ihmisluontoa, analysoitava käyttäjien lukupsykologiaa, ja ymmärtää käyttäjien lukukäyttäytymistä vain tekemällä näin parantaaksemme...

Jos et käytä lyhytkoodia WordPress-editorissa ja haluat kutsua sitä muualle, voit kutsua sitä seuraavalla koodilla:

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

XNUMX. Lisää muokkauspainike

Jos sinun on syötettävä lyhytkoodi manuaalisesti joka kerta, se tuntuu liian hankalalta, mitä minun pitäisi tehdä?

WordPressin voima on siinä, että sen avulla voimme yksinkertaistaa monimutkaisia ​​asioita ^_^

1) Lisää editorin teksti -painike

WordPressissä on oletuksena sisäänrakennettu TinyMCE-editori.Voimme lisätä pikanäppäimiä TinyMCE-editorin tekstikäyttöliittymään.

vaihe 3:Lisää pikanäppäinkoodi

• Lisää koodi suoraan functions.php-tiedostoon ▼

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

注意 事项

Jos olet lisännyt editoriin muuta koodia pikanäppäinten mukauttamiseksi, vain<script type="text/javascript"> Lisää alle seuraava koodi ▼

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

Muuten se menee pieleen.

2) Lisää editorin visualisointipainike

Kun muokkaamme WordPress-artikkeleita, oletuskäyttöliittymä on yleensä Visual.

Joten on parempi lisätä painike myös visuaaliseen editoriin.

• Vaikka tämä toiminto voidaan toteuttaa koodissa, se on hieman monimutkainen monille aloittelijoille.
• Asiantuntijoille se on hankalaa, koska teemaan on lisättävä JS-koodi, ja jos vaihdat teemaa, sinun on lisättävä se uudelleen, ja vaiheet ovat erityisen hankalia.

Vaihe 4:Asenna ja ota laajennukset käyttöön

• Chen WeiliangLisäosia suositellaan:Visuaalisen editorin mukautetut painikkeet

Kun asennus on valmis, vasemman valikkopalkin alle ilmestyy Visual Editorin mukautetut painikkeet, joissa on rataskuvake ▼

Vaihe 5:Napsauta Lisää uusi

• Luo mukautettu painike, millä tahansa nimellä.
• Esimerkiksi: sisäisten artikkelien lisääminen 

Sinun tarvitsee vain seurata alla olevaa kuvaa määrittääksesi ▼

Vaihe 6: Painikkeen sisältö -vaihtoehto

• Valitse Wrap Selection.

Vaihe 7: Ennen asettamista

• Täytä lyhytkoodi

vaihe 8:Näyttö Editorin asetuksissa

• Voit tarkistaa visuaalisen editorin tai tekstieditorin näyttöpainikkeet.
• Huomaa, että jos Tekstieditori on valittuna, voit ohittaa yllä olevan "Lisää pikakuvakekoodi" -kohdan, muuten se toistetaan.

vaihe 9:Painikekuvakkeen asetukset

• Valitse avattavasta asetusvalikosta Kehystetty-kuvake.

vaihe 10:testi

• Loppujen lopuksi sinun on tietysti testattava vaikutus itse ^_^
• Jos yllä olevat vaiheet ovat oikein, näet alla näkyvän painikkeen editorin visuaalisessa käyttöliittymässä ▼