Como adicionar modelos e design personalizados aos formatos de postagem do blog da Divi (parte 2 de 3)
Publicados: 2017-05-03Bem-vindo ao dia 2 de 3 em nossa série sobre como adicionar estilos personalizados aos formatos de postagem do blog do Divi. Por padrão, o Divi vem com seis formatos de postagem de blog: Padrão, Vídeo, Áudio, Citação, Galeria e Link. Nesta série, ensinamos como personalizá-los com php e css.
Ontem, ensinei como usar o Desktopserver para criar uma instalação local do WordPress. Também mostrei como configurar um tema infantil. Ambos são uma excelente base para qualquer projeto em que você esteja trabalhando e são perfeitos para o que faremos hoje e amanhã.
Hoje iremos editar algum código PHP dentro do arquivo single.php do Divi para obter um layout totalmente exclusivo para os formatos de postagem do seu blog. Se você ainda não está familiarizado com PHP, não se preocupe. Não é muito e não é difícil de fazer. Eu o orientarei exatamente sobre o código de que você precisa e onde colocá-lo.
Depois de editarmos nosso arquivo single.php, finalmente estaremos prontos para nossa última parte de nossa série. Amanhã é sobre estilizar e descobrir como os formatos de postagem de blog podem ser legais em seu blog.
Vamos começar.
O que você precisa para este tutorial
Aqui está o que você precisa para acompanhar o tutorial de hoje:
- Um editor de código como Atom, Sublime, Brackets ou Notepad + + (o que você preferir)
- Uma instalação local do WordPress (versão mais recente) usando DesktopServer (a menos que você já tenha um)
- Um Divi Child Theme instalado e ativo com três arquivos adicionados da postagem de ontem (style.css, functions.php e single.php)
Personalização do modelo Single.php da Divi
Adicionando uma Nova Seção Hero
Usando seu editor de texto, abra o arquivo single.php do tema filho. Certifique-se de copiar todo o código single.php do tema pai (Divi) com seu arquivo.
Na parte superior do arquivo, localize a div de abertura com o id “main-content”.
<div id=”main-content”>
Em seguida, digite o seguinte logo abaixo do div de abertura "conteúdo principal":
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>
Aqui está o que este código está fazendo com seu arquivo single.php.
Primeiro, uma variável chamada “$ featured_image_src” é atribuído a um valor que “obtém” a fonte da imagem (que é o url da imagem) para a imagem em destaque atribuída ao post.
O próximo código é uma combinação de html e php que abre o novo div com uma classe personalizada chamada “hero-section” e algum estilo embutido para criar duas imagens de fundo empilhadas uma em cima da outra.
A primeira imagem é definida como um gradiente linear que serve como uma sobreposição escura para a imagem apresentada.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
E a segunda imagem (a imagem em destaque) é separada por uma vírgula e, por padrão, empilha atrás da primeira imagem.
url('<?php printf ($featured_image_src[0])?>')
A variável de aviso definida anteriormente é usada para definir a imagem em destaque como plano de fundo da “seção herói”.
Como a segunda imagem listada é empilhada automaticamente atrás da primeira imagem, essa combinação cria a sobreposição escura sobre a imagem da seção principal.
Agora, sempre que você adicionar uma imagem em destaque à sua postagem, uma sobreposição escura será aplicada automaticamente.
O próximo trecho de código adiciona o título de sua postagem dentro do novo div da seção hero.
<h1 class="entry-title"><?php the_title(); ?></h1>
O trecho final de código adiciona o conteúdo meta post abaixo do título e dentro da div da seção hero.
<?php et_divi_post_meta(); ?>
Aqui está o que esta nova seção e estilo nos permitirá realizar no post de amanhã:
Tirando o que você não precisa
Como você tem uma nova seção para sua imagem em destaque, título de postagem e meta de postagem, você precisa retirar três seções de código que estavam sendo usadas para exibir sua imagem em destaque, título de postagem e meta de postagem por padrão.
Você precisará remover a tag h1 que exibe o título da postagem:
<h1 class="entry-title"><?php the_title(); ?></h1>
Você precisará retirar o código que exibe a meta de postagem:
<?php et_divi_post_meta(); ?>
E você precisará retirar o código e exibir a miniatura da imagem em destaque:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Aqui está o código completo para o novo arquivo single.php. Sinta-se à vontade para copiar e colar se tiver algum problema.
Nota: esta é uma caixa de código de rolagem. Você precisará selecionar e arrastar para obter tudo.
<?php
get_header();
$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );
$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
?>
<div id="main-content">
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php while ( have_posts() ) : the_post(); ?>
<?php if (et_get_option('divi_integration_single_top') <> '' && et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
<div class="et_post_meta_wrapper">
<!-- h1 was here -->
<?php
if ( ! post_password_required() ) :
//et_divi_post_meta();
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_featured_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];
$post_format = et_pb_post_format();
if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) {
printf(
'<div class="et_main_video_container">
%1$s
</div>',
$first_video
);
} else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) {
} else if ( 'gallery' === $post_format ) {
et_pb_gallery_images();
}
?>
<?php
$text_color_class = et_divi_get_post_text_color();
$inline_style = et_divi_get_post_bg_inline_style();
switch ( $post_format ) {
case 'audio' :
printf(
'<div class="et_audio_content%1$s"%2$s>
%3$s
</div>',
esc_attr( $text_color_class ),
$inline_style,
et_pb_get_audio_player()
);
break;
case 'quote' :
printf(
'<div class="et_quote_content%2$s"%3$s>
%1$s
</div> <!-- .et_quote_content -->',
et_get_blockquote_in_content(),
esc_attr( $text_color_class ),
$inline_style
);
break;
case 'link' :
printf(
'<div class="et_link_content%3$s"%4$s>
<a href="%1$s" class="et_link_main_url">%2$s</a>
</div> <!-- .et_link_content -->',
esc_url( et_get_link_url() ),
esc_html( et_get_link_url() ),
esc_attr( $text_color_class ),
$inline_style
);
break;
}
endif;
?>
</div> <!-- .et_post_meta_wrapper -->
<?php } ?>
<div class="entry-content">
<?php
do_action( 'et_before_content' );
the_content();
wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
?>
</div> <!-- .entry-content -->
<div class="et_post_meta_wrapper">
<?php
if ( et_get_option('divi_468_enable') == 'on' ){
echo '<div class="et-single-post-ad">';
if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') );
else { ?>
<a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a>
<?php }
echo '</div> <!-- .et-single-post-ad -->';
}
?>
<?php if (et_get_option('divi_integration_single_bottom') <> '' && et_get_option('divi_integrate_singlebottom_enable') == 'on') echo(et_get_option('divi_integration_single_bottom')); ?>
<?php
if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) {
comments_template( '', true );
}
?>
</div> <!-- .et_post_meta_wrapper -->
</article> <!-- .et_pb_post -->
<?php endwhile; ?>
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
Por hoje é isso!
Agora o trabalho duro está feito e a estrutura está pronta para adicionarmos nosso estilo aos nossos formatos de postagem. Amanhã estarei configurando e estilizando todos os 6 formatos de postagem de blog usando o modelo single.php que acabamos de criar.
Por favor, poste seus comentários abaixo e eu tentarei o meu melhor para resolver quaisquer problemas que você possa ter. Se possível, certifique-se de ter uma nova instalação da versão mais recente do WordPress e Divi para evitar quaisquer conflitos em potencial.
Até amanhã!