Quomodo addere articulum card stilo in WordPress?

WordPressQuomodo website internas nexus optimize?

Create Shortcodes cum Thumbnail Articles & Editor Puga pyga

Website link interna optimization, inSEOVincula magna semper fuerunt, et bona compages nexus valde prodest SEO.

Si praesens articulus ad alios articulos refertur, automatice nexum paginae adde:

• multum augebit numerum et altitudinem reptantium per machinamenta aranearum;
• auxilium augere numerum monumentorum;
• et pondus ancoram textorum apparitorum.

Si vasa vetera aliqua renovata sunt, etiam aranearum machinam quaerere potes ut re-repere et indices contentorum novorum articulorum antiquorum, addendo nexus internos ad novos articulos.

• Communis nexus internae forma est nexus textus, cuius structura est textus anchora .
• Sed ut experientiam usoris augeam, ulteriores nexus articuli in pagina interiori optimize possumus.

cum legereChen WeiliangCum blogging, saepe invenies quod forma schedulae articuli infixa est sic, cum thumbnail articulum continens summarium contenti articuli, exempli gratia:

Quomodo applicare pro numero mobili Hong Kong?Hong Kong virtualis mobile phone numerus accipere SMS tesseram

eSender Hong Kong mobile phone numerum discount code: DM6888 Ubi possum emere Hongcongum numerum telephonicum mobile?Hong Kong vocantem card virtualis operator commendatae eSender Prope mobile phone numerus officium sub Boyuan Information Group est. Boyuan Information ramos habet in Guangzhou et Hong Kong, China...

XNUMX. addere embedded articulum card style shortcode

1Adde PHP codice

Sequentem codicem adde ad WP thematis functiones.php lima:

/**
* 加入内部文章缩略图 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 hyperlink icon non apparet, necesse est ut supraAbout UsHuius fa fa-link fa-fw, to sui sui-link sui-fw

• Quaeso reprehendo tuum WP thema, estne /img/random/ folder?
• (si non, quaeso creare)
• Deinde in lima temere, imagines 20 jpg adde.

Picturae nominantur ab 1 ad 20;

• 1.jpg
• 2.jpg
• ... (et sic porro)
• 20.jpg

2Adde CSS code

Sequentem codicem addere ad WP argumenti stilum.css fasciculi tui:

/*加入内部文章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. Invoca brevis codice in forma embedded articulum card (brevis code)

Potes shortcodes directe inire in "Visual" vel "Text" interfacies articuli editoris 【jiawen ids =postID1,postID2 ...】 forma vocantis.

Exempli gratia, si 3 articulos interne coniunctos exhibere volo, brevem modo intrabo:

• 【jiawen ids=526,380,411】
• Si plus quam 5 articulum IDs ingredieris, tantum 5 articuli ad summum monstrabuntur
• Articulus hic adhibetur ad vitandum shortcodes evasionis [ ]
• Cum shortcode utens, muta quaeso [] ad []

Effectus talis est ▼

Quam ob rem publicam Mimeng fecit succedere et cur ita populare? Sunt rationes post eam

Quomodo Mi Meng publica ratio felix facta est? Cur tam popularis? Est enim vis post rationem impellens! Cum Mimeng scribere coepisset WeChat rationem publicam die XV Septembris MMXII, XL2012 fans in tantum II mensibus lucrata est, quae statim multorum hominum gestas superavit et multos homines curiosos de ea fecit.

Quattuor magistri et apprenticii Tang Seng tractaverunt de contactibus amicorum WeChat, et oratio solis Wukong me quietum fecit.

Quattuor magistri et discipuli Tang Monachi disputaverunt WeChat amici et hospites et hospites? Haha, non exspectavi orationem Solem Wukong me obstupuisse...

Analysis notarum psychologicarum utentium lectionis in nova media aetate: si has 7 dominaris, mereberis.

Analysis lectionis psychologiae notarum utentium in nova media aetate: Si has 7 dominaris, pecuniam facies. Introductio: Si volumus esse felix sicut ratio officialis WeChat, studere debemus naturam humanam, analysis utentium lectio psychologia atque utentium mores legentes intellege.

Si shortcode non uteris in editore WordPress et illud alibi appellare vis, id cum sequenti codice appellare potes;

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

XNUMX. addere editorem button

Si manually debes intrare in shortcode omni tempore, nimis gravia sentit, quid agam?

Vis Verbi Press est quod sinit nos simpliciores res complexas ^_^

I) addere textum button

WordPress constructum-in TinyMCE editore per defaltam habet. Bullae brevissimae addere possumus textui interfaciei editoris TinyMCE.

I step:Addere brevis codice button

• Quaeso adde codicem directe in functionibus.php lima ▼

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

cautiones

Si alium codicem addideris pro editore ut bullarum breves customizes, iusta<script type="text/javascript"> Infra adde codicem sequentem ▼ .

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

Alioquin errabit.

II) addere Editor visualization button

Cum WordPress articulos recensimus, defectus interfaciei plerumque Visual est.

Ita melius est addere conjunctionem in editore visuali.

• Dum haec functiones in codice perfici potest, est aliquantulum perplexum multis newbies.
• Peritis molestum est, quod ad thema addendum est codice JS, et, mutato argumento, denuo addendum est, quod gravissimum sentit.

4Install ac enable plugins

• Chen WeiliangPlugins commendantur:Visual Editor Custom Buttons

Post institutionem integram sub vecte tabulae sinistrae, Visual Editor Custom Puga pyga cum icone calcea apparebit ▼

5Click Add New

• Morem crea puga, quodlibet nomen.
• Exempli gratia: articulis internis additis 

Vos iustus postulo ut infra sequi imaginem ▼ erigas

6 Button Content optionis

• Electio AMICTORIUM Select.

7 Ante occasum

• Imple in shortcode

I step:Display in Editor occasus

• Visual Editorum seu Textus Editorum bullarum ostendere potes.
• Nota quod si editor Textus deprimitur, "Addere brevem bullam Codicis" supra, aliter repetetur.

I step:Button Icon Options

• In menu optionum gutta-down, iconem fabricatum lego.

I step:test

• Ad extremum, sane, usque ad te experire effectum te ipsum ^_^
• Si gradus superiores recti sunt, videbis pyga ut infra in editore visuali interfaciei ▼ . ostensum est