Cumu aghjunghje u stilu di carta d'articulu in WordPress? Incrustate shortcode in forma di carta d'articulu

WordPressCumu ottimisà i ligami interni di u situ web?

Crea Shortcodes cù Articuli in Miniatura è Pulsanti Editore

Ottimisazione di u ligame internu di u situ web, inSEOI ligami sò sempre stati assai impurtanti, è una bona struttura di ligame hè assai benefica per SEO.

Se l'articulu attuale hè in relazione cù altri articuli, aghjunghje automaticamente un ligame à a pagina:

  • aumenterà assai u numeru è a prufundità di crawling da i spiders di i mutori di ricerca,
  • aiuta à aumentà u numeru di records,
  • È u pesu di e parolle chjave di testu di ancora.

Se certi vechji articuli sò aghjurnati, pudete ancu urdinà à i spiders di u mutore di ricerca per rinvià è indexà l'aghjurnamenti di cuntenutu di i vechji articuli aghjunghjendu ligami interni à i novi articuli.

  • Una forma cumuna di ligame internu hè un ligame di testu, chì a so struttura hè testu di ancora .
  • Ma per rinfurzà l'esperienza di l'utilizatori, pudemu ottimisà ancu i ligami di l'articuli nantu à a pagina interna.

quandu leghjeChen WeiliangQuandu u blogging, pudete truvà spessu chì incrustate una forma di carta d'articulu cum'è questu, cù un articulu in miniatura chì cuntene un riassuntu di u cuntenutu di l'articulu, per esempiu:

XNUMX. Aghjunghjite un shortcode di stile di carta d'articulu incrustatu

Passu 1:Aghjunghjite u codice PHP

Aghjunghjite u codice seguente à u schedariu functions.php di u vostru tema 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 文件夹内的图片作缩略图
}
}
}
}

Se l'icona di l'hyperlink ùn appare micca, avete bisognu di rimpiazzà u sopraCSSquestu fa fa-link fa-fw, à sui sui-link sui-fw

  • Per piacè verificate u vostru tema WP, ci hè un cartulare /img/random/?
  • (se no, per piacè crea)
  • Allora in u schedariu aleatoriu, aghjunghje 20 images jpg.

I ritratti sò chjamati da 1 à 20:

  • 1.jpg
  • 2.jpg
  • ... (eccetera)
  • 20.jpg

Passu 2:Aghjunghjite u codice CSS

Aghjunghjite u codice seguente à u schedariu style.css di u vostru tema 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. Invoke un short code (shortcode) in forma di una carta d'articulu incrustata

Pudete entre in shortcodes direttamente in l'interfaccia "Visual" o "Text" di l'editore di l'articulu 【jiawen ids =postID1,postID2 ...】 forma di chjama.

Per esempiu, se vogliu vede 3 articuli ligati internamente, inseriu u shortcode direttamente:

  • 【jiawen ids=526,380,411】
  • Se inserite più di 5 ID di l'articuli, solu 5 articuli seranu visualizati à u massimu
  • Questu articulu hè adupratu per evità di scappà di shortcodes []
  • Quandu utilizate u shortcode, cambiate [] à []

L'effettu hè u seguente ▼

Se ùn avete micca aduprà u shortcode in l'editore di WordPress è vulete chjamà in altrò, pudete chjamà cù u seguente codice:

do_shortcode('[neilian ids ids = postID1,postID2]')

XNUMX. Aggiungi un buttone editore

Sè avete bisognu di inserisce manualmente u shortcode ogni volta, si senti troppu ingombrante, chì deve fà?

U putere di WordPress hè chì ci permette di simplificà e cose cumplessu ^_^

1) Aggiungi u buttone di testu di l'editore

WordPress hà un editore TinyMCE integratu per automaticamente. Pudemu aghjunghje i buttuni di shortcut à l'interfaccia di testu di l'editor TinyMCE.

passu 3:Aghjunghjite u codice di u buttone di scelta rapida

  • Per piacè aghjunghje u codice direttamente in u schedariu 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
}

Cumu ottimisimu i ligami interni di u situ web di WordPress? Crea i shortcodes di post è i buttoni di l'editore cù miniature

Precauzioni

Se avete aghjustatu altru codice per l'editore per persunalizà i buttoni di scurciatoia, solu<script type="text/javascript"> Sottu, aghjunghje u seguente codice ▼

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

Altrimenti andrà male.

2) Aggiungi u buttone di visualizazione di l'editore

Quandu editemu articuli WordPress, l'interfaccia predeterminata hè generalmente Visual.

Dunque, hè megliu aghjunghje un buttone in l'editore visuale.

  • Mentre sta funziunalità pò esse implementata in codice, hè un pocu complicatu per parechji novi.
  • Hè prublemu per l'esperti, perchè hè necessariu aghjunghje codice JS à u tema, è se cambiate u tema, avete da aghjunghje di novu, è i passi sò particularmente ingombranti.

Passu 4:Installa è attivà i plugins

  • Chen WeiliangI plugins sò cunsigliati:Editor visuale Pulsanti persunalizati

Dopu chì a stallazione hè cumpleta, sottu a barra di menu di manca, apparirà un Visual Editor Custom Buttons cù una icona di ingranaggi ▼

WordPress menu di u cantonu in basso à manca Visual Editor Custom Buttons plugin N ° 6

Passu 5:Cliccate Add New

  • Crea un buttone persunalizatu, qualsiasi nome.
  • Per esempiu: aghjunghje articuli internu 

Basta à seguità a stampa sottu per cunfigurà ▼

Visual Editor Custom Buttons Plugin: Add Inside Articulu #7

Passu 6: Opzione di cuntenutu di u buttone

  • Selezziunate Wrap Selection.

Passu 7: Prima di mette

  • Riempite u shortcode

passu 8:Mostra in i paràmetri di l'Editor

  • Pudete cuntrollà l'Editor Visuale o l'Editor di Testu mostra i buttoni.
  • Nota chì, se l'Editor di testu hè verificatu, pudete saltà u "Aggiungi u codice di buttone di scorciatoia" sopra, altrimenti serà ripetutu.

passu 9:Opzioni di l'icona di u buttone

  • In u menù di opzioni a tendina, selezziunate l'icona Framed.

passu 10:Prova

  • In fine, di sicuru, tocca à voi di pruvà l'effettu voi stessu ^_^
  • Se i passi sopra sò curretti, vi vede u buttone cum'è mostratu quì sottu in l'interfaccia visuale di l'editore ▼ 

Foglia di buttone di icona incorniciata di WordPress Visual Editor 8

发表 评论

U vostru indirizzu email ùn serà micca publicatu. I campi richiesti sò aduprati * Etichetta

Libru di Top