Come aggiungere modelli e design personalizzati ai formati dei post del blog di Divi (parte 2 di 3)
Pubblicato: 2017-05-03Benvenuto al giorno 2 di 3 della nostra serie su Come aggiungere stili personalizzati ai formati dei post sul blog di Divi. Per impostazione predefinita, Divi viene fornito con sei formati di post del blog: Standard, Video, Audio, Citazione, Galleria e Link. In questa serie ti insegniamo come personalizzarli con php e css.
Ieri ti ho illustrato come utilizzare Desktopserver per creare un'installazione locale di WordPress. Ti ho anche mostrato come impostare un tema figlio. Entrambi sono un'ottima base per qualsiasi progetto su cui stai lavorando ed è perfetto per quello che faremo oggi e domani.
Oggi modificheremo del codice PHP all'interno del file single.php di Divi per ottenere un layout completamente unico per i formati dei post del tuo blog. Se non hai già familiarità con PHP, non preoccuparti. Non è molto e non è difficile da fare. Ti guiderò attraverso esattamente il codice di cui hai bisogno e dove inserirlo.
Dopo aver modificato il nostro file single.php, saremo finalmente pronti per l'ultima parte della nostra serie. Domani è tutto incentrato sullo stile e sulla scoperta di come i formati dei post del blog possono apparire sul tuo blog.
Iniziamo.
Cosa ti serve per questo tutorial
Ecco cosa dovrai seguire insieme al tutorial di oggi:
- Un editor di codice come Atom, Sublime, Brackets o Notepad++ (come preferisci)
- Un'installazione locale di WordPress (ultima versione) utilizzando DesktopServer (a meno che tu non ne abbia già uno)
- Un tema Divi Child installato e attivo con tre file aggiunti dal post di ieri (style.css, functions.php e single.php)
Personalizzazione del modello Single.php di Divi
Aggiunta di una nuova sezione Eroe
Usando il tuo editor di testo, apri il file single.php del tuo tema figlio. Assicurati di aver copiato tutto il codice single.php dal tema principale (Divi) con il tuo file.
Nella parte superiore del file, individua il div di apertura con l'id "main-content".
<div id=”main-content”>
Quindi inserisci quanto segue appena sotto il div di apertura "contenuto principale":
<?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>
Ecco cosa sta facendo questo codice al tuo file single.php.
Innanzitutto, a una variabile chiamata "$featured_image_src" viene assegnato un valore che "ottiene" la sorgente dell'immagine (che è l'URL dell'immagine) per l'immagine in primo piano assegnata al post.
Il codice successivo è una combinazione di html e php che apre il nuovo div con una classe personalizzata chiamata "hero-section" e uno stile in linea per creare due immagini di sfondo impilate l'una sull'altra.
La prima immagine è definita come un gradiente lineare che funge da sovrapposizione scura per l'immagine in primo piano.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
E la seconda immagine (l'immagine in primo piano) è separata da una virgola e, per impostazione predefinita, si accumula dietro la prima immagine.
url('<?php printf ($featured_image_src[0])?>')
La variabile di avviso definita in precedenza viene utilizzata per impostare l'immagine in primo piano come sfondo della "sezione degli eroi".
Poiché la seconda immagine elencata si impila automaticamente dietro la prima immagine, questa combinazione crea la sovrapposizione scura sull'immagine della sezione dell'eroe.
Ora, ogni volta che aggiungi un'immagine in primo piano al tuo post, verrà applicata automaticamente una sovrapposizione scura.
Il prossimo frammento di codice aggiunge il titolo per il tuo post all'interno del tuo nuovo div della sezione eroe.
<h1 class="entry-title"><?php the_title(); ?></h1>
Lo snippet finale di codice aggiunge il meta contenuto del post sotto il titolo e all'interno del div della sezione eroe.
<?php et_divi_post_meta(); ?>
Ecco cosa ci permetterà di realizzare questa nuova sezione e questo nuovo stile nel post di domani:
Tirare fuori ciò che non ti serve
Poiché disponi di una nuova sezione per l'immagine in primo piano, il titolo del post e il meta del post, devi eliminare tre sezioni di codice che venivano utilizzate per visualizzare l'immagine in primo piano, il titolo del post e il meta del post per impostazione predefinita.
Dovrai eliminare il tag h1 che mostra il titolo del post:
<h1 class="entry-title"><?php the_title(); ?></h1>
Dovrai estrarre il codice che visualizza il post meta:
<?php et_divi_post_meta(); ?>
E dovrai estrarre il codice e visualizzare la miniatura dell'immagine in primo piano:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Ecco l'intero codice per il nuovo file single.php. Sentiti libero di copiarlo e incollarlo se rimani bloccato.
Nota: questa è una casella di codice a scorrimento. Dovrai selezionare e trascinare per ottenere tutto.
<?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(); ?>
Per oggi è tutto!
Ora il duro lavoro è finito e il framework è pronto per noi per aggiungere il nostro stile ai nostri formati di post. Domani imposterò e modellerò tutti e 6 i formati di post del blog utilizzando il modello single.php che abbiamo appena creato.
Inserisci i tuoi commenti qui sotto e farò del mio meglio per risolvere eventuali problemi che potresti avere. Se possibile, assicurati di avere una nuova installazione dell'ultima versione di WordPress e Divi per evitare potenziali conflitti.
Fino a domani!