WordPressке макала картасынын стилин кантип кошсо болот? Макала картасынын формасына кыска кодду кыстарыңыз

WordPressВебсайттын ички шилтемелерин кантип оптималдаштырса болот?

Эскиз макалалары жана Редактор баскычтары менен кыска коддорду түзүңүз

Вебсайттын ички шилтемесин оптималдаштыруу, жылыSEOШилтемелер ар дайым абдан маанилүү болгон жана жакшы шилтеме түзүмү SEO үчүн абдан пайдалуу.

Учурдагы макала башка макалаларга байланыштуу болсо, автоматтык түрдө баракка шилтемени кошуңуз:

  • издөө системасынын жөргөмүштөрүнүн санын жана тереңдигин бир топ жогорулатат,
  • жазуулардын санын көбөйтүүгө жардам берет,
  • Жана анкердик тексттин ачкыч сөздөрүнүн салмагы.

Эгер кээ бир эски макалалар жаңыртылган болсо, сиз издөө системасынын жөргөмүштөрүнө жаңы макалаларга ички шилтемелерди кошуу менен эски макалалардын мазмуну жаңыртууларын кайра жөрмөлөп жана индекстөө үчүн көрсөтмө берсеңиз болот.

  • Ички шилтемелердин кеңири таралган түрү бул тексттик шилтеме, анын түзүлүшү казык текст .
  • Бирок колдонуучу тажрыйбасын жогорулатуу үчүн, биз ички беттеги макала шилтемелерин андан ары оптималдаштыра алабыз.

сен окугандаЧен ВейлянБлогдошуу учурунда, сиз макаланын мазмунунун кыскача мазмунун камтыган эскиз макала менен ушуга окшогон макала картасынын формасын кыстарганыңызды байкай аласыз, мисалы:

XNUMX. Кыскартылган макала картасы стилинин кыска кодун кошуңуз

1-кадам:PHP кодун кошуу

WP темаңыздын 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 文件夹内的图片作缩略图
}
}
}
}

Эгерде гипершилтеменин сөлөкөтү көрүнбөсө, жогорудагыны алмаштыруу керекCSSбул fa fa-link fa-fw, үчүн sui sui-link sui-fw

  • Сураныч, WP темаңызды текшериңиз, /img/random/ папкасы барбы?
  • (эгер болбосо, түзүңүз)
  • Андан кийин кокустук файлга 20 jpg сүрөт кошуңуз.

Сүрөттөр 1ден 20га чейин аталат:

  • xnumx.jpg
  • xnumx.jpg
  • ... (жана башка)
  • xnumx.jpg

2-кадам:CSS кодун кошуу

WP темаңыздын 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. Кыска кодду камтылган макала картасы түрүндө чакырыңыз (кыска код)

Сиз кыска коддорду түздөн-түз макала редакторунун "Visual" же "Текст" интерфейсине киргизсеңиз болот 【jiawen ids =postID1,postID2 ...】 формат чалуу.

Мисалы, мен 3 ички шилтемеленген макалаларды көрсөткүм келсе, мен жөн гана кыска кодду киргизем:

  • 【jiawen ids=526,380,411】
  • Эгер сиз 5тен ашык макала ID киргизсеңиз, эң көп дегенде 5 макала гана көрсөтүлөт
  • Бул макала кыска коддордон качуу үчүн колдонулат []
  • Кыска кодду колдонууда [] кодун [] деп өзгөртүңүз

Эффект төмөнкүдөй ▼

Эгер сиз WordPress редакторунда кыска кодду колдонбосоңуз жана аны башка жерге чакыргыңыз келсе, аны төмөнкү код менен чакырсаңыз болот:

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

XNUMX. Редактор баскычын кошуңуз

Кыска кодду ар бир жолу кол менен киргизүү керек болсо, бул өтө түйшүктүү сезилет, эмне кылышым керек?

WordPressтин күчү бул бизге татаал нерселерди жөнөкөйлөтүүгө мүмкүндүк берет ^_^

1) редактордун текст баскычын кошуу

