Yuav ua li cas ntxiv daim npav style hauv WordPress? Embed shortcode hauv daim ntawv daim ntawv

WordPressYuav ua li cas optimize lub vev xaib sab hauv txuas?

Tsim Shortcodes nrog Thumbnail Cov Ntawv & Cov Khawm Editor

Lub vev xaib sab hauv txuas optimization, hauvSEOKev sib txuas ib txwm tseem ceeb heev, thiab cov qauv txuas zoo yog qhov zoo rau SEO.

Yog tias tsab xov xwm tam sim no cuam tshuam nrog lwm cov ntawv, cia li ntxiv qhov txuas mus rau nplooj ntawv:

• yuav ua rau kom tus lej thiab qhov tob ntawm nkag los ntawm kev tshawb nrhiav cav kab laug sab,
• pab kom cov ntaub ntawv ntau ntxiv,
• Thiab qhov hnyav ntawm thauj tog rau nkoj cov lus tseem ceeb.

Yog tias qee cov ntawv qub tau hloov kho, koj tuaj yeem qhia cov kab laug sab tshawb nrhiav kom rov nkag tau thiab ntsuas cov ntsiab lus hloov tshiab ntawm cov ntawv qub los ntawm kev ntxiv cov kev txuas sab hauv rau cov ntawv tshiab.

• Ib hom kev sib txuas sab hauv yog cov ntawv txuas, uas nws cov qauv yog cov ntawv txuas nrog.
• Tab sis txhawm rau txhim kho cov neeg siv kev paub dhau los, peb tuaj yeem txhim kho cov kab lus txuas ntxiv ntawm nplooj ntawv sab hauv.

thaum koj nyeemChen WeiliangThaum blogging, feem ntau koj yuav pom tau tias daim ntawv daim npav yog kos zoo li no, nrog cov ntawv thumbnail uas muaj cov ntsiab lus ntawm cov ntsiab lus, piv txwv li:

Yuav ua li cas thov tus lej xov tooj ntawm Hong Kong?Hong Kong virtual xov tooj ntawm tes kom tau txais SMS pov thawj code

eSender Hong Kong tus xov tooj ntawm tes luv nqi code: DM6888 Kuv tuaj yeem yuav tus lej xov tooj Hong Kong qhov twg?Hong Kong hu daim npav virtual tus neeg teb xov tooj pom zoo eSender Nws yog ib tug virtual xov tooj kev pab cuam nyob rau hauv Boyuan Information Group. Boyuan Cov Ntaub Ntawv tau teeb tsa ceg hauv Guangzhou thiab Hong Kong, Tuam Tshoj, ...

XNUMX. Ntxiv ib tsab xov xwm embedded daim card style shortcode

Kauj Ruam 1:Ntxiv PHP code

Ntxiv cov cai hauv qab no rau koj lub ntsiab lus WP cov ntaub ntawv functions.php:

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

Yog hais tias lub hyperlink icon tsis tshwm sim, koj yuav tsum tau hloov cov saum toj noCSSNtawm no fa fa-link fa-fwRau sui sui-link sui-fw

• Thov xyuas koj lub ntsiab lus WP, puas muaj /img/random/ folder?
• (yog tias tsis yog, thov tsim)
• Tom qab ntawd hauv cov ntaub ntawv random, ntxiv 20 jpg duab.

Cov duab muaj npe los ntawm 1 txog 20:

• 1.jpg
• 2.jpg
• ... (thiab lwm yam)
• 20.jpg

Kauj Ruam 2:Ntxiv CSS code

Ntxiv cov cai hauv qab no rau koj lub ntsiab lus WP cov ntaub ntawv style.css:

