Ahoana ny fomba hanampiana karazana karatra lahatsoratra amin'ny WordPress? Ampidiro ny kaody fohy amin'ny endrika karatra lahatsoratra

WordPressAhoana ny fomba hanatsarana ny rohy anatiny amin'ny tranokala?

Mamorona kaody fohy miaraka amin'ny lahatsoratra thumbnail & bokotra tonian-dahatsoratra

Optimization rohy anatiny tranonkala, inSEONy rohy dia tena zava-dehibe foana, ary ny rafitra rohy tsara dia tena mahasoa amin'ny SEO.

Raha mifandray amin'ny lahatsoratra hafa ny lahatsoratra amin'izao fotoana izao, ampio rohy mankany amin'ny pejy ho azy:

  • dia hampitombo be ny isa sy ny halalin'ny mandady ataon'ny hala amin'ny milina fikarohana,
  • manampy amin'ny fampitomboana ny isan'ny firaketana,
  • Ary ny lanjan'ny teny fototra lahatsoratra vatofantsika.

Raha misy lahatsoratra taloha nohavaozina, azonao atao koa ny mampianatra ny hala amin'ny motera fikarohana mba hamerenana sy hanondroana ny fanavaozana votoaty amin'ny lahatsoratra taloha amin'ny fampidirana rohy anatiny amin'ireo lahatsoratra vaovao.

  • Ny endrika mahazatra amin'ny fampifandraisana anatiny dia rohy lahatsoratra, izay ny rafitra dia lahatsoratra vatofantsika .
  • Fa mba hanatsarana ny traikefan'ny mpampiasa dia afaka manatsara bebe kokoa ny rohy lahatsoratra amin'ny pejy anatiny izahay.

rehefa mamaky ianaoChen WeiliangRehefa mitoraka bilaogy ianao dia mety ho hitanao matetika fa mampiditra endrika karatra lahatsoratra tahaka izao ianao, miaraka amin'ny lahatsoratra thumbnail izay misy famintinana ny votoatin'ilay lahatsoratra, ohatra:

XNUMX. Manampia kaody fohy amin'ny endrika karatra misy lahatsoratra

Dingana 1:Ampio kaody PHP

Ampio ity kaody manaraka ity amin'ny rakitra functions.php an'ny lohahevitra WP anao:

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

Raha tsy miseho ny kisary hyperlink dia mila soloinao ilay etsy ambonyCSSAmin'izany fa fa-link fa-fw, ny sui sui-link sui-fw

  • Azafady, jereo ny lohahevitry ny WP-nao, misy /img/random/ folder ve?
  • (raha tsy izany dia mamorona)
  • Avy eo amin'ny rakitra kisendrasendra, ampio sary jpg 20.

Ny sary dia nomena anarana avy amin'ny 1 ka hatramin'ny 20:

  • 1.jpg
  • 2.jpg
  • ... (sy ny sisa)
  • 20.jpg

Dingana 2:Ampio kaody CSS

Ampio amin'ny rakitra style.css an'ny lohahevitra WP ity kaody manaraka ity:

