Kepiye cara nambah gaya kertu artikel ing WordPress? Sematake kode cekak ing wangun kertu artikel

WordPressKepiye cara ngoptimalake tautan internal situs web?

Gawe Shortcode nganggo Artikel Gambar cilik & Tombol Editor

Optimasi tautan internal situs web, ingSEOTautan tansah penting banget, lan struktur pranala sing apik banget migunani kanggo SEO.

Yen artikel saiki ana hubungane karo artikel liyane, kanthi otomatis nambah link menyang kaca:

• bakal nambah jumlah lan ambane crawling dening spider mesin telusur,
• mbantu nambah jumlah rekaman,
• Lan bobot tembung kunci teks jangkar.

Yen sawetara artikel lawas dianyari, sampeyan uga bisa nglatih spider mesin telusur kanggo nyusup maneh lan ngindeks nganyari isi artikel lawas kanthi nambah pranala internal menyang artikel anyar.

• Bentuk umum saka pranala internal yaiku pranala teks, sing strukture minangka teks jangkar .
• Nanging kanggo nambah pengalaman panganggo, kita bisa luwih ngoptimalake pranala artikel ing kaca utama.

nalika macaChen WeiliangNalika ngeblog, sampeyan bisa uga kerep nemokake yen formulir kertu artikel dipasang kaya iki, kanthi artikel gambar cilik sing ngemot ringkesan isi artikel, contone:

Kepiye cara nglamar nomer seluler Hong Kong?Nomer ponsel virtual Hong Kong kanggo nampa kode verifikasi SMS

eSender Kode diskon nomer telpon seluler Hong Kong: DM6888 Ing endi bisa tuku nomer telpon seluler Hong Kong?Operator virtual kertu telpon Hong Kong dianjurake eSender Iku layanan nomer seluler virtual ing Boyuan Information Group. Informasi Boyuan wis nyiyapake cabang ing Guangzhou lan Hong Kong, China, ...

XNUMX. Tambah shortcode gaya kertu artikel ditempelake

Langkah 1:Tambah kode PHP

Tambah kode ing ngisor iki menyang file functions.php tema WP sampeyan:

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

Yen lambang hyperlink ora katon, sampeyan kudu ngganti ndhuwurCSSiki fa fa-link fa-fw, kanggo sui sui-link sui-fw

• Mangga priksa tema WP sampeyan, apa ana folder /img/random/?
• (yen ora, mangga gawe)
• Banjur ing file acak, tambahake 20 gambar jpg.

Gambar kasebut dijenengi saka 1 nganti 20:

• 1.jpg
• 2.jpg
• ... (lan sapanunggalane)
• 20.jpg

Langkah 2:Tambah kode CSS

Tambah kode ing ngisor iki menyang file style.css tema WP sampeyan:

/*加入内部文章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. Njaluk kode cekak awujud kertu artikel sing diselehake (kode cekak)

Sampeyan bisa ngetik shortcode langsung ing antarmuka "Visual" utawa "Teks" saka editor artikel 【jiawen ids =postID1,postID2 ...】 format telpon.

Contone, yen aku pengin nampilake 3 artikel sing ana gandhengane, aku mung ngetik shortcode:

• 【jiawen ids=526,380,411】
• Yen sampeyan ngetik luwih saka 5 ID artikel, paling akeh mung 5 artikel sing bakal ditampilake
• Artikel iki digunakake kanggo ngindhari kode cekak []
• Nalika nggunakake shortcode, mangga ganti [] dadi []

Efek kaya ing ngisor iki ▼

Kepiye carane akun publik Mimeng bisa sukses lan kenapa populer banget? Ana alesan

Kepiye carane akun resmi Mimi Meng dadi sukses? Apa sebabe dadi populer? Ana pasukan nyopir konco sabab! Wiwit Mi Meng miwiti nulis akun umum WeChat tanggal 2012 September 9, dheweke entuk 15 pengikut sajrone rong sasi, langsung ngluwihi prestasi akeh wong, sing nggawe akeh wong penasaran.

Papat guru lan magang Tang Seng ngrembug kontak kanca-kanca WeChat, lan omongane Sun Wukong nggawe aku kepenak.

Tang Sanzang lan muride papat ngrembug babagan jaringan kanca-kanca WeChat sing nggawe aku dadi terang Pambuka: Kita kabeh wis maca Journey to the West. Haha, aku ora nyana yen omongane Sun Wukong mau ndadak dadi pencerahan...

Analisis karakteristik psikologis maca pangguna ing jaman media anyar: yen sampeyan nguwasani 7 iki, sampeyan bakal entuk

Analisis karakteristik psikologis saka maca pangguna ing jaman media anyar: Yen sampeyan nguwasani 7 iki, sampeyan bakal entuk dhuwit Pambuka Yen kita pengin sukses ing akun umum WeChat, kita kudu sinau sifat manungsa, nganalisa psikologi maca pangguna, lan ngerti prilaku maca pangguna.

Yen sampeyan ora nggunakake shortcode ing editor WordPress lan pengin nelpon ing papan liya, sampeyan bisa nelpon nganggo kode ing ngisor iki:

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

XNUMX. Tambah tombol editor

Yen sampeyan kudu ngetik shortcode kanthi manual saben-saben, rasane angel banget, apa sing kudu ditindakake?

Kekuwatan WordPress yaiku ngidini kita nyederhanakake perkara sing rumit ^_^

1) Tambah tombol teks editor

WordPress nduweni editor TinyMCE sing dibangun kanthi standar. Kita bisa nambah tombol trabasan menyang antarmuka teks editor TinyMCE.

langkah 3:Tambah kode tombol trabasan

• Mangga nambah kode langsung ing file 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
}

Pancegahan

Yen sampeyan wis nambah kode liyane kanggo editor kanggo ngatur tombol trabasan, mung<script type="text/javascript"> Ing ngisor iki, tambahake kode ing ngisor iki ▼

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

Yen ora bakal salah.

2) Tambah tombol visualisasi editor

Nalika nyunting artikel WordPress, antarmuka standar biasane Visual.

Dadi, luwih apik kanggo nambah tombol ing editor visual uga.

• Nalika fungsi iki bisa dileksanakake ing kode, iku rada rumit kanggo akeh pemula.
• Iku troublesome kanggo ahli, amarga iku perlu kanggo nambah kode JS kanggo tema, lan yen sampeyan ngganti tema, sampeyan kudu nambah maneh, lan langkah utamané cumbersome.

Langkah 4:Instal lan aktifake plugin

• Chen WeiliangPlugins dianjurake:Tombol Custom Editor Visual

Sawise instalasi rampung, ing garis menu kiwa, Tombol Custom Editor Visual kanthi lambang gear bakal katon ▼

Langkah 5:Klik Tambah Anyar

• Nggawe tombol khusus, jeneng apa wae.
• Contone: nambah artikel internal 

Sampeyan mung kudu ngetutake gambar ing ngisor iki kanggo nyetel ▼

Langkah 6: Tombol Isi pilihan

• Pilih Wrap Selection.

Langkah 7: Sadurunge nyetel

• Isi ing shortcode

langkah 8:Tampilan Ing setelan Editor

• Sampeyan bisa mriksa tombol show Editor Visual utawa Editor Teks.
• Elinga yen Editor Teks dicenthang, sampeyan bisa ngliwati "Tambah kode tombol trabasan" ing ndhuwur, yen ora, bakal dibaleni.

langkah 9:Pilihan Ikon Tombol

• Ing menu pilihan gulung mudhun, pilih lambang Framed.

langkah 10:Tes

• Ing pungkasan, mesthi, sampeyan kudu nyoba efek dhewe ^_^
• Yen langkah-langkah ing ndhuwur bener, sampeyan bakal weruh tombol kaya ing ngisor iki ing antarmuka visual editor ▼