Bagaimana untuk menambah gaya kad artikel dalam WordPress? Benamkan kod pendek dalam bentuk kad artikel

WordPressBagaimana untuk mengoptimumkan pautan dalaman tapak web?

Cipta Kod Pendek dengan Artikel Kecil & Butang Editor

Pengoptimuman pautan dalaman tapak web, dalamSEOPautan sentiasa sangat penting, dan struktur pautan yang baik sangat bermanfaat untuk SEO.

Jika artikel semasa berkaitan dengan artikel lain, tambahkan pautan ke halaman secara automatik:

• akan meningkatkan bilangan dan kedalaman merangkak oleh labah-labah enjin carian,
• membantu menambah bilangan rekod,
• Dan berat kata kunci teks utama.

Jika beberapa artikel lama dikemas kini, anda juga boleh mengarahkan labah-labah enjin carian untuk merangkak semula dan mengindeks kemas kini kandungan artikel lama dengan menambah pautan dalaman pada artikel baharu.

• Bentuk umum pemautan dalaman ialah pautan teks, yang strukturnya ialah teks sauh .
• Tetapi untuk meningkatkan pengalaman pengguna, kami boleh mengoptimumkan lagi pautan artikel pada halaman dalaman.

apabila anda membacaChen WeiliangSemasa menulis blog, anda mungkin sering mendapati anda membenamkan borang kad artikel seperti ini, dengan artikel lakaran kecil yang mengandungi ringkasan kandungan artikel, contohnya:

Bagaimana untuk memohon nombor telefon bimbit Hong Kong?Nombor telefon mudah alih maya Hong Kong untuk menerima kod pengesahan SMS

eSender Kod diskaun nombor telefon bimbit Hong Kong: DM6888 Di manakah saya boleh membeli nombor telefon bimbit Hong Kong?Pengendali maya kad panggilan Hong Kong disyorkan eSender Ia adalah perkhidmatan nombor mudah alih maya di bawah Kumpulan Maklumat Boyuan. Maklumat Boyuan telah menubuhkan cawangan di Guangzhou dan Hong Kong, China,...

XNUMX. Tambah kod pendek gaya kad artikel terbenam

Langkah 1:Tambah kod PHP

Tambahkan kod berikut pada fail functions.php tema WP anda:

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

Jika ikon hiperpautan tidak muncul, anda perlu menggantikan yang di atasCSSDaripada ini fa fa-link fa-fw, kepada sui sui-link sui-fw

• Sila semak tema WP anda, adakah terdapat folder /img/random/?
• (jika tidak, sila buat)
• Kemudian dalam fail rawak, tambahkan 20 imej jpg.

Gambar diberi nama dari 1 hingga 20:

• 1.jpg
• 2.jpg
• ... (dan sebagainya)
• 20.jpg

Langkah 2:Tambah kod CSS

Tambahkan kod berikut pada fail style.css tema WP anda:

