Kumaha carana nambahkeun gaya kartu artikel dina WordPress? Lebetkeun shortcode dina formulir kartu artikel

WordPressKumaha ngaoptimalkeun tautan internal halaman wéb?

Jieun Shortcode sareng Tulisan Gambar leutik & Tombol Editor

Website optimasi link internal, diSEOTumbu geus salawasna geus pohara penting, sarta struktur link alus pisan mangpaatna pikeun SEO.

Lamun artikel ayeuna patali jeung artikel séjén, otomatis nambahkeun tumbu ka kaca:

• bakal pisan ningkatkeun jumlah sareng jerona ngorondang ku lancah mesin pencari,
• mantuan nambahan jumlah rékaman,
• Jeung beurat kecap konci jangkar téks.

Lamun sababaraha artikel heubeul diropéa, anjeun ogé tiasa ngalatih spiders search engine pikeun ulang ngorondang jeung indéks apdet eusi tina artikel heubeul ku nambahkeun tumbu internal kana artikel anyar.

• Bentuk umum tina tautan internal nyaéta tautan téks, anu strukturna nyaéta jangkar téks .
• Tapi dina raraga ningkatkeun pangalaman pamaké, urang bisa salajengna ngaoptimalkeun Tumbu artikel dina kaca batin.

nalika anjeun macaChen WeiliangNalika blogging, anjeun tiasa sering mendakan yén bentuk kartu artikel dipasang sapertos kieu, kalayan tulisan gambar leutik anu ngandung ringkesan eusi artikel, contona:

Kumaha cara nerapkeun nomer sélulér Hong Kong?Nomer telepon sélulér virtual Hong Kong pikeun nampi kode verifikasi SMS

eSender Kode diskon nomer telepon sélulér Hong Kong: DM6888 Dimana abdi tiasa mésér nomer telepon sélulér Hongkong?Disarankeun operator virtual kartu nelepon Hong Kong eSender Éta mangrupikeun layanan nomer sélulér maya di handapeun Grup Émbaran Boyuan. Inpormasi Boyuan parantos nyetél cabang di Guangzhou sareng Hong Kong, Cina, ...

XNUMX. Tambahkeun shortcode gaya kartu artikel embedded

第 1:Tambahkeun kode PHP

Tambahkeun kodeu ieu kana file functions.php tema WP anjeun:

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

Upami ikon hyperlink henteu muncul, anjeun kedah ngagentos anu di luhurCSSTina ieu fa fa-link fa-fw, ka sui sui-link sui-fw

• Punten parios téma WP anjeun, naha aya folder /img/random/?
• (upami henteu, mangga jieun)
• Lajeng dina file acak, tambahkeun 20 gambar jpg.

Gambar ngaranna ti 1 nepi ka 20:

• xnumx.jpg
• xnumx.jpg
• ... (teras salajengna)
• xnumx.jpg

第 2:Tambahkeun kode CSS

Tambahkeun kodeu ieu kana file style.css tema WP anjeun:

