Πώς να προσθέσετε στυλ κάρτας άρθρου στο WordPress; Ενσωματώστε τον σύντομο κώδικα στη φόρμα κάρτας άρθρου

WordPressΠώς να βελτιστοποιήσετε τους εσωτερικούς συνδέσμους του ιστότοπου;

Δημιουργήστε συντομότερους κώδικες με μικρογραφίες άρθρων και κουμπιά επεξεργασίας

Βελτιστοποίηση εσωτερικού συνδέσμου ιστότοπου, σεSEOΟι σύνδεσμοι ήταν πάντα πολύ σημαντικοί και μια καλή δομή συνδέσμων είναι πολύ επωφελής για το SEO.

Εάν το τρέχον άρθρο σχετίζεται με άλλα άρθρα, προσθέστε αυτόματα έναν σύνδεσμο στη σελίδα:

• θα αυξήσει σημαντικά τον αριθμό και το βάθος της ανίχνευσης από τις αράχνες των μηχανών αναζήτησης,
• βοηθούν στην αύξηση του αριθμού των εγγραφών,
• Και το βάρος των λέξεων-κλειδιών κειμένου άγκυρας.

Εάν ενημερωθούν ορισμένα παλιά άρθρα, μπορείτε επίσης να δώσετε εντολή στις αράχνες των μηχανών αναζήτησης να ανιχνεύσουν ξανά και να ευρετηριάσουν τις ενημερώσεις περιεχομένου των παλαιών άρθρων προσθέτοντας εσωτερικούς συνδέσμους στα νέα άρθρα.

• Μια κοινή μορφή εσωτερικής σύνδεσης είναι ένας σύνδεσμος κειμένου, του οποίου η δομή είναι κείμενο αγκύρωσης .
• Ωστόσο, για να βελτιώσουμε την εμπειρία του χρήστη, μπορούμε να βελτιστοποιήσουμε περαιτέρω τους συνδέσμους του άρθρου στην εσωτερική σελίδα.

όταν διαβάζειςChen WeiliangΌταν γράφετε ιστολόγιο, μπορεί συχνά να διαπιστώσετε ότι ενσωματώνετε μια φόρμα κάρτας άρθρου όπως αυτή, με μια μικρογραφία άρθρου που περιέχει μια περίληψη του περιεχομένου του άρθρου, για παράδειγμα:

Πώς να υποβάλετε αίτηση για έναν αριθμό κινητού στο Χονγκ Κονγκ;Εικονικός αριθμός κινητού τηλεφώνου του Χονγκ Κονγκ για λήψη κωδικού επαλήθευσης SMS

eSender Κωδικός έκπτωσης αριθμού κινητού τηλεφώνου Χονγκ Κονγκ: DM6888 Πού μπορώ να αγοράσω έναν αριθμό κινητού τηλεφώνου στο Χονγκ Κονγκ;Συνιστάται εικονικός χειριστής τηλεφωνικής κάρτας Χονγκ Κονγκ eSender Είναι μια υπηρεσία εικονικών αριθμών κινητής τηλεφωνίας στην ομάδα πληροφοριών Boyuan. Η Boyuan Information έχει δημιουργήσει υποκαταστήματα στο Guangzhou και στο Χονγκ Κονγκ της Κίνας,...

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. Επικαλέστε τον σύντομο κωδικό με τη μορφή κάρτας ενσωματωμένου άρθρου (σύντομος κωδικός)

Μπορείτε να εισαγάγετε τον σύντομο κωδικό απευθείας στη διεπαφή "Visual" ή "Text" του προγράμματος επεξεργασίας άρθρου 【jiawen ids =postID1,postID2 ...】 μορφή κλήσης.

Για παράδειγμα, αν θέλω να εμφανίσω 3 εσωτερικά συνδεδεμένα άρθρα, εισάγω απλώς τον σύντομο κωδικό:

• 【jiawen ids=526,380,411】
• Εάν εισαγάγετε περισσότερα από 5 αναγνωριστικά άρθρων, θα εμφανίζονται το πολύ 5 άρθρα
• Αυτό το άρθρο χρησιμοποιείται για την αποφυγή διαφυγής σύντομων κωδικών []
• Όταν χρησιμοποιείτε τον σύντομο κωδικό, αλλάξτε το [] σε []

Το αποτέλεσμα είναι το εξής ▼

Πώς πέτυχε ο δημόσιος λογαριασμός του Mimeng και γιατί είναι τόσο δημοφιλής; Υπάρχουν λόγοι πίσω από αυτό

