Anyè Atik
WordPressKi jan yo optimize lyen entèn sit entènèt?
Kreye Shortcodes ak atik miniatures ak bouton editè
Sit wèb optimize lyen entèn, nanSEOLyen yo te toujou trè enpòtan, ak yon estrikti lyen bon trè benefik nan SEO.
Si atik aktyèl la gen rapò ak lòt atik, otomatikman ajoute yon lyen nan paj la:
- pral ogmante anpil kantite ak pwofondè nan rale pa areye motè rechèch la,
- ede ogmante kantite dosye,
- Ak pwa nan mo kle tèks jete lank.
Si gen kèk atik ansyen yo mete ajou, ou ka tou enstwi areye motè rechèch yo re-rale ak endèks mizajou kontni yo nan atik yo ansyen lè w ajoute lyen entèn nan nouvo atik yo.
- Yon fòm komen nan lyen entèn se yon lyen tèks, ki gen estrikti se tèks jete lank .
- Men, yo nan lòd yo amelyore eksperyans itilizatè a, nou ka plis optimize lyen yo atik sou paj enteryè a.
lè ou liChen WeiliangLè w ap fè blog, ou ka souvan jwenn yon fòm kat atik entegre tankou sa a, ak yon ti miniature atik ki gen yon rezime kontni atik la, pa egzanp:
XNUMX. Ajoute yon shortcode style kat atik entegre
Etap 1:Ajoute kòd PHP
Ajoute kòd sa a nan fichye functions.php tèm WP ou a:
/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}Si icon hyperlink la pa parèt, ou bezwen ranplase pi wo aCSSNan sa a fa fa-link fa-fw, pou sui sui-link sui-fw
- Tanpri tcheke tèm WP ou a, èske gen yon katab /img/random/?
- (si non, tanpri kreye)
- Lè sa a, nan dosye a o aza, ajoute 20 imaj jpg.
Yo nonmen foto yo soti nan 1 a 20:
- 1.jpg
- 2.jpg
- ... (ak sou sa)
- 20.jpg
Etap 2:Ajoute kòd CSS
Ajoute kòd sa a nan dosye style.css tèm WP ou a:
/*加入内部文章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. Envoke kòd kout la nan fòm yon kat atik entegre (kod kout)
Ou ka antre nan shortcodes dirèkteman nan koòdone "Vizyèl" oswa "Tèks" nan editè atik la 【jiawen ids =postID1,postID2 ...】 fòma apèl.
Pou egzanp, si mwen vle montre 3 atik ki lye entèn, mwen jis antre shortcode la:
【jiawen ids=526,380,411】- Si ou antre plis pase 5 idantite atik, sèlman 5 atik ap parèt pi plis
- Atik sa a itilize pou evite shortcodes yo te chape []
- Lè w ap itilize shortcode a, tanpri chanje [] pou []
Efè a se jan sa a ▼
Si w pa itilize shortcode a nan editè WordPress la epi ou vle rele li yon lòt kote, ou ka rele li ak kòd sa a:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Ajoute yon bouton editè
Si ou bezwen antre manyèlman shortcode a chak fwa, li santi l twò ankonbran, kisa mwen ta dwe fè?
Pouvwa WordPress se ke li pèmèt nou senplifye bagay konplèks ^_^
1) Ajoute bouton tèks editè
WordPress gen yon editè TinyMCE entegre pa default.Nou ka ajoute bouton chemen kout nan koòdone tèks editè TinyMCE la.
etap 3:Ajoute kòd bouton chemen kout
- Tanpri ajoute kòd la dirèkteman nan fichye 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
}
注意 事项
Si ou te ajoute lòt kòd pou editè a pou personnaliser bouton chemen kout yo, jis<script type="text/javascript"> Anba a, ajoute kòd sa a ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
Sinon li pral mal.
2) Ajoute bouton vizyalizasyon editè
Lè nou modifye atik WordPress, koòdone default la anjeneral vizyèl.
Se konsa, li pi bon yo ajoute yon bouton nan editè vizyèl la tou.
- Pandan ke fonksyonalite sa a ka aplike nan kòd, li se yon ti jan konplike pou anpil newbies.
- Li se anbarasman pou ekspè yo, paske li nesesè ajoute kòd JS nan tèm nan, epi si ou chanje tèm nan, ou dwe ajoute li ankò, ak etap yo se patikilyèman ankonbran.
Etap 4:Enstale epi pèmèt grefon
- Chen WeiliangPlugins yo rekòmande:Vizyèl Editè Bouton Custom
Apre enstalasyon an fini, anba ba meni gòch la, yon bouton Custom Editè vizyèl ak yon ikòn Kovèti pou ap parèt ▼
Etap 5:Klike sou Ajoute Nouvo
- Kreye yon bouton koutim, nenpòt non.
- Pou egzanp: ajoute atik entèn yo
Ou jis bezwen swiv foto ki anba a pou mete kanpe ▼
Etap 6: Opsyon kontni bouton
- Chwazi Wrap Seleksyon.
Etap 7: Anvan mete
- Ranpli shortcode a
etap 8:Montre nan anviwònman Editè
- Ou ka tcheke bouton yo montre Editè vizyèl oswa Editè tèks.
- Remake byen ke si Editè Tèks yo tcheke, ou ka sote "Ajoute kòd bouton bouton rakoursi" pi wo a, otreman li pral repete.
etap 9:Opsyon Icône bouton
- Nan meni opsyon ki dewoule a, chwazi ikòn Ankadre la.
etap 10:Tès
- Nan fen a, nan kou, li nan jiska ou teste efè a tèt ou ^_^
- Si etap ki anwo yo kòrèk, ou pral wè bouton an jan yo montre anba a nan koòdone vizyèl editè a ▼
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) pataje "Ki jan yo ajoute style kat atik nan WordPress? Antre kòd kout nan fòm kat atik", ki se itil pou ou.
Byenvini pataje lyen atik sa a:https://www.chenweiliang.com/cwl-638.html