WordPressте демейки боюнча орнотулган TinyMCE редактору бар. TinyMCE редакторунун текст интерфейсине жарлык баскычтарын кошо алабыз.

3 кадам:Жарлык баскычынын кодун кошуу

  • Сураныч, кодду түз 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
}

WordPress веб-сайтынын ички шилтемелерин кантип оптималдаштырса болот? Эскиз менен посттун кыска кодун жана редактор баскычын түзүңүз

Коопсуздук чаралары

Жарлык баскычтарын ыңгайлаштыруу үчүн редакторго башка кодду кошсоңуз, жөн гана<script type="text/javascript"> Төмөндө төмөнкү кодду кошуңуз ▼

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

Болбосо туура эмес болуп калат.

2) редактордун визуализация баскычын кошуу

Биз WordPress макалаларын түзөткөндө демейки интерфейс адатта Visual болуп саналат.

Демек, визуалдык редакторго да баскычты кошконуңуз жакшы.

  • Бул функцияны коддо ишке ашырууга болот, бирок көптөгөн жаңы келгендер үчүн бул бир аз татаал.
  • Бул эксперттер үчүн түйшүктүү, анткени темага JS кодун кошуу керек, ал эми тема өзгөртүлсө, аны кайра кошуу керек, бул абдан түйшүктүү сезилет.

4-кадам:Орнотуу жана плагиндерди иштетүү

  • Чен ВейлянПлагиндер сунушталат:Визуалдык редактордун Ыңгайлаштырылган баскычтары

Орнотуу аяктагандан кийин, сол меню тилкесинде тиштүү сөлөкөтү бар Visual Editor Custom Buttons пайда болот ▼

WordPress төмөнкү сол бурчтагы меню Visual Editor Custom Buttons плагини №6

5-кадам:Жаңы кошуу чыкылдатыңыз

  • Ыңгайлаштырылган баскычты, каалаган аталышты түзүңүз.
  • Мисалы: ички макалаларды кошуу 

▼ орнотуу үчүн төмөнкү сүрөттү ээрчишиңиз керек

Visual Editor Custom Buttons Plugin: №7 берененин ичине кошуу

6-кадам: Баскыч Мазмун опциясы

  • Тандоону тандоо.

7-кадам: Орнотуудан мурун

  • Кыска кодду толтуруңуз

8 кадам:Редактордун жөндөөлөрүндө көрсөтүү

  • Сиз Visual Editor же Text Editor көрсөтүү баскычтарын текшере аласыз.
  • Текст редактору белгиленген болсо, жогорудагы "Кыска жол баскычынын кодун кошууну" өткөрүп жиберсеңиз болот, антпесе ал кайталанат.

9 кадам:Баскыч сөлөкөтүнүн параметрлери

  • Ашылма параметрлер менюсунда Framed сөлөкөтүн тандаңыз.

10 кадам:текшерүү

  • Акырында, албетте, эффектти өзүңүз сынап көрүү сиздин колуңузда ^_^
  • Эгерде жогорудагы кадамдар туура болсо, сиз редактордун визуалдык интерфейсинде төмөндө көрсөтүлгөндөй баскычты көрөсүз ▼ 

WordPress визуалдык редакторунун рамкалуу сөлөкөтү баскыч баракчасы 8

Hope Chen Weiliang блогу ( https://www.chenweiliang.com/ ) "WordPress'ге макала картасынын стилин кантип кошуу керек? Кыска кодду макала картасынын формасына киргизүү", бул сизге пайдалуу.

Бул макаланын шилтемесин бөлүшүүгө кош келиңиз:https://www.chenweiliang.com/cwl-638.html

Көбүрөөк жашыруун трюктарды ачуу үчүн🔑, биздин Telegram каналыбызга кошулуңуз!

Бөлүшүп, жакса лайк! Сиздин бөлүшүүлөрүңүз жана лайктарыңыз биздин туруктуу мотивациябыз!

 

发表 评论

Сиздин электрондук почта дарегиңиз жарыяланбайт. Милдеттүү талаалар колдонулат * 标注

Жылдыруу үчүн Top