Cum se adaugă șabloane personalizate și design la formatele postărilor de blog ale Divi (partea 2 din 3)
Publicat: 2017-05-03Bine ați venit la Ziua 2 din 3 din seria noastră despre Cum să adăugați stiluri personalizate la formatele postărilor de blog ale lui Divi. În mod implicit, Divi vine cu șase formate de postări pe blog: Standard, Video, Audio, Citat, Galerie și Link. În această serie vă învățăm cum să le personalizați cu php și css.
Ieri, v-am prezentat cum să utilizați Desktopserver pentru a crea o instalare locală a WordPress. De asemenea, v-am arătat cum să configurați o temă pentru copii. Ambele sunt o bază excelentă pentru orice proiect la care lucrați și este perfect pentru ceea ce vom face astăzi și mâine.
Astăzi vom edita câteva coduri PHP în fișierul single.php al lui Divi pentru a obține un aspect complet unic pentru formatele dvs. de postare pe blog. Dacă nu sunteți deja familiarizați cu PHP, nu vă faceți griji. Nu este mult și nu este greu de făcut. Vă voi prezenta exact ce cod aveți nevoie și unde să îl puneți.
După ce vom edita fișierul single.php, vom fi în sfârșit pregătiți pentru ultima parte a seriei noastre. Mâine este vorba despre stil și aflarea cât de grozave pot arăta formate de postări pe blogul dvs.
Să începem.
De ce aveți nevoie pentru acest tutorial
Iată ce va trebui să urmați împreună cu tutorialul de astăzi:
- Un editor de cod precum Atom, Sublime, Brackets sau Notepad + + (orice preferi)
- O instalare WordPress locală (cea mai recentă versiune) utilizând DesktopServer (cu excepția cazului în care aveți deja una)
- O temă pentru copii Divi instalată și activă cu trei fișiere adăugate din postarea de ieri (style.css, functions.php și single.php)
Personalizarea șablonului Single.php Divi
Adăugarea unei secțiuni de erou nou
Folosind editorul de text, deschideți fișierul single.php al temei copilului. Asigurați-vă că ați copiat peste tot codul single.php din tema părinte (Divi) cu fișierul dvs.
În partea de sus a fișierului, localizați divul de deschidere cu id-ul „main-content”.
<div id=”main-content”>
Apoi introduceți următoarele chiar sub div-ul de deschidere „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>
Iată ce face acest cod fișierului dvs. single.php.
În primul rând, unei variabile numite „$ featured_image_src” i se atribuie o valoare care „obține” sursa imaginii (care este adresa URL a imaginii) pentru imaginea prezentată atribuită postării.
Următorul cod este o combinație de html și php care deschide noua div cu o clasă personalizată numită „secțiune erou” și un stil în linie pentru a crea două imagini de fundal stivuite una peste alta.
Prima imagine este definită ca un gradient liniar care servește ca o acoperire întunecată pentru imaginea prezentată.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
Iar a doua imagine (imaginea prezentată) este separată printr-o virgulă și, în mod implicit, stive în spatele primei imagini.
url('<?php printf ($featured_image_src[0])?>')
Variabila de notificare definită anterior este utilizată pentru a seta imaginea prezentată ca fundal al „secțiunii erou”.
Deoarece a doua imagine listată se stochează automat în spatele primei imagini, această combinație creează suprapunerea întunecată peste imaginea secțiunii erou.
Acum, ori de câte ori adăugați o imagine prezentată la postarea dvs., o suprapunere întunecată va fi aplicată automat.
Următorul fragment de cod adaugă titlul postării în noua divizie a secțiunii erou.
<h1 class="entry-title"><?php the_title(); ?></h1>
Fragmentul final de cod adaugă conținutul meta post după titlu și în secțiunea erou div.
<?php et_divi_post_meta(); ?>
Iată ce ne va permite această nouă secțiune și stilizare să realizăm în postarea de mâine:
Scoaterea a ceea ce nu aveți nevoie
Deoarece aveți la dispoziție o nouă secțiune pentru imaginea prezentată, titlul postării și meta-ul postării, trebuie să scoateți trei secțiuni de cod care erau utilizate pentru a afișa imaginea prezentată, titlul postării și meta-ul postului în mod implicit.
Va trebui să scoateți eticheta h1 care afișează titlul postării:
<h1 class="entry-title"><?php the_title(); ?></h1>
Va trebui să scoateți codul care afișează meta-ul postării:
<?php et_divi_post_meta(); ?>
Și va trebui să scoateți codul și să afișați miniatura imaginii prezentate:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Iată întregul cod pentru noul fișier single.php. Simțiți-vă liber să îl copiați și să-l lipiți dacă vă blocați.
Notă: aceasta este o casetă de cod derulantă. Va trebui să selectați și să trageți pentru a obține totul.
<?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(); ?>
Asta e pentru azi!
Acum, munca grea este gata și cadrul este pregătit pentru noi, pentru a adăuga stilul nostru la formatele noastre de postare. Mâine voi configura și aranja toate cele 6 formate de postări pe blog folosind șablonul single.php pe care tocmai l-am creat.
Vă rugăm să postați comentariile dvs. mai jos și voi încerca tot posibilul pentru a rezolva orice problemă pe care o aveți. Dacă este posibil, vă rugăm să vă asigurați că aveți o nouă instalare a celei mai recente versiuni de WordPress și Divi pentru a evita eventualele conflicte.
Pana maine!