Artikelkartenstil in WordPress hinzufügen: Shortcode in Artikelkartenform einbetten

WordPressWie optimiert man die internen Links der Website?

Erstellen Sie Shortcodes mit Thumbnail-Artikeln und Editor-Schaltflächen

Optimierung der internen Verlinkung der Website, inSEOLinks waren schon immer sehr wichtig, und eine gute Linkstruktur ist sehr vorteilhaft für SEO.

Wenn der aktuelle Artikel mit anderen Artikeln verwandt ist, fügen Sie automatisch einen Link zur Seite hinzu:

• wird die Anzahl und Tiefe des Crawlings durch Suchmaschinen-Spider erheblich erhöhen,
• helfen, die Anzahl der Datensätze zu erhöhen,
• Und das Gewicht von Ankertext-Keywords.

Wenn einige alte Artikel aktualisiert werden, können Sie Suchmaschinen-Spider auch anweisen, die Inhaltsaktualisierungen der alten Artikel erneut zu durchsuchen und zu indizieren, indem Sie interne Links zu den neuen Artikeln hinzufügen.

• Eine gängige Form der internen Verlinkung ist ein Textlink, dessen Struktur ein Ankertext ist.
• Aber um das Benutzererlebnis zu verbessern, können wir die Artikellinks auf der Innenseite weiter optimieren.

wenn du liestChen WeiliangBeim Bloggen werden Sie möglicherweise häufig feststellen, dass Sie ein Artikelkartenformular wie dieses mit einem Miniaturartikel einbetten, der eine Zusammenfassung des Inhalts des Artikels enthält, zum Beispiel:

Wie beantrage ich eine Hongkonger Handynummer?Virtuelle Hongkonger Mobiltelefonnummer, um den SMS-Bestätigungscode zu erhalten

eSender Rabattcode für Mobiltelefonnummern aus Hongkong: DM6888 Wo kann ich eine Mobiltelefonnummer aus Hongkong kaufen?Virtueller Telefonkartenbetreiber in Hongkong empfohlen eSender Es handelt sich um einen virtuellen Mobiltelefonnummerndienst der Boyuan Information Group. Boyuan Information hat Niederlassungen in Guangzhou und Hongkong, China...

XNUMX. Fügen Sie einen eingebetteten Shortcode im Stil einer Artikelkarte hinzu

1 步：PHP-Code hinzufügen

Fügen Sie der Datei functions.php Ihres WP-Designs den folgenden Code hinzu:

/**
* 加入内部文章缩略图 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 文件夹内的图片作缩略图
}
}
}
}

Wenn das Hyperlink-Symbol nicht angezeigt wird, müssen Sie das obige ersetzenCSSvon diesem fa fa-link fa-fw, Zu sui sui-link sui-fw

• Bitte überprüfen Sie Ihr WP-Design, gibt es einen Ordner /img/random/?
• (wenn nicht, bitte erstellen)
• Fügen Sie dann in der Zufallsdatei 20 JPG-Bilder hinzu.

Die Bilder heißen 1~20:

• 1.jpg
• 2.jpg
• ... (usw)
• 20.jpg

2 步：CSS-Code hinzufügen

Fügen Sie den folgenden Code zur style.css-Datei Ihres WP-Designs hinzu:

/*加入内部文章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. Aufruf des Shortcodes in Form einer eingebetteten Artikelkarte (Shortcode)

Sie können Shortcodes direkt in der „Visual“- oder „Text“-Oberfläche des Artikel-Editors eingeben 【jiawen ids =postID1,postID2 ...】 Anruf formatieren.

Möchte ich mir beispielsweise 3 intern verlinkte Artikel anzeigen lassen, gebe ich einfach den Shortcode ein:

• 【jiawen ids=526,380,411】
• Wenn Sie mehr als 5 Artikel-IDs eingeben, werden maximal 5 Artikel angezeigt
• Dieser Artikel wird verwendet, um zu vermeiden, dass Shortcodes maskiert werden []
• Wenn Sie den Shortcode verwenden, ändern Sie bitte [] in []

Der Effekt ist wie folgt ▼

Wie war Mimengs öffentliches Konto erfolgreich und warum ist es so beliebt?Es gibt Gründe dafür

Wie wurde das öffentliche Konto von Mi Meng erfolgreich? Warum ist es so beliebt? Es gibt eine treibende Kraft hinter dem Grund! Seit Mimeng am 2012. September 9 begann, einen öffentlichen WeChat-Account zu erstellen, hat sie in nur zwei Monaten 15 Fans gewonnen, was die Erfolge vieler Menschen sofort übertraf und viele Menschen neugierig auf sie machte ...

Die vier Lehrer und Lehrlinge von Tang Seng besprachen die Kontakte von WeChat-Freunden, und die Rede von Sun Wukong beruhigte mich

Vier Meister und Schüler von Tang Monk haben über WeChat-Freunde gesprochen. Wir haben alle „Journey to the West“ gelesen. Haben sie über WeChat-Freunde gesprochen? und Verbindungen? Haha, ich hätte nicht erwartet, dass Sun Wukongs Rede mich fassungslos machen würde ...

Analyse der psychologischen Merkmale des Lesens von Benutzern im Zeitalter der neuen Medien: Wenn Sie diese 7 beherrschen, werden Sie verdienen

Analyse der Lesepsychologie von Nutzern im Zeitalter der neuen Medien: Wenn Sie diese 7 beherrschen, werden Sie Geld verdienen. Einführung: Wenn wir als offizielles WeChat-Konto erfolgreich sein wollen, müssen wir die menschliche Natur studieren und die Lesepsychologie der Nutzer analysieren Nur so können wir das Leseverhalten unserer Nutzer besser verstehen.

Wenn Sie den Shortcode nicht im WordPress-Editor verwenden und ihn an anderer Stelle aufrufen möchten, können Sie ihn mit folgendem Code aufrufen:

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

XNUMX. Fügen Sie eine Editor-Schaltfläche hinzu

Wenn Sie den Shortcode jedes Mal manuell eingeben müssen, fühlt es sich zu umständlich an, was soll ich tun?

Die Stärke von WordPress liegt darin, dass es uns ermöglicht, komplexe Dinge zu vereinfachen ^_^

1) Editor-Text-Schaltfläche hinzufügen

WordPress verfügt standardmäßig über einen integrierten TinyMCE-Editor. Wir können der Textoberfläche des TinyMCE-Editors Verknüpfungsschaltflächen hinzufügen.

Schritt 3:Verknüpfungsschaltflächencode hinzufügen

• Bitte fügen Sie den Code direkt in die Datei functions.php ein ▼

//加入内部文章，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
}

注意 事项

Wenn Sie anderen Code für den Editor hinzugefügt haben, um die Tastenkombinationen anzupassen, einfach<script type="text/javascript"> Fügen Sie unten den folgenden Code ▼ hinzu

QTags.addButton( 'jw', '加入内部文章', '', '');

Sonst geht es schief.

2) Schaltfläche Editor-Visualisierung hinzufügen

Wenn wir WordPress-Artikel bearbeiten, ist die Standardschnittstelle normalerweise Visual.

Daher ist es besser, auch im visuellen Editor eine Schaltfläche hinzuzufügen.

• Obwohl diese Funktionalität in Code implementiert werden kann, ist sie für viele Neulinge etwas kompliziert.
• Für Experten ist es mühsam, weil es notwendig ist, dem Design JS-Code hinzuzufügen, und wenn Sie das Design ändern, müssen Sie es erneut hinzufügen, und die Schritte sind besonders umständlich.

4 步：Plugins installieren und aktivieren

• Chen WeiliangPlugins werden empfohlen:Benutzerdefinierte Schaltflächen des visuellen Editors

Nachdem die Installation abgeschlossen ist, erscheint unter der linken Menüleiste ein Visual Editor Custom Buttons mit einem Zahnradsymbol ▼

5 步：Klicken Sie auf Neu hinzufügen

• Erstellen Sie eine benutzerdefinierte Schaltfläche mit beliebigem Namen.
• Zum Beispiel: Hinzufügen interner Artikel 

Sie müssen nur dem Bild unten folgen, um ▼ einzurichten

6 步： Schaltflächeninhalt Option

• Wählen Sie Wrap-Auswahl.

7 步： Vor dem Einstellen

• Geben Sie den Shortcode ein

Schritt 8:Anzeige im Editor-Einstellungen

• Sie können die Schaltflächen Visual Editor oder Texteditor anzeigen aktivieren.
• Beachten Sie, dass Sie, wenn der Texteditor aktiviert ist, den obigen „Code der Verknüpfungsschaltfläche hinzufügen“ überspringen können, da er sonst wiederholt wird.

Schritt 9:Optionen für Schaltflächensymbole

• Wählen Sie im Dropdown-Menü „Optionen“ das Symbol „Gerahmt“ aus.

Schritt 10:Test

• Am Ende bleibt es natürlich dir überlassen, die Wirkung selbst zu testen ^_^
• Wenn die obigen Schritte korrekt sind, sehen Sie die unten gezeigte Schaltfläche in der visuellen Oberfläche des Editors ▼