ไดเรกทอรีบทความ
WordPressจะเพิ่มประสิทธิภาพลิงค์ภายในเว็บไซต์ได้อย่างไร?
สร้างรหัสย่อด้วยบทความย่อและปุ่มตัวแก้ไข
การเพิ่มประสิทธิภาพลิงก์ภายในเว็บไซต์ inSEO (Search Engine Optimization)ลิงค์มีความสำคัญเสมอมา และโครงสร้างลิงค์ที่ดีก็มีประโยชน์อย่างมากต่อ SEO
หากบทความปัจจุบันเกี่ยวข้องกับบทความอื่น ให้เพิ่มลิงก์ไปยังหน้าโดยอัตโนมัติ:
- จะเพิ่มจำนวนและความลึกของการรวบรวมข้อมูลโดยสไปเดอร์ของเครื่องมือค้นหาอย่างมาก
- ช่วยเพิ่มจำนวนบันทึก
- และน้ำหนักของ anchor text คีย์เวิร์ด
หากบทความเก่าบางบทความได้รับการอัปเดต คุณยังสามารถสั่งให้สไปเดอร์ของเครื่องมือค้นหารวบรวมข้อมูลซ้ำและจัดทำดัชนีการอัปเดตเนื้อหาของบทความเก่าโดยเพิ่มลิงก์ภายในไปยังบทความใหม่
- รูปแบบทั่วไปของการลิงก์ภายในคือลิงก์ข้อความ ซึ่งมีโครงสร้างเป็น anchor text
- แต่เพื่อปรับปรุงประสบการณ์ของผู้ใช้ เราสามารถเพิ่มประสิทธิภาพลิงก์บทความในหน้าด้านในได้
เมื่อคุณอ่านเฉิน เว่ยเหลียงเมื่อเขียนบล็อก คุณมักจะพบว่าคุณฝังแบบฟอร์มการ์ดบทความในลักษณะนี้ โดยมีบทความขนาดย่อที่มีบทสรุปของเนื้อหาของบทความ เช่น
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/ หรือไม่
- (ถ้าไม่ใช่ โปรดสร้าง)
- จากนั้นในไฟล์สุ่ม ให้เพิ่มรูปภาพ jpg 20 รูป
รูปภาพมีชื่อตั้งแต่ 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 บทความเท่านั้น
- บทความนี้ใช้เพื่อหลีกเลี่ยงการหลีกเลี่ยงรหัสย่อ []
- เมื่อใช้รหัสสั้น โปรดเปลี่ยน [] เป็น []
เอฟเฟกต์มีดังนี้▼
หากคุณไม่ได้ใช้ชอร์ตโค้ดในตัวแก้ไข 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 อินเทอร์เฟซเริ่มต้นมักจะเป็นภาพ
ดังนั้นจึงเป็นการดีกว่าที่จะเพิ่มปุ่มในตัวแก้ไขภาพด้วย
- แม้ว่าฟังก์ชันนี้สามารถนำไปใช้ในโค้ดได้ แต่ก็ค่อนข้างซับซ้อนสำหรับมือใหม่หลายๆ คน
- เป็นเรื่องยากสำหรับผู้เชี่ยวชาญ เนื่องจากจำเป็นต้องเพิ่มโค้ด JS ให้กับธีม และหากคุณเปลี่ยนธีม คุณต้องเพิ่มใหม่อีกครั้ง และขั้นตอนจะยุ่งยากเป็นพิเศษ
ขั้นตอนที่ 4:ติดตั้งและเปิดใช้งานปลั๊กอิน
- เฉิน เว่ยเหลียงแนะนำให้ใช้ปลั๊กอิน:ปุ่มกำหนดเองของ Visual Editor
หลังจากการติดตั้งเสร็จสมบูรณ์ ใต้แถบเมนูด้านซ้าย ปุ่มกำหนดเองของ Visual Editor พร้อมไอคอนรูปเฟืองจะปรากฏขึ้น ▼
ขั้นตอนที่ 5:คลิกเพิ่มใหม่
- สร้างปุ่มที่กำหนดเอง ชื่อใดก็ได้
- ตัวอย่างเช่น การเพิ่มบทความภายใน
คุณเพียงแค่ต้องทำตามภาพด้านล่างเพื่อตั้งค่า ▼
ขั้นตอนที่ 6: ตัวเลือกเนื้อหาปุ่ม
- เลือกการเลือกห่อ
ขั้นตอนที่ 7: ก่อนตั้งค่า
- กรอกรหัสย่อ
ขั้นตอนที่ 8:แสดงในการตั้งค่าตัวแก้ไข
- คุณสามารถตรวจสอบปุ่มแสดง Visual Editor หรือ Text Editor
- โปรดทราบว่าหากเลือกตัวแก้ไขข้อความ คุณสามารถข้าม "เพิ่มโค้ดปุ่มทางลัด" ด้านบนได้ มิฉะนั้นจะถูกทำซ้ำ
ขั้นตอนที่ 9:ตัวเลือกไอคอนปุ่ม
- ในเมนูตัวเลือกแบบเลื่อนลง ให้เลือกไอคอนกรอบ
ขั้นตอนที่ 10:ทดสอบ
- สุดท้ายนี้แน่นอน อยู่ที่คุณจะทดสอบเอฟเฟกต์ด้วยตัวเอง ^_^
- หากขั้นตอนข้างต้นถูกต้อง คุณจะเห็นปุ่มดังที่แสดงด้านล่างในอินเทอร์เฟซแบบเห็นภาพของตัวแก้ไข ▼
หวัง Chen Weiliang บล็อก ( https://www.chenweiliang.com/ ) แชร์ "วิธีการเพิ่มรูปแบบการ์ดบทความใน WordPress ฝังรหัสย่อในรูปแบบการ์ดบทความ" ซึ่งเป็นประโยชน์กับคุณ
ยินดีต้อนรับสู่การแบ่งปันลิงค์ของบทความนี้:https://www.chenweiliang.com/cwl-638.html