Comment ajouter des modèles et un design personnalisés aux formats de publication de blog de Divi (partie 2 sur 3)
Publié: 2017-05-03Bienvenue au jour 2 sur 3 de notre série sur Comment ajouter des styles personnalisés aux formats de publication de blog de Divi. Par défaut, Divi est livré avec six formats de publication de blog : Standard, Vidéo, Audio, Citation, Galerie et Lien. Dans cette série, nous vous apprenons à les personnaliser avec php et css.
Hier, je vous ai expliqué comment utiliser Desktopserver pour créer une installation locale de WordPress. Je vous ai également montré comment mettre en place un thème enfant. Ces deux éléments constituent une excellente base pour tout projet sur lequel vous travaillez et sont parfaits pour ce que nous allons faire aujourd'hui et demain.
Aujourd'hui, nous allons éditer du code PHP dans le fichier single.php de Divi afin d'obtenir une mise en page complètement unique pour les formats de vos articles de blog. Si vous n'êtes pas déjà familiarisé avec PHP, pas de soucis. Ce n'est pas beaucoup et ce n'est pas difficile à faire. Je vais vous expliquer exactement quel code vous avez besoin et où le mettre.
Après avoir édité notre fichier single.php, nous serons enfin prêts pour notre dernière partie de notre série. Demain, il s'agit de styliser et de découvrir à quel point les formats d'articles de blog peuvent apparaître sur votre blog.
Commençons.
Ce dont vous avez besoin pour ce tutoriel
Voici ce que vous devrez suivre avec le tutoriel d'aujourd'hui :
- Un éditeur de code tel que Atom, Sublime, Brackets ou Notepad++ (ce que vous préférez)
- Une installation WordPress locale (dernière version) à l'aide de DesktopServer (sauf si vous en avez déjà un)
- Un thème enfant Divi installé et actif avec trois fichiers ajoutés à partir du message d'hier (style.css, functions.php et single.php)
Personnalisation du modèle Single.php de Divi
Ajout d'une nouvelle section de héros
À l'aide de votre éditeur de texte, ouvrez le fichier single.php de votre thème enfant. Assurez-vous d'avoir copié tout le code single.php du thème parent (Divi) avec votre fichier.
En haut du fichier, localisez le div d'ouverture avec l'identifiant "main-content".
<div id=”main-content”>
Ensuite, entrez ce qui suit juste en dessous du div d'ouverture « contenu 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>
Voici ce que ce code fait à votre fichier single.php.
Tout d'abord, une variable appelée "$featured_image_src" se voit attribuer une valeur qui "obtient" la source de l'image (qui est l'URL de l'image) pour l'image sélectionnée attribuée à la publication.
Le code suivant est une combinaison de html et de php qui ouvre la nouvelle div avec une classe personnalisée appelée "hero-section" et un style en ligne pour créer deux images d'arrière-plan empilées l'une sur l'autre.
La première image est définie comme un dégradé linéaire qui sert de superposition sombre pour l'image sélectionnée.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
Et la deuxième image (l'image vedette) est séparée par une virgule et, par défaut, s'empile derrière la première image.
url('<?php printf ($featured_image_src[0])?>')
Remarquez que la variable définie précédemment est utilisée pour définir l'image en vedette comme arrière-plan de la "section héros".
Étant donné que la deuxième image répertoriée s'empile automatiquement derrière la première image, cette combinaison crée la superposition sombre sur l'image de la section héros.
Désormais, chaque fois que vous ajoutez une image en vedette à votre publication, une superposition sombre sera automatiquement appliquée.
Le prochain extrait de code ajoute le titre de votre message à l'intérieur de votre nouvelle div de section héros.
<h1 class="entry-title"><?php the_title(); ?></h1>
L'extrait de code final ajoute le méta-contenu de la publication sous le titre et dans la div de la section héros.
<?php et_divi_post_meta(); ?>
Voici ce que cette nouvelle section et ce nouveau style nous permettront d'accomplir dans le post de demain :
Retirer ce dont vous n'avez pas besoin
Étant donné que vous avez mis en place une nouvelle section pour votre image vedette, votre titre de publication et votre méta de publication, vous devez supprimer trois sections de code qui étaient utilisées pour afficher votre image vedette, votre titre de publication et votre méta de publication par défaut.
Vous devrez retirer la balise h1 qui affiche le titre du message :
<h1 class="entry-title"><?php the_title(); ?></h1>
Vous devrez retirer le code qui affiche la méta de la publication :
<?php et_divi_post_meta(); ?>
Et vous devrez retirer le code et afficher la vignette de l'image en vedette :
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Voici le code complet du nouveau fichier single.php. N'hésitez pas à le copier-coller si vous êtes bloqué.
Remarque : il s'agit d'une boîte de code déroulante. Vous devrez sélectionner et faire glisser pour tout obtenir.
<?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(); ?>
C'est tout pour aujourd'hui!
Maintenant, le travail est terminé et le cadre est prêt pour que nous ajoutions notre style à nos formats de publication. Demain, je vais configurer et styliser les 6 formats d'articles de blog à l'aide du modèle single.php que nous venons de créer.
Veuillez poster vos commentaires ci-dessous et je ferai de mon mieux pour résoudre tous les problèmes que vous pourriez avoir. Si possible, assurez-vous d'avoir une nouvelle installation de la dernière version de WordPress et Divi pour éviter tout conflit potentiel.
Jusqu'à demain!