Как да добавите стил на карта на статия в WordPress? Вградете кратък код във формата на карта на статия

WordPressКак да оптимизираме вътрешните връзки на уебсайта?

Създавайте кратки кодове с миниатюрни статии и бутони за редактиране

Оптимизация на вътрешни връзки на уебсайтове, вSEO РангВръзките винаги са били много важни и добрата структура на връзките е много полезна за SEO.

Ако текущата статия е свързана с други статии, автоматично добавете връзка към страницата:

• ще увеличи значително броя и дълбочината на обхождане от паяците на търсачките,
• помощ за увеличаване на броя на записите,
• И тежестта на ключовите думи за закотвен текст.

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

• Често срещана форма на вътрешно свързване е текстова връзка, чиято структура е anchor text .
• Но за да подобрим потребителското изживяване, можем допълнително да оптимизираме връзките към статиите на вътрешната страница.

когато четешЧен УейлиангКогато правите блог, често може да откриете, че вграждате формуляр на карта със статия като този с миниатюрна статия, която съдържа резюме на съдържанието на статията, например:

Как да кандидатствам за мобилен номер в Хонконг?Виртуален мобилен телефонен номер в Хонконг за получаване на SMS код за потвърждение

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

XNUMX. Добавете вграден кратък код в стил на карта на статия

Стъпка 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;}}

XNUMX. Извикайте краткия код под формата на вградена карта със статия (кратък код)

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

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

• 【jiawen ids=526,380,411】
• Ако въведете повече от 5 идентификатора на статии, ще бъдат показани най-много само 5 статии
• Тази статия се използва, за да се избегне екранирането на кратки кодове []
• Когато използвате краткия код, моля, променете [] на []

Ефектът е следният ▼

Как публичният акаунт на Mi Meng успя и защо е толкова популярен? Има причини за това

Как публичният акаунт на Mi Meng стана успешен? Защо е толкова популярен? Има движеща сила зад причината! Откакто Mimeng започна да пише официален акаунт в WeChat на 2012 септември 9 г., тя спечели 15 2 фенове само за 40 месеца, което незабавно надмина постиженията на много хора и накара много хора да се заинтересуват от нея...

Четиримата учители и чираци на Tang Seng обсъдиха контактите на приятели в WeChat и речта на Sun Wukong ме накара да се почувствам спокоен

Четирима учители и ученици на Tang Monk обсъдиха приятелите и връзките на Sun Wukong. Всички виждали ли сте Tang Sanzang, Zhu Bajie и Sha Wujing? и връзки? Хаха, не очаквах, че речта на Sun Wukong ме изуми...

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

Анализ на характеристиките на психологията на четене на потребителите в новата медийна ера: Ако овладеете тези 7, ще правите пари. Въведение: Ако искаме да бъдем успешни като официален акаунт в WeChat, трябва да изучаваме човешката природа, да анализираме четенето на потребителите. психология и разбиране на поведението на потребителите при четене Само като правим това, Само по този начин можем да подобрим това, което правим...

Ако не използвате краткия код в редактора на 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
}

注意 事项

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

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

В противен случай ще се обърка.

2) Добавете бутон за визуализация на редактора

Когато редактираме статии в WordPress, интерфейсът по подразбиране обикновено е Visual.

Така че е по-добре да добавите бутон и във визуалния редактор.

• Въпреки че тази функционалност може да бъде внедрена в код, тя е малко сложна за много начинаещи.
• Това е обезпокоително за експертите, защото JS кодът трябва да бъде добавен към темата и ако темата бъде променена, тя трябва да бъде добавена отново, което се чувства много тромаво.

Стъпка 4:Инсталирайте и активирайте добавки

• Чен УейлиангПрепоръчват се плъгини:Персонализирани бутони на визуалния редактор

След като инсталацията приключи, под лявата лента с менюта ще се появят потребителски бутони на визуален редактор с икона на зъбно колело ▼

Стъпка 5:Щракнете върху Добавяне на нов

• Създайте персонализиран бутон с произволно име.
• Например: добавяне на вътрешни статии 

Просто трябва да следвате снимката по-долу, за да настроите ▼

Стъпка 6: Опция за съдържание на бутона

• Изберете Обвиване на селекцията.

Стъпка 7: Преди настройка

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

етап 8:Показване в настройките на редактора

• Можете да проверите бутоните за показване на визуален редактор или текстов редактор.
• Имайте предвид, че ако текстовият редактор е отметнат, можете да пропуснете „Добавяне на код на бутон за бърз достъп“ по-горе, в противен случай ще се повтори.

етап 9:Опции за икона на бутон

• В падащото меню с опции изберете иконата Framed.

етап 10:тест

• Накрая, разбира се, от вас зависи сами да проверите ефекта ^_^
• Ако горните стъпки са правилни, ще видите бутона, както е показано по-долу във визуалния интерфейс на редактора ▼