Как добавить стиль карточки статьи в WordPress?Встроить шорткод в форму карточки статьи

WordPressКак оптимизировать внутренние ссылки сайта?

Создавайте шорткоды с миниатюрами статей и кнопками редактора

Оптимизация внутренних ссылок сайта, вSEOСсылки всегда были очень важны, и хорошая структура ссылок очень полезна для SEO.

Если текущая статья связана с другими статьями, автоматически добавить ссылку на страницу:

• значительно увеличит количество и глубину сканирования поисковыми роботами,
• помочь увеличить количество записей,
• И вес анкорных текстовых ключевых слов.

Если некоторые старые статьи обновлены, вы также можете указать роботам поисковых систем повторно сканировать и индексировать обновления содержания старых статей, добавляя внутренние ссылки на новые статьи.

• Распространенной формой внутренних ссылок является текстовая ссылка, структура которой представляет собой анкорный текст .
• Но чтобы улучшить взаимодействие с пользователем, мы можем дополнительно оптимизировать ссылки на статьи на внутренней странице.

когда ты читаешьЧен ВэйлянПри ведении блога вы часто можете обнаружить, что форма карточки статьи встроена вот так, с миниатюрой статьи, содержащей краткое содержание статьи, например:

Как подать заявку на мобильный номер Гонконга?Виртуальный номер мобильного телефона в Гонконге для получения 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 статей.
• Эта статья используется, чтобы избежать экранирования шорткодов []
• При использовании шорткода измените [] на []

Эффект следующий ▼

Как добился успеха публичный аккаунт Mimeng и почему он так популярен?

Как официальный аккаунт Мими Мэн стал успешным? Почему он так популярен? За этим стоит движущая сила! С тех пор как 2012 сентября 9 года Ми Мэн начала вести публичные аккаунты WeChat, всего за два месяца у нее появилось 15 2 подписчиков, что мгновенно превзошло достижения многих людей, что вызвало у многих любопытство.

Четверо учителей и учеников Тан Сенга обсуждали контакты друзей WeChat, и речь Сунь Укуна ошеломила меня.

Тан Саньцзан и его четыре ученика обсуждали сеть друзей WeChat. Речь Сунь Укуна внезапно просветила меня. Введение: Мы все читали «Путешествие на Запад». Вы видели, как Тан Саньцзан, Сунь Укун, Чжу Бацзе и Ша Уцзин обсуждали сеть друзей WeChat? Ха-ха, я не ожидал, что речь Сунь Укуна внезапно сделает меня просветленным...

Анализ психологических особенностей чтения пользователей в эпоху новых медиа: освоив эти 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:Параметры значка кнопки

• В раскрывающемся меню параметров выберите значок «В рамке».

Шаг 10:测试

• В конце концов, конечно, вы сами можете проверить эффект ^_^
• Если вышеуказанные шаги выполнены правильно, вы увидите кнопку, как показано ниже, в визуальном интерфейсе редактора ▼