/*加入内部文章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. Nyebutkeun kodeu pondok dina wangun kartu artikel anu disematkeun (kode pondok)

Anjeun tiasa ngalebetkeun kode pondok langsung dina antarmuka "Visual" atanapi "Teks" editor artikel 【jiawen ids =postID1,postID2 ...】 pormat panggero.

Contona, upami abdi hoyong nembongkeun 3 artikel numbu internal, abdi ngan ngasupkeun shortcode:

• 【jiawen ids=526,380,411】
• Lamun anjeun ngasupkeun leuwih ti 5 artikel ID, ngan 5 artikel bakal dipintonkeun paling
• Tulisan ieu dianggo pikeun ngahindarkeun kodeu pondok []
• Lamun make shortcode, mangga robah [] jadi []

Pangaruhna kieu ▼

Kumaha akun publik Mimeng sukses tur naha eta jadi populer?Aya alesan di balik eta

Kumaha akun resmi Mimi Meng suksés? Naha éta jadi populér? Aya kakuatan nyetir balik cukang lantaranana! Kusabab Mi Meng mimiti nulis akun publik WeChat dina 2012 Séptémber 9, manéhna meunangkeun 15 pengikut dina ngan dua bulan, langsung ngaleuwihan prestasi loba jalma, nu ngajadikeun loba jalma panasaran.

Opat guru sareng murid Tang Seng ngabahas kontak babaturan WeChat, sareng pidato Sun Wukong ngajantenkeun kuring kaget.

Tang Sanzang sareng opat muridna ngabahas jaringan réréncangan WeChat anu ngadadak kuring terang Perkenalan: Naha anjeun parantos ningali Tang Sanzang, Sun Wukong, Zhu Bajie sareng Sha Wujing ngabahas jaringan babaturan WeChat? Haha, kuring henteu nyangka yén pidato Sun Wukong bakal ngajantenkeun kuring ngadadak terang ...

Analisis karakteristik psikologis bacaan pamaké dina jaman média anyar: lamun ngawasaan 7 ieu, anjeun bakal earn

Analisis karakteristik psikologis maca pamaké dina jaman média anyar: Lamun ngawasaan 7 ieu, anjeun bakal nyieun duit Perkenalan Lamun urang hayang sukses dina ngajalankeun hiji akun publik WeChat, urang kudu diajar sipat manusa, nganalisis psikologi maca pamaké, sarta ngartos kabiasaan maca pamaké.

Upami anjeun henteu nganggo kode pondok dina pangropéa WordPress sareng hoyong nyauran éta di tempat sanés, anjeun tiasa nyauran éta nganggo kode ieu:

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

XNUMX. Tambahkeun tombol redaktur

Upami anjeun kedah ngetik kode pondok sacara manual unggal waktos, karasa teuing pajeulit, naon anu kudu dilakukeun?

Kakuatan WordPress nyaéta ngamungkinkeun urang pikeun nyederhanakeun hal-hal anu rumit ^_^

1) Tambahkeun tombol téks éditor

WordPress gaduh pangropéa TinyMCE anu diwangun sacara standar. Urang tiasa nambihan tombol potong kompas kana antarmuka téks pangropéa TinyMCE.

lengkah 3:Tambahkeun kodeu tombol potong kompas

• Mangga tambahkeun kodeu langsung dina 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
}

Waspada

Upami anjeun parantos nambihan kodeu sanés pikeun pangropéa pikeun ngaluyukeun tombol potong kompas, ngan<script type="text/javascript"> Di handap, tambahkeun kodeu handap ▼

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

Upami teu kitu, éta bakal salah.

2) Tambahkeun tombol visualisasi redaktur

Nalika urang ngédit artikel WordPress, antarmuka standar biasana Visual.

Janten, langkung saé pikeun nambihan tombol dina éditor visual ogé.

• Bari fungsionalitas ieu bisa dilaksanakeun dina kode, éta rada pajeulit pikeun loba newbies.
• Éta troublesome pikeun ahli, sabab perlu pikeun nambahkeun kode JS kana téma, sarta lamun ngarobah téma, anjeun kudu nambahan deui, sarta léngkah anu utamana pajeujeut.

第 4:Pasang sareng aktipkeun plugins

• Chen WeiliangPlugins disarankeun:Tombol Adat Editor Visual

Saatos pamasangan parantos réngsé, dina bar ménu kénca, Tombol Adat Editor Visual sareng ikon gear bakal muncul ▼

第 5:Klik Tambahkeun Anyar

• Jieun tombol custom, naon ngaran.
• Contona: nambahkeun artikel internal 

Anjeun ngan kedah nuturkeun gambar di handap pikeun nyetél ▼

第 6: Pilihan Kandungan Tombol

• Pilih Wrap Selection.

第 7: Sateuacan netepkeun

• Eusian kodeu pondok

lengkah 8:Témbongkeun Dina setélan Editor

• Anjeun tiasa mariksa Éditor Visual atanapi Éditor Téks tombol acara.
• Catet yén upami Éditor Téks dipariksa, anjeun tiasa ngalangkungan "Tambahkeun kodeu tombol potong kompas" di luhur, upami henteu, éta bakal diulang deui.

lengkah 9:Pilihan Ikon Tombol

• Dina menu pilihan turun-handap, pilih ikon dipiguraan.

lengkah 10:Tés

• Tungtungna, tangtosna, terserah anjeun pikeun nguji pangaruhna sorangan ^_^
• Upami léngkah-léngkah di luhur leres, anjeun bakal ningali tombol sapertos anu dipidangkeun di handap dina antarmuka visual editor ▼