/*加入内部文章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. Ncua tus lej luv luv hauv daim ntawv ntawm daim npav embedded (short code)

Koj tuaj yeem nkag mus rau shortcodes ncaj qha rau hauv "Visual" lossis "Text" interface ntawm tsab xov xwm editor 【jiawen ids =postID1,postID2 ...】 format hu.

Piv txwv li, yog tias kuv xav tso saib 3 cov ntawv txuas nrog sab hauv, kuv tsuas yog nkag mus rau qhov shortcode:

• 【jiawen ids=526,380,411】
• Yog tias koj nkag mus ntau dua 5 kab lus ID, tsuas yog 5 kab lus yuav raug tso tawm ntau tshaj
• Kab lus no yog siv los tiv thaiv shortcodes raug dim []
• Thaum siv shortcode, thov hloov [] rau []

Cov nyhuv yog raws li nram no ▼

Mimeng tus account pej xeem ua tau zoo li cas thiab vim li cas thiaj li nrov?

Mimi Meng tus nom account ua tiav li cas? Vim li cas nws thiaj li nrov? Muaj kev tsav tsheb tom qab qhov laj thawj! Txij li thaum Mi Meng pib sau WeChat pej xeem cov nyiaj thaum lub Cuaj Hlis 2012, 9, nws tau txais 15 tus neeg raws li hauv ob lub hlis xwb, tam sim ntawd dhau ntau tus neeg ua tiav, uas ua rau ntau tus neeg xav paub heev.

Plaub tus kws qhia ntawv thiab cov neeg kawm tiav ntawm Tang Seng tau tham txog kev sib cuag ntawm WeChat cov phooj ywg, thiab Sun Wukong cov lus tau ua rau kuv zoo siab.

Tang Sanzang thiab nws plaub tug thwjtim sib tham txog lub network ntawm WeChat cov phooj ywg Sun Wukong cov lus ua rau kuv tau pom tam sim ntawd Taw Qhia: Peb txhua tus tau nyeem Journey to the West Koj puas tau pom Tang Sanzang, Sun Wukong, Zhu Bajie thiab Sha Wujing tham txog lub network ntawm WeChat phooj ywg? Haha, kuv tsis xav tias Sun Wukong cov lus yuav ua rau kuv pom tau sai heev...

Kev tshuaj xyuas ntawm cov yam ntxwv ntawm kev puas siab puas ntsws ntawm cov neeg siv kev nyeem ntawv hauv lub sijhawm xov xwm tshiab: yog tias koj paub cov 7 no, koj yuav khwv tau

Kev txheeb xyuas cov yam ntxwv ntawm kev puas siab puas ntsws ntawm cov neeg siv kev nyeem ntawv hauv lub sijhawm xov xwm tshiab: Yog tias koj paub cov 7 no, koj yuav tau txais nyiaj Introduction Yog tias peb xav ua tiav hauv kev khiav WeChat pej xeem tus account, peb yuav tsum kawm tib neeg kev xav, txheeb xyuas cov neeg siv kev nyeem ntawv lub siab, thiab nkag siab cov neeg siv kev nyeem ntawv nkaus xwb.

Yog tias koj tsis siv shortcode hauv WordPress editor thiab xav hu rau lwm qhov, koj tuaj yeem hu nws nrog cov lej hauv qab no:

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

XNUMX. Ntxiv lub khawm editor

Yog tias koj xav tau manually nkag mus rau qhov shortcode txhua zaus, nws xav tias nyuaj heev, kuv yuav ua li cas?

Lub hwj chim ntawm WordPress yog tias nws tso cai rau peb kom yooj yim cov khoom nyuaj ^_^

1) Ntxiv editor ntawv khawm

WordPress muaj ib tug built-in TinyMCE editor los ntawm lub neej ntawd.

Kauj ruam 3:Ntxiv shortcut khawm code

• Thov ntxiv cov cai ncaj qha rau hauv cov ntaub ntawv 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
}

Ceev faj

Yog tias koj tau ntxiv lwm cov cai rau tus editor los kho cov nyees khawm shortcut, tsuas yog<script type="text/javascript"> Hauv qab no, ntxiv cov lej hauv qab no ▼

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

Txwv tsis pub nws yuav mus tsis ncaj ncees lawm.

2) Ntxiv editor visualization khawm

Thaum peb hloov kho cov ntawv WordPress, lub neej ntawd interface feem ntau yog Visual.

Yog li, nws yog qhov zoo dua los ntxiv ib lub pob hauv cov duab editor ib yam nkaus.

• Thaum qhov kev ua haujlwm no tuaj yeem siv tau hauv cov lej, nws yog qhov nyuaj me ntsis rau ntau tus neeg tshiab.
• Nws yog qhov teeb meem rau cov kws tshaj lij, vim tias JS code yuav tsum tau ntxiv rau lub ntsiab lus, thiab yog tias lub ntsiab lus hloov pauv, nws yuav tsum tau muab ntxiv dua, uas xav tias nyuaj heev.

Kauj Ruam 4:Nruab thiab pab kom plugins

• Chen WeiliangPlugins raug pom zoo:Visual Editor Custom Buttons

Tom qab kev teeb tsa tiav lawm, nyob rau hauv kab ntawv qhia zaub mov sab laug, Visual Editor Custom Buttons nrog lub iav icon yuav tshwm sim ▼

Kauj Ruam 5:Nyem Ntxiv Tshiab

• Tsim ib lub pob kev cai, txhua lub npe.
• Piv txwv li: ntxiv cov khoom sab hauv 

Koj tsuas yog yuav tsum ua raws li daim duab hauv qab no txhawm rau teeb tsa ▼

Kauj Ruam 6: Khawm Cov ntsiab lus xaiv

• Xaiv Wrap Xaiv.

Kauj Ruam 7: Ua ntej teeb tsa

• Sau cov shortcode

Kauj ruam 8:Tso rau hauv Editor nqis

• Koj tuaj yeem tshawb xyuas Visual Editor lossis Text Editor qhia cov nyees khawm.
• Nco ntsoov tias yog tias Text Editor raug kuaj xyuas, koj tuaj yeem hla qhov "Add shortcut button code" saum toj no, txwv tsis pub nws yuav rov ua dua.

Kauj ruam 9:Khawm Icon Options

• Hauv cov ntawv qhia zaub mov nco-down, xaiv lub Framed icon.

Kauj ruam 10:Kuaj

• Thaum kawg, ntawm chav kawm, nws yog nyob ntawm koj mus sim cov nyhuv koj tus kheej ^_^
• Yog tias cov kauj ruam saum toj no yog lawm, koj yuav pom lub pob raws li qhia hauv qab no hauv tus editor visual interface ▼