Como mostrar postagens aleatórias no WordPress

Outra maneira de exibir postagens aleatórias no WordPress envolve o uso de código personalizado. Portanto, o método explicado nesta seção é voltado para os usuários mais experientes do WordPress. Além do nível de dificuldade, esse método tem uma vantagem distinta: você pode codificar a seção de postagens aleatórias para atender exatamente às suas necessidades. Mas tenha em mente que, ao criar o código, você deve revisá-lo cuidadosamente antes de adicioná-lo ao seu site. Qualquer erro de codificação pode danificar seu site.

Neste artigo, incluímos um exemplo de código que você pode usar para criar uma seção de postagens aleatórias. O código precisa ser adicionado ao arquivo functions.php do seu tema ou em um plugin específico do site. Mostraremos o método anterior de adição abaixo. Como requer o uso de FTP, sugerimos que você dê uma olhada. Também sugerimos fazer backup de seus arquivos WordPress, apenas para garantir. Feito isso, vamos prosseguir para as etapas.

Primeiro, conecte-se ao seu servidor usando suas credenciais de FTP e navegue até o diretório raiz do WordPress, frequentemente chamado public_html.

Então, navegue até o diretório / wp-content / themes Y clique na pasta do seu tema Para abri-lo. Localize o arquivo functions.php dentro, clique com o botão direito nele Y Selecione os Ver edição opção.

Abra o arquivo usando seu editor de texto preferido e role até o final. Insira o código a seguir no final do arquivo.

function qode_random_posts() {
global $post;
$html="";
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'posts_per_page' => 2,
);
if ( isset( $post->ID ) && is_singular( 'post' ) ) {
$args['post__not_in'] = array( $post->ID );
}
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$html .= '<ul class ="post-holder">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$html .= '<li class="post"><a href="' . get_permalink() . '">';
if ( has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
$html .= '<img class="featured-image" src="' . esc_url( $image[0] ) . '">';
}
$html .= get_the_title() . '</a>';
$long_excerpt = get_the_excerpt();
if ( ! empty( $long_excerpt ) ) {
$short_excerpt = substr( get_the_excerpt(), 0, 80 );
$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );
$excerpt .= '[&hellip;]';
$html .= '<p>' . wp_kses_post( $excerpt ) . '</p>';
}
$html .= '</li>';
}
$html .= '</ul>';
wp_reset_postdata();
} else {
$html .= '<div class="no-random-posts">' . esc_html__( 'No posts were found.', 'textdomain' ) . '</div>';
}
return $html;
}
add_shortcode( 'random-posts', 'qode_random_posts' );

Antes de continuar, vamos mergulhar no código que incluímos acima. Para facilitar o acompanhamento, simplificamos um pouco o código e o dividimos em duas partes.

Primeiro, o código é equivalente à seguinte versão abreviada.

function qode_random_posts() {
global $post;
$html="";
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'posts_per_page' => 2,
);
if ( isset( $post->ID ) && is_singular( 'post' ) ) {
$args['post__not_in'] = array( $post->ID );
}
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$html .= '<ul class ="post-holder">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
// Some code here
}
$html .= '</ul>';
wp_reset_postdata();
} else {
$html .= '<div class="no-random-posts">' . esc_html__( 'No posts were found.', 'textdomain' ) . '</div>';
}
return $html;
}
add_shortcode( 'random-posts', 'qode_random_posts' );

Este código representa um shortcode chamado postagens aleatórias. Ele executa certas operações usando as informações que correspondem às publicações que correspondem a uma determinada consulta. E a consulta é bastante simples, pois seleciona duas postagens aleatoriamente da lista de todas as postagens publicadas.

Além disso, se este código de acesso for exibido em uma postagem, essa mesma postagem não pode ser escolhida para evitar a exibição de informações duplicadas. No entanto, essa restrição não se aplica se o código de acesso for usado em outros tipos de páginas. E caso não haja posts publicados, uma mensagem informando nenhuma postagem encontrada será mostrado.

Em segundo lugar, para garantir que todas as postagens publicadas sejam cobertas, usamos o loop WordPress. A parte interna do código, que você pode ver abaixo, é responsável por exibir os dados relevantes pertencentes às duas publicações selecionadas.

$html .= '<li class="post"><a href="' . get_permalink() . '">';
if ( has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
$html .= '<img class="featured-image" src="' . esc_url( $image[0] ) . '">';
}
$html .= get_the_title() . '</a>';
$long_excerpt = get_the_excerpt();
if ( ! empty( $long_excerpt ) ) {
$short_excerpt = substr( get_the_excerpt(), 0, 80 );
$excerpt = substr( $short_excerpt, 0, strrpos( $short_excerpt, ' ' ) );
$excerpt .= '[&hellip;]';
$html .= '<p>' . wp_kses_post( $excerpt ) . '</p>';
}
$html .= '</li>';

Você pode usar este código de acesso em qualquer lugar em suas páginas ou postagens, ou pode adicioná-lo a qualquer área de widget de sua escolha. A seguir, explicaremos como você pode incluir esse código de acesso na barra lateral do seu tema. Se você não está familiarizado com os códigos de acesso e como usá-los, sugerimos que leia nosso artigo sobre códigos de acesso personalizados antes de continuar.

Para inserir nosso código de exemplo dentro da barra lateral, vá para Aparência> Widgets. então insira um widget de texto dentro da área de widget do tema que você está usando atualmente. Lembre-se de que o nome da área do widget pode diferir de tema para tema. No nosso caso, essa área de widget é chamada Barra lateral principal. Inserir [random-posts] para chamar o shortcode. E, se desejar, você pode adicionar um título ao widget de texto que contém o código curto.

Agora que você tem uma compreensão melhor do código curto, pode considerar a criação de código CSS adicional. Na maioria dos casos, CSS adicional será necessário para estilizar o conteúdo, já que seu tema atual poderia estilizá-lo apenas parcialmente ou ter um estilo de navegador padrão. Como mencionamos anteriormente, você mesmo deve criar esse código CSS, pois isso deve ser feito caso a caso. Após montar o seu, insira-o em Aparência> Personalizar> CSS Adicional.

Abaixo você pode ver o CSS que criamos para exibir postagens aleatórias no tema Lekker WordPress.

ul.post-holder .post {
margin-bottom: 30px !important;
border-bottom: 2px dotted black;
}
ul.post-holder .post a{
color: red !important;
}
ul.post-holder .post a:hover{
color: #2e629c !important;
}
ul.post-holder .post img {
margin-bottom: 10px;
}

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: