Como adicionar estilo de cartão de artigo no WordPress? Incorporar código de acesso no formulário de cartão de artigo

WordPressComo otimizar os links internos do site?

Crie códigos de acesso com artigos em miniatura e botões do editor

Otimização de links internos do site, emSEOOs links sempre foram muito importantes, e uma boa estrutura de links é muito benéfica para o SEO.

Se o artigo atual estiver relacionado a outros artigos, adicione automaticamente um link à página:

• aumentará muito o número e a profundidade do rastreamento por aranhas de mecanismos de pesquisa,
• ajudar a aumentar o número de registros,
• E o peso das palavras-chave do texto âncora.

Se alguns artigos antigos forem atualizados, você também pode instruir os spiders do mecanismo de pesquisa a rastrear novamente e indexar as atualizações de conteúdo dos artigos antigos adicionando links internos aos novos artigos.

• Uma forma comum de link interno é um link de texto, cuja estrutura é o texto âncora .
• Mas para melhorar a experiência do usuário, podemos otimizar ainda mais os links dos artigos na página interna.

quando você lêChen WeiliangAo blogar, você pode descobrir que incorpora um formulário de cartão de artigo como este, com um artigo em miniatura que contém um resumo do conteúdo do artigo, por exemplo:

Como solicitar um número de celular de Hong Kong?Número de celular virtual de Hong Kong para receber o código de verificação por SMS

eSender Código de desconto do número de celular de Hong Kong: DM6888 Onde posso comprar um número de celular de Hong Kong?Operador virtual de cartão telefônico de Hong Kong recomendado eSender É um serviço de número de celular virtual do Boyuan Information Group. A Boyuan Information abriu filiais em Guangzhou e Hong Kong, na China,...

XNUMX. Adicione um código de acesso de estilo de cartão de artigo incorporado

Etapa 1:Adicionar código PHP

Adicione o seguinte código ao arquivo functions.php do seu tema WP:

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

Se o ícone de hiperlink não aparecer, você precisará substituir o ícone acimaAPFDisto fa fa-link fa-fw, para sui sui-link sui-fw

• Por favor, verifique o seu tema WP, existe uma pasta /img/random/?
• (se não, por favor crie)
• Em seguida, no arquivo aleatório, adicione 20 imagens jpg.

As imagens são nomeadas de 1 a 20:

• 1.jpg
• 2.jpg
• ... (e assim por diante)
• 20.jpg

Etapa 2:Adicionar código CSS

Adicione o seguinte código ao arquivo style.css do seu tema WP:

/*加入内部文章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. Invoque o código curto na forma de um cartão de artigo incorporado (código curto)

Você pode inserir o código de acesso diretamente na interface "Visual" ou "Texto" do editor de artigos 【jiawen ids =postID1,postID2 ...】 chamada de formato.

Por exemplo, se eu quiser exibir 3 artigos com links internos, basta inserir o shortcode:

• 【jiawen ids=526,380,411】
• Se você inserir mais de 5 IDs de artigos, apenas 5 artigos serão exibidos no máximo
• Este artigo é usado para evitar que códigos de acesso sejam escapados []
• Ao usar o shortcode, altere [] para []

O efeito é o seguinte ▼

Como a conta pública de Mimeng foi bem-sucedida e por que é tão popular? Há razões por trás disso

Como a conta oficial de Mimi Meng se tornou bem-sucedida? Por que é tão popular? Há uma força motriz por trás da causa! Desde que Mi Meng começou a escrever contas públicas no WeChat em 2012 de setembro de 9, ela ganhou 15 seguidores em apenas dois meses, superando instantaneamente as conquistas de muitas pessoas, o que deixou muitas pessoas muito curiosas.

Os quatro professores e aprendizes de Tang Seng discutiram os contatos dos amigos do WeChat, e o discurso de Sun Wukong me deixou atordoado

Tang Sanzang e seus quatro discípulos discutiram a rede de amigos do WeChat. O discurso de Sun Wukong me deixou subitamente iluminado. Introdução: Todos nós lemos Journey to the West. Você viu Tang Sanzang, Sun Wukong, Zhu Bajie e Sha Wujing discutindo a rede de amigos do WeChat? Haha, eu não esperava que o discurso de Sun Wukong me deixaria repentinamente iluminado...

Análise das características psicológicas da leitura dos usuários na era das novas mídias: se você dominar esses 7, ganhará

Análise das características psicológicas da leitura do usuário na era da nova mídia: Se você dominar essas 7, ganhará dinheiro. Introdução Se quisermos ter sucesso na execução de uma conta pública do WeChat, precisamos estudar a natureza humana, analisar a psicologia da leitura do usuário e entender o comportamento de leitura do usuário. Somente fazendo isso podemos melhorar melhor nossa...

Se você não estiver usando o shortcode no editor do WordPress e quiser chamá-lo em outro lugar, você pode chamá-lo com o seguinte código:

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

XNUMX. Adicione um botão do editor

Se você precisar inserir manualmente o código de acesso todas as vezes, parecer muito complicado, o que devo fazer?

O poder do WordPress é que ele nos permite simplificar coisas complexas ^_^

1) Adicionar botão de texto do editor

O WordPress tem um editor TinyMCE embutido por padrão. Podemos adicionar botões de atalho à interface de texto do editor TinyMCE.

passo 3:Adicionar código de botão de atalho

• Por favor, adicione o código diretamente no arquivo 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
}

注意 事项

Se você adicionou outro código para o editor personalizar os botões de atalho, basta<script type="text/javascript"> Abaixo, adicione o seguinte código ▼

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

Caso contrário, dará errado.

2) Adicionar botão de visualização do editor

Quando editamos artigos do WordPress, a interface padrão geralmente é Visual.

Então, é melhor adicionar um botão no editor visual também.

• Embora essa funcionalidade possa ser implementada em código, é um pouco complicada para muitos novatos.
• É problemático para os especialistas, porque é necessário adicionar código JS ao tema e, se você alterar o tema, precisará adicioná-lo novamente, e as etapas são particularmente complicadas.

Etapa 4:Instalar e ativar plug-ins

• Chen WeiliangPlugins são recomendados:Botões personalizados do editor visual

Após a conclusão da instalação, na barra de menu à esquerda, um Visual Editor Custom Buttons com um ícone de engrenagem aparecerá ▼

Etapa 5:Clique em Adicionar novo

• Crie um botão personalizado, qualquer nome.
• Por exemplo: adicionar artigos internos 

Você só precisa seguir a imagem abaixo para configurar ▼

Etapa 6: Opção de conteúdo do botão

• Selecione Seleção de envoltório.

Etapa 7: Antes de configurar

• Preencha o código de acesso

passo 8:Configurações de exibição no editor

• Você pode verificar os botões de exibição do Editor Visual ou Editor de Texto.
• Observe que, se o Editor de texto estiver marcado, você pode pular o "Adicionar código do botão de atalho" acima, caso contrário, ele será repetido.

passo 9:Opções de ícone de botão

• No menu suspenso de opções, selecione o ícone Emoldurado.

passo 10:Teste

• No final, claro, cabe a você testar o efeito você mesmo ^_^
• Se as etapas acima estiverem corretas, você verá o botão conforme mostrado abaixo na interface visual do editor ▼