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

Kumaha carana ngaoptimalkeun tautan internal dina situs wéb WordPress ?

Jieun Shortcode sareng Tulisan Gambar leutik & Tombol Editor

Optimasi tautan internal sok penting pisan dina SEO , sabab struktur tautan anu saé mangpaat pisan pikeun optimasi mesin pencari.

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 maca tulisan blog Chen Weiliang , anjeun tiasa sering mendakan artikel anu dipasang dina format kartu, kalayan gambar mini anu ngandung ringkesan eusi artikel, sapertos:

XNUMX. Tambahkeun shortcode gaya kartu artikel embedded

Léngkah 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

Léngkah 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 ▼

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.

Léngkah 3: Tambahkeun kode tombol pintasan

  • 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
}

Kumaha ngaoptimalkeun tautan internal halaman wéb WordPress? Jieun kodeu pondok sareng tombol éditor nganggo gambar leutik

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.

Léngkah 4: Pasang sareng aktipkeun plugin

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

Plugin Tombol Adat Editor Visual menu kénca handap WordPress

Léngkah 5: Klik Tambahkeun Anyar

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

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

Plugin Tombol Adat Editor Visual: Tambahkeun Artikel Internal

Léngkah 6: Pilihan Eusi Tombol

  • Pilih Wrap Selection.

Léngkah 7: Sateuacan Dipasang

  • Eusian kodeu pondok

Léngkah 8: Témbongkeun Dina Setélan Éditor

  • 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.

Léngkah 9: Pilihan Ikon Tombol

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

Léngkah 10: Nguji

  • 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 ▼ 

Éditor visual WordPress Tombol ikon anu dibingkai

koméntar

您的邮箱地址不会被公开。必填项已用*标注

Ngagulung ka luhur