כיצד להוסיף סגנון כרטיס מאמר בוורדפרס? הטמעת קוד קצר בצורת כרטיס מאמר

וורדפרסכיצד לבצע אופטימיזציה של קישורים פנימיים לאתר?

צור קודים קצרים עם מאמרים ממוזערים ולחצני עורך

אופטימיזציה של קישורים פנימיים באתר, בקידום אתריםקישורים תמיד היו חשובים מאוד, ומבנה קישורים טוב מועיל מאוד לקידום אתרים.

אם המאמר הנוכחי קשור למאמרים אחרים, הוסף אוטומטית קישור לדף:

• יגדיל מאוד את מספר ועומק הזחילה על ידי עכבישים של מנועי החיפוש,
• לעזור להגדיל את מספר השיאים,
• והמשקל של מילות מפתח של טקסט עוגן.

אם כמה מאמרים ישנים מעודכנים, אתה יכול גם להורות לעכבישים למנועי חיפוש לסרוק מחדש ולהוסיף לאינדקס את עדכוני התוכן של המאמרים הישנים על ידי הוספת קישורים פנימיים למאמרים החדשים.

• צורה נפוצה של קישור פנימי היא קישור טקסט, שהמבנה שלו הוא טקסט עוגן .
• אך על מנת לשפר את חווית המשתמש, נוכל לבצע אופטימיזציה נוספת של קישורי המאמר בעמוד הפנימי.

כשאתה קוראצ'ן וייליאנגכשאתה כותב בלוג, לעתים קרובות אתה עשוי לגלות שאתה מטמיע טופס כרטיס מאמר כזה, עם מאמר ממוזער שמכיל תקציר של תוכן המאמר, לדוגמה:

כיצד להגיש בקשה למספר נייד בהונג קונג?מספר טלפון נייד וירטואלי בהונג קונג לקבלת קוד אימות 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 מאמרים מקושרים פנימיים, אני מזין את ה-shortcode ישירות:

• 【jiawen ids=526,380,411】
• אם תזין יותר מ-5 מזהי מאמרים, רק 5 מאמרים יוצגו לכל היותר
• מאמר זה משמש כדי למנוע בריחה של קודים קצרים []
• בעת שימוש בקוד הקצר, אנא שנה את [] ל-[]

ההשפעה היא כדלקמן ▼

איך הצליח החשבון הציבורי של Mimeng ולמה הוא כל כך פופולרי? יש סיבות מאחוריו

איך החשבון הציבורי Mi Meng הפך למצליח? למה זה כל כך פופולרי? יש כוח מניע מאחורי הסיבה! מאז שהחלה Mimeng לכתוב חשבון WeChat רשמי ב-2012 בספטמבר 9, היא צברה 15 מעריצים תוך חודשיים בלבד, מה שעלה באופן מיידי על הישגיהם של אנשים רבים וגרם לאנשים רבים להסתקרן לגביה...

ארבעת המורים והחניכים של טאנג סנג שוחחו על אנשי הקשר של חברי WeChat, והנאום של Sun Wukong הדהים אותי

ארבעה מאסטרים ותלמידים של טאנג מונק שוחחו על הנאום של סאן ווקונג. כולנו קראנו את המסע למערב וקשרים? חחח, לא ציפיתי שהנאום של Sun Wukong הדהים אותי...

ניתוח המאפיינים הפסיכולוגיים של קריאת המשתמשים בעידן המדיה החדשה: אם תשלוט ב-7 הללו, תרוויח

ניתוח המאפיינים של פסיכולוגיית הקריאה של המשתמשים בעידן המדיה החדש: אם תשלטו ב-7 הללו, תרוויחו כסף מבוא: אם אנחנו רוצים להצליח כחשבון ציבורי של WeChat, עלינו ללמוד את הטבע האנושי, לנתח את קריאת המשתמשים פסיכולוגיה, ולהבין את התנהגות הקריאה של המשתמשים רק על ידי כך, רק כך נוכל לשפר טוב יותר את מה שאנו עושים...

אם אינך משתמש בקוד השורט בעורך וורדפרס וברצונך לקרוא לו במקום אחר, תוכל לקרוא לו באמצעות הקוד הבא:

do_shortcode（'[neilian ids ids = postID1，postID2]'）

XNUMX. הוסף כפתור עורך

אם אתה צריך להזין ידנית את השורטקוד בכל פעם, זה מרגיש מסורבל מדי, מה עלי לעשות?

הכוח של וורדפרס הוא בכך שהיא מאפשרת לנו לפשט דברים מורכבים ^_^

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) הוסף לחצן הדמיה של עורך

כאשר אנו עורכים מאמרי וורדפרס, ממשק ברירת המחדל הוא בדרך כלל Visual.

לכן, עדיף להוסיף כפתור גם בעורך הוויזואלי.

• אמנם ניתן ליישם פונקציונליות זו בקוד, אך היא מעט מסובכת עבור חדשים רבים.
• זה בעייתי למומחים, כי צריך להוסיף קוד JS לערכת הנושא, ואם העיצוב משתנה, צריך להוסיף אותו שוב, וזה מרגיש מאוד מסורבל.

第 4 步:התקן והפעל תוספים

• צ'ן וייליאנגתוספים מומלצים:לחצנים מותאמים אישית של עורך חזותי

לאחר השלמת ההתקנה, מתחת לשורת התפריטים השמאלית, יופיעו כפתורים מותאמים אישית של עורך Visual עם סמל גלגל השיניים ▼

第 5 步:לחץ על הוסף חדש

• צור כפתור מותאם אישית, כל שם.
• לדוגמא: הוספת מאמרים פנימיים 

אתה רק צריך לעקוב אחר התמונה למטה כדי להגדיר ▼

第 6 步: אפשרות תוכן לחצן

• בחר באפשרות גלישת בחירה.

第 7 步: לפני ההגדרה

• מלא את ה-shortcode

שלב 8:תצוגה בהגדרות עורך

• אתה יכול לבדוק את לחצני התצוגה של עורך חזותי או עורך טקסט.
• שים לב שאם עורך הטקסט מסומן, אתה יכול לדלג על "הוסף קוד לחצן קיצור" למעלה, אחרת זה יחזור על עצמו.

שלב 9:אפשרויות סמל לחצן

• בתפריט האפשרויות הנפתח, בחר בסמל המסגרת.

שלב 10:מבחן

• בסופו של דבר, כמובן, זה תלוי בך כדי לבדוק את האפקט בעצמך ^_^
• אם השלבים שלעיל נכונים, תראה את הלחצן כפי שמוצג להלן בממשק החזותי של העורך ▼