Πώς έγινε επιτυχημένος ο επίσημος λογαριασμός της Mimi Meng; Γιατί είναι τόσο δημοφιλές; Υπάρχει μια κινητήρια δύναμη πίσω από την αιτία! Από τότε που η Mi Meng άρχισε να γράφει δημόσιους λογαριασμούς στο WeChat στις 2012 Σεπτεμβρίου 9, κέρδισε 15 ακολούθους σε μόλις δύο μήνες, ξεπερνώντας αμέσως τα επιτεύγματα πολλών ανθρώπων, γεγονός που έκανε πολλούς ανθρώπους πολύ περίεργους.

Οι τέσσερις δάσκαλοι και οι μαθητευόμενοι του Tang Seng συζήτησαν τις επαφές των φίλων του WeChat και η ομιλία του Sun Wukong με έκανε να νιώσω άνετα

Ο Τανγκ Σανζάνγκ και οι τέσσερις μαθητές του συζήτησαν για το δίκτυο των φίλων του WeChat. Χαχα, δεν περίμενα ότι η ομιλία του Sun Wukong θα με διαφωτίσει ξαφνικά...

Ανάλυση των ψυχολογικών χαρακτηριστικών της ανάγνωσης των χρηστών στη νέα εποχή των μέσων ενημέρωσης: αν κατακτήσετε αυτά τα 7, θα κερδίσετε

Ανάλυση των ψυχολογικών χαρακτηριστικών της ανάγνωσης των χρηστών στη νέα εποχή των μέσων ενημέρωσης: Εάν καταλάβετε αυτά τα 7, θα κερδίσετε χρήματα Εισαγωγή Εάν θέλουμε να πετύχουμε έναν δημόσιο λογαριασμό στο WeChat, πρέπει να μελετήσουμε την ανθρώπινη φύση, να αναλύσουμε την ψυχολογία των χρηστών και να κατανοήσουμε τη συμπεριφορά ανάγνωσης των χρηστών.

Εάν δεν χρησιμοποιείτε τον σύντομο κώδικα στον επεξεργαστή 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, η προεπιλεγμένη διεπαφή είναι συνήθως Visual.

Επομένως, είναι καλύτερο να προσθέσετε ένα κουμπί και στον οπτικό επεξεργαστή.

• Ενώ αυτή η λειτουργία μπορεί να εφαρμοστεί σε κώδικα, είναι λίγο περίπλοκη για πολλούς αρχάριους.
• Είναι ενοχλητικό για τους ειδικούς, επειδή είναι απαραίτητο να προσθέσετε κώδικα JS στο θέμα, και εάν αλλάξετε το θέμα, πρέπει να το προσθέσετε ξανά και τα βήματα είναι ιδιαίτερα επαχθή.

第 4 步:Εγκαταστήστε και ενεργοποιήστε πρόσθετα

• Chen WeiliangΣυνιστώνται πρόσθετα:Προσαρμοσμένα κουμπιά Visual Editor

Μετά την ολοκλήρωση της εγκατάστασης, κάτω από την αριστερή γραμμή μενού, θα εμφανιστεί ένα Visual Editor Custom Buttons με ένα εικονίδιο με το γρανάζι ▼

第 5 步:Κάντε κλικ στην Προσθήκη νέου

• Δημιουργήστε ένα προσαρμοσμένο κουμπί, οποιοδήποτε όνομα.
• Για παράδειγμα: προσθήκη εσωτερικών άρθρων 

Απλώς πρέπει να ακολουθήσετε την παρακάτω εικόνα για να ρυθμίσετε το ▼

第 6 步: Κουμπί επιλογή περιεχομένου

• Επιλέξτε Επιλογή αναδίπλωσης.

第 7 步: Πριν από τη ρύθμιση

• Συμπληρώστε τον σύντομο κωδικό

βήμα 8:Εμφάνιση στις ρυθμίσεις του προγράμματος επεξεργασίας

• Μπορείτε να ελέγξετε τα κουμπιά εμφάνισης Visual Editor ή Text Editor.
• Σημειώστε ότι εάν είναι επιλεγμένο το πρόγραμμα επεξεργασίας κειμένου, μπορείτε να παραλείψετε το "Προσθήκη κωδικού κουμπιού συντόμευσης" παραπάνω, διαφορετικά θα επαναληφθεί.

βήμα 9:Επιλογές εικονιδίου κουμπιού

• Στο αναπτυσσόμενο μενού επιλογών, επιλέξτε το εικονίδιο με πλαίσιο.

βήμα 10:Δοκιμάστε

• Στο τέλος, φυσικά, είναι στο χέρι σας να δοκιμάσετε μόνοι σας το αποτέλεσμα ^_^
• Εάν τα παραπάνω βήματα είναι σωστά, θα δείτε το κουμπί όπως φαίνεται παρακάτω στην οπτική διεπαφή του προγράμματος επεξεργασίας ▼