WordPress'te makale kartı stili nasıl eklenir?Kısa kodu makale kartı formuna gömün

WordPressWeb sitesi iç bağlantıları nasıl optimize edilir?

Küçük Resim Makaleleri ve Düzenleyici Düğmeleri ile Kısa Kodlar Oluşturun

Web sitesi iç bağlantı optimizasyonu,SEOBağlantılar her zaman çok önemli olmuştur ve iyi bir bağlantı yapısı SEO için çok faydalıdır.

Mevcut makale diğer makalelerle ilgiliyse, sayfaya otomatik olarak bir bağlantı ekleyin:

• arama motoru örümceklerinin tarama sayısını ve derinliğini büyük ölçüde artıracak,
• kayıt sayısını artırmaya yardımcı olmak,
• Ve çapa metni anahtar kelimelerinin ağırlığı.

Bazı eski makaleler güncellenirse, arama motoru örümceklerine yeni makalelere dahili bağlantılar ekleyerek eski makalelerin içerik güncellemelerini yeniden taramasını ve dizine eklemesini de isteyebilirsiniz.

• Yaygın bir dahili bağlantı biçimi, yapısı bağlantı metni olan bir metin bağlantısıdır.
• Ancak kullanıcı deneyimini geliştirmek için iç sayfadaki makale bağlantılarını daha da optimize edebiliriz.

okuduğun zamanChen WeiliangBlog yazarken, makalenin içeriğinin bir özetini içeren bir küçük resim makalesiyle birlikte, genellikle bunun gibi bir makale kartı formu yerleştirdiğinizi görebilirsiniz, örneğin:

Hong Kong cep telefonu numarasına nasıl başvurulur?SMS doğrulama kodunu almak için Hong Kong sanal cep telefonu numarası

eSender Hong Kong cep telefonu numarası indirim kodu: DM6888 Hong Kong cep telefonu numarasını nereden satın alabilirim?Hong Kong arama kartı sanal operatörü önerilir eSender Boyuan Bilgi Grubu'na bağlı sanal cep telefonu numarası hizmetidir. Boyuan Information, Çin'in Guangzhou ve Hong Kong şehirlerinde şubeler açtı...

XNUMX. Gömülü makale kartı stili kısa kodu ekleyin

Aşama 1:PHP kodu ekle

WP temanızın functions.php dosyasına aşağıdaki kodu ekleyin:

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

Köprü simgesi görünmüyorsa, yukarıdakileri değiştirmeniz gerekir.CSSbundan fa fa-link fa-fw, ile sui sui-link sui-fw

• Lütfen WP temanızı kontrol edin, /img/random/ klasörü var mı?
• (değilse, lütfen oluşturun)
• Ardından rastgele dosyaya 20 jpg görüntüsü ekleyin.

Resimler 1'den 20'ye kadar adlandırılmıştır:

• 1.jpg
• 2.jpg
• ... (ve benzeri)
• 20.jpg

Aşama 2:CSS kodu ekle

WP temanızın style.css dosyasına aşağıdaki kodu ekleyin:

