लेख निर्देशिका
वर्डप्रेसवेबसाइट अंतर्गत लिंक्स ऑप्टिमाइझ कसे करावे?
लघुप्रतिमा लेख आणि संपादक बटणांसह शॉर्टकोड तयार करा
वेबसाइट अंतर्गत लिंक ऑप्टिमायझेशन, मध्येएसइओदुवे नेहमीच खूप महत्वाचे आहेत, आणि एक चांगली लिंक रचना एसइओसाठी खूप फायदेशीर आहे.
वर्तमान लेख इतर लेखांशी संबंधित असल्यास, आपोआप पृष्ठावर एक दुवा जोडा:
- शोध इंजिन स्पायडरद्वारे क्रॉलिंगची संख्या आणि खोली मोठ्या प्रमाणात वाढवेल,
- रेकॉर्डची संख्या वाढवण्यास मदत करणे,
- आणि अँकर मजकूर कीवर्डचे वजन.
काही जुने लेख अद्ययावत केले असल्यास, तुम्ही शोध इंजिन स्पायडरना नवीन लेखांमध्ये अंतर्गत लिंक जोडून जुन्या लेखांची सामग्री अद्यतने पुन्हा क्रॉल आणि अनुक्रमित करण्यासाठी देखील सूचना देऊ शकता.
- अंतर्गत लिंकिंगचा एक सामान्य प्रकार म्हणजे मजकूर दुवा, ज्याची रचना अँकर मजकूर आहे.
- परंतु वापरकर्त्याचा अनुभव वाढवण्यासाठी, आम्ही आतील पृष्ठावरील लेख दुवे अधिक अनुकूल करू शकतो.
जेव्हा तुम्ही वाचताचेन वेइलांगब्लॉगिंग करताना, तुम्हाला असे आढळू शकते की तुम्ही लेखाच्या सामग्रीचा सारांश असलेल्या लघुप्रतिमासह लेख कार्ड फॉर्म याप्रमाणे एम्बेड केला आहे, उदाहरणार्थ:
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】- तुम्ही 5 पेक्षा जास्त लेख आयडी टाकल्यास, जास्तीत जास्त फक्त 5 लेख प्रदर्शित केले जातील
- हा लेख शॉर्टकोड सुटू नये म्हणून वापरला आहे []
- शॉर्टकोड वापरताना, कृपया [] ते [] बदला
परिणाम खालीलप्रमाणे आहे ▼
तुम्ही वर्डप्रेस एडिटरमध्ये शॉर्टकोड वापरत नसल्यास आणि तो इतरत्र कॉल करू इच्छित असल्यास, तुम्ही खालील कोडसह कॉल करू शकता:
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) संपादक व्हिज्युअलायझेशन बटण जोडा
जेव्हा आम्ही वर्डप्रेस लेख संपादित करतो, तेव्हा डीफॉल्ट इंटरफेस सामान्यतः व्हिज्युअल असतो.
म्हणून, व्हिज्युअल एडिटरमध्ये देखील एक बटण जोडणे चांगले आहे.
- ही कार्यक्षमता कोडमध्ये लागू केली जाऊ शकते, परंतु अनेक नवशिक्यांसाठी ते थोडे क्लिष्ट आहे.
- तज्ञांसाठी हे त्रासदायक आहे, कारण थीममध्ये JS कोड जोडणे आवश्यक आहे, आणि जर तुम्ही थीम बदलली, तर तुम्हाला ती पुन्हा जोडावी लागेल आणि पायऱ्या विशेषतः अवजड आहेत.
4 步:प्लगइन स्थापित आणि सक्षम करा
- चेन वेइलांगप्लगइनची शिफारस केली जाते:व्हिज्युअल एडिटर सानुकूल बटणे
इन्स्टॉलेशन पूर्ण झाल्यानंतर, डाव्या मेनू बारखाली, गीअर आयकॉनसह व्हिज्युअल एडिटर कस्टम बटणे दिसतील ▼
5 步:नवीन जोडा क्लिक करा
- कोणतेही नाव, सानुकूल बटण तयार करा.
- उदाहरणार्थ: अंतर्गत लेख जोडणे
▼ सेट करण्यासाठी तुम्हाला फक्त खालील चित्राचे अनुसरण करावे लागेल
6 步: बटण सामग्री पर्याय
- रॅप सिलेक्शन निवडा.
7 步: सेट करण्यापूर्वी
- शॉर्टकोड भरा
8 ली पायरी:संपादक सेटिंग्जमध्ये प्रदर्शित करा
- तुम्ही व्हिज्युअल एडिटर किंवा टेक्स्ट एडिटर शो बटणे तपासू शकता.
- लक्षात ठेवा की जर मजकूर संपादक तपासला असेल, तर तुम्ही वरील "शॉर्टकट बटण कोड जोडा" वगळू शकता, अन्यथा ते पुनरावृत्ती होईल.
9 ली पायरी:बटण चिन्ह पर्याय
- ड्रॉप-डाउन पर्याय मेनूमध्ये, फ्रेम केलेले चिन्ह निवडा.
10 ली पायरी:चाचणी
- सरतेशेवटी, अर्थातच, परिणाम स्वतःच तपासणे तुमच्यावर अवलंबून आहे ^_^
- वरील पायऱ्या योग्य असल्यास, तुम्हाला संपादक व्हिज्युअल इंटरफेसमध्ये खाली दर्शविल्याप्रमाणे बटण दिसेल ▼
होप चेन वेइलांग ब्लॉग ( https://www.chenweiliang.com/ ) सामायिक केले "वर्डप्रेसमध्ये लेख कार्ड शैली कशी जोडावी? लेख कार्ड फॉर्ममध्ये शॉर्टकोड एम्बेड करा", जे तुमच्यासाठी उपयुक्त आहे.
या लेखाची लिंक सामायिक करण्यासाठी आपले स्वागत आहे:https://www.chenweiliang.com/cwl-638.html