/*加入内部文章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. Gunakan kod pendek dalam bentuk kad artikel terbenam (kod pendek)

Anda boleh memasukkan kod pendek terus dalam antara muka "Visual" atau "Teks" editor artikel 【jiawen ids =postID1,postID2 ...】 format panggilan.

Sebagai contoh, jika saya ingin memaparkan 3 artikel yang dipautkan secara dalaman, saya hanya masukkan kod pendek:

• 【jiawen ids=526,380,411】
• Jika anda memasukkan lebih daripada 5 ID artikel, paling banyak hanya 5 artikel akan dipaparkan
• Artikel ini digunakan untuk mengelakkan kod pendek terlepas []
• Apabila menggunakan kod pendek, sila tukar [] kepada []

Kesannya adalah seperti berikut ▼

Bagaimanakah akaun awam Mimeng berjaya dan mengapa ia begitu popular? Ada sebab di sebaliknya

Bagaimanakah akaun rasmi Mimi Meng berjaya? Mengapa ia begitu popular? Terdapat kuasa penggerak di sebalik punca itu! Sejak Mi Meng mula menulis akaun awam WeChat pada 2012 September 9, dia memperoleh 15 pengikut dalam masa dua bulan sahaja, serta-merta mengatasi pencapaian ramai orang, yang membuatkan ramai orang sangat ingin tahu.

Empat guru dan perantis Tang Seng membincangkan kenalan rakan WeChat, dan ucapan Sun Wukong membuatkan saya terpegun

Tang Sanzang dan empat muridnya membincangkan rangkaian rakan-rakan WeChat yang membuat saya tercerahkan secara tiba-tiba. Haha, tak sangka ucapan Sun Wukong membuatkan saya tercerahkan secara tiba-tiba...

Analisis ciri psikologi pembacaan pengguna dalam era media baharu: jika anda menguasai 7 ini, anda akan mendapat

Analisis ciri-ciri psikologi pembacaan pengguna di era media baharu: Jika anda menguasai 7 ini, anda akan mendapat wang Pengenalan Jika kita ingin berjaya menjalankan akaun awam WeChat, kita mesti mengkaji sifat manusia, menganalisis psikologi pembacaan pengguna, dan memahami tingkah laku pembacaan pengguna dengan lebih baik.

Jika anda tidak menggunakan kod pendek dalam editor WordPress dan ingin memanggilnya di tempat lain, anda boleh memanggilnya dengan kod berikut:

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

XNUMX. Tambah butang editor

Jika anda perlu memasukkan kod pendek secara manual setiap kali, ia terasa terlalu rumit, apakah yang perlu saya lakukan?

Kekuatan WordPress ialah ia membolehkan kita memudahkan perkara yang rumit ^_^

1) Tambah butang teks editor

WordPress mempunyai editor TinyMCE terbina dalam secara lalai. Kami boleh menambah butang pintasan pada antara muka teks editor TinyMCE.

Langkah 3:Tambahkan kod butang pintasan

• Sila tambah kod terus dalam fail 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
}

注意 事项

Jika anda telah menambah kod lain untuk editor untuk menyesuaikan butang pintasan, cuma<script type="text/javascript"> Di bawah, tambah kod berikut ▼

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

Jika tidak, ia akan menjadi salah.

2) Tambah butang visualisasi editor

Apabila kami mengedit artikel WordPress, antara muka lalai biasanya Visual.

Jadi, lebih baik untuk menambah butang dalam editor visual juga.

• Walaupun fungsi ini boleh dilaksanakan dalam kod, ia agak rumit untuk ramai pemula.
• Ia menyusahkan pakar, kerana perlu menambah kod JS pada tema, dan jika anda menukar tema, anda perlu menambahnya semula, dan langkah-langkahnya amat menyusahkan.

Langkah 4:Pasang dan dayakan pemalam

• Chen WeiliangPemalam disyorkan:Butang Tersuai Editor Visual

Selepas pemasangan selesai, di bawah bar menu kiri, Butang Tersuai Editor Visual dengan ikon gear akan muncul ▼

Langkah 5:Klik Tambah Baru

• Buat butang tersuai, sebarang nama.
• Contohnya: menambah artikel dalaman 

Anda hanya perlu ikut gambar di bawah untuk menyediakan ▼

Langkah 6: Pilihan Kandungan Butang

• Pilih Pilihan Balut.

Langkah 7: Sebelum menetapkan

• Isikan kod pendek

Langkah 8:Tetapan Paparan Dalam Editor

• Anda boleh menyemak butang paparan Editor Visual atau Editor Teks.
• Ambil perhatian bahawa jika Editor Teks ditandakan, anda boleh melangkau "Tambah kod butang pintasan" di atas, jika tidak, ia akan diulang.

Langkah 9:Pilihan Ikon Butang

• Dalam menu pilihan lungsur, pilih ikon Berbingkai.

Langkah 10:Uji

• Akhirnya, sudah tentu terpulang kepada anda untuk menguji sendiri kesannya ^_^
• Jika langkah di atas adalah betul, anda akan melihat butang seperti yang ditunjukkan di bawah dalam antara muka visual editor ▼