/*加入内部文章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. Kısa kodu, yerleşik bir makale kartı (kısa kod) biçiminde çağırın

Kısa kodları doğrudan makale düzenleyicinin "Görsel" veya "Metin" arayüzüne girebilirsiniz. 【jiawen ids =postID1,postID2 ...】 aramayı biçimlendirin.

Örneğin, dahili olarak bağlantılı 3 makaleyi görüntülemek istersem, kısa kodu girmem yeterlidir:

• 【jiawen ids=526,380,411】
• 5'ten fazla makale kimliği girerseniz, en fazla sadece 5 makale görüntülenecektir.
• Bu makale, kısa kodların kaçmasını önlemek için kullanılır []
• Kısa kodu kullanırken lütfen [] öğesini [] olarak değiştirin

Etkisi aşağıdaki gibidir ▼

Mimeng'in herkese açık hesabı nasıl başarılı oldu ve neden bu kadar popüler?

Mimi Meng'in resmi hesabı nasıl başarıya ulaştı? Neden bu kadar popüler? Sebebin arkasında bir itici güç var! Mi Meng, 2012 Eylül 9'de WeChat'te herkese açık hesaplar yazmaya başladığından beri sadece iki ayda 15 takipçiye ulaşarak birçok kişinin başarısını bir anda geride bıraktı ve bu durum birçok kişide merak uyandırdı.

Tang Seng'in dört öğretmeni ve çırağı, WeChat arkadaşlarının temaslarını tartıştı ve Sun Wukong'un konuşması beni rahatlattı.

Tang Sanzang ve dört müridi WeChat arkadaş ağını tartıştılar. Sun Wukong'un konuşması beni aniden aydınlandırdı. Giriş: Hepimiz Journey to the West'i okuduk. Tang Sanzang, Sun Wukong, Zhu Bajie ve Sha Wujing'in WeChat arkadaş ağını tartıştığını gördünüz mü? Haha, Sun Wukong'un konuşmasının beni birdenbire aydınlanacağını beklemiyordum...

Yeni medya çağında kullanıcıların okumalarının psikolojik özelliklerinin analizi: Bu 7'de ustalaşırsanız, kazanacaksınız.

Yeni medya çağında kullanıcı okumanın psikolojik özelliklerinin analizi: Bu 7'sine hakim olursanız para kazanırsınız. Giriş Bir WeChat genel hesabını yönetmede başarılı olmak istiyorsak, insan doğasını incelemeli, kullanıcı okuma psikolojisini analiz etmeli ve kullanıcı okuma davranışını anlamalıyız. Ancak bunu yaparak...

Kısa kodu WordPress düzenleyicide kullanmıyorsanız ve başka bir yerde aramak istiyorsanız, aşağıdaki kodla arayabilirsiniz:

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

XNUMX. Bir düzenleyici düğmesi ekleyin

Kısa kodu her seferinde manuel olarak girmeniz gerekiyorsa, çok hantal geliyor, ne yapmalıyım?

WordPress'in gücü, karmaşık şeyleri basitleştirmemize izin vermesidir ^_^

1) Düzenleyici metin düğmesi ekle

WordPress varsayılan olarak yerleşik bir TinyMCE düzenleyicisine sahiptir.TinyMCE düzenleyici metin arayüzüne kısayol düğmeleri ekleyebiliriz.

Aşama 3:Kısayol düğmesi kodu ekle

• Lütfen kodu doğrudan function.php dosyasına ekleyin ▼

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

注意 事项

Editörün kısayol düğmelerini özelleştirmesi için başka bir kod eklediyseniz,<script type="text/javascript"> Aşağıya aşağıdaki kodu ekleyin ▼

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

Aksi takdirde yanlış gidecektir.

2) Düzenleyici görselleştirme düğmesi ekle

WordPress makalelerini düzenlediğimizde, varsayılan arayüz genellikle Visual'dir.

Bu nedenle, görsel düzenleyiciye de bir düğme eklemek daha iyidir.

• Bu işlevsellik kodda uygulanabilse de, birçok yeni başlayan için biraz karmaşıktır.
• Uzmanlar için zahmetli çünkü temaya JS kodunun eklenmesi gerekiyor ve eğer tema değiştirilirse tekrar eklenmesi gerekiyor, bu da çok hantal geliyor.

Aşama 4:Eklentileri kurun ve etkinleştirin

• Chen WeiliangEklentiler önerilir:Görsel Düzenleyici Özel Düğmeleri

Kurulum tamamlandıktan sonra, sol menü çubuğunun altında, dişli simgeli bir Görsel Düzenleyici Özel Düğmeleri görünecektir ▼

Aşama 5:Yeni Ekle'yi tıklayın

• Herhangi bir adla özel bir düğme oluşturun.
• Örneğin: dahili makaleler ekleme 

Kurulum için aşağıdaki resmi takip etmeniz yeterli ▼

Aşama 6: Düğme İçeriği seçeneği

• Seçimi Kaydır'ı seçin.

Aşama 7: Ayarlamadan önce

• Kısa kodu doldurun

Aşama 8:Editör ayarlarında görüntüle

• Görsel Düzenleyici veya Metin Düzenleyici gösteri düğmelerini kontrol edebilirsiniz.
• Metin Düzenleyici işaretliyse, yukarıdaki "Kısayol düğmesi kodu ekle"yi atlayabileceğinizi unutmayın, aksi takdirde tekrarlanacaktır.

Aşama 9:Düğme Simge Seçenekleri

• Açılır seçenekler menüsünde Çerçeveli simgesini seçin.

Aşama 10:test

• Sonunda, elbette, etkiyi kendiniz test etmek size kalmış ^_^
• Yukarıdaki adımlar doğruysa editör görsel arayüzünde aşağıda gösterildiği gibi butonu göreceksiniz ▼