/*加入内部文章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. Antsoy ny kaody fohy amin'ny endrika karatra lahatsoratra mipetaka (kaody fohy)

Azonao atao ny mampiditra kaody fohy mivantana ao amin'ny interface "Visual" na "Text" an'ny mpamoaka lahatsoratra 【jiawen ids =postID1,postID2 ...】 endrika antso.

Ohatra, raha te-hampiseho lahatsoratra 3 mifandray anatiny aho dia ampidiro fotsiny ny shortcode:

  • 【jiawen ids=526,380,411】
  • Raha mampiditra ID lahatsoratra mihoatra ny 5 ianao dia lahatsoratra 5 ihany no haseho raha be indrindra
  • Ity lahatsoratra ity dia ampiasaina mba hialana amin'ny kaody fohy []
  • Rehefa mampiasa ny kaody fohy dia ovay [] ho [] azafady

Toy izao ny vokany ▼

Raha tsy mampiasa ny shortcode ao amin'ny WordPress editor ianao ary te hiantso azy any an-kafa dia azonao atao ny miantso azy amin'ny code manaraka:

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

XNUMX. Manampia bokotra tonian-dahatsoratra

Raha mila miditra amin'ny tananao ny kaody fohy isaky ny mandeha ianao, dia manahirana loatra izany, inona no tokony hataoko?

Ny herin'ny WordPress dia mamela antsika hanatsotra zavatra sarotra ^_^

1) Add tonian-dahatsoratra bokotra

WordPress dia manana tonian-dahatsoratra TinyMCE naorina amin'ny alàlan'ny default. Afaka manampy bokotra hitsin-dàlana amin'ny interface texte TinyMCE izahay.

dingana 3:Ampio kaody bokotra hitsin-dàlana

  • Ampidiro mivantana ao amin'ny rakitra functions.php ▼ ny code
//加入内部文章,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
}

Ahoana ny fomba hanatsarana ny rohy anatiny amin'ny tranokala WordPress? Mamorona kaody fohy sy bokotra editor miaraka amin'ny thumbnail

fepetra

Raha nanampy kaody hafa ho an'ny mpamoaka lahatsoratra ianao mba hampifanarahana ny bokotra hitsin-dàlana, fotsiny<script type="text/javascript"> Ampidiro eto ambany ity kaody manaraka ity ▼

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

Raha tsy izany dia tsy mety izany.

2) Ampidiro ny bokotra visualization editor

Rehefa manitsy lahatsoratra WordPress isika dia matetika Visual ny interface tsara.

Noho izany, tsara kokoa ny manisy bokotra ao amin'ny tonian-dahatsoratra hita maso ihany koa.

  • Na dia azo ampiharina amin'ny kaody aza ity fiasa ity, dia somary sarotra ho an'ny vao manomboka izany.
  • Sahirana ho an'ny manam-pahaizana izany, satria mila ampiana ny kaody JS amin'ny lohahevitra, ary raha ovaina ny lohahevitra dia mila ampiana indray, izay mahatsapa fa sarotra be.

Dingana 4:Ampidiro ary avelao ny plugins

  • Chen WeiliangPlugins no soso-kevitra:Bokotra Custom Editor Visual

Rehefa vita ny fametrahana, eo ambanin'ny bara menu havia dia hiseho ny bokotra Custom Editor Visual miaraka amin'ny kisary ▼

WordPress menu zoro ambany havia Visual Editor Custom Buttons plugin No. 6

Dingana 5:Tsindrio Add New

  • Mamorona bokotra manokana, anarana rehetra.
  • Ohatra: manampy lahatsoratra anatiny 

Mila manaraka ny sary etsy ambany fotsiny ianao mba hananganana ▼

Visual Editor Custom Buttons Plugin: Ampio ao anatin'ny lahatsoratra #7

Dingana 6: Button Content safidy

  • Select Wrap Selection.

Dingana 7: Alohan'ny fametrahana

  • Fenoy ny kaody fohy

dingana 8:Asehoy ao amin'ny firafitry ny Editor

  • Azonao atao ny manamarina ny bokotra fampisehoana Visual Editor na Text Editor.
  • Mariho fa raha voazaha ny Text Editor dia azonao atao ny mitsambikina ny "Ampio ny kaody bokotra hitsin-dàlana" etsy ambony, raha tsy izany dia haverina izany.

dingana 9:Button Icon Options

  • Ao amin'ny menio midina midina, safidio ny kisary Framed.

dingana 10:Test

  • Amin'ny farany, mazava ho azy fa anjaranao ny mitsapa ny vokany ^_^
  • Raha marina ireo dingana etsy ambony ireo dia ho hitanao ny bokotra toy ny aseho eto ambany ao amin'ny interface visual editor ▼ 

WordPress Visual Editor Framed Icon Button Sheet 8

Comments

Tsy havoaka ny adiresy mailakao. Ampiasaina ny saha ilaina * Label

Horonana Top