워드프레스(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까지입니다.
- 1.jpg
- 2.jpg
- ... (등등)
- 20.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. 삽입된 기사 카드(단축코드) 형태의 단축코드 호출
기사 편집기의 "비주얼" 또는 "텍스트" 인터페이스에서 직접 단축 코드를 입력할 수 있습니다. 【jiawen ids =postID1,postID2 ...】 포맷 호출.
예를 들어 내부적으로 연결된 3개의 기사를 표시하려면 다음과 같이 단축 코드를 입력하면 됩니다.
【jiawen ids=526,380,411】- 기사 ID를 5개 이상 입력하면 최대 5개의 기사만 표시됩니다.
- 이 문서는 단축 코드가 이스케이프되는 것을 방지하는 데 사용됩니다 []
- 단축번호 사용시 []를 []로 변경해주세요.
▼ 효과는 다음과 같습니다
WordPress 편집기에서 단축 코드를 사용하지 않고 다른 곳에서 호출하려는 경우 다음 코드로 호출할 수 있습니다.
do_shortcode（'[neilian ids ids = postID1，postID2]'）
XNUMX. 편집기 버튼 추가
매번 숏코드를 수동으로 입력해야 하는 경우 너무 번거롭게 느껴지는데 어떻게 해야 하나요?
워드프레스의 장점은 복잡한 것을 단순화할 수 있다는 것입니다 ^_^
1) 편집기 텍스트 버튼 추가
워드프레스에는 기본적으로 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단계:플러그인 설치 및 활성화
- 천 웨이량플러그인을 권장합니다:비주얼 편집기 사용자 정의 버튼
설치가 완료되면 왼쪽 메뉴바 아래에 톱니바퀴 아이콘이 있는 Visual Editor Custom Buttons가 나타납니다 ▼
5단계:새로 추가 클릭
- 임의의 이름으로 사용자 정의 버튼을 만듭니다.
- 예: 내부 기사 추가
▼ 아래 사진에 따라 설정하시면 됩니다.
6단계: 버튼 콘텐츠 옵션
- 선택 줄 바꿈을 선택합니다.
7단계: 설정 전
- 숏코드 입력
8 단계:에디터에 표시 설정
- Visual Editor 또는 Text Editor 표시 버튼을 확인할 수 있습니다.
- 텍스트 편집기가 선택되어 있으면 위의 "바로 가기 버튼 코드 추가"를 건너뛸 수 있습니다. 그렇지 않으면 반복됩니다.
9 단계:버튼 아이콘 옵션
- 드롭다운 옵션 메뉴에서 프레임 아이콘을 선택합니다.
10 단계:测试
- 결국 효과는 본인이 직접 테스트 해보세요^^
- 위 단계가 정확하면 편집기 시각적 인터페이스에 아래와 같은 버튼이 표시됩니다 ▼
희망 첸 웨이량 블로그( https://www.chenweiliang.com/ ) "WordPress에 기사 카드 스타일을 추가하는 방법? 기사 카드 형식에 단축 코드 포함"을 공유하여 도움이 되었습니다.
이 기사의 링크를 공유하는 것을 환영합니다:https://www.chenweiliang.com/cwl-638.html