Како да додадете стил на картичка на статија во WordPress?

WordPressКако да ги оптимизирате внатрешните врски на веб-страницата?

Креирај кратенка на објава и копче за уредувач со сликичка

Оптимизација на внатрешна врска на веб-страница, воОптимизацијаВрските отсекогаш биле многу важни, а добрата структура на врски е многу корисна за оптимизацијата на пребарувачите.

Ако тековната статија е поврзана со други статии, активно додавајте врски до страницата:

• Во голема мера ќе го зголеми бројот и длабочината на пребарувачите на пајакот.
• Помага да се зголеми бројот на колекции,
• И тежината на клучните зборови за сидро текст.

Ако некои стари статии се ажурираат, можете исто така да им наложите на пајаците на пребарувачот повторно да ползат и да ја вклучат ажурираната содржина на старите статии со додавање внатрешни врски до новите статии.

• Вообичаена форма на внатрешно поврзување е текстуална врска, чија структура е сидро текст .
• Но, за да го подобриме корисничкото искуство, можеме дополнително да ги оптимизираме врските на написите на внатрешните страници.

кога читашЧен ВајлијангКога пишувате блог, честопати може да откриете дека вградувате форма на поштенска картичка како оваа, со минијатурна слика на објавата, која содржи резиме на содржината на објавата, на пример:

Како да аплицирате за мобилен број во Хонг Конг?Виртуелен број на мобилен телефон во Хонг Конг за да добиете СМС код за потврда

eSender Код за попуст на мобилен телефон во Хонг Конг: DM6888 Каде можам да купам број на мобилен телефон од Хонг Конг?Се препорачува виртуелен оператор за повикувачка картичка во Хонг Конг eSender Тоа е услуга за виртуелен мобилен број под Boyuan Information Group. Boyuan Information отвори филијали во Гуангжу и Хонг Конг, Кина,...

1. Додајте го краткиот код за да го вградите стилот на картичката на статијата

第 1 步:Додадете PHP код

Додадете го следниов код во датотеката functions.php на вашата тема WP:

/**
* 加入内部文章缩略图 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:

• 1.jpg
• 2.jpg
• … (и така натаму)
• 20.jpg

第 2 步:Додадете CSS код

Додајте го следниов код во датотеката style.css на вашата тема WP:

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

2. Повикајте го краткиот код (краток код) во форма на картичка со вградена статија

Можете да го внесете кратката шифра директно во интерфејсот „Визуелен“ или „Текст“ на уредувачот на написи. 【jiawen ids =postID1,postID2 ...】 форматирајте го повикот.

На пример, ако сакам да прикажам 3 внатрешно поврзани статии, директно го внесувам краткиот код:

• 【jiawen ids=526,380,411】
• Ако внесете повеќе од 5 ID на написи, ќе се прикажат само најмногу 5 статии.
• Оваа статија користи [] за да спречи бегство на краткиот код.
• Кога всушност го користите краткиот код, променете го [] во []

Ефектот е како што следува ▼

Како успеа јавниот профил на Мименг и зошто е толку популарен?Постојат причини зад тоа

Како стана успешна официјалната сметка на Мими Менг? Зошто е толку популарен? Има движечка сила зад каузата! Откако Ми Менг почна да пишува јавни сметки на WeChat на 2012 септември 9 година, таа доби 15 следбеници за само два месеци, веднаш надминувајќи ги достигнувањата на многу луѓе, што многу луѓе ги направи многу љубопитни.

Четворицата учители и чираци на Танг Сенг разговараа за контактите на пријателите на WeChat, а говорот на Сун Вуконг ме запрепасти

Танг Санзанг и неговите четворица ученици разговараа за мрежата на пријатели на WeChat. Хаха, не очекував дека говорот на Сун Вуконг наеднаш ќе ме просветли...

Анализа на психолошките карактеристики на читањето на корисниците во ерата на новите медиуми: ако ги совладате овие 7, ќе заработите

Анализа на психолошките карактеристики на читањето на корисниците во ерата на новите медиуми: Ако ги совладате овие 7, ќе заработите пари Вовед Ако сакаме да успееме во водење јавна сметка на WeChat, мораме да ја проучуваме човечката природа, да ја анализираме психологијата за читање на корисниците и да го разбереме однесувањето на корисникот за читање.

Ако не го користите краткиот код во уредникот на WordPress и сакате да го повикате на друго место, можете да го користите следниов код за да го повикате:

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

3. Копче за додавање уредник

Што треба да направам ако треба рачно да го внесувам краткиот код секој пат и ми е премногу проблематично?

Моќта на 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
}

мерки на претпазливост

Ако сте додале друг код за приспособеното копче за кратенка на уредникот, само додадете<script type="text/javascript"> Подолу, додадете го следниот код ▼

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

Во спротивно нешто ќе тргне наопаку.

2) Копче за визуелизација за додавање уредник

Кога уредуваме статии на WordPress, стандардниот интерфејс обично е Visual.

Значи, подобро е да додадете копче и во визуелниот уредник.

• Иако оваа функција може да се имплементира во код, таа е малку комплицирана за многу почетници.
• Тоа е проблематично за експертите затоа што треба да додадат JS-код на темата и мораат повторно да го додадат ако ја сменат темата. Чекорите се многу незгодни.

第 4 步:Инсталирајте и овозможете додатоци

• Чен ВајлијангСе препорачува да се користат приклучоци:Прилагодени копчиња за визуелен уредник

Откако ќе заврши инсталацијата, приспособени копчиња за визуелен уредувач со икона за менувачот ќе се појават под левата лента со мени ▼

第 5 步:Кликнете Додај ново

• Создадете прилагодено копче со кое било име.
• На пример: додадете внатрешни статии 

Треба само да ги следите поставките подолу ▼

第 6 步: Копче Опции за содржина

• Изберете Избор за завиткување.

第 7 步: Пред поставките

• Пополнете го краткиот код

Чекор 8:Прикажи во поставките на уредникот

• Можете да го проверите копчето за прикажување на визуелен уредник или уредувач на текст.
• Имајте предвид дека ако е штиклирано Уредувач на текст, можете да го прескокнете „кодот на копчето за додавање кратенка“ погоре, инаку ќе се појавува постојано.

Чекор 9:Опции за иконата на копчињата

• Во опаѓачкото мени со опции, изберете ја иконата Врамена.

Чекор 10:Тест

• На крајот, секако зависи од вас сами да го тестирате ефектот^_^
• Ако горенаведените чекори се точни, ќе го видите копчето како што е прикажано подолу во визуелниот интерфејс на уредувачот ▼