Katalog artykułów
WordPressJak zoptymalizować linki wewnętrzne serwisu?
Twórz skróty za pomocą miniatur artykułów i przycisków edytora
Optymalizacja linków wewnętrznych witryny, inSEOLinki zawsze były bardzo ważne, a dobra struktura linków jest bardzo korzystna dla SEO.
Jeśli bieżący artykuł jest powiązany z innymi artykułami, automatycznie dodaj link do strony:
- znacznie zwiększy liczbę i głębokość crawlowania przez roboty wyszukiwarek,
- pomagają zwiększyć liczbę rekordów,
- I wagę słów kluczowych w tekście kotwicy.
Jeśli niektóre stare artykuły zostaną zaktualizowane, możesz również poinstruować roboty-pająki wyszukiwarek, aby ponownie przeszukały i zindeksowały aktualizacje treści starych artykułów, dodając wewnętrzne linki do nowych artykułów.
- Powszechną formą linkowania wewnętrznego jest link tekstowy, którego struktura to tekst zakotwiczenia .
- Aby jednak poprawić wrażenia użytkownika, możemy dodatkowo zoptymalizować linki do artykułów na wewnętrznej stronie.
kiedy czytaszChen WeiliangPodczas blogowania często możesz zauważyć, że formularz karty artykułu jest osadzony w ten sposób, z miniaturą artykułu zawierającą podsumowanie treści artykułu, na przykład:
XNUMX. Dodaj krótki kod w stylu osadzonej karty artykułu
1 步：Dodaj kod PHP
Dodaj następujący kod do pliku functions.php motywu 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 文件夹内的图片作缩略图
}
}
}
}Jeśli ikona hiperłącza nie pojawia się, należy ją wymienićCSStego fa fa-link fa-fw, do sui sui-link sui-fw
- Sprawdź swój motyw WP, czy istnieje folder /img/random/?
- (jeśli nie, utwórz)
- Następnie w losowym pliku dodaj 20 obrazów jpg.
Zdjęcia noszą nazwy od 1 do 20:
- 1.jpg
- 2.jpg
- ... (i tak dalej)
- 20.jpg
2 步：Dodaj kod CSS
Dodaj następujący kod do pliku style.css motywu 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. Wywołaj krótki kod w postaci wbudowanej karty towaru (krótki kod)
Skróty można wprowadzać bezpośrednio w interfejsie „Wizualnym” lub „Tekstowym” edytora artykułów 【jiawen ids =postID1,postID2 ...】 formatowanie rozmowy.
Na przykład, jeśli chcę wyświetlić 3 wewnętrznie połączone artykuły, po prostu wpisuję krótki kod:
【jiawen ids=526,380,411】- Jeśli wpiszesz więcej niż 5 identyfikatorów artykułów, wyświetli się najwyżej 5 artykułów
- Ten artykuł służy do unikania ucieczki skrótów []
- Używając skrótu, zmień [] na []
Efekt jest następujący ▼
Jeśli nie używasz skrótu w edytorze WordPress i chcesz wywołać go gdzie indziej, możesz wywołać go za pomocą następującego kodu:
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. Dodaj przycisk edytora
Jeśli za każdym razem musisz ręcznie wprowadzać krótki kod, wydaje się to zbyt kłopotliwe, co powinienem zrobić?
Siła WordPressa polega na tym, że pozwala nam uprościć złożone rzeczy ^_^
1) Dodaj przycisk tekstowy edytora
WordPress ma domyślnie wbudowany edytor TinyMCE, możemy dodać przyciski skrótów do interfejsu tekstowego edytora TinyMCE.
krok 3:Dodaj kod przycisku skrótu
- Proszę dodać kod bezpośrednio w pliku 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
}
注意 事项
Jeśli dodałeś inny kod do edytora, aby dostosować przyciski skrótów, po prostu<script type="text/javascript"> Poniżej dodaj następujący kod ▼
QTags.addButton( 'jw', '加入内部文章', '', '');
W przeciwnym razie pójdzie nie tak.
2) Dodaj przycisk wizualizacji edytora
Kiedy edytujemy artykuły WordPress, domyślnym interfejsem jest zwykle Visual.
Lepiej więc dodać przycisk również w edytorze wizualnym.
- Chociaż ta funkcjonalność może być zaimplementowana w kodzie, dla wielu początkujących jest nieco skomplikowana.
- Dla ekspertów jest to kłopotliwe, ponieważ konieczne jest dodanie kodu JS do motywu, a jeśli zmienisz motyw, musisz go dodać ponownie, a kroki są szczególnie uciążliwe.
4 步：Zainstaluj i włącz wtyczki
- Chen WeiliangZalecane są wtyczki:Przyciski niestandardowe edytora wizualnego
Po zakończeniu instalacji pod lewym paskiem menu pojawią się niestandardowe przyciski edytora wizualnego z ikoną koła zębatego ▼
5 步：Kliknij Dodaj nowy
- Utwórz niestandardowy przycisk o dowolnej nazwie.
- Na przykład: dodawanie artykułów wewnętrznych
Wystarczy postępować zgodnie z poniższym obrazkiem, aby skonfigurować ▼
6 步： Opcja zawartości przycisku
- Wybierz opcję Zawijaj zaznaczenie.
7 步： Przed ustawieniem
- Wpisz krótki kod
krok 8:Wyświetl w ustawieniach edytora
- Możesz sprawdzić przyciski pokazu Edytora wizualnego lub Edytora tekstu.
- Zwróć uwagę, że jeśli zaznaczona jest opcja Edytor tekstu, możesz pominąć powyższy „Dodaj kod przycisku skrótu”, w przeciwnym razie zostanie on powtórzony.
krok 9:Opcje ikony przycisku
- W rozwijanym menu opcji wybierz ikonę Oprawione.
krok 10:Testuj
- Na koniec oczywiście do Ciebie należy samodzielne przetestowanie efektu ^_^
- Jeśli powyższe kroki są prawidłowe, zobaczysz przycisk pokazany poniżej w interfejsie graficznym edytora ▼
Nadzieja Chen Weiliang Blog ( https://www.chenweiliang.com/ ) udostępniono „Jak dodać styl karty artykułu w WordPressie? Osadź krótki kod w formularzu karty artykułu”, co jest dla Ciebie pomocne.
Zapraszamy do udostępnienia linku do tego artykułu:https://www.chenweiliang.com/cwl-638.html